create-pixi-vn 2.0.14 → 2.1.0

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

@@ -7,60 +7,77 @@
   "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/nqtr": "^0.8.2",
-    "@drincs/pixi-vn": "^1.6.4",
-    "@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",
+    "@base-ui/react": "^1.6.0",
+    "@drincs/nqtr": "^1.0.2",
+    "@drincs/pixi-vn": "^1.8.21",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/hotkeys": "^0.8.0",
+    "@tanstack/react-hotkeys": "^0.10.0",
+    "@tanstack/react-pacer": "^0.22.1",
+    "@tanstack/react-query": "latest",
+    "@tanstack/react-router": "latest",
+    "@tanstack/react-store": "latest",
+    "@tanstack/store": "latest",
+    "@unpic/react": "^1.0.2",
+    "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.21.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-lazy-load-image-component": "^1.6.3",
+    "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.3.4",
+    "react-resizable-panels": "^4.11.2",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
+    "shadcn": "^4.11.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",
+    "@tanstack/react-devtools": "^0.10.7",
+    "@tanstack/react-hotkeys-devtools": "^0.7.0",
+    "@tanstack/react-pacer-devtools": "^0.7.1",
+    "@tanstack/react-query-devtools": "latest",
+    "@tanstack/react-router-devtools": "latest",
+    "@tanstack/router-plugin": "latest",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@types/react-lazy-load-image-component": "^1.6.5",
-    "@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.16",
+    "vite-plugin-checker": "0.14.1",
+    "vite-plugin-pwa": "^1.3.0"
   },
   "keywords": [
     "game",
@@ -73,4 +90,4 @@
     "visual-novel",
     "vn"
   ]
-}
+}

package/template-nqtr-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-nqtr-react-vite-muijoy/src/App.tsx

@@ -1,77 +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";
-import { initializeNQTR } from "./utils/nqtr-utility";
-
-const Home = lazy(async () => {
-    await Promise.all([import("./values"), import("./labels")]);
-    await Promise.all([initializeIndexedDB(), defineAssets(), useI18n(), initializeNQTR()]);
-    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-nqtr-react-vite-muijoy/src/assets/index.ts

@@ -0,0 +1,222 @@
+import generatedManifestJson from "@/assets/manifest.gen.json";
+import { AUDIO_BUNDLE_NAME } from "@/constants";
+import { mainMap, nightcityMap } from "@/content/maps";
+import { aliceRoom, annRoom, bathroom, gymRoom, lounge, mcRoom, terrace } from "@/content/rooms";
+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
+        // characters
+        // map
+        {
+            name: mainMap.id,
+            assets: [
+                {
+                    alias: "map-0",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/images/location/map-0.webp",
+                },
+                {
+                    alias: "map-1",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/images/location/map-1.webp",
+                },
+                {
+                    alias: "map-2",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/images/location/map-2.webp",
+                },
+                {
+                    alias: "map-3",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/images/location/map-3.webp",
+                },
+                {
+                    alias: "icon_location_home",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/nqtr_interface/home-00.webp",
+                },
+                {
+                    alias: "icon_location_gym",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/nqtr_interface/gym.webp",
+                },
+            ],
+        },
+        {
+            name: nightcityMap.id,
+            assets: [
+                {
+                    alias: "map-nightcity",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/images/location/nightcity.webp",
+                },
+            ],
+        },
+        // rooms
+        {
+            name: mcRoom.id,
+            assets: [
+                {
+                    alias: "location_myroom-0",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/myroom-0.webp",
+                },
+                {
+                    alias: "location_myroom-1",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/myroom-1.webp",
+                },
+                {
+                    alias: "location_myroom-2",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/myroom-2.webp",
+                },
+                {
+                    alias: "location_myroom-3",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/myroom-3.webp",
+                },
+            ],
+        },
+        {
+            name: aliceRoom.id,
+            assets: [
+                {
+                    alias: "location_aliceroom-0",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/aliceroom-0.webp",
+                },
+                {
+                    alias: "location_aliceroom-1",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/aliceroom-1.webp",
+                },
+                {
+                    alias: "location_aliceroom-2",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/aliceroom-2.webp",
+                },
+                {
+                    alias: "location_aliceroom-3",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/aliceroom-3.webp",
+                },
+            ],
+        },
+        {
+            name: annRoom.id,
+            assets: [
+                {
+                    alias: "location_annroom-0",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/annroom-0.webp",
+                },
+                {
+                    alias: "location_annroom-1",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/annroom-1.webp",
+                },
+                {
+                    alias: "location_annroom-2",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/annroom-2.webp",
+                },
+                {
+                    alias: "location_annroom-3",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/annroom-3.webp",
+                },
+            ],
+        },
+        {
+            name: bathroom.id,
+            assets: [
+                {
+                    alias: "location_bathroom",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/bathroom.webp",
+                },
+            ],
+        },
+        {
+            name: lounge.id,
+            assets: [
+                {
+                    alias: "location_lounge-0",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/lounge-0.webp",
+                },
+                {
+                    alias: "location_lounge-1",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/lounge-1.webp",
+                },
+                {
+                    alias: "location_lounge-2",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/lounge-2.webp",
+                },
+                {
+                    alias: "location_lounge-3",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/lounge-3.webp",
+                },
+            ],
+        },
+        {
+            name: terrace.id,
+            assets: [
+                {
+                    alias: "location_terrace-0",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/terrace-0.webp",
+                },
+                {
+                    alias: "location_terrace-1",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/terrace-1.webp",
+                },
+                {
+                    alias: "location_terrace-2",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/terrace-2.webp",
+                },
+                {
+                    alias: "location_terrace-3",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/terrace-3.webp",
+                },
+            ],
+        },
+        {
+            name: gymRoom.id,
+            assets: [
+                {
+                    alias: "location_gym",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/location/gym.webp",
+                },
+            ],
+        },
+        // alice
+        {
+            name: "alice",
+            assets: [
+                {
+                    alias: "alice_terrace0A",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/Alice/terrace0A.webp",
+                },
+                {
+                    alias: "alice_terrace0At",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/Alice/terrace0At.webp",
+                },
+                {
+                    alias: "alice_roomsleep0A",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/main/game/images/Alice/roomsleep0A.webp",
+                },
+            ],
+        },
+    ],
+};

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

@@ -0,0 +1 @@
+[]

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

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

package/template-nqtr-react-vite-muijoy/src/components/dev-devtools.tsx

@@ -0,0 +1,25 @@
+import { TanStackDevtools } from "@tanstack/react-devtools";
+import { hotkeysDevtoolsPlugin } from "@tanstack/react-hotkeys-devtools";
+import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+
+export default function DevDevtools() {
+    return (
+        <TanStackDevtools
+            config={{
+                position: "bottom-right",
+            }}
+            plugins={[
+                {
+                    name: "UI screens",
+                    render: <TanStackRouterDevtoolsPanel />,
+                },
+                { ...hotkeysDevtoolsPlugin(), name: "Hotkeys" },
+                {
+                    name: "UI cache",
+                    render: <ReactQueryDevtoolsPanel />,
+                },
+            ]}
+        />
+    );
+}

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

@@ -0,0 +1,31 @@
+import { Spinner } from "@/components/ui/spinner";
+import { useEffect, useState } from "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() {
+    return (
+        <span className="inline-flex pointer-events-none select-none">
+            <span className="animate-bounce [animation-delay:0s]">.</span>
+            <span className="animate-bounce [animation-delay:0.2s]">.</span>
+            <span className="animate-bounce [animation-delay:0.4s]">.</span>
+        </span>
+    );
+}
+
+export function DelayedAnimatedDots({ delay = 300 }: { delay?: number }) {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        const id = setTimeout(() => setVisible(true), delay);
+        return () => clearTimeout(id);
+    }, [delay]);
+    return visible ? <AnimatedDots /> : null;
+}

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

@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+import { useChoiceMenuHotkeys } from "@/lib/hooks/hotkeys-hooks";
+import { useNarrationFunctions } from "@/lib/hooks/narration-hooks";
+import { useQueryChoiceMenuOptions } from "@/lib/query/narration-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 });
+    const { menuRef } = useChoiceMenuHotkeys(debouncedMenu.length);
+
+    return (
+        <div
+            ref={menuRef}
+            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
+                        role="menuitem"
+                        disabled={loading}
+                        onClick={() => selectChoice(item)}
+                        size="sm"
+                        variant="secondary"
+                    >
+                        {item.type === "close" && <CornerDownLeft />}
+                        {item.text}
+                    </Button>
+                </div>
+            ))}
+        </div>
+    );
+}