create-pixi-vn 1.9.7 → 2.0.0

package/template-react-vite-muijoy/package.json

@@ -7,57 +7,75 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "npm run build:fast && vite preview",
+    "build": "tsc -b && vite build",
+    "build:fast": "vite build",
+    "prebuild": "npm run icon",
+    "icon": "pwa-assets-generator",
+    "lint": "biome lint",
+    "check": "biome check",
+    "format": "biome format --write",
+    "ui:reinit": "npx shadcn@latest init -f -b base --reinstall && npm run format"
   },
   "dependencies": {
-    "@drincs/pixi-vn": "^1.6.4",
+    "@base-ui/react": "^1.5.0",
+    "@drincs/pixi-vn": "^1.8.11",
     "@drincs/pixi-vn-spine": "^0.2.1",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.7",
-    "@mui/joy": "^5.0.0-beta.52",
-    "@mui/material": "^7.3.7",
-    "@tailwindcss/vite": "^4.1.18",
-    "@tanstack/react-query": "^5.90.20",
-    "es-toolkit": "^1.44.0",
-    "i18next": "^25.8.0",
-    "i18next-chained-backend": "^5.0.2",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-devtools": "^0.10.5",
+    "@tanstack/react-hotkeys": "^0.10.0",
+    "@tanstack/react-hotkeys-devtools": "^0.7.0",
+    "@tanstack/react-pacer": "^0.22.1",
+    "@tanstack/react-pacer-devtools": "^0.7.1",
+    "@tanstack/react-query": "latest",
+    "@tanstack/react-query-devtools": "latest",
+    "@tanstack/react-router": "latest",
+    "@tanstack/react-router-devtools": "latest",
+    "@tanstack/react-store": "latest",
+    "@tanstack/router-plugin": "latest",
+    "@tanstack/store": "latest",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "i18next": "^26.3.0",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "i18next-chained-backend": "^5.0.4",
     "i18next-resources-to-backend": "^1.2.1",
-    "motion": "^12.29.2",
-    "notistack": "^3.0.2",
-    "react": "^19.2.4",
+    "lucide-react": "^1.17.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.6",
     "react-color-palette": "^7.3.1",
-    "react-dom": "^19.2.4",
-    "react-error-boundary": "^6.1.0",
-    "react-i18next": "^16.5.4",
+    "react-dom": "^19.2.6",
+    "react-i18next": "^17.0.8",
     "react-markdown": "^10.1.0",
-    "react-markdown-typewriter": "^1.1.4",
-    "react-router-dom": "^7.13.0",
+    "react-markdown-typewriter": "^1.2.0",
+    "react-resizable-panels": "^4.11.2",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
+    "shadcn": "^4.10.0",
     "shade-generator": "^1.2.7",
-    "tailwindcss": "^4.1.18",
-    "vite-plugin-checker": "^0.12.0",
-    "zustand": "^5.0.11"
+    "sonner": "^2.0.7",
+    "tailwind-animations": "^1.0.1",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
+    "@assetpack/core": "^1.7.0",
+    "@biomejs/biome": "latest",
     "@tailwindcss/typography": "^0.5.19",
-    "@tanstack/react-query-devtools": "^5.91.3",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.7",
+    "@tanstack/devtools-vite": "latest",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.54.0",
-    "@typescript-eslint/parser": "^8.54.0",
-    "@vitejs/plugin-react": "^5.1.2",
-    "eslint": "^9.39.2",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.0",
-    "tailwindcss-motion": "^1.1.1",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-pwa": "^1.2.0"
+    "@vite-pwa/assets-generator": "^1.0.2",
+    "@vitejs/plugin-react": "^6.0.2",
+    "globals": "^17.6.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.14",
+    "vite-plugin-checker": "^0.14.1",
+    "vite-plugin-pwa": "^1.3.0"
   },
   "keywords": [
     "game",
@@ -70,4 +88,4 @@
     "visual-novel",
     "vn"
   ]
-}
+}

package/template-react-vite-muijoy/pwa-assets.config.js

@@ -0,0 +1,6 @@
+import { defineConfig, minimal2023Preset } from "@vite-pwa/assets-generator/config";
+
+export default defineConfig({
+    preset: minimal2023Preset,
+    images: ["public/icon.png"],
+});

package/template-react-vite-muijoy/src/App.tsx

@@ -1,76 +1,25 @@
-import { setupPixivnViteData } from "@drincs/pixi-vn/vite-listener";
-import { ComponentType, lazy, Suspense } from "react";
-import { ErrorBoundary, FallbackProps } from "react-error-boundary";
-import { useI18n } from "./i18n";
-import LoadingScreen from "./screens/LoadingScreen";
-import { defineAssets } from "./utils/assets-utility";
-import { initializeIndexedDB } from "./utils/indexedDB-utility";
-
-const Home = lazy(async () => {
-    await Promise.all([import("./values"), import("./labels")]);
-    await Promise.all([initializeIndexedDB(), defineAssets(), useI18n()]);
-    setupPixivnViteData();
-    return import("./Home");
-});
-
-const ErrorFallback: ComponentType<FallbackProps> = ({ error, resetErrorBoundary }) => {
-    return (
-        <div
-            role='alert'
-            style={{
-                pointerEvents: "auto",
-                backgroundColor: "black",
-            }}
-        >
-            <h2
-                style={{
-                    color: "red",
-                    fontSize: "2rem",
-                    textAlign: "center",
-                    marginTop: "1rem",
-                }}
-            >
-                Something went wrong
-            </h2>
-            <p
-                style={{
-                    color: "white",
-                    fontSize: "1.5rem",
-                    textAlign: "center",
-                    marginTop: "1rem",
-                }}
-            >
-                {(error as Error).message}
-            </p>
-            <div
-                style={{
-                    display: "flex",
-                    justifyContent: "center",
-                    marginTop: "1rem",
-                    paddingBottom: "1rem",
-                }}
-            >
-                <button
-                    style={{
-                        padding: "0.5rem 1rem",
-                        backgroundColor: "white",
-                        borderRadius: "0.5rem",
-                    }}
-                    onClick={resetErrorBoundary}
-                >
-                    Try again
-                </button>
-            </div>
-        </div>
-    );
-};
-
-export default function App() {
-    return (
-        <ErrorBoundary FallbackComponent={ErrorFallback}>
-            <Suspense fallback={<LoadingScreen />}>
-                <Home />
-            </Suspense>
-        </ErrorBoundary>
-    );
-}
+import { routeTree } from "@/routeTree.gen";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
+
+const queryClient = new QueryClient();
+const router = createRouter({
+    routeTree,
+    defaultPreload: "intent",
+    scrollRestoration: true,
+    context: { queryClient },
+});
+
+declare module "@tanstack/react-router" {
+    interface Register {
+        router: typeof router;
+    }
+}
+
+export default function App() {
+    return (
+        <QueryClientProvider client={queryClient}>
+            <RouterProvider router={router} />
+        </QueryClientProvider>
+    );
+}

package/template-react-vite-muijoy/src/assets/index.ts

@@ -0,0 +1,274 @@
+import generatedManifestJson from "@/assets/manifest.gen.json";
+import { AUDIO_BUNDLE_NAME } from "@/constants";
+import { secondPart } from "@/content/labels/second.label";
+import { startLabel } from "@/content/labels/start.label";
+import type { FileRouteTypes } from "@/routeTree.gen";
+import type { AssetsManifest } from "@drincs/pixi-vn";
+
+/**
+ * Manifest for the assets used in the game.
+ * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
+ */
+export const manifest: AssetsManifest = {
+    bundles: [
+        ...generatedManifestJson.bundles,
+        {
+            name: AUDIO_BUNDLE_NAME,
+            assets: [
+                {
+                    alias: "bgm_cheerful",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/bgm_cheerful.wav",
+                },
+                {
+                    alias: "sfx_whoosh",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/audio/sfx_whoosh.wav",
+                },
+            ],
+        },
+        // screens
+        {
+            name: "/" as FileRouteTypes["fullPaths"],
+            assets: [
+                {
+                    alias: "background_main_menu",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/main-menu.png",
+                },
+            ],
+        },
+        // labels
+        {
+            name: startLabel.id,
+            assets: [
+                {
+                    alias: "bg01-hallway",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/bg01-hallway.webp",
+                },
+            ],
+        },
+        {
+            name: secondPart.id,
+            assets: [
+                {
+                    alias: "bg02-dorm",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/bg02-dorm.webp",
+                },
+            ],
+        },
+        // characters
+        {
+            name: "fm01",
+            assets: [
+                {
+                    alias: "fm01-body",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-body.webp",
+                },
+                {
+                    alias: "fm01-eyes-grin",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-eyes-grin.webp",
+                },
+                {
+                    alias: "fm01-eyes-smile",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-eyes-smile.webp",
+                },
+                {
+                    alias: "fm01-eyes-soft",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-eyes-soft.webp",
+                },
+                {
+                    alias: "fm01-eyes-upset",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-eyes-upset.webp",
+                },
+                {
+                    alias: "fm01-eyes-wow",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-eyes-wow.webp",
+                },
+                {
+                    alias: "fm01-mouth-grin00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-mouth-grin00.webp",
+                },
+                {
+                    alias: "fm01-mouth-serious00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-mouth-serious00.webp",
+                },
+                {
+                    alias: "fm01-mouth-serious01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-mouth-serious01.webp",
+                },
+                {
+                    alias: "fm01-mouth-smile00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-mouth-smile00.webp",
+                },
+                {
+                    alias: "fm01-mouth-smile01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-mouth-smile01.webp",
+                },
+                {
+                    alias: "fm01-mouth-soft00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-mouth-soft00.webp",
+                },
+                {
+                    alias: "fm01-mouth-soft01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-mouth-soft01.webp",
+                },
+                {
+                    alias: "fm01-mouth-upset00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-mouth-upset00.webp",
+                },
+                {
+                    alias: "fm01-mouth-upset01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-mouth-upset01.webp",
+                },
+                {
+                    alias: "fm01-mouth-wow01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm01/fm01-mouth-wow01.webp",
+                },
+            ],
+        },
+        {
+            name: "fm02",
+            assets: [
+                {
+                    alias: "fm02-body",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-body.webp",
+                },
+                {
+                    alias: "fm02-eyes-bawl",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-eyes-bawl.webp",
+                },
+                {
+                    alias: "fm02-eyes-joy",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-eyes-joy.webp",
+                },
+                {
+                    alias: "fm02-eyes-nervous",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-eyes-nervous.webp",
+                },
+                {
+                    alias: "fm02-eyes-smile",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-eyes-smile.webp",
+                },
+                {
+                    alias: "fm02-eyes-upset",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-eyes-upset.webp",
+                },
+                {
+                    alias: "fm02-eyes-wow",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-eyes-wow.webp",
+                },
+                {
+                    alias: "fm02-mouth-cry01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-mouth-cry01.webp",
+                },
+                {
+                    alias: "fm02-mouth-nervous00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-mouth-nervous00.webp",
+                },
+                {
+                    alias: "fm02-mouth-nervous01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-mouth-nervous01.webp",
+                },
+                {
+                    alias: "fm02-mouth-smile00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-mouth-smile00.webp",
+                },
+                {
+                    alias: "fm02-mouth-smile01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-mouth-smile01.webp",
+                },
+                {
+                    alias: "fm02-mouth-upset00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-mouth-upset00.webp",
+                },
+                {
+                    alias: "fm02-mouth-upset01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-mouth-upset01.webp",
+                },
+                {
+                    alias: "fm02-mouth-wow01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/fm02/fm02-mouth-wow01.webp",
+                },
+            ],
+        },
+        {
+            name: "m01",
+            assets: [
+                {
+                    alias: "m01-body",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-body.webp",
+                },
+                {
+                    alias: "m01-eyes-annoy",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-annoy.webp",
+                },
+                {
+                    alias: "m01-eyes-concern",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-concern.webp",
+                },
+                {
+                    alias: "m01-eyes-cry",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-cry.webp",
+                },
+                {
+                    alias: "m01-eyes-grin",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-grin.webp",
+                },
+                {
+                    alias: "m01-eyes-smile",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-smile.webp",
+                },
+                {
+                    alias: "m01-eyes-wow",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-wow.webp",
+                },
+                {
+                    alias: "m01-mouth-annoy00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-annoy00.webp",
+                },
+                {
+                    alias: "m01-mouth-annoy01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-annoy01.webp",
+                },
+                {
+                    alias: "m01-mouth-concern00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-concern00.webp",
+                },
+                {
+                    alias: "m01-mouth-concern01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-concern01.webp",
+                },
+                {
+                    alias: "m01-mouth-cry00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-cry00.webp",
+                },
+                {
+                    alias: "m01-mouth-cry01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-cry01.webp",
+                },
+                {
+                    alias: "m01-mouth-grin00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-grin00.webp",
+                },
+                {
+                    alias: "m01-mouth-neutral00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-neutral00.webp",
+                },
+                {
+                    alias: "m01-mouth-neutral01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-neutral01.webp",
+                },
+                {
+                    alias: "m01-mouth-smile00",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile00.webp",
+                },
+                {
+                    alias: "m01-mouth-smile01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile01.webp",
+                },
+                {
+                    alias: "m01-mouth-wow01",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-wow01.webp",
+                },
+            ],
+        },
+    ],
+};

package/template-react-vite-muijoy/src/assets/manifest.gen.json

@@ -0,0 +1,8 @@
+{
+  "bundles": [
+    {
+      "name": "default",
+      "assets": []
+    }
+  ]
+}

package/template-react-vite-muijoy/src/components/loading.tsx

@@ -0,0 +1,60 @@
+import { Spinner } from "@/components/ui/spinner";
+import { motion } from "motion/react";
+
+export function PendingComponent() {
+    return (
+        <div className="h-screen w-screen">
+            <div className="absolute bottom-0 right-0 p-2 animate-in zoom-in-95 fade-in-0">
+                <Spinner className="size-10 text-white" />
+            </div>
+        </div>
+    );
+}
+
+export function AnimatedDots() {
+    const dots = [
+        { id: "dot-1", char: "." },
+        { id: "dot-2", char: "." },
+        { id: "dot-3", char: "." },
+    ]; // I caratteri da animare
+
+    return (
+        <motion.span
+            style={{ display: "flex", pointerEvents: "none", userSelect: "none" }}
+            transition={{
+                staggerChildren: 0.2,
+            }}
+            initial="closed"
+            animate="open"
+        >
+            {dots.map((dot) => (
+                <motion.span
+                    key={dot.id}
+                    initial={{ y: 0 }}
+                    variants={{
+                        open: {
+                            y: 5,
+                            transition: {
+                                repeat: Infinity,
+                                duration: 0.5,
+                                ease: "easeInOut",
+                                repeatType: "reverse",
+                            },
+                        },
+                        closed: {
+                            y: 0,
+                            transition: {
+                                repeat: Infinity,
+                                duration: 0.5,
+                                ease: "easeInOut",
+                                repeatType: "reverse",
+                            },
+                        },
+                    }}
+                >
+                    {dot.char}
+                </motion.span>
+            ))}
+        </motion.span>
+    );
+}

package/template-react-vite-muijoy/src/components/menus/choice-menus.tsx

@@ -0,0 +1,43 @@
+import { Button } from "@/components/ui/button";
+import { useNarrationFunctions } from "@/lib/hooks/narration-hooks";
+import { useQueryChoiceMenuOptions } from "@/lib/query/interface-query";
+import { GameStatus } from "@/lib/stores/game-status-store";
+import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
+import { useDebouncedValue } from "@tanstack/react-pacer";
+import { useSelector } from "@tanstack/react-store";
+import { CornerDownLeft } from "lucide-react";
+
+export function ChoiceMenu() {
+    const loading = useSelector(GameStatus.store, (state) => state.loading);
+    const { data: menu = [] } = useQueryChoiceMenuOptions();
+    const isTyping = useSelector(TextDisplaySettings.store, (state) => state.inProgress);
+    const { selectChoice } = useNarrationFunctions();
+    const [debouncedMenu] = useDebouncedValue(isTyping ? [] : menu, { wait: 50 });
+
+    return (
+        <div
+            className="flex flex-col items-center justify-center gap-2 w-full h-full overflow-auto"
+            role="menu"
+        >
+            {debouncedMenu.map((item, index) => (
+                <div
+                    key={`choice-${item.choiceIndex}`}
+                    className={
+                        "animate-in fade-in-0 slide-in-from-bottom-[10%] fill-mode-backwards"
+                    }
+                    style={{ animationDelay: `${index * 150}ms` }}
+                >
+                    <Button
+                        disabled={loading}
+                        onClick={() => selectChoice(item)}
+                        size="sm"
+                        variant="secondary"
+                    >
+                        {item.type === "close" && <CornerDownLeft />}
+                        {item.text}
+                    </Button>
+                </div>
+            ))}
+        </div>
+    );
+}