fix

src/app/games/city.ts

@@ -49,10 +49,12 @@ export const game: Game = {
   initialActionnables,
   getScenePrompt: (situation?: string) => [
     `isometrical bird view of 3D rendered city`,
-    situation || initialSituation,
     `game screenshot`,
+    `strategy game`,
+    `simulator`,
     `isometric`,
     `unreal engine`,
     `high res`,
+    situation || initialSituation,
   ]
 }

src/app/games/doom.ts

@@ -22,8 +22,11 @@ export const game: Game = {
   initialActionnables,
   getScenePrompt: (situation?: string) => [
     `Screenshot from Doom`,
+    `first person`,
+    `shooter game`,
+    `science fiction`,
+    `unreal engine`,
     situation || initialSituation,
-    `first person, beautiful, unreal engine`
   ]
 }
 

src/app/games/dungeon.ts

@@ -1,5 +1,5 @@
 import { amatic } from "@/lib/fonts"
-import { Game, Scene } from "./types"
+import { Game } from "./types"
 
 const actions = [
   "not moving",
@@ -52,10 +52,11 @@ export const game: Game = {
   initialSituation,
   initialActionnables,
   getScenePrompt: (situation?: string) => [
-    `screenshot from an adventure videogame`,
+    `screenshot from adventure videogame`,
     // `first-person footage`,
-    situation || initialSituation,
-    `medieval`,
+    `medieval dungeon`,
+    `adventure`,
     `unreal engine`,
+    situation || initialSituation,
   ]
 }

src/app/games/enchanters.ts

@@ -0,0 +1,32 @@
+import { macondo } from "@/lib/fonts"
+import { Game } from "./types"
+
+const initialSituation = [
+  `looking at a beautiful medieval castle on a lake, with a metallic gate, during golden house, surrounded by mountain, with a flying dragon visible afar`,
+].join(", ")
+
+const initialActionnables = [
+  "trees",
+  "dragon",
+  "castle",
+  "gate",
+  "stone wall",
+  "lake",
+  "roof"
+]
+
+export const game: Game = {
+  title: "Enchanters",
+  type: "enchanters",
+  className: macondo.className,
+  initialSituation,
+  initialActionnables,
+  getScenePrompt: (situation?: string) => [
+    `Screenshot from a videogame`,
+    `unreal engine`,
+    `magical wizard world`, 
+    `first person`,
+    situation || initialSituation,
+  ]
+}
+

src/app/games/index.ts

@@ -4,9 +4,11 @@ import { game as pirates } from "./pirates"
 import { game as city } from "./city"
 import { game as dungeon } from "./dungeon"
 import { game as doom } from "./doom"
+import { game as vernian } from "./vernian"
+import { game as enchanters } from "./enchanters"
 
-export const games = { pirates, city, dungeon, doom }
+export const games = { pirates, city, dungeon, doom, vernian, enchanters}
 
-export const defaultGame: GameType = "pirates"
+export const defaultGame: GameType = "enchanters"
 
 export const getGame = (type?: GameType) => games[type || defaultGame] || games[defaultGame]

src/app/games/pirates.ts

@@ -62,7 +62,10 @@ export const game: Game = {
     // this prompt is beautiful:
     // screenshot from an adventure videogame, inside the hold of a pirate ship, with a pirate chest in the center, at sunset, beautiful, award winning, unreal engine, intricate details
       `screenshot from an adventure videogame`,
-      situation || initialSituation,
+      `pirate themed`,
       `unreal engine`,
+      `pixar style`,
+      `goofy and comedical`,
+      situation || initialSituation,
     ],
 }

src/app/games/types.ts

@@ -1,6 +1,5 @@
-import { FontName } from "@/lib/fonts"
 
-export type GameType = 'pirates' | 'city' | 'dungeon' | 'doom'
+export type GameType = "pirates" | "city" | "dungeon" | "doom" | "vernian" | "enchanters"
 
 export interface Scene {
   actionnables: string[]

src/app/games/vernian.ts

@@ -0,0 +1,35 @@
+import { imfell } from "@/lib/fonts"
+import { Game } from "./types"
+
+const initialSituation = [
+  `inside a secret workshop inspired by Jules Verne`,
+  `with mysterious machines, keys, boxes, blueprints, gears`
+].join(", ")
+
+const initialActionnables = [
+  "key",
+  "box",
+  "door",
+  "table",
+  "blueprint",
+  "gear",
+  "machine"
+]
+
+export const game: Game = {
+  title: "Vernian",
+  type: "vernian",
+  className: imfell.className,
+  initialSituation,
+  initialActionnables,
+  getScenePrompt: (situation?: string) => [
+    `Screenshot from a videogame`,
+    `steam punk`,
+    `jules verne architecture and design`,
+    `mysterious machines and mechanisms`,
+    `first person`,
+    `unreal engine`,
+    situation || initialSituation,
+  ]
+}
+

src/app/main.tsx

@@ -58,16 +58,18 @@ export default function Main() {
       console.log("Rendering a scene for " + game.type)
 
       // console.log(`rendering scene..`)
-      const newRendered = await render(
+      const newRendered = await render({
+        engine,
+        
         // SCENE PROMPT
-        game.getScenePrompt(nextSituation).join(", "),
+        prompt: game.getScenePrompt(nextSituation).join(", "),
 
         // ACTIONNABLES
-        (Array.isArray(nextActionnables) && nextActionnables.length
+        actionnables: (Array.isArray(nextActionnables) && nextActionnables.length
           ? nextActionnables
           : game.initialActionnables
         ).slice(0, 6) // too many can slow us down it seems
-      )
+      })
 
       // detect if type game type changed while we were busy
       if (game?.type !== gameRef?.current) {
@@ -153,8 +155,11 @@ export default function Main() {
     router.replace(`${pathname}${query}`, { })
     
     // workaround.. but it is strange that router.replace doesn't work..
-    let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()
-    window.history.pushState({path: newurl}, '', newurl)
+    //let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()
+    //window.history.pushState({path: newurl}, '', newurl)
+
+    // actually we don't handle partial reload very well, so let's reload the whole page
+    window.location = `${window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()}` as any
   }
 
 
@@ -170,16 +175,19 @@ export default function Main() {
     router.replace(`${pathname}${query}`, { })
     
     // workaround.. but it is strange that router.replace doesn't work..
-    let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()
-    window.history.pushState({path: newurl}, '', newurl)
+    // let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()
+    // window.history.pushState({path: newurl}, '', newurl)
+
+    // actually we don't handle partial reload very well, so let's reload the whole page
+    window.location = `${window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + search.toString()}` as any
   }
 
   return (
     <div
-      className="flex flex-col w-full"
+      className="flex flex-col w-full max-w-5xl"
     >
       <div className="flex flex-row w-full justify-between items-center px-2 py-2 border-b-1 border-gray-50 bg-gray-800">
-      <div className="flex flex-row items-center space-x-3 font-mono">
+        <div className="flex flex-row items-center space-x-3 font-mono">
           <label className="flex text-sm">Select a story:</label>
           <Select
             defaultValue={gameRef.current}
@@ -210,6 +218,7 @@ export default function Main() {
           </Select>
         </div>
       </div>
+
       <div className={[
         "flex flex-col w-full pt-4 space-y-3 px-2",
         getGame(gameRef.current).className // apply the game theme
@@ -223,17 +232,17 @@ export default function Main() {
             {i < (clickables.length - 1) ? <div>,</div> : null}
           </div>)}
         </div>
-        <p className="text-xl font-normal">You are looking at: <span className="font-bold">{hoveredActionnable || "nothing"}</span></p>
+        <p className="text-xl">You are looking at: <span className="font-bold">{hoveredActionnable || "nothing"}</span></p>
+        <Renderer
+          rendered={rendered}
+          onUserAction={handleUserAction}
+          onUserHover={setHoveredActionnable}
+          isLoading={isLoading}
+          game={game}
+          engine={engine}
+        />
+        <p className="text-xl">{dialogue}</p>
       </div>
-      <Renderer
-        rendered={rendered}
-        onUserAction={handleUserAction}
-        onUserHover={setHoveredActionnable}
-        isLoading={isLoading}
-        game={game}
-        engine={engine}
-      />
-      <p className="text-xl">{dialogue}</p>
     </div>
   )
 }

src/app/render.ts

@@ -3,6 +3,7 @@
 import Gorgon from "@gorgonjs/gorgon"
 
 import { RenderedScene } from "./types"
+import { Engine, EngineType } from "./engines"
 
 // note: there is no / at the end in the variable
 // so we have to add it ourselves if needed
@@ -11,8 +12,29 @@ const apiUrl = process.env.RENDERING_ENGINE_API
 
 const cacheDurationInSec = 30 * 60 // 30 minutes
 
-export async function render(prompt: string, actionnables: string[] = []) {
-  return await Gorgon.get(`render/${JSON.stringify(prompt, actionnables)}`, async () => {
+export async function render({
+  prompt,
+  actionnables = [],
+  engine,
+}: {
+  prompt: string
+  actionnables: string[]
+  engine: Engine
+}) {
+  if (!prompt) {
+    console.error(`cannot call the rendering API without a prompt, aborting..`)
+    throw new Error(`cannot call the rendering API without a prompt, aborting..`)
+  }
+  if (!Array.isArray(actionnables) || !actionnables.length) {
+    console.error(`cannot call the rendering API without actionnables, aborting..`)
+    throw new Error(`cannot call the rendering API without actionnables, aborting..`)
+  }
+
+  const nbFrames = engine.type === "video" ? 8 : 1
+
+  const cacheKey = `render/${JSON.stringify({ prompt, actionnables, nbFrames, type: engine.type })}`
+
+  return await Gorgon.get(cacheKey, async () => {
     let defaulResult: RenderedScene = {
       assetUrl: "",
       maskBase64: "",
@@ -32,7 +54,7 @@ export async function render(prompt: string, actionnables: string[] = []) {
         body: JSON.stringify({
           prompt,
           // nbFrames: 8 and nbSteps: 15 --> ~10 sec generation
-          nbFrames: 1, // when nbFrames is 1, we will only generate static images
+          nbFrames, // when nbFrames is 1, we will only generate static images
           nbSteps: 20,
           actionnables,
           segmentation: "firstframe", // one day we will remove this param, to make it automatic
@@ -57,6 +79,7 @@ export async function render(prompt: string, actionnables: string[] = []) {
       return response
     } catch (err) {
       console.error(err)
+      Gorgon.clear(cacheKey)
       return defaulResult
     }
   }, cacheDurationInSec * 1000)

src/components/business/renderer.tsx

@@ -213,12 +213,12 @@ export const Renderer = ({
 
   return (
     <div className={[
-      "w-full py-8 px-2",
+      "w-full py-8",
       // isLoading ? "animate-pulse" : ""
     ].join(" ")
     }>
       <div className="relative w-[1024px] h-[512px] border-2 border-gray-50 rounded-xl overflow-hidden">
-        {assetUrl === null ?
+        {!assetUrl ?
           null
         : engine.type === "video"
           ? <video

src/lib/fonts.ts

@@ -1,4 +1,4 @@
-import { Inter, Edu_SA_Beginner, Orbitron, Amatic_SC } from "next/font/google"
+import { Inter, Edu_SA_Beginner, Orbitron, Amatic_SC, Macondo_Swash_Caps, IM_Fell_English_SC } from "next/font/google"
 import localFont from "next/font/local"
 
 export const inter = Inter({
@@ -22,6 +22,18 @@ export const amatic = Amatic_SC({
   variable: "--font-amatic"
 })
 
+export const macondo = Macondo_Swash_Caps({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-macondo"
+})
+
+export const imfell = IM_Fell_English_SC({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-imfell"
+})
+
 export const lugrasimo = localFont({
   src: "../fonts/Lugrasimo-Regular.woff2",
   variable: "--font-lugrasimo"
@@ -39,6 +51,7 @@ export const fontList = [
   edu,
   orbitron,
   amatic,
+  macondo,
   lugrasimo,
 ]
 
@@ -46,4 +59,4 @@ export const classNames = fontList.map(font => font.className)
 
 export const className = classNames.join(" ")
 
-export type FontName = "font-inter" | "font-sans" | "font-edu" | "font-orbitron" | "font-amatic" | "font-lugrasimo"
+export type FontName = "font-inter" | "font-sans" | "font-edu" | "font-orbitron" | "font-amatic" | "font-macondo" | "font-lugrasimo"