create-pixi-vn 1.6.0 → 1.6.2

package/dist/index.mjs

@@ -45,7 +45,7 @@ ${o.gray(K)}  ${D}
 `);let k=0,b=0;f(),s=setInterval(()=>{if(r&&n===a)return;E(),a=n;const p=o.magenta(e[k]);if(r)process.stdout.write(`${p}  ${n}...`);else if(D==="timer")process.stdout.write(`${p}  ${n} ${T(c)}`);else{const $=".".repeat(Math.floor(b)).slice(0,3);process.stdout.write(`${p}  ${n}${$}`)}k=k+1<e.length?k+1:0,b=b<e.length?b+.125:0},t)},Y=(B="",k=0)=>{u=!1,clearInterval(s),E();const b=k===0?o.green(du):k===1?o.red(Wu):o.red(zu);n=l(B??n),D==="timer"?process.stdout.write(`${b}  ${n} ${T(c)}
 `):process.stdout.write(`${b}  ${n}
 `),m(),i()};return{start:uu,stop:Y,message:(B="")=>{n=l(B??n)}}},au=async D=>{for(const e of D){if(e.enabled===!1)continue;const t=PD();t.start(e.title);const r=await e.task(t.message);t.stop(r||e.title)}};let z=!0;const q=typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{};let X=0;if(q.process&&q.process.env&&q.process.stdout){const{FORCE_COLOR:D,NODE_DISABLE_COLORS:e,NO_COLOR:t,TERM:r,COLORTERM:i}=q.process.env;e||t||D==="0"?z=!1:D==="1"||D==="2"||D==="3"?z=!0:r==="dumb"?z=!1:"CI"in q.process.env&&["TRAVIS","CIRCLECI","APPVEYOR","GITLAB_CI","GITHUB_ACTIONS","BUILDKITE","DRONE"].some(s=>s in q.process.env)?z=!0:z=process.stdout.isTTY,z&&(process.platform==="win32"||i&&(i==="truecolor"||i==="24bit")?X=3:r&&(r.endsWith("-256color")||r.endsWith("256"))?X=2:X=1)}let Yu={enabled:z,supportLevel:X};function nu(D,e,t=1){const r=`\x1B[${D}m`,i=`\x1B[${e}m`,s=new RegExp(`\\x1b\\[${e}m`,"g");return u=>Yu.enabled&&Yu.supportLevel>=t?r+(""+u).replace(s,r)+i:""+u}const UD=nu(31,39),ou=nu(36,39),GD=nu(90,39),WD=nu(91,39);var vu,Ku;function zD(){if(Ku)return vu;Ku=1;function D(r,i){var s=r;i.slice(0,-1).forEach(function(n){s=s[n]||{}});var u=i[i.length-1];return u in s}function e(r){return typeof r=="number"||/^0x[0-9a-f]+$/i.test(r)?!0:/^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(e[-+]?\d+)?$/.test(r)}function t(r,i){return i==="constructor"&&typeof r[i]=="function"||i==="__proto__"}return vu=function(r,i){i||(i={});var s={bools:{},strings:{},unknownFn:null};typeof i.unknown=="function"&&(s.unknownFn=i.unknown),typeof i.boolean=="boolean"&&i.boolean?s.allBools=!0:[].concat(i.boolean).filter(Boolean).forEach(function(p){s.bools[p]=!0});var u={};function n(p){return u[p].some(function($){return s.bools[$]})}Object.keys(i.alias||{}).forEach(function(p){u[p]=[].concat(i.alias[p]),u[p].forEach(function($){u[$]=[p].concat(u[p].filter(function(L){return $!==L}))})}),[].concat(i.string).filter(Boolean).forEach(function(p){s.strings[p]=!0,u[p]&&[].concat(u[p]).forEach(function($){s.strings[$]=!0})});var a=i.default||{},c={_:[]};function h(p,$){return s.allBools&&/^--[^=]+$/.test($)||s.strings[p]||s.bools[p]||u[p]}function F(p,$,L){for(var d=p,Z=0;Z<$.length-1;Z++){var V=$[Z];if(t(d,V))return;d[V]===void 0&&(d[V]={}),(d[V]===Object.prototype||d[V]===Number.prototype||d[V]===String.prototype)&&(d[V]={}),d[V]===Array.prototype&&(d[V]=[]),d=d[V]}var P=$[$.length-1];t(d,P)||((d===Object.prototype||d===Number.prototype||d===String.prototype)&&(d={}),d===Array.prototype&&(d=[]),d[P]===void 0||s.bools[P]||typeof d[P]=="boolean"?d[P]=L:Array.isArray(d[P])?d[P].push(L):d[P]=[d[P],L])}function C(p,$,L){if(!(L&&s.unknownFn&&!h(p,L)&&s.unknownFn(L)===!1)){var d=!s.strings[p]&&e($)?Number($):$;F(c,p.split("."),d),(u[p]||[]).forEach(function(Z){F(c,Z.split("."),d)})}}Object.keys(s.bools).forEach(function(p){C(p,a[p]===void 0?!1:a[p])});var f=[];r.indexOf("--")!==-1&&(f=r.slice(r.indexOf("--")+1),r=r.slice(0,r.indexOf("--")));for(var m=0;m<r.length;m++){var E=r[m],l,T;if(/^--.+=/.test(E)){var uu=E.match(/^--([^=]+)=([\s\S]*)$/);l=uu[1];var Y=uu[2];s.bools[l]&&(Y=Y!=="false"),C(l,Y,E)}else if(/^--no-.+/.test(E))l=E.match(/^--no-(.+)/)[1],C(l,!1,E);else if(/^--.+/.test(E))l=E.match(/^--(.+)/)[1],T=r[m+1],T!==void 0&&!/^(-|--)[^-]/.test(T)&&!s.bools[l]&&!s.allBools&&(!u[l]||!n(l))?(C(l,T,E),m+=1):/^(true|false)$/.test(T)?(C(l,T==="true",E),m+=1):C(l,s.strings[l]?"":!0,E);else if(/^-[^-]+/.test(E)){for(var B=E.slice(1,-1).split(""),k=!1,b=0;b<B.length;b++){if(T=E.slice(b+2),T==="-"){C(B[b],T,E);continue}if(/[A-Za-z]/.test(B[b])&&T[0]==="="){C(B[b],T.slice(1),E),k=!0;break}if(/[A-Za-z]/.test(B[b])&&/-?\d+(\.\d*)?(e-?\d+)?$/.test(T)){C(B[b],T,E),k=!0;break}if(B[b+1]&&B[b+1].match(/\W/)){C(B[b],E.slice(b+2),E),k=!0;break}else C(B[b],s.strings[B[b]]?"":!0,E)}l=E.slice(-1)[0],!k&&l!=="-"&&(r[m+1]&&!/^(-|--)[^-]/.test(r[m+1])&&!s.bools[l]&&(!u[l]||!n(l))?(C(l,r[m+1],E),m+=1):r[m+1]&&/^(true|false)$/.test(r[m+1])?(C(l,r[m+1]==="true",E),m+=1):C(l,s.strings[l]?"":!0,E))}else if((!s.unknownFn||s.unknownFn(E)!==!1)&&c._.push(s.strings._||!e(E)?E:Number(E)),i.stopEarly){c._.push.apply(c._,r.slice(m+1));break}}return Object.keys(a).forEach(function(p){D(c,p.split("."))||(F(c,p.split("."),a[p]),(u[p]||[]).forEach(function($){F(c,$.split("."),a[p])}))}),i["--"]?c["--"]=f.slice():f.forEach(function(p){c._.push(p)}),c},vu}var YD=zD();const KD=ku(YD);async function qD({rootFolder:D}){const e=x.join(D,".git");try{if(w.existsSync(e)){M.warn("Git repository already exists.");return}}catch(r){M.error(`Error checking git folder: ${r}`);return}const t=await W({message:"Do you want to initialize a git repository? (recommended)",options:[{value:!0,label:"Yes",hint:"You can use GitHub to track changes and collaborate with others."},{value:!1,label:"No",hint:"It is not recommended to skip this step."}],initialValue:!0});if(_(t)&&(g("Operation cancelled."),process.exit(0)),t){const r=await au([{title:"Initializing git repository...",task:async i=>{const s=await G("git",["init","-b","main"],{cwd:D});i(s.stdout);const u=await G("git",["add","."],{cwd:D});return i(u.stdout),"Git repository initialized."}}]);_(r)&&(g("Operation cancelled."),process.exit(0)),M.message(`Now, you can use GitHub Desktop upload your project to GitHub.
-GitHub Desktop: https://github.com/apps/desktop`)}}var H=(D=>(D.VisualStudioCode="vscode",D.Cursor="cursor",D.VSCodium="codium",D.Other="other",D))(H||{});async function HD({rootFolder:D,fileToOpen:e}){const t=await W({message:"Which IDE do you want to use?",options:[{value:H.VisualStudioCode,label:"Visual Studio Code"},{value:H.Cursor,label:"Cursor"},{value:H.VSCodium,label:"VSCodium"},{value:H.Other,label:"Other"}],initialValue:H.VisualStudioCode});if(_(t)&&(g("Operation cancelled."),process.exit(0)),t===void 0)return;let r,i;switch(t){case"vscode":i="Opening in Visual Studio Code...",r="code";break;case"cursor":i="Opening in Cursor...",r="cursor";break;case"codium":i="Opening in VSCodium...",r="codium";break;default:return}await au([{title:i,task:async s=>{try{await xu(r);const u=await G(r,[D]);s(u.stdout);const n=await G(r,[`${D}/README.md`]);if(s(n.stdout),e){const a=await G(r,[`${D}/${e}`]);s(a.stdout)}return`Opened project using ${t}`}catch{return`Could not open project using ${t}, since ${t} was not in your PATH`}}}])}var U=(D=>(D[D.VisualNovel=0]="VisualNovel",D[D.TextStory=1]="TextStory",D[D.PointAndClick=2]="PointAndClick",D[D.GameEngine=3]="GameEngine",D))(U||{}),y=(D=>(D[D.Ink=0]="Ink",D[D.Renpy=1]="Renpy",D[D.Typescript=2]="Typescript",D))(y||{}),O=(D=>(D[D.React=0]="React",D[D.Vue=1]="Vue",D[D.Angular=2]="Angular",D))(O||{});const Au="My Game",JD="my-game",J=[{type:U.VisualNovel,name:"Visual Novel",availableUI:[O.React],availableNarrativeLanguages:[y.Ink,y.Typescript]},{type:U.TextStory,name:"Text-based Story",availableUI:[O.React],availableNarrativeLanguages:[y.Ink,y.Typescript]},{type:U.PointAndClick,name:"Point & Click Adventure",availableUI:[O.React],availableNarrativeLanguages:[y.Ink,y.Typescript]},{type:U.GameEngine,name:"Game Engine",availableUI:[],availableNarrativeLanguages:[]}];async function ZD({packageName:D}){const e=await W({message:"Select the type of game you want to create:",options:J.map(a=>({label:a.name,value:a.type})),initialValue:J[0].type});_(e)&&(g("Operation cancelled."),process.exit(0));const t=J.find(a=>a.type===e)?.availableUI.map(a=>{let c="";switch(a){case O.React:c=ou("React");break;case O.Vue:c=GD("Vue");break;case O.Angular:c=UD("Angular");break}return{label:c,value:a}})||[];let r;t.length===1?(M.warning(`Only one UI framework available: ${t[0].label}. Using it by default.`),r=t[0].value):t.length>0?(r=await W({message:"Select the UI framework you want to use:",options:t,initialValue:J.find(a=>a.type===e)?.availableUI[0]}),_(r)&&(g("Operation cancelled."),process.exit(0))):r=void 0;const i=J.find(a=>a.type===e)?.availableNarrativeLanguages.map(a=>{let c="";switch(a){case y.Ink:c="Ink + Typescript";break;case y.Renpy:c=WD("Renpy");break;case y.Typescript:c=ou("Typescript");break}return{label:c,value:a}})||[];let s;i.length===1?(M.warning(`Only one narrative language available: ${i[0].label}. Using it by default.`),s=i[0].value):i.length>0?(s=await W({message:"Select the narrative language you want to use:",options:i,initialValue:J.find(a=>a.type===e)?.availableNarrativeLanguages[0]}),_(s)&&(g("Operation cancelled."),process.exit(0))):s=void 0;const u=await W({message:"Which devices is the project intended for?",options:[{label:"Web page",value:!1},{label:"Web page + Desktop + Mobile (Tauri)",value:!0}],initialValue:!1});_(u)&&(g("Operation cancelled."),process.exit(0));let n;return u?(n=await su({message:"Project identifier:",initialValue:`com.${D}.app`,validate:a=>{if(!a)return"Identifier is required.";if(!/^[a-zA-Z0-9_.\-]+$/.test(a))return"Identifier can only contain letters, numbers, underscores, dots and dashes."}}),_(n)&&(g("Operation cancelled."),process.exit(0))):n="",{gameType:e,UIFramework:r,narrativeLanguage:s,multidevice:u,identifier:n}}var I=(D=>(D.Delete="delete",D.Overwrite="overwrite",D.Skip="skip",D.Ask="ask",D.Cancel="cancel",D))(I||{});function QD(D){return D?.trim().replace(/\/+$/g,"")}function XD(D){const e=w.readdirSync(D);return e.length===0||e.length===1&&e[0]===".git"}function ue(D){if(w.existsSync(D))for(const e of w.readdirSync(D))e!==".git"&&w.rmSync(x.resolve(D,e),{recursive:!0,force:!0})}function De(D){return/^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(D)}function qu(D){return D.trim().toLowerCase().replace(/\s+/g,"-").replace(/^[._]/,"").replace(/[^a-z\d\-~]+/g,"-")}async function ee({argTargetDir:D,targetDir:e}){const t=()=>e==="."?x.basename(x.resolve()):e;let r;D?r=Au:(r=await su({message:"Project name:",defaultValue:Au,placeholder:Au,validate:n=>{if(!n)return"Project name cannot be empty"}}),_(r)&&(g("Operation cancelled."),process.exit(0)));const i=await su({message:"Project description:",defaultValue:"A new game project",placeholder:"A new game project",validate:n=>{if(!n)return"Project description cannot be empty"}});_(i)&&(g("Operation cancelled."),process.exit(0));const s=await su({message:"Package name:",defaultValue:qu(t()),placeholder:qu(t()),validate:n=>{if(!n)return"Package name cannot be empty";if(!De(n))return"Invalid package name. The name can only include URL-friendly characters."}});_(s)&&(g("Operation cancelled."),process.exit(0));let u;return w.existsSync(s)&&!XD(s)?(u=await W({message:"Overwrite existing files?",options:[{hint:"Delete all existing files and create a new project",label:"Delete all",value:I.Delete},{hint:"Overwrite existing conflicting files",label:"Overwrite",value:I.Overwrite},{hint:"Skip existing conflicting files",label:"Skip",value:I.Skip},{hint:"Ask for each file",label:"Ask",value:I.Ask},{hint:"Cancel operation",label:"Cancel",value:I.Cancel}],initialValue:I.Overwrite}),(_(u)||u===I.Cancel)&&(g("Operation cancelled."),process.exit(0))):u=void 0,{projectName:r,description:i,packageName:s,overwrite:u}}const Hu={_gitignore:".gitignore"};async function te({rootFolder:D,overwrite:e,template:t,packageName:r,description:i,projectName:s,identifier:u}){const n=await au([{title:`Creating project in ${D}...`,task:async a=>{switch(e){case I.Delete:ue(D);break;case I.Overwrite:case I.Skip:case I.Ask:break;default:w.mkdirSync(D,{recursive:!0});break}const c=x.resolve(uD(import.meta.url),"../..",`${t}`),h=(m,E)=>{const l=x.join(D,Hu[m]??m);E?w.writeFileSync(l,E):Ju(x.join(c,m),l)},F=w.readdirSync(c).map(async m=>{const E=x.join(D,Hu[m]??m);if(w.existsSync(E))switch(e){case I.Ask:const l=await ND({message:`File ${E} already exists. Do you want to overwrite it?`,initialValue:!1});if(_(l)&&(g("Operation cancelled."),process.exit(0)),!l)return;w.rmSync(E,{recursive:!0,force:!0});break;case I.Skip:return;case I.Delete:case I.Overwrite:w.rmSync(E,{recursive:!0,force:!0});break}switch(m){case"package.json":case"vite.config.ts":case"index.html":let l=w.readFileSync(x.join(c,m),"utf-8");l=l.replace(/my-app-package-name/g,r),l=l.replace(/my-app-description/g,i),l=l.replace(/my-app-project-name/g,s),h(m,l);break;case".git":case"package-lock.json":break;default:h(m)}});await Promise.all(F);const C=x.join(D,"src-tauri");if(w.existsSync(C)){const m=w.readdirSync(C).map(async E=>{switch(E){case"Cargo.lock":case"Cargo.toml":case"tauri.conf.json":let l=w.readFileSync(x.join(C,E),"utf-8");l=l.replace(/my-app-package-name/g,r),l=l.replace(/my-app-description/g,i),l=l.replace(/my-app-project-name/g,s),l=l.replace(/com.my-app-project-name.app/g,u),h(x.join("src-tauri",E),l)}});await Promise.all(m)}const f=x.join(D,"_github");return w.existsSync(f)&&w.renameSync(f,x.join(D,".github")),"Project created"}}]);_(n)&&(g("Operation cancelled."),process.exit(0))}function re(D,e){w.mkdirSync(e,{recursive:!0});for(const t of w.readdirSync(D)){const r=x.resolve(D,t),i=x.resolve(e,t);Ju(r,i)}}function Ju(D,e){w.statSync(D).isDirectory()?re(D,e):w.copyFileSync(D,e)}const ie=process.cwd();async function se(D){let e=D||JD,t,{description:r,overwrite:i,packageName:s,projectName:u}=await ee({argTargetDir:D,targetDir:e}),{UIFramework:n,gameType:a,narrativeLanguage:c,multidevice:h,identifier:F}=await ZD({packageName:s});const C=x.join(ie,e);let f;switch(a){case U.VisualNovel:switch(n){case O.React:switch(c){case y.Typescript:h?f="template-react-vite-muijoy-tauri":f="template-react-vite-muijoy",t="src/labels/startLabel.ts";break;case y.Ink:h?f="template-react-vite-muijoy-ink-tauri":f="template-react-vite-muijoy-ink",t="src/ink/start.ink";break;case y.Renpy:g("Error: There are no templates for this narrative language"),process.exit(0);default:g("Error: Unknown narrative language"),process.exit(0)}break;case O.Vue:case O.Angular:g("Error: There are no templates for this game type and UI framework"),process.exit(0);default:g("Error: Unknown UI framework"),process.exit(0)}break;case U.TextStory:switch(n){case O.React:switch(c){case y.Typescript:h?f="template-story-react-vite-muijoy-tauri":f="template-story-react-vite-muijoy",t="src/labels/startLabel.ts";break;case y.Ink:h?f="template-story-react-vite-muijoy-ink-tauri":f="template-story-react-vite-muijoy-ink",t="src/ink/start.ink";break;case y.Renpy:g("Error: There are no templates for this narrative language"),process.exit(0);default:g("Error: Unknown narrative language"),process.exit(0)}break;case O.Vue:case O.Angular:g("Error: There are no templates for this game type and UI framework"),process.exit(0);default:g("Error: Unknown UI framework"),process.exit(0)}break;case U.PointAndClick:switch(n){case O.React:switch(c){case y.Typescript:h?f="template-nqtr-react-vite-muijoy-tauri":f="template-nqtr-react-vite-muijoy",t="src/labels/startLabel.ts";break;case y.Ink:h?f="template-nqtr-react-vite-muijoy-ink-tauri":f="template-nqtr-react-vite-muijoy-ink",t="src/ink/start.ink";break;case y.Renpy:g("Error: There are no templates for this narrative language"),process.exit(0);default:g("Error: Unknown narrative language"),process.exit(0)}break;case O.Vue:case O.Angular:g("Error: There are no templates for this game type and UI framework"),process.exit(0);default:g("Error: Unknown UI framework"),process.exit(0)}break;case U.GameEngine:f="template-game-engine",t="src/index.ts";break;default:g("Error: Unknown game type"),process.exit(0)}return await te({rootFolder:C,template:f,packageName:s,description:r,projectName:u,overwrite:i,identifier:F}),{rootFolder:C,fileToOpen:t}}function ae(){console.info(`
+GitHub Desktop: https://github.com/apps/desktop`)}}var H=(D=>(D.VisualStudioCode="vscode",D.Cursor="cursor",D.VSCodium="codium",D.Other="other",D))(H||{});async function HD({rootFolder:D,fileToOpen:e}){const t=await W({message:"Which IDE do you want to use?",options:[{value:H.VisualStudioCode,label:"Visual Studio Code"},{value:H.Cursor,label:"Cursor"},{value:H.VSCodium,label:"VSCodium"},{value:H.Other,label:"Other"}],initialValue:H.VisualStudioCode});if(_(t)&&(g("Operation cancelled."),process.exit(0)),t===void 0)return;let r,i;switch(t){case"vscode":i="Opening in Visual Studio Code...",r="code";break;case"cursor":i="Opening in Cursor...",r="cursor";break;case"codium":i="Opening in VSCodium...",r="codium";break;default:return}await au([{title:i,task:async s=>{try{await xu(r);const u=await G(r,[D]);s(u.stdout);const n=await G(r,[`${D}/README.md`]);if(s(n.stdout),e){const a=await G(r,[`${D}/${e}`]);s(a.stdout)}return`Opened project using ${t}`}catch{return`Could not open project using ${t}, since ${t} was not in your PATH`}}}])}var U=(D=>(D[D.VisualNovel=0]="VisualNovel",D[D.TextStory=1]="TextStory",D[D.PointAndClick=2]="PointAndClick",D[D.GameEngine=3]="GameEngine",D))(U||{}),y=(D=>(D[D.Ink=0]="Ink",D[D.Renpy=1]="Renpy",D[D.Typescript=2]="Typescript",D))(y||{}),O=(D=>(D[D.React=0]="React",D[D.Vue=1]="Vue",D[D.Angular=2]="Angular",D))(O||{});const Au="My Game",JD="my-game",J=[{type:U.VisualNovel,name:"Visual Novel",availableUI:[O.React],availableNarrativeLanguages:[y.Ink,y.Typescript]},{type:U.TextStory,name:"Text-based Story",availableUI:[O.React],availableNarrativeLanguages:[y.Ink,y.Typescript]},{type:U.PointAndClick,name:"Point & Click Adventure",availableUI:[O.React],availableNarrativeLanguages:[y.Ink,y.Typescript]},{type:U.GameEngine,name:"Game Engine",availableUI:[],availableNarrativeLanguages:[]}];async function ZD({packageName:D}){const e=await W({message:"Select the type of game you want to create:",options:J.map(a=>({label:a.name,value:a.type})),initialValue:J[0].type});_(e)&&(g("Operation cancelled."),process.exit(0));const t=J.find(a=>a.type===e)?.availableUI.map(a=>{let c="";switch(a){case O.React:c=ou("React");break;case O.Vue:c=GD("Vue");break;case O.Angular:c=UD("Angular");break}return{label:c,value:a}})||[];let r;t.length===1?(M.warning(`Only one UI framework available: ${t[0].label}. Using it by default.`),r=t[0].value):t.length>0?(r=await W({message:"Select the UI framework you want to use:",options:t,initialValue:J.find(a=>a.type===e)?.availableUI[0]}),_(r)&&(g("Operation cancelled."),process.exit(0))):r=void 0;const i=J.find(a=>a.type===e)?.availableNarrativeLanguages.map(a=>{let c="";switch(a){case y.Ink:c="Ink + Typescript";break;case y.Renpy:c=WD("Renpy");break;case y.Typescript:c=ou("Typescript");break}return{label:c,value:a}})||[];let s;i.length===1?(M.warning(`Only one narrative language available: ${i[0].label}. Using it by default.`),s=i[0].value):i.length>0?(s=await W({message:"Select the narrative language you want to use:",options:i,initialValue:J.find(a=>a.type===e)?.availableNarrativeLanguages[0]}),_(s)&&(g("Operation cancelled."),process.exit(0))):s=void 0;const u=await W({message:"Which devices is the project intended for?",options:[{label:"Web page",value:!1},{label:"Web page + Desktop + Mobile (Tauri)",value:!0}],initialValue:!1});_(u)&&(g("Operation cancelled."),process.exit(0));let n;return u?(n=await su({message:"Project identifier:",initialValue:`com.${D}.app`,validate:a=>{if(!a)return"Identifier is required.";if(!/^[a-zA-Z0-9_.\-]+$/.test(a))return"Identifier can only contain letters, numbers, underscores, dots and dashes."}}),_(n)&&(g("Operation cancelled."),process.exit(0))):n="",{gameType:e,UIFramework:r,narrativeLanguage:s,multidevice:u,identifier:n}}var I=(D=>(D.Delete="delete",D.Overwrite="overwrite",D.Skip="skip",D.Ask="ask",D.Cancel="cancel",D))(I||{});function QD(D){return D?.trim().replace(/\/+$/g,"")}function XD(D){const e=w.readdirSync(D);return e.length===0||e.length===1&&e[0]===".git"}function ue(D){if(w.existsSync(D))for(const e of w.readdirSync(D))e!==".git"&&w.rmSync(x.resolve(D,e),{recursive:!0,force:!0})}function De(D){return/^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(D)}function qu(D){return D.trim().toLowerCase().replace(/\s+/g,"-").replace(/^[._]/,"").replace(/[^a-z\d\-~]+/g,"-")}async function ee({argTargetDir:D,targetDir:e}){const t=()=>e==="."?x.basename(x.resolve()):e;let r;D?r=Au:(r=await su({message:"Project name:",defaultValue:Au,placeholder:Au,validate:n=>{if(!n)return"Project name cannot be empty"}}),_(r)&&(g("Operation cancelled."),process.exit(0)));const i=await su({message:"Project description:",defaultValue:"A new game project",placeholder:"A new game project",validate:n=>{if(!n)return"Project description cannot be empty"}});_(i)&&(g("Operation cancelled."),process.exit(0));const s=await su({message:"Package name:",defaultValue:qu(t()),placeholder:qu(t()),validate:n=>{if(!n)return"Package name cannot be empty";if(!De(n))return"Invalid package name. The name can only include URL-friendly characters."}});_(s)&&(g("Operation cancelled."),process.exit(0));let u;return w.existsSync(s)&&!XD(s)?(u=await W({message:"Overwrite existing files?",options:[{hint:"Delete all existing files and create a new project",label:"Delete all",value:I.Delete},{hint:"Overwrite existing conflicting files",label:"Overwrite",value:I.Overwrite},{hint:"Skip existing conflicting files",label:"Skip",value:I.Skip},{hint:"Ask for each file",label:"Ask",value:I.Ask},{hint:"Cancel operation",label:"Cancel",value:I.Cancel}],initialValue:I.Overwrite}),(_(u)||u===I.Cancel)&&(g("Operation cancelled."),process.exit(0))):u=void 0,{projectName:r,description:i,packageName:s,overwrite:u}}const Hu={_gitignore:".gitignore"};async function te({rootFolder:D,overwrite:e,template:t,packageName:r,description:i,projectName:s,identifier:u}){const n=await au([{title:`Creating project in ${D}...`,task:async a=>{switch(e){case I.Delete:ue(D);break;case I.Overwrite:case I.Skip:case I.Ask:break;default:w.mkdirSync(D,{recursive:!0});break}const c=x.resolve(uD(import.meta.url),"../..",`${t}`),h=(m,E)=>{const l=x.join(D,Hu[m]??m);E?w.writeFileSync(l,E):Ju(x.join(c,m),l)},F=w.readdirSync(c).map(async m=>{const E=x.join(D,Hu[m]??m);if(w.existsSync(E))switch(e){case I.Ask:const l=await ND({message:`File ${E} already exists. Do you want to overwrite it?`,initialValue:!1});if(_(l)&&(g("Operation cancelled."),process.exit(0)),!l)return;w.rmSync(E,{recursive:!0,force:!0});break;case I.Skip:return;case I.Delete:case I.Overwrite:w.rmSync(E,{recursive:!0,force:!0});break}switch(m){case"package.json":case"vite.config.ts":case"index.html":let l=w.readFileSync(x.join(c,m),"utf-8");l=l.replace(/my-app-package-name/g,r),l=l.replace(/my-app-description/g,i),l=l.replace(/my-app-project-name/g,s),h(m,l);break;case".git":case"package-lock.json":break;default:h(m)}});await Promise.all(F);const C=x.join(D,"src-tauri");if(w.existsSync(C)){const m=w.readdirSync(C).map(async E=>{switch(E){case"Cargo.lock":case"Cargo.toml":case"tauri.conf.json":let l=w.readFileSync(x.join(C,E),"utf-8");l=l.replace(/my-app-package-name/g,r),l=l.replace(/my-app-description/g,i),l=l.replace(/my-app-project-name/g,s),l=l.replace(/com.my-app-project-name.app/g,u),h(x.join("src-tauri",E),l)}});await Promise.all(m)}const f=x.join(D,"_github");return w.existsSync(f)&&w.renameSync(f,x.join(D,".github")),"Project created"}}]);_(n)&&(g("Operation cancelled."),process.exit(0))}function re(D,e){w.mkdirSync(e,{recursive:!0});for(const t of w.readdirSync(D)){const r=x.resolve(D,t),i=x.resolve(e,t);Ju(r,i)}}function Ju(D,e){w.statSync(D).isDirectory()?re(D,e):w.copyFileSync(D,e)}const ie=process.cwd();async function se(D){let e=D||JD,t,{description:r,overwrite:i,packageName:s,projectName:u}=await ee({argTargetDir:D,targetDir:e}),{UIFramework:n,gameType:a,narrativeLanguage:c,multidevice:h,identifier:F}=await ZD({packageName:s});const C=x.join(ie,e);let f;switch(a){case U.VisualNovel:switch(n){case O.React:switch(c){case y.Typescript:h?f="template-react-vite-muijoy-tauri":f="template-react-vite-muijoy",t="src/labels/startLabel.ts";break;case y.Ink:h?f="template-react-vite-muijoy-ink-tauri":f="template-react-vite-muijoy-ink",t="src/ink/start.ink";break;case y.Renpy:g("Error: There are no templates for this narrative language"),process.exit(0);default:g("Error: Unknown narrative language"),process.exit(0)}break;case O.Vue:case O.Angular:g("Error: There are no templates for this game type and UI framework"),process.exit(0);default:g("Error: Unknown UI framework"),process.exit(0)}break;case U.TextStory:switch(n){case O.React:switch(c){case y.Typescript:h?f="template-story-react-vite-muijoy-tauri":f="template-story-react-vite-muijoy",t="src/labels/startLabel.ts";break;case y.Ink:h?f="template-story-react-vite-muijoy-ink-tauri":f="template-story-react-vite-muijoy-ink",t="src/ink/start.ink";break;case y.Renpy:g("Error: There are no templates for this narrative language"),process.exit(0);default:g("Error: Unknown narrative language"),process.exit(0)}break;case O.Vue:case O.Angular:g("Error: There are no templates for this game type and UI framework"),process.exit(0);default:g("Error: Unknown UI framework"),process.exit(0)}break;case U.PointAndClick:switch(n){case O.React:switch(c){case y.Typescript:h?f="template-nqtr-react-vite-muijoy-tauri":f="template-nqtr-react-vite-muijoy",t="src/labels/startLabel.ts";break;case y.Ink:h?f="template-nqtr-react-vite-muijoy-ink-tauri":f="template-nqtr-react-vite-muijoy-ink",t="src/ink/variousActionsLabels.ink";break;case y.Renpy:g("Error: There are no templates for this narrative language"),process.exit(0);default:g("Error: Unknown narrative language"),process.exit(0)}break;case O.Vue:case O.Angular:g("Error: There are no templates for this game type and UI framework"),process.exit(0);default:g("Error: Unknown UI framework"),process.exit(0)}break;case U.GameEngine:f="template-game-engine",t="src/index.ts";break;default:g("Error: Unknown game type"),process.exit(0)}return await te({rootFolder:C,template:f,packageName:s,description:r,projectName:u,overwrite:i,identifier:F}),{rootFolder:C,fileToOpen:t}}function ae(){console.info(`
 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557\u2588\u2588\u2557      \u2588\u2588\u2557   \u2588\u2588\u2557\u2588\u2588\u2588\u2557   \u2588\u2588\u2557
 \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551\u255A\u2588\u2588\u2557\u2588\u2588\u2554\u255D\u2588\u2588\u2551      \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551
 \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551 \u255A\u2588\u2588\u2588\u2554\u255D \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2557 \u2588\u2588\u2551

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-pixi-vn",
   "description": "Create a new Pixi’VN project",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "type": "module",
   "license": "GPL-3.0",
   "author": "DRincs-Productions",

package/template-nqtr-react-vite-muijoy/README.md

@@ -47,6 +47,7 @@ Core libraries:
   You can use the following button to show Tanstack Query interactions with the game. (the button will be automatically hidden when released)
 * [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework for rapidly building custom designs.
   * [Tailwind CSS Motion](https://rombo.co/tailwind/): A library that provides a set of utilities for creating animations with Tailwind CSS.
+  * [Tailwind CSS Typography](https://tailwindcss.com/docs/typography-plugin): A plugin that provides a set of utilities for styling text.
 
 UI libraries:
 

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

@@ -11,50 +11,53 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@drincs/nqtr": "^0.4.2",
-    "@drincs/pixi-vn": "^1.2.15",
+    "@drincs/nqtr": "^0.5.5",
+    "@drincs/pixi-vn": "^1.2.22",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^7.1.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.2.0",
     "@mui/joy": "^5.0.0-beta.52",
-    "@mui/material": "^7.1.0",
-    "@tailwindcss/vite": "^4.1.6",
-    "@tanstack/react-query": "^5.75.7",
-    "i18next": "^25.1.2",
+    "@mui/material": "^7.2.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-query": "^5.83.0",
+    "i18next": "^25.3.2",
     "i18next-chained-backend": "^4.6.2",
     "i18next-resources-to-backend": "^1.2.1",
-    "motion": "^12.10.5",
+    "motion": "^12.23.6",
     "notistack": "^3.0.2",
     "react": "^19.1.0",
     "react-color-palette": "^7.3.0",
     "react-dom": "^19.1.0",
     "react-error-boundary": "^6.0.0",
-    "react-i18next": "^15.5.1",
+    "react-i18next": "^15.6.0",
+    "react-lazy-load-image-component": "^1.6.3",
     "react-markdown": "^10.1.0",
     "react-markdown-typewriter": "^1.1.4",
-    "react-router-dom": "^7.6.0",
+    "react-router-dom": "^7.6.3",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "shade-generator": "^1.2.7",
-    "tailwindcss": "^4.1.6",
-    "vite-plugin-checker": "^0.9.3",
-    "zustand": "^5.0.4"
+    "tailwindcss": "^4.1.11",
+    "vite-plugin-checker": "^0.10.0",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^5.75.7",
-    "@types/node": "^22.15.17",
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.3",
-    "@typescript-eslint/eslint-plugin": "^8.32.0",
-    "@typescript-eslint/parser": "^8.32.0",
-    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.26.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tanstack/react-query-devtools": "^5.83.0",
+    "@types/node": "^24.0.14",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@types/react-lazy-load-image-component": "^1.6.4",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.31.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "tailwindcss-motion": "^1.1.0",
+    "tailwindcss-motion": "^1.1.1",
     "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "vite-plugin-pwa": "^1.0.0"
+    "vite": "^7.0.4",
+    "vite-plugin-pwa": "^1.0.1"
   },
   "keywords": [
     "game",

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

@@ -4,9 +4,17 @@ 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([initializeIndexedDB(), defineAssets(), useI18n()]);
+    await Promise.all([
+        import("./values"),
+        import("./labels"),
+        initializeIndexedDB(),
+        defineAssets(),
+        useI18n(),
+        initializeNQTR(),
+    ]);
     return import("./Home");
 });
 

package/template-nqtr-react-vite-muijoy/src/AppRoutes.tsx

@@ -1,5 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 import NextButton from "./components/NextButton";
+import VisibilityButton from "./components/VisibilityButton";
 import { LOADING_ROUTE, MAIN_MENU_ROUTE, MAP_ROUTE, NARRATION_ROUTE, NAVIGATION_ROUTE } from "./constans";
 import useNQTRDetector from "./hooks/useNQTRDetector";
 import useSkipAutoDetector from "./hooks/useSkipAutoDetector";
@@ -37,7 +38,8 @@ function NarrationElement() {
             <QuickTools />
             <TextInput />
             <NextButton />
-            <Detectors />
+            <NarrationDetectors />
+            <VisibilityButton />
         </>
     );
 }
@@ -52,11 +54,12 @@ function NavigationElement() {
             <QuickRooms />
             <TimeScreen />
             <NqtrQuickTools />
+            <VisibilityButton />
         </>
     );
 }
 
-function Detectors() {
+function NarrationDetectors() {
     useSkipAutoDetector();
     return <></>;
 }

package/template-nqtr-react-vite-muijoy/src/Home.tsx

@@ -4,7 +4,7 @@ import Routes from "./AppRoutes";
 import useClosePageDetector from "./hooks/useClosePageDetector";
 import useKeyboardDetector from "./hooks/useKeyboardDetector";
 import useEventListener from "./hooks/useKeyDetector";
-import Imports from "./Imports";
+import RootProvider from "./providers/RootProvider";
 import GameSaveScreen from "./screens/GameSaveScreen";
 import SaveLoadAlert from "./screens/modals/SaveLoadAlert";
 import OfflineScreen from "./screens/OfflineScreen";
@@ -41,8 +41,8 @@ function HomeChild() {
 
 export default function Home() {
     return (
-        <Imports>
+        <RootProvider>
             <HomeChild />
-        </Imports>
+        </RootProvider>
     );
 }

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

@@ -1,6 +1,6 @@
 import { AssetsManifest } from "@drincs/pixi-vn";
 import { MAIN_MENU_ROUTE } from "../constans";
-import { mainMap } from "../values/maps";
+import { mainMap, nightcityMap } from "../values/maps";
 import { aliceRoom, annRoom, bathroom, gymRoom, lounge, mcRoom, terrace } from "../values/rooms";
 
 /**
@@ -41,6 +41,23 @@ const manifest: AssetsManifest = {
                     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
@@ -167,20 +184,6 @@ const manifest: AssetsManifest = {
                 },
             ],
         },
-        // locations
-        {
-            name: "locations",
-            assets: [
-                {
-                    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",
-                },
-            ],
-        },
         // alice
         {
             name: "alice",

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

@@ -1,4 +1,5 @@
 import { Button, ButtonProps, ButtonTypeMap } from "@mui/joy";
+import { motion, Variants } from "motion/react";
 
 interface MenuButtonProps
     extends ButtonProps<
@@ -12,6 +13,14 @@ interface MenuButtonProps
 
 export default function MenuButton(props: MenuButtonProps) {
     const { sx, transitionDelay, ...rest } = props;
+    const itemVariants: Variants = {
+        open: {
+            opacity: 1,
+            x: 0,
+            transition: { type: "spring", stiffness: 300, damping: 24, delay: transitionDelay },
+        },
+        closed: { opacity: 0, x: -50, transition: { duration: 0.2 } },
+    };
 
     return (
         <Button
@@ -20,7 +29,8 @@ export default function MenuButton(props: MenuButtonProps) {
                 fontSize: { xs: "0.75rem", sm: "0.75rem", md: "1rem", lg: "1.25rem", xl: "1.5rem" },
                 ...sx,
             }}
-            className='motion-preset-pop'
+            component={motion.div}
+            variants={itemVariants}
             {...rest}
         />
     );

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

@@ -1,7 +1,6 @@
 import { DialogActions, DialogContent, Divider, ModalClose } from "@mui/joy";
 import Modal from "@mui/joy/Modal";
 import { default as ModalDialogJoy, ModalDialogProps } from "@mui/joy/ModalDialog";
-import { AnimatePresence } from "motion/react";
 import { useEffect, useMemo, useState } from "react";
 
 export interface ModalDialogCustomProps extends ModalDialogProps {
@@ -41,31 +40,29 @@ export default function ModalDialogCustom(props: ModalDialogCustomProps) {
     );
 
     return (
-        <AnimatePresence>
-            <Modal
-                keepMounted
-                open={internalOpen}
-                onClose={() => canBeIgnored && setOpen(false)}
+        <Modal
+            keepMounted
+            open={internalOpen}
+            onClose={() => canBeIgnored && setOpen(false)}
+            sx={{
+                pointerEvents: open ? "auto" : "none",
+            }}
+            className={modalVarians}
+        >
+            <ModalDialogJoy
                 sx={{
                     pointerEvents: open ? "auto" : "none",
+                    ...sx,
                 }}
-                className={modalVarians}
+                className={modalDialogVarians}
+                {...rest}
             >
-                <ModalDialogJoy
-                    sx={{
-                        pointerEvents: open ? "auto" : "none",
-                        ...sx,
-                    }}
-                    className={modalDialogVarians}
-                    {...rest}
-                >
-                    {canBeIgnored && <ModalClose />}
-                    {head}
-                    {head && <Divider />}
-                    <DialogContent>{internalOpen && children}</DialogContent>
-                    {actions && <DialogActions>{actions}</DialogActions>}
-                </ModalDialogJoy>
-            </Modal>
-        </AnimatePresence>
+                {canBeIgnored && <ModalClose />}
+                {head}
+                {head && <Divider />}
+                <DialogContent>{internalOpen && children}</DialogContent>
+                {actions && <DialogActions>{actions}</DialogActions>}
+            </ModalDialogJoy>
+        </Modal>
     );
 }

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

@@ -1,10 +1,11 @@
 import { OnRunProps } from "@drincs/nqtr";
-import { Assets } from "@drincs/pixi-vn";
 import { useTheme } from "@mui/joy";
 import { isValidElement, ReactElement } from "react";
+import { LazyLoadComponent } from "react-lazy-load-image-component";
 import useGameProps from "../hooks/useGameProps";
-import ImageTimeSlots from "../models/ImageTimeSlots";
+import TimeSlotsImage from "../models/TimeSlotsImage";
 import useNqtrScreenStore from "../stores/useNqtrScreenStore";
+import { getPixiJSAsset } from "../utils/assets-utility";
 import RoundIconButton, { RoundIconButtonProps } from "./RoundIconButton";
 
 interface NqtrRoundIconButtonProps extends RoundIconButtonProps {
@@ -17,7 +18,6 @@ export default function NqtrRoundIconButton(props: NqtrRoundIconButtonProps) {
 
     return (
         <RoundIconButton
-            className='motion-preset-pop'
             sx={{
                 "--IconButton-size": { xs: "40px", sm: "60px", md: "80px" },
                 border: 3,
@@ -32,7 +32,7 @@ export default function NqtrRoundIconButton(props: NqtrRoundIconButtonProps) {
 
 export function NqtrRoundIconButtonConvertor(
     props: NqtrRoundIconButtonProps & {
-        image?: string | ImageTimeSlots | ReactElement | ((props: OnRunProps) => ReactElement);
+        image?: string | TimeSlotsImage | ReactElement | ((props: OnRunProps) => ReactElement);
     }
 ) {
     let { image, ...rest } = props;
@@ -47,26 +47,27 @@ export function NqtrRoundIconButtonConvertor(
         return image;
     }
 
-    if (image instanceof ImageTimeSlots) {
+    if (image instanceof TimeSlotsImage) {
         image = image.src;
     }
 
     if (typeof image == "string") {
         try {
-            // check if the image is a PixiAsset
-            image = Assets.resolver.resolve(image).src || image;
+            image = getPixiJSAsset(image);
         } catch {}
         return (
-            <NqtrRoundIconButton
-                {...rest}
-                sx={{
-                    backgroundImage: `url(${image})`,
-                    backgroundSize: "cover",
-                    backgroundPosition: "center",
-                    fontSize: { xs: "1rem", sm: "1.5rem", md: "2rem", lg: "2.5rem", xl: "3rem" },
-                    ...rest.sx,
-                }}
-            />
+            <LazyLoadComponent>
+                <NqtrRoundIconButton
+                    {...rest}
+                    sx={{
+                        backgroundImage: `url(${image})`,
+                        backgroundSize: "cover",
+                        backgroundPosition: "center",
+                        fontSize: { xs: "1rem", sm: "1.5rem", md: "2rem", lg: "2.5rem", xl: "3rem" },
+                        ...rest.sx,
+                    }}
+                />
+            </LazyLoadComponent>
         );
     }
 }

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

@@ -1,4 +1,6 @@
 import { IconButton, IconButtonProps, Shadow, Tooltip } from "@mui/joy";
+import { useShallow } from "zustand/react/shallow";
+import useInterfaceStore from "../stores/useInterfaceStore";
 
 export interface RoundIconButtonProps extends IconButtonProps {
     circumference?: string | {} | number;
@@ -8,6 +10,7 @@ export interface RoundIconButtonProps extends IconButtonProps {
 
 export default function RoundIconButton(props: RoundIconButtonProps) {
     const { sx, circumference, ariaLabel, elevation, ...rest } = props;
+    const hidden = useInterfaceStore(useShallow((state) => state.hidden));
 
     return (
         <Tooltip key={props.key ? "tooltip-" + props.key : undefined} title={ariaLabel}>
@@ -15,11 +18,13 @@ export default function RoundIconButton(props: RoundIconButtonProps) {
                 {/* This div is necessary to avoid the tooltip to be cutted */}
                 <IconButton
                     title={ariaLabel}
+                    className={hidden ? "motion-scale-out-[0]" : "motion-scale-in-[0]"}
                     sx={{
                         borderRadius: "50%",
                         height: circumference,
                         width: circumference,
                         boxShadow: elevation ?? undefined,
+                        pointerEvents: hidden ? "none" : "auto",
                         ...sx,
                     }}
                     {...rest}

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

@@ -0,0 +1,46 @@
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import { IconButton, useTheme } from "@mui/joy";
+import { useEffect, useMemo } from "react";
+import { useShallow } from "zustand/react/shallow";
+import useEventListener from "../hooks/useKeyDetector";
+import useInterfaceStore from "../stores/useInterfaceStore";
+
+export default function VisibilityButton() {
+    const hidden = useInterfaceStore(useShallow((state) => state.hidden));
+    const editHideInterface = useInterfaceStore((state) => state.editHidden);
+    const showInterface = useInterfaceStore((state) => state.show);
+    const iconVarians = useMemo(() => (hidden ? `motion-preset-pop` : `motion-scale-out-0`), [hidden]);
+
+    useEffect(() => {
+        return () => {
+            showInterface();
+        };
+    }, [showInterface]);
+
+    useEventListener({
+        type: "keyup",
+        listener: (event) => {
+            if (event.code == "KeyV" && event.altKey) {
+                editHideInterface();
+            }
+        },
+    });
+
+    return (
+        <IconButton
+            onClick={editHideInterface}
+            sx={{
+                position: "absolute",
+                top: 0,
+                right: 0,
+            }}
+            className={iconVarians}
+        >
+            <VisibilityOffIcon
+                sx={{
+                    color: useTheme().palette.neutral[500],
+                }}
+            />
+        </IconButton>
+    );
+}

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

@@ -1,18 +1,28 @@
 import { StepLabelProps } from "@drincs/pixi-vn";
+import { useQueryClient } from "@tanstack/react-query";
 import { useSnackbar } from "notistack";
 import { useTranslation } from "react-i18next";
 import useMyNavigate from "./useMyNavigate";
+import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";
+import useTimeTracker from "./useTimeTracker";
 
 export default function useGameProps(): StepLabelProps {
     const navigate = useMyNavigate();
     const { t } = useTranslation(["narration"]);
     const { t: uiTransition } = useTranslation(["ui"]);
     const { enqueueSnackbar } = useSnackbar();
+    const queryClient = useQueryClient();
+    const { sleep, wait } = useTimeTracker();
 
     return {
         navigate,
         t,
         uiTransition,
         notify: enqueueSnackbar,
+        invalidateInterfaceData: () => {
+            queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
+        },
+        sleep,
+        wait,
     };
 }

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

@@ -4,15 +4,12 @@ import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import useGameSaveScreenStore from "../stores/useGameSaveScreenStore";
-import useInterfaceStore from "../stores/useInterfaceStore";
 import { putSaveIntoIndexDB } from "../utils/save-utility";
 import useEventListener from "./useKeyDetector";
 import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from "./useQueryLastSave";
 import { SAVES_USE_QUEY_KEY } from "./useQuerySaves";
 
 export default function useKeyboardDetector() {
-    const hideInterface = useInterfaceStore((state) => state.hidden);
-    const setHideInterface = useInterfaceStore((state) => state.setHidden);
     const setOpenLoadAlert = useGameSaveScreenStore((state) => state.editLoadAlert);
     const queryClient = useQueryClient();
     const { t } = useTranslation(["ui"]);
@@ -23,17 +20,6 @@ export default function useKeyboardDetector() {
     const onkeydown = useCallback(
         (event: KeyboardEvent) => {
             switch (event.code) {
-                case "Enter":
-                case "Space":
-                    if (hideInterface) {
-                        setHideInterface(false);
-                    }
-                    break;
-                case "KeyV":
-                    if (event.altKey) {
-                        setHideInterface(!hideInterface);
-                    }
-                    break;
                 case "KeyS":
                     if (event.altKey) {
                         if (location.pathname === "/") {
@@ -62,7 +48,7 @@ export default function useKeyboardDetector() {
                     break;
             }
         },
-        [location, hideInterface, lastSave, queryClient, t]
+        [location, lastSave, queryClient, t]
     );
 
     useEventListener({ type: "keydown", listener: onkeydown });