create-pixi-vn 1.6.2 → 1.6.3

package/dist/index.mjs

@@ -6,7 +6,7 @@ import"node:util";import N,{stdin as wu,stdout as $u}from"node:process";import*a
 `).map(r=>fD(r,e,t)).join(`
 `)}const dD=["up","down","left","right","space","enter","cancel"],ru={actions:new Set(dD),aliases:new Map([["k","up"],["j","down"],["h","left"],["l","right"],["","cancel"],["escape","cancel"]])};function pu(D,e){if(typeof D=="string")return ru.aliases.get(D)===e;for(const t of D)if(t!==void 0&&pu(t,e))return!0;return!1}function BD(D,e){if(D===e)return;const t=D.split(`
 `),r=e.split(`
-`),i=[];for(let s=0;s<Math.max(t.length,r.length);s++)t[s]!==r[s]&&i.push(s);return i}const gD=globalThis.process.platform.startsWith("win"),hu=Symbol("clack:cancel");function _(D){return D===hu}function iu(D,e){const t=D;t.isTTY&&t.setRawMode(e)}function bD({input:D=wu,output:e=$u,overwrite:t=!0,hideCursor:r=!0}={}){const i=Du.createInterface({input:D,output:e,prompt:"",tabSize:1});Du.emitKeypressEvents(D,i),D.isTTY&&D.setRawMode(!0);const s=(u,{name:n,sequence:a})=>{const c=String(u);if(pu([c,n,a],"cancel")){r&&e.write(S.cursor.show),process.exit(0);return}if(!t)return;const h=n==="return"?0:-1,F=n==="return"?-1:0;Du.moveCursor(e,h,F,()=>{Du.clearLine(e,1,()=>{D.once("keypress",s)})})};return r&&e.write(S.cursor.hide),D.once("keypress",s),()=>{D.off("keypress",s),r&&e.write(S.cursor.show),D.isTTY&&!gD&&D.setRawMode(!1),i.terminal=!1,i.close()}}var vD=Object.defineProperty,AD=(D,e,t)=>e in D?vD(D,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):D[e]=t,R=(D,e,t)=>(AD(D,typeof e!="symbol"?e+"":e,t),t);let mu=class{constructor(e,t=!0){R(this,"input"),R(this,"output"),R(this,"_abortSignal"),R(this,"rl"),R(this,"opts"),R(this,"_render"),R(this,"_track",!1),R(this,"_prevFrame",""),R(this,"_subscribers",new Map),R(this,"_cursor",0),R(this,"state","initial"),R(this,"error",""),R(this,"value");const{input:r=wu,output:i=$u,render:s,signal:u,...n}=e;this.opts=n,this.onKeypress=this.onKeypress.bind(this),this.close=this.close.bind(this),this.render=this.render.bind(this),this._render=s.bind(this),this._track=t,this._abortSignal=u,this.input=r,this.output=i}unsubscribe(){this._subscribers.clear()}setSubscriber(e,t){const r=this._subscribers.get(e)??[];r.push(t),this._subscribers.set(e,r)}on(e,t){this.setSubscriber(e,{cb:t})}once(e,t){this.setSubscriber(e,{cb:t,once:!0})}emit(e,...t){const r=this._subscribers.get(e)??[],i=[];for(const s of r)s.cb(...t),s.once&&i.push(()=>r.splice(r.indexOf(s),1));for(const s of i)s()}prompt(){return new Promise((e,t)=>{if(this._abortSignal){if(this._abortSignal.aborted)return this.state="cancel",this.close(),e(hu);this._abortSignal.addEventListener("abort",()=>{this.state="cancel",this.close()},{once:!0})}const r=new Xu;r._write=(i,s,u)=>{this._track&&(this.value=this.rl?.line.replace(/\t/g,""),this._cursor=this.rl?.cursor??0,this.emit("value",this.value)),u()},this.input.pipe(r),this.rl=yu.createInterface({input:this.input,output:r,tabSize:2,prompt:"",escapeCodeTimeout:50,terminal:!0}),yu.emitKeypressEvents(this.input,this.rl),this.rl.prompt(),this.opts.initialValue!==void 0&&this._track&&this.rl.write(this.opts.initialValue),this.input.on("keypress",this.onKeypress),iu(this.input,!0),this.output.on("resize",this.render),this.render(),this.once("submit",()=>{this.output.write(S.cursor.show),this.output.off("resize",this.render),iu(this.input,!1),e(this.value)}),this.once("cancel",()=>{this.output.write(S.cursor.show),this.output.off("resize",this.render),iu(this.input,!1),e(hu)})})}onKeypress(e,t){if(this.state==="error"&&(this.state="active"),t?.name&&(!this._track&&ru.aliases.has(t.name)&&this.emit("cursor",ru.aliases.get(t.name)),ru.actions.has(t.name)&&this.emit("cursor",t.name)),e&&(e.toLowerCase()==="y"||e.toLowerCase()==="n")&&this.emit("confirm",e.toLowerCase()==="y"),e==="	"&&this.opts.placeholder&&(this.value||(this.rl?.write(this.opts.placeholder),this.emit("value",this.opts.placeholder))),e&&this.emit("key",e.toLowerCase()),t?.name==="return"){if(!this.value&&this.opts.placeholder&&(this.rl?.write(this.opts.placeholder),this.emit("value",this.opts.placeholder)),this.opts.validate){const r=this.opts.validate(this.value);r&&(this.error=r instanceof Error?r.message:r,this.state="error",this.rl?.write(this.value))}this.state!=="error"&&(this.state="submit")}pu([e,t?.name,t?.sequence],"cancel")&&(this.state="cancel"),(this.state==="submit"||this.state==="cancel")&&this.emit("finalize"),this.render(),(this.state==="submit"||this.state==="cancel")&&this.close()}close(){this.input.unpipe(),this.input.removeListener("keypress",this.onKeypress),this.output.write(`
+`),i=[];for(let s=0;s<Math.max(t.length,r.length);s++)t[s]!==r[s]&&i.push(s);return i}const gD=globalThis.process.platform.startsWith("win"),hu=Symbol("clack:cancel");function _(D){return D===hu}function iu(D,e){const t=D;t.isTTY&&t.setRawMode(e)}function bD({input:D=wu,output:e=$u,overwrite:t=!0,hideCursor:r=!0}={}){const i=Du.createInterface({input:D,output:e,prompt:"",tabSize:1});Du.emitKeypressEvents(D,i),D.isTTY&&D.setRawMode(!0);const s=(u,{name:n,sequence:a})=>{const c=String(u);if(pu([c,n,a],"cancel")){r&&e.write(S.cursor.show),process.exit(0);return}if(!t)return;const h=n==="return"?0:-1,F=n==="return"?-1:0;Du.moveCursor(e,h,F,()=>{Du.clearLine(e,1,()=>{D.once("keypress",s)})})};return r&&e.write(S.cursor.hide),D.once("keypress",s),()=>{D.off("keypress",s),r&&e.write(S.cursor.show),D.isTTY&&!gD&&D.setRawMode(!1),i.terminal=!1,i.close()}}var vD=Object.defineProperty,AD=(D,e,t)=>e in D?vD(D,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):D[e]=t,R=(D,e,t)=>(AD(D,typeof e!="symbol"?e+"":e,t),t);let mu=class{constructor(e,t=!0){R(this,"input"),R(this,"output"),R(this,"_abortSignal"),R(this,"rl"),R(this,"opts"),R(this,"_render"),R(this,"_track",!1),R(this,"_prevFrame",""),R(this,"_subscribers",new Map),R(this,"_cursor",0),R(this,"state","initial"),R(this,"error",""),R(this,"value");const{input:r=wu,output:i=$u,render:s,signal:u,...n}=e;this.opts=n,this.onKeypress=this.onKeypress.bind(this),this.close=this.close.bind(this),this.render=this.render.bind(this),this._render=s.bind(this),this._track=t,this._abortSignal=u,this.input=r,this.output=i}unsubscribe(){this._subscribers.clear()}setSubscriber(e,t){const r=this._subscribers.get(e)??[];r.push(t),this._subscribers.set(e,r)}on(e,t){this.setSubscriber(e,{cb:t})}once(e,t){this.setSubscriber(e,{cb:t,once:!0})}emit(e,...t){const r=this._subscribers.get(e)??[],i=[];for(const s of r)s.cb(...t),s.once&&i.push(()=>r.splice(r.indexOf(s),1));for(const s of i)s()}prompt(){return new Promise((e,t)=>{if(this._abortSignal){if(this._abortSignal.aborted)return this.state="cancel",this.close(),e(hu);this._abortSignal.addEventListener("abort",()=>{this.state="cancel",this.close()},{once:!0})}const r=new Xu;r._write=(i,s,u)=>{this._track&&(this.value=this.rl?.line.replace(/\t/g,""),this._cursor=this.rl?.cursor??0,this.emit("value",this.value)),u()},this.input.pipe(r),this.rl=yu.createInterface({input:this.input,output:r,tabSize:2,prompt:"",escapeCodeTimeout:50,terminal:!0}),yu.emitKeypressEvents(this.input,this.rl),this.rl.prompt(),this.opts.initialValue!==void 0&&this._track&&this.rl.write(this.opts.initialValue),this.input.on("keypress",this.onKeypress),iu(this.input,!0),this.output.on("resize",this.render),this.render(),this.once("submit",()=>{this.output.write(S.cursor.show),this.output.off("resize",this.render),iu(this.input,!1),e(this.value)}),this.once("cancel",()=>{this.output.write(S.cursor.show),this.output.off("resize",this.render),iu(this.input,!1),e(hu)})})}onKeypress(e,t){if(this.state==="error"&&(this.state="active"),t?.name&&(!this._track&&ru.aliases.has(t.name)&&this.emit("cursor",ru.aliases.get(t.name)),ru.actions.has(t.name)&&this.emit("cursor",t.name)),e&&(e.toLowerCase()==="y"||e.toLowerCase()==="n")&&this.emit("confirm",e.toLowerCase()==="y"),e==="	"&&this.opts.placeholder&&(this.value||(this.rl?.write(this.opts.placeholder),this.emit("value",this.opts.placeholder))),e&&this.emit("key",e.toLowerCase()),t?.name==="return"){if(this.opts.validate){const r=this.opts.validate(this.value);r&&(this.error=r instanceof Error?r.message:r,this.state="error",this.rl?.write(this.value))}this.state!=="error"&&(this.state="submit")}pu([e,t?.name,t?.sequence],"cancel")&&(this.state="cancel"),(this.state==="submit"||this.state==="cancel")&&this.emit("finalize"),this.render(),(this.state==="submit"||this.state==="cancel")&&this.close()}close(){this.input.unpipe(),this.input.removeListener("keypress",this.onKeypress),this.output.write(`
 `),iu(this.input,!1),this.rl?.close(),this.rl=void 0,this.emit(`${this.state}`,this.value),this.unsubscribe()}restoreCursor(){const e=Uu(this._prevFrame,process.stdout.columns,{hard:!0}).split(`
 `).length-1;this.output.write(S.cursor.move(-999,e*-1))}render(){const e=Uu(this._render(this)??"",process.stdout.columns,{hard:!0});if(e!==this._prevFrame){if(this.state==="initial")this.output.write(S.cursor.hide);else{const t=BD(this._prevFrame,e);if(this.restoreCursor(),t&&t?.length===1){const r=t[0];this.output.write(S.cursor.move(0,r)),this.output.write(S.erase.lines(1));const i=e.split(`
 `);this.output.write(i[r]),this._prevFrame=e,this.output.write(S.cursor.move(0,i.length-r-1));return}if(t&&t?.length>1){const r=t[0];this.output.write(S.cursor.move(0,r)),this.output.write(S.erase.down());const i=e.split(`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-pixi-vn",
   "description": "Create a new Pixi’VN project",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "type": "module",
   "license": "GPL-3.0",
   "author": "DRincs-Productions",
@@ -47,16 +47,16 @@
   "homepage": "https://pixi-vn.web.app/",
   "funding": "https://github.com/DRincs-Productions/pixi-vn?sponsor=1",
   "devDependencies": {
-    "@clack/prompts": "^0.10.1",
+    "@clack/prompts": "^0.11.0",
     "@types/minimist": "^1.2.5",
     "@types/which": "^3.0.4",
-    "inquirer": "^12.6.0",
+    "inquirer": "^12.8.0",
     "kolorist": "^1.8.0",
     "minimist": "^1.2.8",
     "unbuild": "^3.5.0"
   },
   "dependencies": {
-    "execa": "^9.5.3",
+    "execa": "^9.6.0",
     "which": "^5.0.0"
   }
 }

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

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@drincs/nqtr": "^0.5.5",
-    "@drincs/pixi-vn": "^1.2.22",
+    "@drincs/pixi-vn": "^1.2.23",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.2.0",

package/template-nqtr-react-vite-muijoy/src/hooks/useNQTRDetector.tsx

@@ -19,6 +19,7 @@ export default function useNQTRDetector() {
 
     useEffect(() => {
         const { background } = currentRoom || {};
+        canvas.removeAll();
         if (background) {
             let image = convertMultiTypeSprite(background, gameProps);
             let layer = canvas.getLayer(CANVAS_UI_LAYER_NAME);

package/template-nqtr-react-vite-muijoy/src/hooks/useQueryNQTR.ts

@@ -7,12 +7,16 @@ import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";
 
 function getRoomInfo(room: RoomInterface) {
     const routine = room.routine;
-    const background = routine.length > 0 ? routine[0].background : room.background;
+    let background = room.background;
     let icon: string | TimeSlotsImage | undefined;
     if (typeof background === "string" || background instanceof TimeSlotsImage) {
         icon = background;
     }
 
+    if (routine.length > 0 && routine[0].background) {
+        background = routine[0].background;
+    }
+
     return {
         id: room.id,
         background: background,
@@ -52,10 +56,10 @@ export function useQueryCurrentRoomId() {
 
 const QUICK_ROOMS_USE_QUEY_KEY = "quick_rooms_use_quey_key";
 export function useQueryQuickRooms() {
-    const rooms = navigator.currentLocation?.rooms || [];
     return useQuery({
         queryKey: [INTERFACE_DATA_USE_QUEY_KEY, QUICK_ROOMS_USE_QUEY_KEY],
         queryFn: async () => {
+            const rooms = navigator.currentLocation?.rooms || [];
             const loadRoomsImage = async () => {
                 rooms?.forEach((room) => {
                     Assets.backgroundLoadBundle(room.id);

package/template-nqtr-react-vite-muijoy/src/models/nqtr/Activity.ts

@@ -9,7 +9,7 @@ export default class Activity extends ActivityStoredClass implements ActivityInt
         props: {
             name?: string;
             sprite?: MultiTypeSpriteProp<Activity>;
-            icon: ReactElement | ((props: Activity, runProps: OnRunProps) => ReactElement);
+            icon?: ReactElement | ((props: Activity, runProps: OnRunProps) => ReactElement);
             disabled?: boolean | (() => boolean);
             hidden?: boolean | (() => boolean);
         } & ActivityStoredClassProps
@@ -24,15 +24,15 @@ export default class Activity extends ActivityStoredClass implements ActivityInt
     readonly name: string;
     private readonly _sprite?: MultiTypeSpriteProp<Activity>;
     get sprite(): MultiTypeSprite | undefined {
-        let sprite = this._sprite;
+        const sprite = this._sprite;
         if (typeof sprite === "function") {
             return (runProps: OnRunProps) => sprite(this, runProps);
         }
         return sprite;
     }
-    private readonly _icon: ReactElement | ((props: Activity, runProps: OnRunProps) => ReactElement);
-    get icon(): ReactElement | ((props: OnRunProps) => ReactElement) {
-        let icon = this._icon;
+    private readonly _icon?: ReactElement | ((props: Activity, runProps: OnRunProps) => ReactElement);
+    get icon(): ReactElement | ((props: OnRunProps) => ReactElement) | undefined {
+        const icon = this._icon;
         if (typeof icon === "function") {
             return (runProps: OnRunProps) => icon(this, runProps);
         }

package/template-nqtr-react-vite-muijoy/src/screens/MainMenu.tsx

@@ -2,7 +2,7 @@ import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
 import Stack from "@mui/joy/Stack";
 import { useQueryClient } from "@tanstack/react-query";
 import { motion } from "motion/react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import MenuButton from "../components/MenuButton";
 import { CANVAS_UI_LAYER_NAME } from "../constans";
 import useGameProps from "../hooks/useGameProps";
@@ -22,6 +22,7 @@ export default function MainMenu() {
     const { data: lastSave = null, isLoading } = useQueryLastSave();
     const gameProps = useGameProps();
     const { uiTransition: t, navigate, notify } = gameProps;
+    const [loading, setLoading] = useState(false);
 
     useEffect(() => {
         editHideInterface(false);
@@ -58,31 +59,36 @@ export default function MainMenu() {
                     if (!lastSave) {
                         return;
                     }
+                    setLoading(true);
                     loadSave(lastSave, navigate)
                         .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
                         .catch((e) => {
                             notify(t("fail_load"), { variant: "error" });
                             console.error(e);
-                        });
+                        })
+                        .finally(() => setLoading(false));
                 }}
                 transitionDelay={0.1}
                 loading={isLoading}
-                disabled={!isLoading && !lastSave}
+                disabled={!isLoading && !lastSave && !loading}
             >
                 {t("continue")}
             </MenuButton>
             <MenuButton
-                onClick={() => {
+                onClick={async () => {
+                    setLoading(true);
                     canvas.removeAll();
-                    narration.callLabel(startLabel, gameProps).then(() => {
-                        queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
-                    });
+                    narration
+                        .callLabel(startLabel, gameProps)
+                        .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
+                        .finally(() => setLoading(false));
                 }}
                 transitionDelay={0.2}
+                disabled={loading}
             >
                 {t("start")}
             </MenuButton>
-            <MenuButton onClick={editSaveScreen} transitionDelay={0.3}>
+            <MenuButton onClick={editSaveScreen} transitionDelay={0.3} disabled={loading}>
                 {t("load")}
             </MenuButton>
             <MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>

package/template-nqtr-react-vite-muijoy/src/utils/save-utility.ts

@@ -24,7 +24,7 @@ export function getSave(image?: string): GameSaveData {
 }
 
 export async function loadSave(saveData: GameSaveData, navigate: NavigateFunction) {
-    navigate(LOADING_ROUTE);
+    await navigate(LOADING_ROUTE);
     // load the save data from the JSON string
     await Game.restoreGameState(saveData.saveData, navigate);
 }

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

@@ -11,7 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@drincs/pixi-vn": "^1.2.22",
+    "@drincs/pixi-vn": "^1.2.23",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.2.0",

package/template-react-vite-muijoy/src/screens/MainMenu.tsx

@@ -2,7 +2,7 @@ import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
 import Stack from "@mui/joy/Stack";
 import { useQueryClient } from "@tanstack/react-query";
 import { motion } from "motion/react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import MenuButton from "../components/MenuButton";
 import { CANVAS_UI_LAYER_NAME, NARRATION_ROUTE } from "../constans";
 import useGameProps from "../hooks/useGameProps";
@@ -22,6 +22,7 @@ export default function MainMenu() {
     const { data: lastSave = null, isLoading } = useQueryLastSave();
     const gameProps = useGameProps();
     const { uiTransition: t, navigate, notify } = gameProps;
+    const [loading, setLoading] = useState(false);
 
     useEffect(() => {
         editHideInterface(false);
@@ -58,32 +59,37 @@ export default function MainMenu() {
                     if (!lastSave) {
                         return;
                     }
+                    setLoading(true);
                     loadSave(lastSave, navigate)
                         .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
                         .catch((e) => {
                             notify(t("fail_load"), { variant: "error" });
                             console.error(e);
-                        });
+                        })
+                        .finally(() => setLoading(false));
                 }}
                 transitionDelay={0.1}
                 loading={isLoading}
-                disabled={!isLoading && !lastSave}
+                disabled={!isLoading && !lastSave && !loading}
             >
                 {t("continue")}
             </MenuButton>
             <MenuButton
-                onClick={() => {
+                onClick={async () => {
+                    setLoading(true);
                     canvas.removeAll();
-                    narration.callLabel(startLabel, gameProps).then(() => {
-                        queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
-                        navigate(NARRATION_ROUTE);
-                    });
+                    await navigate(NARRATION_ROUTE);
+                    narration
+                        .callLabel(startLabel, gameProps)
+                        .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
+                        .finally(() => setLoading(false));
                 }}
                 transitionDelay={0.2}
+                disabled={loading}
             >
                 {t("start")}
             </MenuButton>
-            <MenuButton onClick={editSaveScreen} transitionDelay={0.3}>
+            <MenuButton onClick={editSaveScreen} transitionDelay={0.3} disabled={loading}>
                 {t("load")}
             </MenuButton>
             <MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>

package/template-react-vite-muijoy/src/utils/save-utility.ts

@@ -24,7 +24,7 @@ export function getSave(image?: string): GameSaveData {
 }
 
 export async function loadSave(saveData: GameSaveData, navigate: NavigateFunction) {
-    navigate(LOADING_ROUTE);
+    await navigate(LOADING_ROUTE);
     // load the save data from the JSON string
     await Game.restoreGameState(saveData.saveData, navigate);
 }

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

@@ -11,7 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@drincs/pixi-vn": "^1.2.22",
+    "@drincs/pixi-vn": "^1.2.23",
     "@drincs/pixi-vn-ink": "^0.7.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",

package/template-react-vite-muijoy-ink/src/screens/MainMenu.tsx

@@ -2,7 +2,7 @@ import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
 import Stack from "@mui/joy/Stack";
 import { useQueryClient } from "@tanstack/react-query";
 import { motion } from "motion/react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import MenuButton from "../components/MenuButton";
 import { CANVAS_UI_LAYER_NAME, NARRATION_ROUTE } from "../constans";
 import useGameProps from "../hooks/useGameProps";
@@ -21,6 +21,7 @@ export default function MainMenu() {
     const { data: lastSave = null, isLoading } = useQueryLastSave();
     const gameProps = useGameProps();
     const { uiTransition: t, navigate, notify } = gameProps;
+    const [loading, setLoading] = useState(false);
 
     useEffect(() => {
         editHideInterface(false);
@@ -57,32 +58,37 @@ export default function MainMenu() {
                     if (!lastSave) {
                         return;
                     }
+                    setLoading(true);
                     loadSave(lastSave, navigate)
                         .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
                         .catch((e) => {
                             notify(t("fail_load"), { variant: "error" });
                             console.error(e);
-                        });
+                        })
+                        .finally(() => setLoading(false));
                 }}
                 transitionDelay={0.1}
                 loading={isLoading}
-                disabled={!isLoading && !lastSave}
+                disabled={!isLoading && !lastSave && !loading}
             >
                 {t("continue")}
             </MenuButton>
             <MenuButton
-                onClick={() => {
+                onClick={async () => {
+                    setLoading(true);
                     canvas.removeAll();
-                    narration.callLabel("start", gameProps).then(() => {
-                        queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
-                        navigate(NARRATION_ROUTE);
-                    });
+                    await navigate(NARRATION_ROUTE);
+                    narration
+                        .callLabel("start", gameProps)
+                        .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
+                        .finally(() => setLoading(false));
                 }}
                 transitionDelay={0.2}
+                disabled={loading}
             >
                 {t("start")}
             </MenuButton>
-            <MenuButton onClick={editSaveScreen} transitionDelay={0.3}>
+            <MenuButton onClick={editSaveScreen} transitionDelay={0.3} disabled={loading}>
                 {t("load")}
             </MenuButton>
             <MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>

package/template-react-vite-muijoy-ink/src/utils/save-utility.ts

@@ -24,7 +24,7 @@ export function getSave(image?: string): GameSaveData {
 }
 
 export async function loadSave(saveData: GameSaveData, navigate: NavigateFunction) {
-    navigate(LOADING_ROUTE);
+    await navigate(LOADING_ROUTE);
     // load the save data from the JSON string
     await Game.restoreGameState(saveData.saveData, navigate);
 }

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

@@ -12,7 +12,7 @@
 	  "tauri": "tauri"
   },
   "dependencies": {
-    "@drincs/pixi-vn": "^1.2.22",
+    "@drincs/pixi-vn": "^1.2.23",
     "@drincs/pixi-vn-ink": "^0.7.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",

package/template-react-vite-muijoy-ink-tauri/src/screens/MainMenu.tsx

@@ -2,7 +2,7 @@ import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
 import Stack from "@mui/joy/Stack";
 import { useQueryClient } from "@tanstack/react-query";
 import { motion } from "motion/react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import MenuButton from "../components/MenuButton";
 import { CANVAS_UI_LAYER_NAME, NARRATION_ROUTE } from "../constans";
 import useGameProps from "../hooks/useGameProps";
@@ -21,6 +21,7 @@ export default function MainMenu() {
     const { data: lastSave = null, isLoading } = useQueryLastSave();
     const gameProps = useGameProps();
     const { uiTransition: t, navigate, notify } = gameProps;
+    const [loading, setLoading] = useState(false);
 
     useEffect(() => {
         editHideInterface(false);
@@ -57,32 +58,37 @@ export default function MainMenu() {
                     if (!lastSave) {
                         return;
                     }
+                    setLoading(true);
                     loadSave(lastSave, navigate)
                         .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
                         .catch((e) => {
                             notify(t("fail_load"), { variant: "error" });
                             console.error(e);
-                        });
+                        })
+                        .finally(() => setLoading(false));
                 }}
                 transitionDelay={0.1}
                 loading={isLoading}
-                disabled={!isLoading && !lastSave}
+                disabled={!isLoading && !lastSave && !loading}
             >
                 {t("continue")}
             </MenuButton>
             <MenuButton
-                onClick={() => {
+                onClick={async () => {
+                    setLoading(true);
                     canvas.removeAll();
-                    narration.callLabel("start", gameProps).then(() => {
-                        queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
-                        navigate(NARRATION_ROUTE);
-                    });
+                    await navigate(NARRATION_ROUTE);
+                    narration
+                        .callLabel("start", gameProps)
+                        .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
+                        .finally(() => setLoading(false));
                 }}
                 transitionDelay={0.2}
+                disabled={loading}
             >
                 {t("start")}
             </MenuButton>
-            <MenuButton onClick={editSaveScreen} transitionDelay={0.3}>
+            <MenuButton onClick={editSaveScreen} transitionDelay={0.3} disabled={loading}>
                 {t("load")}
             </MenuButton>
             <MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>

package/template-react-vite-muijoy-ink-tauri/src/utils/save-utility.ts

@@ -24,7 +24,7 @@ export function getSave(image?: string): GameSaveData {
 }
 
 export async function loadSave(saveData: GameSaveData, navigate: NavigateFunction) {
-    navigate(LOADING_ROUTE);
+    await navigate(LOADING_ROUTE);
     // load the save data from the JSON string
     await Game.restoreGameState(saveData.saveData, navigate);
 }

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

@@ -12,7 +12,7 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "@drincs/pixi-vn": "^1.2.22",
+    "@drincs/pixi-vn": "^1.2.23",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.2.0",

package/template-react-vite-muijoy-tauri/src/screens/MainMenu.tsx

@@ -2,7 +2,7 @@ import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
 import Stack from "@mui/joy/Stack";
 import { useQueryClient } from "@tanstack/react-query";
 import { motion } from "motion/react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import MenuButton from "../components/MenuButton";
 import { CANVAS_UI_LAYER_NAME, NARRATION_ROUTE } from "../constans";
 import useGameProps from "../hooks/useGameProps";
@@ -22,6 +22,7 @@ export default function MainMenu() {
     const { data: lastSave = null, isLoading } = useQueryLastSave();
     const gameProps = useGameProps();
     const { uiTransition: t, navigate, notify } = gameProps;
+    const [loading, setLoading] = useState(false);
 
     useEffect(() => {
         editHideInterface(false);
@@ -58,32 +59,37 @@ export default function MainMenu() {
                     if (!lastSave) {
                         return;
                     }
+                    setLoading(true);
                     loadSave(lastSave, navigate)
                         .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
                         .catch((e) => {
                             notify(t("fail_load"), { variant: "error" });
                             console.error(e);
-                        });
+                        })
+                        .finally(() => setLoading(false));
                 }}
                 transitionDelay={0.1}
                 loading={isLoading}
-                disabled={!isLoading && !lastSave}
+                disabled={!isLoading && !lastSave && !loading}
             >
                 {t("continue")}
             </MenuButton>
             <MenuButton
-                onClick={() => {
+                onClick={async () => {
+                    setLoading(true);
                     canvas.removeAll();
-                    narration.callLabel(startLabel, gameProps).then(() => {
-                        queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
-                        navigate(NARRATION_ROUTE);
-                    });
+                    await navigate(NARRATION_ROUTE);
+                    narration
+                        .callLabel(startLabel, gameProps)
+                        .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
+                        .finally(() => setLoading(false));
                 }}
                 transitionDelay={0.2}
+                disabled={loading}
             >
                 {t("start")}
             </MenuButton>
-            <MenuButton onClick={editSaveScreen} transitionDelay={0.3}>
+            <MenuButton onClick={editSaveScreen} transitionDelay={0.3} disabled={loading}>
                 {t("load")}
             </MenuButton>
             <MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>

package/template-react-vite-muijoy-tauri/src/utils/save-utility.ts

@@ -24,7 +24,7 @@ export function getSave(image?: string): GameSaveData {
 }
 
 export async function loadSave(saveData: GameSaveData, navigate: NavigateFunction) {
-    navigate(LOADING_ROUTE);
+    await navigate(LOADING_ROUTE);
     // load the save data from the JSON string
     await Game.restoreGameState(saveData.saveData, navigate);
 }