new UI

components.json

@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "app/globals.css",
-    "baseColor": "zinc",
+    "baseColor": "stone",
     "cssVariables": false
   },
   "aliases": {

package-lock.json

@@ -61,6 +61,7 @@
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "18.2.0",
         "react-photo-sphere-viewer": "^3.3.5-psv5.1.4",
+        "sbd": "^1.0.19",
         "styled-components": "^6.0.7",
         "tailwind-merge": "^1.13.2",
         "tailwindcss": "3.3.3",
@@ -73,7 +74,8 @@
         "zustand": "^4.3.9"
       },
       "devDependencies": {
-        "@types/qs": "^6.9.7"
+        "@types/qs": "^6.9.7",
+        "@types/sbd": "^1.0.3"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -3815,6 +3817,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/sbd": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/sbd/-/sbd-1.0.3.tgz",
+      "integrity": "sha512-4rOX5JsLAEFrzOB0zvV2fG0lqwyNoo/TTYuQna/rjKi+ZHsN7s3BLfx70gsqGD6DM0j6Ha0QfneU/KspzMMeUg==",
+      "dev": true
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -4912,6 +4920,14 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/default-browser": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
@@ -5033,6 +5049,57 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.470",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.470.tgz",
@@ -5055,6 +5122,17 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.1.tgz",
@@ -6074,6 +6152,24 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
     "node_modules/human-signals": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
@@ -6330,6 +6426,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -7072,6 +7176,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -7832,6 +7941,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sanitize-html": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.11.0.tgz",
+      "integrity": "sha512-BG68EDHRaGKqlsNjJ2xUB7gpInPA8gVx/mvjO743hZaeMCZ2DwzW7xvsqZ+KNU4QKwj86HJ3uu2liISf2qBBUA==",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
     "node_modules/sass": {
       "version": "1.64.1",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.64.1.tgz",
@@ -7848,6 +7970,14 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/sbd": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/sbd/-/sbd-1.0.19.tgz",
+      "integrity": "sha512-b5RyZMGSrFuIB4AHdbv12uYHS8YGEJ36gtuvG3RflbJGY+T0dXmAL0E4vZjQqT2RsX0v+ZwVqhV2zsGr5aFK9w==",
+      "dependencies": {
+        "sanitize-html": "^2.3.2"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",

package.json

@@ -62,6 +62,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
     "react-photo-sphere-viewer": "^3.3.5-psv5.1.4",
+    "sbd": "^1.0.19",
     "styled-components": "^6.0.7",
     "tailwind-merge": "^1.13.2",
     "tailwindcss": "3.3.3",
@@ -74,6 +75,7 @@
     "zustand": "^4.3.9"
   },
   "devDependencies": {
-    "@types/qs": "^6.9.7"
+    "@types/qs": "^6.9.7",
+    "@types/sbd": "^1.0.3"
   }
 }

src/app/{engines.ts → engine/engines.ts}

@@ -71,6 +71,6 @@ export const engines: Record<string, Engine> = {
     }
 }
 
-export const defaultEngine: EngineType = "spherical_image"
+export const defaultEngine: EngineType = "cartesian_image"
 
 export const getEngine = (type?: EngineType): Engine => engines[type || defaultEngine] || engines[defaultEngine]

src/app/{render.ts → engine/render.ts}

@@ -1,8 +1,8 @@
 "use server"
 
-import Gorgon from "@gorgonjs/gorgon"
 
-import { RenderedScene } from "./types"
+
+import { RenderedScene } from "@/types"
 import { Engine, EngineType } from "./engines"
 
 // note: there is no / at the end in the variable
@@ -76,7 +76,7 @@ export async function newRender({
           actionnables,
           segmentation: "firstframe", // one day we will remove this param, to make it automatic
           width: isForVideo ? 576 : 1024,
-          height: isForVideo ? 320 : 512,
+          height: isForVideo ? 320 : 768,
         }),
         cache: 'no-store',
       // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)

src/app/games/arizona.ts

@@ -1,6 +1,6 @@
 import { imfell } from "@/lib/fonts"
 import { Game } from "./types"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "../../types"
 
 const initialSituation = [
   `looking at an abandonned mining town street`,

src/app/games/city.ts

@@ -1,6 +1,6 @@
 import { edu } from "@/lib/fonts"
 import { Game } from "./types"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "../../types"
 
 const actions = [
   "busy pedestrians",

src/app/games/doom.ts

@@ -1,6 +1,6 @@
 import { orbitron } from "@/lib/fonts"
 import { Game } from "./types"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "../../types"
 
 const initialSituation = [
   `looking at building on Mars, with multiple moons in the sky`,

src/app/games/dungeon.ts

@@ -1,6 +1,6 @@
 import { amatic } from "@/lib/fonts"
 import { Game } from "./types"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "../../types"
 
 const actions = [
   "not moving",

src/app/games/enchanters.ts

@@ -1,6 +1,6 @@
 import { macondo } from "@/lib/fonts"
 import { Game } from "./types"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "../../types"
 
 const initialSituation = [
   `looking at a beautiful medieval castle on a lake, with a metallic gate, during golden hour, surrounded by mountain, with a flying dragon visible afar`,

src/app/games/flamenco.ts

@@ -1,6 +1,6 @@
 import { macondo } from "@/lib/fonts"
 import { Game } from "./types"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "../../types"
 
 const initialSituation = [
   `beautiful view of an art deco building in new york`,

src/app/games/nexus.ts

@@ -1,6 +1,6 @@
 import { macondo } from "@/lib/fonts"
 import { Game } from "./types"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "../../types"
 
 const initialSituation = [
   `first-person view of a futuristic street`,

src/app/games/pharaoh.ts

@@ -1,6 +1,6 @@
 import { macondo } from "@/lib/fonts"
 import { Game } from "./types"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "../../types"
 
 const initialSituation = [
   `looking at a beautiful pyramid, ancient egypt, during golden hour, surrounded by sand dunes, near the Nile`,

src/app/games/pirates.ts

@@ -1,6 +1,6 @@
 import { lugrasimo } from "@/lib/fonts"
 import { Game } from "./types"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "../../types"
 
 const actions = [
   "idling",

src/app/games/tensor.ts

@@ -1,6 +1,6 @@
 import { macondo } from "@/lib/fonts"
 import { Game } from "./types"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "../../types"
 
 const initialSituation = [
   `in Martin Place, Sydney`,

src/app/games/types.ts

@@ -1,5 +1,5 @@
-import { EngineType } from "../engines"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "@/types"
+import { EngineType } from "@/app/engine/engines"
 
 export type GameType =
   | "pirates"

src/app/games/vernian.ts

@@ -1,6 +1,6 @@
 import { imfell } from "@/lib/fonts"
 import { Game } from "./types"
-import { InventoryItem } from "../types"
+import { InventoryItem } from "../../types"
 
 const initialSituation = [
   `inside a secret workshop inspired by Jules Verne`,

src/app/interface/dialogue/index.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils"
+import { ReactNode } from "react"
+
+export function Dialogue({ children, className = "", isLoading }: {
+  children: ReactNode
+  className?: string
+  isLoading: boolean
+ }) {
+  return (
+    <div
+      className={cn(
+        `fixed left-6 max-w-[60%]`,
+        `transition-all duration-300`,
+        `text-xl rounded-2xl backdrop-blur-xl bg-stone-600/40 p-4`,
+        className
+      )}
+      style={{
+        textShadow: "1px 0px 2px #000000ab"
+      }}>{
+      isLoading
+      ? <p>⌛ Generating story, please wait..</p>
+      : children
+    }</div>
+  )
+}

src/app/interface/help/index.tsx

@@ -0,0 +1,23 @@
+export function Help({
+  clickables,
+  isLoading,
+}: {
+  clickables: string[]
+  isLoading: boolean
+}) {
+  return (
+    <div className="flex flex-row">
+      <div className="text-xl mr-2">
+        {isLoading
+          ? <span>⌛ Generating areas for clicks and drag & drop, please wait..</span>
+          : <span>💡 Try to click on:</span>
+        }
+      </div>
+      {clickables.map((clickable, i) => 
+      <div key={i} className="flex flex-row text-xl mr-2">
+        <div className="">{clickable}</div>
+        {i < (clickables.length - 1) ? <div>,</div> : null}
+      </div>)}
+    </div>
+  )
+}

src/{components → app/interface}/inventory/draggable-item.tsx

@@ -4,13 +4,15 @@ import { useDrag, useDrop } from "react-dnd"
 
 import { Game } from "@/app/games/types"
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
-import { DropZoneTarget, InventoryEvent, InventoryItem, OnInventoryEvent } from "@/app/types"
+import { DropZoneTarget, InventoryEvent, InventoryItem, OnInventoryEvent } from "@/types"
 
 import { store } from "@/app/store"
+import { cn } from "@/lib/utils"
 
-export function DraggableItem({ game, item, onEvent }: {
+export function DraggableItem({ game, item, isLoading, onEvent }: {
   game: Game
   item: InventoryItem
+  isLoading: boolean
   onEvent: OnInventoryEvent
 }) {
   const [{ isDragging }, drag] = useDrag(() => ({
@@ -73,28 +75,31 @@ export function DraggableItem({ game, item, onEvent }: {
           ref={drag}
           key={item.name}
           onClick={() => onEvent("ClickOnItem", item)}
-          className={[
+          className={cn(
           "bg-gray-100 rounded-2xl overflow-hidden",
           "transition-all duration-200",
+          isLoading
+            ? `scale-0`
+            : `scale-100`,
           isDragging
-            ? "brightness-100 scale-125 border border-stone-300 shadow-2xl cursor-grabbing"
+            ? "brightness-100 scale-110 border border-stone-300 shadow-2xl cursor-grabbing"
             : "brightness-90 border-2 shadow-md cursor-grab",
           isOver && canDrop
             ? "border-stone-100"
             : "border-stone-600",
-          "hover:brightness-100 hover:scale-125 hover:border hover:border-stone-300 hover:shadow-2xl",
-          ].join(" ")}>
+          "hover:brightness-100 hover:scale-110 hover:border hover:border-stone-300 hover:shadow-2xl",
+          )}>
         <div ref={drop}>
-          <Image
-            src={`/inventories/${game.type}/${item.name}.jpeg`}
-            width={1024}
-            height={1024}
-            alt={item.title}
-          />
+            <Image
+              src={`/inventories/${game.type}/${item.name}.jpeg`}
+              width={1024}
+              height={1024}
+              alt={item.title}
+            />
         </div>
       </div>
       </TooltipTrigger>
-      <TooltipContent>
+      <TooltipContent side="right" className="translate-x-[5px] translate-y-[-8px]">
         <p className="text-xl">{item.title}</p>
       </TooltipContent>
     </Tooltip>

src/app/interface/inventory/index.tsx

@@ -0,0 +1,39 @@
+import { Game } from "@/app/games/types"
+import { DraggableItem } from "./draggable-item"
+import { OnInventoryEvent } from "@/types"
+import { cn } from "@/lib/utils";
+
+export function Inventory({
+  className = "",
+  game,
+  isLoading,
+  onEvent
+}: {
+  className?: string;
+  game: Game;
+  isLoading: boolean;
+  onEvent: OnInventoryEvent;
+}) {  
+  return (
+    <div className={cn(
+      `fixed z-20 top-28 left-0 p-6 w-28`,
+      // `w-full bg-stone-500 rounded-xl backdrop-blur-md bg-white/10`
+      className,
+    )}>
+      <div className={cn(
+        `flex flex-col space-y-2`
+        //  `w-full grid grid-cols-6 sm:grid-cols-8 md:grid-cols-10 lg:grid-cols-12 gap-4`,
+      )}>
+        {game.inventory.map(item => (
+          <DraggableItem
+            key={item.name}
+            game={game}
+            item={item}
+            isLoading={isLoading}
+            onEvent={onEvent}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

src/app/interface/last-event/index.tsx

@@ -0,0 +1,21 @@
+import { cn } from "@/lib/utils"
+import { ReactNode } from "react"
+
+export function LastEvent({ children, className = "" }: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn(
+      `fixed top-16 left-6 flex flex-row`,
+      `transition-all duration-300`,
+      `text-lg rounded-full backdrop-blur-md bg-stone-900/10 p-3`,
+      className
+    )}
+    style={{
+      textShadow: "1px 0px 2px #000000ab"
+    }}>
+      <div className="transition-all duration-300 text-xl px-2">{children}</div>
+    </div>
+  )
+}

src/app/interface/progress/index.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from "react"
+
+import { ProgressBar } from "./progress-bar"
+import { cn } from "@/lib/utils"
+
+export function Progress({
+  isLoading,
+  resetKey = "", // when this key change, this will re-spawn the progress bar
+  className = "",
+}: {
+  isLoading: boolean
+  resetKey: string
+  className?: string
+}) {
+  const timeoutRef = useRef<any>()
+  const [progressPercent, setProcessPercent] = useState(0)
+  const progressRef = useRef(0)
+  const isLoadingRef = useRef(isLoading)
+
+  const updateProgressBar = () => {
+    const duration = 1000 // 1 sec
+    const frequency = 200 // 200ms
+    const nbUpdatesPerSec = duration / frequency // 5x per second
+
+    // normally it takes 45, and we will try to go below,
+    // but to be safe let's set the counter a 1 min
+    const nbSeconds = 32 // 1 min
+    const amountInPercent =  100 / (nbUpdatesPerSec * nbSeconds) // 0.333
+
+    progressRef.current = Math.min(100, progressRef.current + amountInPercent)
+    setProcessPercent(progressRef.current)
+  }
+
+  useEffect(() => {
+    clearInterval(timeoutRef.current)
+    isLoadingRef.current = isLoading
+    progressRef.current = 0
+    setProcessPercent(0)
+    if (isLoading) {
+      timeoutRef.current = setInterval(updateProgressBar, 200)
+    }
+  }, [isLoading, resetKey])
+
+  return (
+    <div className={cn(
+      `fixed flex w-20 h-20 top-16 right-6 z-50`,
+      `animation-all duration-300`,
+      isLoading
+        ? `scale-100 opacity-100`
+        : `scale-0 opacity-0`,
+      className
+    )}>
+      <ProgressBar text="⌛" progressPercentage={progressPercent} />
+    </div>
+  )
+}

src/{components → app/interface}/renderer/cartesian-image.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useRef } from "react"
-import { MouseEventHandler } from "./types"
-import { RenderedScene } from "@/app/types"
+
+import { RenderedScene } from "@/types"
+import { MouseEventHandler } from "@/app/interface/renderer/types"
+import { FullScreenIcon } from "@/components/icons/full-screen"
+import { FullScreenButton } from "@/app/interface/renderer/full-screen-button"
 
 export function CartesianImage({
   rendered,
@@ -84,24 +87,19 @@ export function CartesianImage({
     return null
   }
   return (
-    <div
-      className={[
-        "h-[512px]",
-        className
-      ].join(" ")
-      }
-    >
+    <>
       <img
         src={rendered.assetUrl || undefined}
         ref={ref}
-        className="absolute"
+        className="fixed w-screen top-0 left-0 right-0"
         onMouseUp={(event) => handleEvent(event, true)}
         onMouseMove={(event) => handleEvent(event, false)}
       />
       {debug && <img
         src={rendered.maskUrl || undefined}
-        className="absolute opacity-50 pointer-events-none"
+        className="fixed w-screen top-0 left-0 right-0 opacity-50 pointer-events-none"
       />}
-    </div>
+      {/* <FullScreenButton /> */}
+    </>
   )
 }

src/{components → app/interface}/renderer/cartesian-video.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react"
 import { MouseEventHandler } from "./types"
-import { RenderedScene } from "@/app/types"
+import { RenderedScene } from "@/types"
 
 export function CartesianVideo({
   rendered,
@@ -86,18 +86,14 @@ export function CartesianVideo({
         ref={ref}
         onMouseUp={(event) => handleEvent(event, true)}
         onMouseMove={(event) => handleEvent(event, false)}
-        className="absolute"
+        className="fixed w-screen top-0 left-0 right-0"
         muted
         autoPlay
         loop
-        width="1024px"
-        height="512px"
       />
       {debug && <img
         src={rendered.maskUrl || undefined}
-        className="absolute opacity-50 pointer-events-none"
-        width="1024px"
-        height="512px"
+        className="fixed w-screen top-0 left-0 right-0 opacity-50 pointer-events-none"
       />}
     </div>
   )

src/app/interface/renderer/full-screen-button.tsx

@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils"
+import { FullScreenIcon } from "../../../components/icons/full-screen"
+
+export function FullScreenButton() {
+  return (
+    <div className={cn(
+      `absolute z-10 right-0 bottom-0`,
+    )}>
+      <div
+        className={cn(
+          `transform-all duration-200 text-white opacity-80 cursor-pointer scale-100`,
+          `hover:opacity-100 hover:text-white hover:scale-110 p-4`
+        )}>
+        <FullScreenIcon />
+      </div>
+    </div>
+  )
+}

src/{components → app/interface}/renderer/index.tsx

@@ -1,18 +1,20 @@
 import { useEffect, useRef, useState } from "react"
+import { useDrop } from "react-dnd"
 
-import { DropZoneTarget, ImageSegment, RenderedScene, SceneEvent } from "@/app/types"
-import { ProgressBar } from "../misc/progress"
+import { DropZoneTarget, ImageSegment, RenderedScene, SceneEvent } from "@/types"
+import { useImageDimension } from "@/lib/useImageDimension"
+import { formatActionnableName } from "@/lib/formatActionnableName"
 import { Game } from "@/app/games/types"
-import { Engine } from "@/app/engines"
+import { Engine } from "@/app/engine/engines"
+
 import { CartesianImage } from "./cartesian-image"
 import { MouseEventHandler, MouseEventType } from "./types"
 import { CartesianVideo } from "./cartesian-video"
 import { SphericalImage } from "./spherical-image"
-import { useImageDimension } from "@/lib/useImageDimension"
-import { useDrop } from "react-dnd"
-import { formatActionnableName } from "@/lib/formatActionnableName"
+
 import { SceneTooltip } from "./scene-tooltip"
 import { SceneMenu } from "./scene-menu"
+import { cn } from "@/lib/utils"
 
 export const SceneRenderer = ({
   rendered,
@@ -29,15 +31,13 @@ export const SceneRenderer = ({
   engine: Engine
   debug: boolean
 }) => {
-  const timeoutRef = useRef<any>()
+
   const containerRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement | null>(null)
   const contextRef = useRef<CanvasRenderingContext2D | null>(null)
   const [actionnable, setActionnable] = useState<string>("")
   const actionnableRef = useRef<string>("")
-  const [progressPercent, setProcessPercent] = useState(0)
-  const progressRef = useRef(0)
-  const isLoadingRef = useRef(isLoading)
+
   const maskDimension = useImageDimension(rendered.maskUrl)
 
   const [isHover, setHover] = useState(false)
@@ -141,6 +141,7 @@ export const SceneRenderer = ({
     const noContext = !contextRef.current
     const noSegmentationMask = !rendered.maskUrl
     const noSegmentsToClickOn = rendered.segments.length == 0
+    const outOfBounds = relativeX < 0 || relativeX > 1 || relativeY < 0 || relativeY > 1
 
     const mustAbort =
      noMenu
@@ -148,6 +149,7 @@ export const SceneRenderer = ({
      || noSegmentationMask
      || noSegmentsToClickOn
      || isLoading
+     || outOfBounds
 
     if (mustAbort) {
       // if (type === "click") { onEvent("ClickOnNothing") }
@@ -243,42 +245,16 @@ export const SceneRenderer = ({
 
       }
     }
-  };
-
-  const updateProgressBar = () => {
-    const duration = 1000 // 1 sec
-    const frequency = 200 // 200ms
-    const nbUpdatesPerSec = duration / frequency // 5x per second
-
-    // normally it takes 45, and we will try to go below,
-    // but to be safe let's set the counter a 1 min
-    const nbSeconds = 32 // 1 min
-    const amountInPercent =  100 / (nbUpdatesPerSec * nbSeconds) // 0.333
-
-    progressRef.current = Math.min(100, progressRef.current + amountInPercent)
-    setProcessPercent(progressRef.current)
   }
 
-  useEffect(() => {
-    clearInterval(timeoutRef.current)
-    isLoadingRef.current = isLoading
-    progressRef.current = 0
-    setProcessPercent(0)
-    if (isLoading) {
-      timeoutRef.current = setInterval(updateProgressBar, 200)
-    }
-  }, [isLoading, rendered.assetUrl, engine?.type])
-
+  const isFullScreen = true
   return (
-    <div className="w-full pt-2" ref={drop}>
+    <div className="" ref={drop}>
       <div
         ref={containerRef}
-        className={[
-          "relative border-2 border-gray-50 rounded-xl overflow-hidden min-h-[512px]",
-          engine.type === "cartesian_video"
-          || engine.type === "cartesian_image"
-            ? "w-full" // w-[1024px] h-[512px]"
-            : "w-full",
+        className={cn(
+          "border-0 overflow-hidden",
+          `fixed top-0 left-0 right-0 w-screen`,
             
           isLoading
             ? "cursor-wait"
@@ -287,7 +263,7 @@ export const SceneRenderer = ({
             ? "cursor-crosshair"
             : "cursor-crosshair"
             : ""
-          ].join(" ")}>
+          )}>
         {engine.type === "cartesian_video"
           ? <CartesianVideo
               rendered={rendered}
@@ -307,32 +283,29 @@ export const SceneRenderer = ({
             />
         }
 
+        {/*
+        engine.type === "cartesian_image" || engine.type === "cartesian_video"
+        ? <SceneTooltip
+          isVisible={isTooltipVisible && !isLoading}
+          x={tooltipX}
+          y={tooltipY}>
+          {actionnable}
+        </SceneTooltip> : null
+        */
+        }
       </div>
 
-      <SceneTooltip
-        isVisible={isTooltipVisible && !isLoading}
-        x={tooltipX}
-        y={tooltipY}>
-        {actionnable}
-      </SceneTooltip>
-
       {/*
+      engine.type === "cartesian_image" || engine.type === "cartesian_video"
+       ? 
       <SceneMenu
         actions={["Go here", "Interact"]}
         isVisible={isMenuVisible && !isLoading}
         x={menuX}
         y={menuY}
-      />
+      /> : null
       */}
 
-      {isLoading
-      ? <div className="fixed flex w-20 h-20 bottom-8 right-0 mr-8 z-50">
-          <ProgressBar
-            text="⌛"
-            progressPercentage={progressPercent}
-          />
-        </div>
-      : null}
     </div>
   )
 }

src/{components → app/interface}/renderer/scene-menu.tsx

@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils"
+
 export function SceneMenu({
   actions,
   isVisible,
@@ -10,12 +12,12 @@ export function SceneMenu({
   y: number
 }) {
   return (
-    <div className={[
+    <div className={cn(
       `z-20 fixed flex flex-col w-24 pt-8 px-2 pb-2`,
       `translate-x-[-50%] translate-y-[-20px]`,
       isVisible ? "" : "",
       isVisible ? "" : "pointer-events-none"
-    ].join(" ")}
+    )}
     style={{
       top: `${y}px`,
       left: `${x}px`,
@@ -24,17 +26,17 @@ export function SceneMenu({
     {actions.map((action, i) =>
       <div
       key={action}
-      className={[
+      className={cn(
         `flex items-center justify-center px-2 py-1 cursor-pointer`
-      ].join(" ")}>
+      )}>
         <div
-          className={[
+          className={cn(
             `transition-all duration-150`,
             isVisible ? "opacity-100 scale-100" : "scale-0 opacity-0 pointer-events-none",
             `flex items-center justify-center rounded-full h-8 px-4`,
             `hover:bg-gray-50 bg-gray-100 hover:border-gray-800 border-gray-300 border`,
             `rounded-2xl text-gray-800 text-md`,
-          ].join(" ")}>
+          )}>
           {action}
         </div>
     </div>)}

src/{components → app/interface}/renderer/scene-tooltip.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils"
 import { ReactNode } from "react"
 
 export function SceneTooltip({
@@ -12,25 +13,25 @@ export function SceneTooltip({
   y: number
 }) {
   return (
-    <div className={[
-      `z-10 fixed flex flex-col space-y-2 w-24 h-16 px-2`,
+    <div className={cn(
+      `z-30 fixed flex flex-col space-y-2 w-24 h-16 px-2`,
       `translate-x-[-50%] translate-y-[-40px]`,
       isVisible ? "cursor-pointer" : "",
       "pointer-events-none"
-    ].join(" ")}
+  )}
     style={{
       top: `${y}px`,
       left: `${x}px`,
     }}
     >
       <div
-        className={[
+        className={cn(
           `transition-all duration-150`,
           isVisible ? "opacity-100 scale-100" : "scale-0 opacity-0 pointer-events-none",
           `flex items-center justify-center rounded-full h-8 px-4`,
           `text-gray-50 text-xl`,
           `cursor-pointer capitalize`
-        ].join(" ")}
+        )}
         style={{
           textShadow: "#000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px"
         }}>

src/{components → app/interface}/renderer/spherical-image.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react"
 import { PanoramaPosition, PluginConstructor, Point, Position, SphericalPosition, Viewer } from "@photo-sphere-viewer/core"
 import { LensflarePlugin, ReactPhotoSphereViewer } from "react-photo-sphere-viewer"
 
-import { RenderedScene } from "@/app/types"
+import { RenderedScene } from "@/types"
 
 import { MouseEventHandler } from "./types"
 import { useImageDimension } from "@/lib/useImageDimension"
@@ -247,7 +247,7 @@ export function SphericalImage({
         container=""
         containerClass={className}
         
-        height="60vh"
+        height="100vh"
         width="100%"
         
         // to access a plugin we must use viewer.getPlugin()

src/app/interface/top-menu/index.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+
+import { Game, GameType } from "@/app/games/types"
+import { games } from "@/app/games"
+import { Engine, EngineType, engines } from "@/app/engine/engines"
+import { cn } from "@/lib/utils"
+
+export function TopMenu({
+  engine,
+  defaultGame,
+  game,
+  onChangeEngine,
+  onChangeGame,
+  onToggleDebug,
+  debug,
+}: {
+  engine: Engine,
+  defaultGame: string
+  game: Game
+  onChangeEngine: (newEngine: EngineType) => void
+  onChangeGame: (newGameType: GameType) => void
+  onToggleDebug: (isToggledOn: boolean) => void
+  debug: boolean
+}) {
+  return (
+    <div className={cn(
+      `z-10 fixed top-0 left-0 right-0`,
+      `flex flex-row w-full justify-between items-center`,
+      `backdrop-blur-xl`,
+      `px-2 py-2 border-b-1 border-gray-50 dark:border-gray-50`,
+      `bg-stone-900/50 dark:bg-stone-900/50 text-gray-50 dark:text-gray-50`
+    )}>
+      <div className="flex flex-row items-center space-x-3 font-mono">
+        <Label className="flex text-sm">Select a story:</Label>
+        <Select
+          defaultValue={defaultGame}
+          onValueChange={(value) => { onChangeGame(value as GameType) }}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue className="text-sm" placeholder="Type" />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(games).map(([key, game]) =>
+              <SelectItem key={key} value={key}>{game.title}</SelectItem>
+            )}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex flex-row items-center space-x-3 font-mono">
+        <Switch
+            checked={debug}
+            onCheckedChange={onToggleDebug}
+            // we won't disable it, so we can occupy our using while loading
+            // disabled={isLoading}
+        />
+        <Label>Debug</Label>
+      </div>
+      <div className="flex flex-row items-center space-x-3 font-mono">
+        <Label className="flex text-sm">Rendering engine:</Label>
+        <Select
+          defaultValue={engine.type}
+          onValueChange={(value) => { onChangeEngine(value as EngineType) }}>
+          <SelectTrigger className="w-[300px]">
+            <SelectValue className="text-sm" placeholder="Type" />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(engines)
+              .filter(([_, engine]) => engine.visible)
+              .map(([key, engine]) =>
+            <SelectItem key={key} value={key} disabled={!engine.enabled}>{engine.label} ({engine.modelName})</SelectItem>
+            )}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}

src/app/main.tsx

@@ -5,30 +5,28 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { DndProvider } from "react-dnd"
 import { HTML5Backend } from "react-dnd-html5-backend"
 
-import { SceneRenderer } from "@/components/renderer"
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { Switch } from "@/components/ui/switch"
-import { Label } from "@/components/ui/label"
-
-import { newRender, getRender } from "./render"
-import { InventoryEvent, InventoryItem, OnInventoryEvent, RenderedScene, SceneEvent } from "./types"
+import { SceneRenderer } from "@/app/interface/renderer"
+
+import { newRender, getRender } from "@/app/engine/render"
+import { Engine, EngineType, defaultEngine, getEngine } from "@/app/engine/engines"
+
+import { OnInventoryEvent, RenderedScene, SceneEvent } from "@/types"
 import { Game, GameType } from "./games/types"
-import { defaultGame, games, getGame } from "./games"
+import { defaultGame, getGame } from "./games"
 import { getBackground } from "@/app/queries/getBackground"
 import { getDialogue } from "@/app/queries/getDialogue"
 import { getActionnables } from "@/app/queries/getActionnables"
-import { Engine, EngineType, defaultEngine, engines, getEngine } from "./engines"
+
 import { normalizeActionnables } from "@/lib/normalizeActionnables"
-import { Inventory } from "@/components/inventory"
+import { Inventory } from "@/app/interface/inventory"
 import { store } from "./store"
 import { defaultActionnables } from "@/lib/defaultActionnables"
+import { TopMenu } from "./interface/top-menu"
+import { LastEvent } from "./interface/last-event"
+import { Help } from "./interface/help"
+import { Dialogue } from "./interface/dialogue"
+import { Progress } from "./interface/progress"
+import { cn } from "@/lib/utils"
 
 const getInitialRenderedScene = (): RenderedScene => ({
   renderId: "",
@@ -59,6 +57,7 @@ export default function Main() {
   const [situation, setSituation] = useState("")
 
   const [dialogue, setDialogue] = useState("")
+  const [isLoadingDialogue, setLoadingDialogue] = useState(false)
 
   /*
   const [grabbedItem, setGrabbedItem] = useState<InventoryItem>()
@@ -173,8 +172,8 @@ export default function Main() {
 
 
   const askGameMasterForEpicDialogue = async (lastEvent: string) => {
-
     await startTransition(async () => {
+      setLoadingDialogue(true)
       // const game = getGame(gameRef.current)
       let newDialogue = ""
       try {
@@ -186,6 +185,7 @@ export default function Main() {
         } catch (err) {
           console.log(`failed to generate dialogue.. again (but it's only a nice to have, so..)`)
           setDialogue("")
+          setLoadingDialogue(false)
           return
         }
       }
@@ -194,6 +194,7 @@ export default function Main() {
       newDialogue = newDialogue.split("As the player")[0]
       newDialogue = newDialogue.split("As they use")[0]
       setDialogue(newDialogue)
+      setLoadingDialogue(false)
     })
   }
 
@@ -343,7 +344,7 @@ export default function Main() {
     if (event === "ClickOnActionnable" || event === "ClickOnNothing") {
       setBusy(busyRef.current = true) // this will be set to false once the scene finish loading
 
-      askGameMasterForEpicDialogue(newEventString)
+      const dialogue = askGameMasterForEpicDialogue(newEventString)
       askGameMasterForEpicBackground(newEventString)
     }
   }
@@ -397,95 +398,63 @@ export default function Main() {
       askGameMasterForEpicBackground(newEventString)
     }
   }
+  const isLoadingScene = isBusy || rendered.status === "pending"
+  const isLoadingSegments = !rendered.segments.length
+  const isLoading = isLoadingScene || isLoadingSegments || isLoadingDialogue
 
-
-  // determine when to show the spinner
-  const isLoading = isBusy || rendered.status === "pending"
-
+  const addBottomMarginForPhotoSphereMenu = engine.type.startsWith("spherical")
   return (
     <div
       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 dark:border-gray-50 bg-gray-800 dark:bg-gray-800 text-gray-50 dark:text-gray-50">
-        <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}
-            onValueChange={(value) => { handleSelectGame(value as GameType) }}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue className="text-sm" placeholder="Type" />
-            </SelectTrigger>
-            <SelectContent>
-              {Object.entries(games).map(([key, game]) =>
-                <SelectItem key={key} value={key}>{game.title}</SelectItem>
-              )}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex flex-row items-center space-x-3 font-mono">
-          <Switch
-              checked={debug}
-              onCheckedChange={handleToggleDebug}
-              // we won't disable it, so we can occupy our using while loading
-              // disabled={isLoading}
-           />
-           <Label>Debug</Label>
-        </div>
-        <div className="flex flex-row items-center space-x-3 font-mono">
-          <Label className="flex text-sm">Rendering engine:</Label>
-          <Select
-            defaultValue={engine.type}
-            onValueChange={(value) => { handleSelectEngine(value as EngineType) }}>
-            <SelectTrigger className="w-[300px]">
-              <SelectValue className="text-sm" placeholder="Type" />
-            </SelectTrigger>
-            <SelectContent>
-              {Object.entries(engines)
-                .filter(([_, engine]) => engine.visible)
-                .map(([key, engine]) =>
-              <SelectItem key={key} value={key} disabled={!engine.enabled}>{engine.label} ({engine.modelName})</SelectItem>
-              )}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
+      <TopMenu
+        engine={engine}
+        game={game}
+        defaultGame={gameRef.current}
+        onToggleDebug={handleToggleDebug}
+        onChangeGame={handleSelectGame}
+        onChangeEngine={handleSelectEngine}
+        debug={debug}
+      />
 
       <DndProvider backend={HTML5Backend}>
-        <div className={[
+        <div className={cn(
           "flex flex-col w-full pt-4 space-y-3 text-gray-50 dark:text-gray-50",
           getGame(gameRef.current).className // apply the game theme
-        ].join(" ")}
+        )}
         >
-          <div className="flex flex-row">
-            <div className="text-xl px-2">{lastEvent}</div>
-          </div>
-          <Inventory game={game} onEvent={handleInventoryEvent} />
-          <div className="flex flex-row">
-            <div className="text-xl mr-2">
-              {rendered.segments.length
-                ? <span>💡 Try to click on:</span>
-                : <span>⌛ Generating areas for clicks and drag & drop, please wait..</span>
-              }
-            </div>
-            {clickables.map((clickable, i) => 
-            <div key={i} className="flex flex-row text-xl mr-2">
-              <div className="">{clickable}</div>
-              {i < (clickables.length - 1) ? <div>,</div> : null}
-            </div>)}
-          </div>
           <SceneRenderer
             rendered={rendered}
             onEvent={handleSceneEvent}
-            isLoading={isLoading}
+            isLoading={isLoadingScene}
             game={game}
             engine={engine}
             debug={debug}
           />
-          <div
-            className="text-xl rounded-xl backdrop-blur-sm bg-white/10 p-4"
-            style={{
-              textShadow: "1px 0px 2px #000000ab"
-            }}>{dialogue}</div>
+          <LastEvent>{lastEvent}</LastEvent>
+          <Inventory game={game} isLoading={!rendered.segments.length} onEvent={handleInventoryEvent} />
+          {/*
+          <Help
+            clickables={clickables}
+            isLoading={!rendered.segments.length}
+          />
+      */}
+          <Dialogue
+            className={
+              addBottomMarginForPhotoSphereMenu ? `bottom-16`: `bottom-6`
+            }
+            isLoading={isLoadingDialogue}>{
+            dialogue
+              ? dialogue
+              : <Help clickables={clickables} isLoading={isLoadingSegments} />
+            }</Dialogue>
+          <Progress
+            isLoading={isLoading}
+            resetKey={[
+              rendered?.segments?.length,
+              rendered?.assetUrl,
+            ].join("&&")}
+          />
         </div>
       </DndProvider>
     </div>

src/app/queries/getDialogue.ts

@@ -1,3 +1,5 @@
+import sbd from "sbd"
+
 import { Game } from "@/app/games/types"
 import { createLlamaPrompt } from "@/lib/createLlamaPrompt"
 
@@ -71,5 +73,8 @@ Here is the original situation, which will inform you about the general game moo
     }
   }
 
-  return result
+  // llama-2 is too chatty, let's keep 3 sentences at most
+  const sentences = sbd.sentences(result).slice(0, 3).join(" ")
+
+  return sentences
 }

src/app/store.ts

@@ -1,6 +1,6 @@
 "use client"
 
-import { InventoryItem } from "./types"
+import { InventoryItem } from "../types"
 
 // could also be Zustand or something
 export const store: {

src/components/icons/full-screen.tsx

@@ -0,0 +1,16 @@
+export function FullScreenIcon() {
+  return (
+    <svg version="1.1" viewBox="0 0 14 14" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+      <title/>
+      <desc/>
+      <defs/>
+      <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
+        <g fill="currentColor" id="Core" transform="translate(-215.000000, -257.000000)">
+          <g id="fullscreen" transform="translate(215.000000, 257.000000)">
+            <path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape"/>
+          </g>
+        </g>
+      </g>
+    </svg>
+  )
+}

src/components/inventory/index.tsx

@@ -1,24 +0,0 @@
-import { Game } from "@/app/games/types"
-import { DraggableItem } from "./draggable-item"
-import { OnInventoryEvent } from "@/app/types"
-
-export function Inventory({
-  game,
-  onEvent
-}: {
-  game: Game;
-  onEvent: OnInventoryEvent;
-}) {  
-  return (
-    <div className="grid grid-cols-6 sm:grid-cols-8 md:grid-cols-10 lg:grid-cols-12 gap-4 w-full bg-stone-500 p-4 rounded-xl">
-      {game.inventory.map(item => (
-        <DraggableItem
-          key={item.name}
-          game={game}
-          item={item}
-          onEvent={onEvent}
-        />
-      ))}
-    </div>
-  )
-}

src/components/ui/switch.tsx

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-zinc-900 data-[state=unchecked]:bg-zinc-200 dark:focus-visible:ring-zinc-800 dark:focus-visible:ring-offset-zinc-950 dark:data-[state=checked]:bg-zinc-50 dark:data-[state=unchecked]:bg-zinc-800",
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-stone-900 data-[state=unchecked]:bg-stone-200 dark:focus-visible:ring-stone-800 dark:focus-visible:ring-offset-stone-950 dark:data-[state=checked]:bg-stone-50 dark:data-[state=unchecked]:bg-stone-800",
       className
     )}
     {...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 dark:bg-zinc-950"
+        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 dark:bg-stone-950"
       )}
     />
   </SwitchPrimitives.Root>

src/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+      "z-50 overflow-hidden rounded-md border border-stone-200 bg-white px-3 py-1.5 text-sm text-stone-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-50",
       className
     )}
     {...props}