create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-ink/src/routes/game.tsx

@@ -0,0 +1,22 @@
+import { InputRequestDialog } from "@/components/modals/input-request-dialogues";
+import { QuickActionsWheel } from "@/components/modals/quick-actions-wheel";
+import { useGameHotkeys } from "@/lib/hooks/hotkeys-hooks";
+import { usePauseGameWhenMenuIsOpen } from "@/lib/hooks/pause-game-hooks";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/game")({
+    component: GameElement,
+});
+
+function GameElement() {
+    usePauseGameWhenMenuIsOpen();
+    useGameHotkeys();
+
+    return (
+        <>
+            <InputRequestDialog />
+            <QuickActionsWheel />
+            <Outlet />
+        </>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/routes/index.tsx

@@ -0,0 +1,6 @@
+import { MainMenu } from "@/components/menus/main-menu";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+    component: MainMenu,
+});

package/template-nqtr-react-vite-muijoy-ink/src/styles.css

@@ -0,0 +1,155 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "tailwind-animations";
+
+@custom-variant dark (&:is(.dark *));
+@plugin "@tailwindcss/typography";
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+html,
+body {
+  background-color: #242424;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  overflow: hidden;
+}
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --font-sans: "Geist Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
+
+@layer components {
+  [data-slot="button"],
+  [data-slot="card"],
+  [data-slot="resizable-handle"],
+  [data-slot="scroll-area"],
+  [data-slot="scroll-area-scrollbar"],
+  [data-slot="toggle"] {
+    pointer-events: auto;
+  }
+}

package/template-nqtr-react-vite-muijoy-ink/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "allowSyntheticDefaultImports": true,
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

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

@@ -1,27 +1,12 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "experimentalDecorators": true,
-    "useDefineForClassFields": true,
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "allowSyntheticDefaultImports": true,
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }

package/template-nqtr-react-vite-muijoy-ink/tsconfig.node.json

@@ -1,11 +1,28 @@
 {
   "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
     "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
-    "strict": true
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
   },
   "include": ["vite.config.ts"]
 }

package/template-nqtr-react-vite-muijoy-ink/vite.config.ts

@@ -1,23 +1,70 @@
+import { AssetPack } from "@assetpack/core";
+import { vitePluginNqtr } from "@drincs/nqtr/vite";
 import { vitePluginInk } from "@drincs/pixi-vn-ink/vite";
+import type { AssetsManifest } from "@drincs/pixi-vn/pixi.js";
 import { vitePluginPixivn } from "@drincs/pixi-vn/vite";
 import tailwindcss from "@tailwindcss/vite";
+import { devtools } from "@tanstack/devtools-vite";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-import checker from "vite-plugin-checker";
+import { defineConfig, type Plugin, type ResolvedConfig } from "vite";
+import { checker } from "vite-plugin-checker";
 import { VitePWA } from "vite-plugin-pwa";
+import assetPackConfig from "./.assetpack.ts";
+
+/**
+ * List of external hostnames whose responses should be cached by the service worker.
+ * Add any CDN or remote asset host here to enable offline caching for it.
+ * Examples:
+ *   "cdn.jsdelivr.net"
+ *   "your.cdn.domain.com"
+ */
+const CACHED_EXTERNAL_HOSTNAMES: string[] = ["raw.githubusercontent.com"];
 
 // https://vite.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
     plugins: [
-        react(),
+        assetpackPlugin(),
         checker({
-            typescript: true,
+            typescript: {
+                tsconfigPath: "tsconfig.app.json",
+            },
         }),
+        mode !== "production" && devtools(),
+        tanstackRouter({ target: "react", autoCodeSplitting: true }),
+        react(),
         tailwindcss(),
+        vitePluginPixivn({
+            content: "./src/content/index.ts",
+            characters: "./src/content/characters.ts",
+            labels: "./src/content/labels/*.label.ts",
+            typeFilePath: "./src/pixi-vn.keys.gen.ts",
+            assetsManifest: async (ssrLoadModule) => {
+                const mod = (await ssrLoadModule("/src/assets/index.ts")) as {
+                    manifest: AssetsManifest;
+                };
+                if (!mod.manifest)
+                    throw new Error("Assets manifest not found in /src/assets/index.ts");
+                return mod.manifest;
+            },
+        }),
+        vitePluginNqtr({
+            activities: "./src/content/activities.tsx",
+            commitments: "./src/content/routine.tsx",
+            rooms: "./src/content/rooms.tsx",
+            locations: "./src/content/locations.tsx",
+            maps: "./src/content/maps.tsx",
+            quests: "./src/content/quests/*.quest.tsx",
+            typeFilePath: "./src/nqtr.keys.gen.ts",
+        }),
+        vitePluginInk({
+            inkGlob: "./ink/**/*.ink",
+            inkJsonOutputPattern: "./public/ink-json/[path][name].gen.json",
+            inkJsonManifestPath: "./src/assets/ink-manifest.gen.json",
+        }),
         VitePWA({
-            // you can generate the icons using: https://favicon.io/favicon-converter/
-            // and the maskable icon using: https://progressier.com/maskable-icons-editor
-            includeAssets: ["favicon.ico", "apple-touch-icon.png", "mask-icon.svg"],
+            // generate icons with: npm run icon
+            includeAssets: ["favicon.ico", "apple-touch-icon-180x180.png"],
             manifest: {
                 name: "my-app-project-name",
                 short_name: "my-app-package-name",
@@ -25,7 +72,7 @@ export default defineConfig({
                 theme_color: "#ffffff",
                 start_url: "/",
                 display: "fullscreen",
-                orientation: "portrait",
+                orientation: "landscape",
                 icons: [
                     {
                         src: "pwa-192x192.png",
@@ -37,13 +84,37 @@ export default defineConfig({
                         sizes: "512x512",
                         type: "image/png",
                     },
+                    {
+                        src: "maskable-icon-512x512.png",
+                        sizes: "512x512",
+                        type: "image/png",
+                        purpose: "maskable",
+                    },
+                ],
+            },
+            workbox: {
+                runtimeCaching: [
+                    {
+                        urlPattern: ({ url }) => CACHED_EXTERNAL_HOSTNAMES.includes(url.hostname),
+                        handler: "CacheFirst",
+                        options: {
+                            cacheName: "external-assets-v1",
+                            cacheableResponse: {
+                                statuses: [0, 200],
+                            },
+                            expiration: {
+                                maxAgeSeconds: 7 * 24 * 60 * 60,
+                            },
+                        },
+                    },
                 ],
             },
         }),
-        vitePluginPixivn(),
-        vitePluginInk(),
     ],
-    assetsInclude: ["**/ink/*.ink"],
+    resolve: {
+        tsconfigPaths: true,
+        preserveSymlinks: true,
+    },
     define: {
         __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
         __APP_NAME__: JSON.stringify(process.env.npm_package_name),
@@ -52,14 +123,50 @@ export default defineConfig({
         rollupOptions: {
             output: {
                 manualChunks(id) {
-                    if (id.includes("react-markdown") || id.includes("rehype-raw") || id.includes("remark-gfm"))
-                        return "react-markdown";
-                    if (id.includes("@pixi/sound")) return "sound";
+                    if (
+                        id.includes("react-markdown") ||
+                        id.includes("rehype-raw") ||
+                        id.includes("remark-gfm")
+                    )
+                        return "markdown";
+                    if (id.includes("tone")) return "tone";
                     if (id.includes("@drincs/pixi-vn-spine")) return "spine";
                     if (id.includes("pixi.js")) return "pixi.js";
+                    if (id.includes("motion")) return "motion";
                     if (id.includes("@drincs/pixi-vn")) return "pixi-vn";
                 },
             },
         },
     },
-});
+}));
+
+function assetpackPlugin(): Plugin {
+    let mode: ResolvedConfig["command"];
+    let ap: AssetPack | undefined;
+
+    return {
+        name: "vite-plugin-assetpack",
+        configResolved(resolvedConfig) {
+            mode = resolvedConfig.command;
+            if (!resolvedConfig.publicDir) return;
+            if (assetPackConfig.output) return;
+            const publicDir = resolvedConfig.publicDir.replace(process.cwd(), "");
+            assetPackConfig.output = `.${publicDir}/assets/`;
+        },
+        buildStart: async () => {
+            if (mode === "serve") {
+                if (ap) return;
+                ap = new AssetPack(assetPackConfig);
+                void ap.watch();
+            } else {
+                await new AssetPack(assetPackConfig).run();
+            }
+        },
+        buildEnd: async () => {
+            if (ap) {
+                await ap.stop();
+                ap = undefined;
+            }
+        },
+    };
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/.assetpack.ts

@@ -0,0 +1,27 @@
+import type { AssetPackConfig } from "@assetpack/core";
+import { pixiPipes } from "@assetpack/core/pixi";
+
+// TAURI_ENV_TARGET_TRIPLE is set by `tauri build` before running beforeBuildCommand
+const isTauri = !!process.env.TAURI_ENV_TARGET_TRIPLE;
+
+const config: AssetPackConfig = {
+    entry: "./src/assets",
+    output: "./public/assets",
+    ignore: ["**/*.ts", "**/*.js", "**/*.gen.*"],
+    pipes: [
+        ...pixiPipes({
+            manifest: {
+                output: "src/assets/manifest.gen.json",
+                createShortcuts: true,
+            },
+            // For Tauri: skip @0.5x mipmaps (unused on desktop, WebView handles DPR)
+            resolutions: isTauri ? { default: 1 } : undefined,
+            // For Tauri: raise WebP quality — files are local so bandwidth is not a concern
+            compression: isTauri
+                ? { png: true, jpg: true, webp: { quality: 88, alphaQuality: 88 } }
+                : undefined,
+        }),
+    ],
+};
+
+export default config;

package/template-nqtr-react-vite-muijoy-ink-tauri/.vscode/extensions.json

@@ -1,13 +1,12 @@
-{
-    "recommendations": [
-        "ms-vscode.vscode-typescript-next",
-        "dbaeumer.vscode-eslint",
-        "anseki.vscode-color",
-        "pflannery.vscode-versionlens",
-        "esbenp.prettier-vscode",
-        "drincs-productions.pixi-vn-ink-vscode",
-        "tauri-apps.tauri-vscode",
-        "rust-lang.rust-analyzer",
-        "vadimcn.vscode-lldb"
-    ]
-}
+{
+  "recommendations": [
+    "ms-vscode.vscode-typescript-next",
+    "anseki.vscode-color",
+    "pflannery.vscode-versionlens",
+    "biomejs.biome",
+    "drincs-productions.pixi-vn-ink-vscode",
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer",
+    "vadimcn.vscode-lldb"
+  ]
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/.vscode/launch.json

@@ -1,44 +1,41 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    // bash: https://docs.microsoft.com/it-it/windows/dev-environment/javascript/nodejs-on-wsl
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Launch Chrome localhost 1420",
-            "request": "launch",
-            "type": "chrome",
-            "url": "http://localhost:1420",
-            "webRoot": "${workspaceFolder}",
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Tauri Development Debug",
-            "cargo": {
-                "args": [
-                    "build",
-                    "--manifest-path=./src-tauri/Cargo.toml",
-                    "--no-default-features"
-                ]
-            },
-            // task for the `beforeDevCommand` if used, must be configured in `.vscode/tasks.json`
-            "preLaunchTask": "ui:dev"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Tauri Production Debug",
-            "cargo": {
-                "args": [
-                    "build",
-                    "--release",
-                    "--manifest-path=./src-tauri/Cargo.toml"
-                ]
-            },
-            // task for the `beforeBuildCommand` if used, must be configured in `.vscode/tasks.json`
-            "preLaunchTask": "ui:build"
-        }
-    ]
-}
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Game",
+      "request": "launch",
+      "type": "editor-browser",
+      "url": "http://localhost:5173",
+      "webRoot": "${workspaceFolder}",
+      "preLaunchTask": "Restart Vite Dev Server"
+    },
+    {
+      "name": "Debug Game (Chrome)",
+      "request": "launch",
+      "type": "chrome",
+      "url": "http://localhost:5173",
+      "webRoot": "${workspaceFolder}",
+      "preLaunchTask": "Restart Vite Dev Server"
+    },
+    {
+      "type": "lldb",
+      "request": "launch",
+      "name": "Run as Desktop App (Dev)",
+      "program": "${workspaceFolder}/src-tauri/target/debug/my-app-package-name",
+      "args": [],
+      "cwd": "${workspaceFolder}",
+      "terminal": "console",
+      "preLaunchTask": "Cargo Build (Desktop Dev)",
+      "postDebugTask": "Stop Vite Desktop Server"
+    },
+    {
+      "name": "Debug Game Preview",
+      "request": "launch",
+      "type": "editor-browser",
+      "url": "http://localhost:4173",
+      "webRoot": "${workspaceFolder}",
+      "preLaunchTask": "Start Vite Preview Server",
+      "postDebugTask": "Stop Vite Preview Server"
+    }
+  ]
+}