create-pixi-vn 1.0.7 → 1.0.8

package/dist/index.mjs

@@ -47,7 +47,7 @@ Calls to async() callback can have unexpected results.`),l=!0,function(b,C){b?f(
 Initializing git repository...`),s0.sync("git",["init","-b","main"],{cwd:e,stdio:"inherit"}),s0.sync("git",["add","."],{cwd:e,stdio:"inherit"}),console.log("Done."),console.log(`
 Now, you can use GitHub Desktop upload your project to GitHub.`),console.log("GitHub Desktop: https://github.com/apps/desktop"))}catch{}}var q0=(e=>(e.VisualStudioCode="vscode",e.Cursor="cursor",e.Other="other",e))(q0||{});function sx(){return re.prompt([{type:"list",name:"ide",message:"Which IDE do you want to use?",choices:[{name:"Visual Studio Code",value:q0.VisualStudioCode},{name:"Cursor",value:q0.Cursor},{name:"Other",value:q0.Other}],default:q0.VisualStudioCode}])}async function xx({rootFolder:e,fileToOpen:t}){let{ide:n}=await sx();if(n!==void 0)try{let i="";switch(n){case"vscode":console.log(`
 Opening in Visual Studio Code...`),i="code";break;case"cursor":console.log(`
-Opening in Cursor...`),i="cursor";break}i&&(await se(i),s0.sync(i,[e],{stdio:"inherit"}),s0.sync(i,[`${e}/README.md`],{stdio:"inherit"}),t&&s0.sync(i,[`${e}/${t}`],{stdio:"inherit"}))}catch{console.error(`Could not open project using ${n}, since ${n} was not in your PATH`)}}var It=(e=>(e[e.VisualNovel=0]="VisualNovel",e))(It||{}),t0=(e=>(e[e.Ink=0]="Ink",e[e.Renpy=1]="Renpy",e[e.Typescript=2]="Typescript",e))(t0||{}),a0=(e=>(e[e.React=0]="React",e[e.Vue=1]="Vue",e[e.Angular=2]="Angular",e))(a0||{});const Vr="My Game",Gr="my-game",$t=[{type:It.VisualNovel,name:"Visual Novel",availableUI:[a0.React],availableNarrativeLanguages:[t0.Ink,t0.Typescript]}];var T0=(e=>(e[e.Yes=0]="Yes",e[e.No=1]="No",e[e.Cancel=2]="Cancel",e))(T0||{});function ux({packageName:e}){return re.prompt([{type:"list",name:"gameType",message:"Select the type of game you want to create:",choices:$t.map(t=>({name:t.name,value:t.type}))},{type:"list",name:"UIFramework",message:"Select the UI framework you want to use:",choices:({gameType:t})=>$t.find(n=>n.type===t)?.availableUI.map(n=>{let i="";switch(n){case a0.React:i=pe("React");break;case a0.Vue:i=Ti("Vue");break;case a0.Angular:i=zt("Angular");break}return{name:i,value:n}})},{type:"list",name:"narrativeLanguage",message:"Select the narrative language you want to use:",choices:({gameType:t})=>$t.find(n=>n.type===t)?.availableNarrativeLanguages.map(n=>{let i="";switch(n){case t0.Ink:i="Ink + Typescript";break;case t0.Renpy:i=Ri("Renpy");break;case t0.Typescript:i=pe("Typescript");break}return{name:i,value:n}})},{type:"list",name:"multidevice",message:"Which devices is the project intended for?",choices:[{name:"Web page",value:!1},{name:"Web page + Desktop + Mobile (Tauri)",value:!0}]},{type:"input",name:"identifier",message:"Project identifier:",default:`com.${e}.app`,required:!0,when:({multidevice:t})=>t}])}function Wr(e){return e?.trim().replace(/\/+$/g,"")}function cx(e){const t=I.readdirSync(e);return t.length===0||t.length===1&&t[0]===".git"}function lx(e){if(I.existsSync(e))for(const t of I.readdirSync(e))t!==".git"&&I.rmSync(M.resolve(e,t),{recursive:!0,force:!0})}function fx(e){return/^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(e)}function Dx(e){return e.trim().toLowerCase().replace(/\s+/g,"-").replace(/^[._]/,"").replace(/[^a-z\d\-~]+/g,"-")}async function dx({argTargetDir:e,targetDir:t}){const n=()=>t==="."?M.basename(M.resolve()):t;let i=await re.prompt([{type:"input",name:"projectName",message:"Project name:",default:Vr,required:!0,transformer:r=>Wr(r)||Vr,when:()=>!e,validate:r=>r?!0:"Project name cannot be empty"},{type:"input",name:"description",message:"Project description:",default:"A new game project"},{type:"input",name:"packageName",message:"Package name:",default:()=>Dx(n()),validate:r=>fx(r)||"Invalid package name. The name can only include URL-friendly characters."},{type:"list",name:"overwrite",message:"Overwrite existing files?",default:"yes",choices:[{description:"Remove existing files and continue",name:"Yes",value:T0.Yes},{description:"Keep existing files and continue",name:"Ignore",value:T0.No},{description:"Cancel operation",name:"Cancel",value:T0.Cancel}],when:({packageName:r=Gr})=>I.existsSync(r)&&!cx(r)}]);if(i.overwrite===T0.Cancel)throw new Error(zt("\u2716")+" Operation cancelled");return i}const hx=process.cwd(),px={_gitignore:".gitignore"};async function Ex(e){let t=e||Gr,n,{description:i,overwrite:r,packageName:o,projectName:x}=await dx({argTargetDir:e,targetDir:t}),{UIFramework:a,gameType:s,narrativeLanguage:u,multidevice:c,identifier:f}=await ux({packageName:o}),l;switch(s){case It.VisualNovel:switch(a){case a0.React:switch(u){case t0.Typescript:c?l="template-react-vite-muijoy-tauri":l="template-react-vite-muijoy",n="src/labels/startLabel.ts";break;case t0.Ink:c?l="template-react-vite-muijoy-ink-tauri":l="template-react-vite-muijoy-ink",n="src/ink_labels/start.ink";break;case t0.Renpy:throw new Error("There are no templates for this narrative language");default:throw new Error("Unknown narrative language")}break;case a0.Vue:case a0.Angular:throw new Error("There are no templates for this game type and UI framework");default:throw new Error("Unknown UI framework")}break;default:throw new Error("Unknown game type")}const D=M.join(hx,t);r===T0.Yes?lx(D):I.existsSync(D)||I.mkdirSync(D,{recursive:!0}),console.log(`
+Opening in Cursor...`),i="cursor";break}i&&(await se(i),s0.sync(i,[e],{stdio:"inherit"}),s0.sync(i,[`${e}/README.md`],{stdio:"inherit"}),t&&s0.sync(i,[`${e}/${t}`],{stdio:"inherit"}))}catch{console.error(`Could not open project using ${n}, since ${n} was not in your PATH`)}}var It=(e=>(e[e.VisualNovel=0]="VisualNovel",e))(It||{}),t0=(e=>(e[e.Ink=0]="Ink",e[e.Renpy=1]="Renpy",e[e.Typescript=2]="Typescript",e))(t0||{}),a0=(e=>(e[e.React=0]="React",e[e.Vue=1]="Vue",e[e.Angular=2]="Angular",e))(a0||{});const Vr="My Game",Gr="my-game",$t=[{type:It.VisualNovel,name:"Visual Novel",availableUI:[a0.React],availableNarrativeLanguages:[t0.Ink,t0.Typescript]}];var T0=(e=>(e[e.Yes=0]="Yes",e[e.No=1]="No",e[e.Cancel=2]="Cancel",e))(T0||{});function ux({packageName:e}){return re.prompt([{type:"list",name:"gameType",message:"Select the type of game you want to create:",choices:$t.map(t=>({name:t.name,value:t.type}))},{type:"list",name:"UIFramework",message:"Select the UI framework you want to use:",choices:({gameType:t})=>$t.find(n=>n.type===t)?.availableUI.map(n=>{let i="";switch(n){case a0.React:i=pe("React");break;case a0.Vue:i=Ti("Vue");break;case a0.Angular:i=zt("Angular");break}return{name:i,value:n}})},{type:"list",name:"narrativeLanguage",message:"Select the narrative language you want to use:",choices:({gameType:t})=>$t.find(n=>n.type===t)?.availableNarrativeLanguages.map(n=>{let i="";switch(n){case t0.Ink:i="Ink + Typescript";break;case t0.Renpy:i=Ri("Renpy");break;case t0.Typescript:i=pe("Typescript");break}return{name:i,value:n}})},{type:"list",name:"multidevice",message:"Which devices is the project intended for?",choices:[{name:"Web page",value:!1},{name:"Web page + Desktop + Mobile (Tauri)",value:!0}]},{type:"input",name:"identifier",message:"Project identifier:",default:`com.${e}.app`,required:!0,when:({multidevice:t})=>t}])}function Wr(e){return e?.trim().replace(/\/+$/g,"")}function cx(e){const t=I.readdirSync(e);return t.length===0||t.length===1&&t[0]===".git"}function lx(e){if(I.existsSync(e))for(const t of I.readdirSync(e))t!==".git"&&I.rmSync(M.resolve(e,t),{recursive:!0,force:!0})}function fx(e){return/^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(e)}function Dx(e){return e.trim().toLowerCase().replace(/\s+/g,"-").replace(/^[._]/,"").replace(/[^a-z\d\-~]+/g,"-")}async function dx({argTargetDir:e,targetDir:t}){const n=()=>t==="."?M.basename(M.resolve()):t;let i=await re.prompt([{type:"input",name:"projectName",message:"Project name:",default:Vr,required:!0,transformer:r=>Wr(r)||Vr,when:()=>!e,validate:r=>r?!0:"Project name cannot be empty"},{type:"input",name:"description",message:"Project description:",default:"A new game project"},{type:"input",name:"packageName",message:"Package name:",default:()=>Dx(n()),validate:r=>fx(r)||"Invalid package name. The name can only include URL-friendly characters."},{type:"list",name:"overwrite",message:"Overwrite existing files?",default:"yes",choices:[{description:"Remove existing files and continue",name:"Yes",value:T0.Yes},{description:"Keep existing files and continue",name:"Ignore",value:T0.No},{description:"Cancel operation",name:"Cancel",value:T0.Cancel}],when:({packageName:r=Gr})=>I.existsSync(r)&&!cx(r)}]);if(i.overwrite===T0.Cancel)throw new Error(zt("\u2716")+" Operation cancelled");return i}const hx=process.cwd(),px={_gitignore:".gitignore"};async function Ex(e){let t=e||Gr,n,{description:i,overwrite:r,packageName:o,projectName:x}=await dx({argTargetDir:e,targetDir:t}),{UIFramework:a,gameType:s,narrativeLanguage:u,multidevice:c,identifier:f}=await ux({packageName:o}),l;switch(s){case It.VisualNovel:switch(a){case a0.React:switch(u){case t0.Typescript:c?l="template-react-vite-muijoy-tauri":l="template-react-vite-muijoy",n="src/labels/startLabel.ts";break;case t0.Ink:c?l="template-react-vite-muijoy-ink-tauri":l="template-react-vite-muijoy-ink",n="src/ink/start.ink";break;case t0.Renpy:throw new Error("There are no templates for this narrative language");default:throw new Error("Unknown narrative language")}break;case a0.Vue:case a0.Angular:throw new Error("There are no templates for this game type and UI framework");default:throw new Error("Unknown UI framework")}break;default:throw new Error("Unknown game type")}const D=M.join(hx,t);r===T0.Yes?lx(D):I.existsSync(D)||I.mkdirSync(D,{recursive:!0}),console.log(`
 Scaffolding project in ${D}...`);const h=M.resolve(ni(import.meta.url),"../..",`${l}`),d=(C,p)=>{const m=M.join(D,px[C]??C);p?I.writeFileSync(m,p):zr(M.join(h,C),m)},E=I.readdirSync(h);for(const C of E)switch(C){case"package.json":case"vite.config.ts":case"index.html":let p=I.readFileSync(M.join(h,C),"utf-8");p=p.replace(/my-app-package-name/g,o),p=p.replace(/my-app-description/g,i),p=p.replace(/my-app-project-name/g,x),d(C,p);break;case".git":case"package-lock.json":break;default:d(C)}const F=M.join(D,"src-tauri");if(I.existsSync(F)){const C=I.readdirSync(F);for(const p of C)switch(p){case"Cargo.lock":case"Cargo.toml":case"tauri.conf.json":let m=I.readFileSync(M.join(F,p),"utf-8");m=m.replace(/my-app-package-name/g,o),m=m.replace(/my-app-description/g,i),m=m.replace(/my-app-project-name/g,x),m=m.replace(/com.my-app-project-name.app/g,f),d(M.join("src-tauri",p),m)}}const b=M.join(D,"_github");return I.existsSync(b)&&I.renameSync(b,M.join(D,".github")),console.log("Done."),{rootFolder:D,fileToOpen:n}}function bx(e,t){I.mkdirSync(t,{recursive:!0});for(const n of I.readdirSync(e)){const i=M.resolve(e,n),r=M.resolve(t,n);zr(i,r)}}function zr(e,t){I.statSync(e).isDirectory()?bx(e,t):I.copyFileSync(e,t)}function Fx(e){if(!e)return;const t=e.split(" ")[0].split("/");return{name:t[0],version:t[1]}}const Yr=$i(process.argv.slice(2),{default:{help:!1},alias:{h:"help",t:"template"},string:["_"]}),Hr=process.cwd(),mx=`Usage: create-pixi-vn [OPTION]... [DIRECTORY]
 
 Create a new Pixi\u2019VN project.

package/package.json

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

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

@@ -18,44 +18,7 @@ The history modal is a list of all the dialogues and choices that have been disp
 
 The settings modal allows you to change the text speed, go to full screen, edit theme colors, and change go to main menu. The settings for the audio have not been added nor the libraries to manage it, but I recommend adding them.
 
-## How to use
-
-Before starting, you need to have Node.js installed on your computer. If you don't have it, you can download it [here](https://nodejs.org/).
-
-### Recommended Visual Studio Code extensions
-
-* [JavaScript and TypeScript Nightly](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next): Provides JavaScript and TypeScript nightlies.
-* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Integrates ESLint into VS Code.
-* [vscode-color-picker](https://marketplace.visualstudio.com/items?itemName=antiantisepticeye.vscode-color-picker): A color picker for Visual Studio Code.
-* [Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens): Shows the latest version for each package using code lens.
-
-### Change the icon
-
-You can change the icon of the game by replacing the images in the `public` folder.
-
-### Installation
-
-First, is necessary install the dependencies. To do this, open a terminal in the root folder of the project and run the following command:
-
-```bash
-npm install
-```
-
-### Start the web application
-
-To start the web application, run the following command:
-
-```bash
-npm start
-```
-
-This command will start the development server. Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
-
-#### Debugging the web application
-
-If you are using Visual Studio Code, you can use the debug configuration provided with the template. To do this, after launching `npm start`, go to the debug section and select the `Launch Chrome` configuration.
-
-## Keyboard shortcuts (hotkeys)
+### Keyboard shortcuts (hotkeys)
 
 * `Space` or `Enter`: Continue the dialogue.
 * `Keep Space` or `Keep Enter`: Skip the dialogue.
@@ -65,7 +28,7 @@ If you are using Visual Studio Code, you can use the debug configuration provide
 * `Esc`: Open the settings modal.
 * `Shift` + `V`: Hide the UI (Show only the canvas).
 
-## Used libraries
+### Used libraries
 
 This template uses the following libraries:
 
@@ -93,6 +56,43 @@ Text libraries:
 * [i18next](https://www.i18next.com/): A library that gives the possibility to manage multiple translations in the application.
 * [Reacr Markdown](https://www.npmjs.com/package/react-markdown): A library that allows you to render markdown in React components.
 
+## How to use
+
+Before starting, you need to have Node.js installed on your computer. If you don't have it, you can download it [here](https://nodejs.org/).
+
+### Recommended Visual Studio Code extensions
+
+* [JavaScript and TypeScript Nightly](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next): Provides JavaScript and TypeScript nightlies.
+* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Integrates ESLint into VS Code.
+* [vscode-color-picker](https://marketplace.visualstudio.com/items?itemName=antiantisepticeye.vscode-color-picker): A color picker for Visual Studio Code.
+* [Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens): Shows the latest version for each package using code lens.
+
+### Change the icon
+
+You can change the icon of the game by replacing the images in the `public` folder.
+
+## Installation
+
+First, is necessary install the dependencies. To do this, open a terminal in the root folder of the project and run the following command:
+
+```bash
+npm install
+```
+
+## Start the web application
+
+To start the web application, run the following command:
+
+```bash
+npm start
+```
+
+This command will start the development server. Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+### Debugging the web application
+
+If you are using Visual Studio Code, you can use the debug configuration provided with the template. To do this, after launching `npm start`, go to the debug section and select the `Launch Chrome` configuration.
+
 ## Distribution
 
 ### Web application

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

@@ -1,8 +1,8 @@
 import { lazy, Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import LoadingScreen from "./screens/LoadingScreen";
-import { defineAssets } from "./utilities/assets-utility";
-import { initializeIndexedDB } from "./utilities/indexedDB-utility";
+import { defineAssets } from "./utils/assets-utility";
+import { initializeIndexedDB } from "./utils/indexedDB-utility";
 
 export default function App() {
     const Home = lazy(async () => {

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

@@ -9,7 +9,7 @@ import TypographyShadow from "../components/TypographyShadow";
 import { MAIN_MENU_ROUTE } from '../constans';
 import GameSaveData from '../models/GameSaveData';
 import useQuerySaves from '../use_query/useQuerySaves';
-import { downloadGameSave } from '../utilities/save-utility';
+import { downloadGameSave } from '../utils/save-utility';
 
 export default function GameSaveSlot({ saveId, onDelete, onLoad, onOverwriteSave, onSave }: {
     saveId: number,

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

@@ -10,7 +10,7 @@ import { hideInterfaceState } from '../atoms/hideInterfaceState';
 import { nextStepLoadingState } from '../atoms/nextStepLoadingState';
 import { skipEnabledState } from '../atoms/skipEnabledState';
 import { INTERFACE_DATA_USE_QUEY_KEY, useQueryCanGoNext } from '../use_query/useQueryInterface';
-import { useMyNavigate } from '../utilities/navigate-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
 
 export default function NextButton() {
     const [skip, setSkip] = useRecoilState(skipEnabledState)

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

@@ -6,8 +6,8 @@ import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { openSettingsState } from '../atoms/openSettingsState';
 import ModalDialogCustom from '../components/ModalDialog';
-import { gameEnd } from '../utilities/actions-utility';
-import { useMyNavigate } from '../utilities/navigate-utility';
+import { gameEnd } from '../utils/actions-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
 
 export default function ReturnMainMenuButton() {
     const openSettings = useSetRecoilState(openSettingsState);

package/template-react-vite-muijoy/src/i18n.ts

@@ -1,7 +1,7 @@
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
-import strings_en from '../src/values/translations/strings_en.json';
+import strings_en from '../src/locales/strings_en.json';
 
 const getUserLang = (): string => {
     let userLang: string = navigator.language || "en";

package/template-react-vite-muijoy/src/interceptors/OnKeyEventInterceptor.tsx

@@ -8,7 +8,7 @@ import { hideInterfaceState } from '../atoms/hideInterfaceState';
 import { saveLoadAlertState } from '../atoms/saveLoadAlertState';
 import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from '../use_query/useQueryLastSave';
 import { SAVES_USE_QUEY_KEY } from '../use_query/useQuerySaves';
-import { putSaveIntoIndexDB } from '../utilities/save-utility';
+import { putSaveIntoIndexDB } from '../utils/save-utility';
 
 export default function EventInterceptor() {
     const [hideInterface, setHideInterface] = useRecoilState(hideInterfaceState);

package/template-react-vite-muijoy/src/interceptors/RefreshEventInterceptor.tsx

@@ -3,8 +3,8 @@ import { useCallback, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { LOADING_ROUTE, MAIN_MENU_ROUTE } from '../constans';
 import { INTERFACE_DATA_USE_QUEY_KEY } from '../use_query/useQueryInterface';
-import { useMyNavigate } from '../utilities/navigate-utility';
-import { addRefreshSave, loadRefreshSave } from '../utilities/save-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
+import { addRefreshSave, loadRefreshSave } from '../utils/save-utility';
 
 export default function RefreshSaveEventInterceptor() {
     const navigate = useMyNavigate();

package/template-react-vite-muijoy/src/interceptors/SkipAutoInterceptor.tsx

@@ -9,7 +9,7 @@ import { nextStepLoadingState } from '../atoms/nextStepLoadingState';
 import { skipEnabledState } from '../atoms/skipEnabledState';
 import { typewriterIsAnimatedState } from '../atoms/typewriterIsAnimatedState';
 import { INTERFACE_DATA_USE_QUEY_KEY } from '../use_query/useQueryInterface';
-import { useMyNavigate } from '../utilities/navigate-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
 
 export default function SkipAutoInterceptor() {
     const navigate = useMyNavigate();

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

@@ -2,7 +2,7 @@ import { canvas, narration } from '@drincs/pixi-vn'
 import { createRoot } from 'react-dom/client'
 import App from './App'
 import './index.css'
-import { gameEnd } from './utilities/actions-utility'
+import { gameEnd } from './utils/actions-utility'
 import './values/characters'
 
 // Canvas setup with PIXI

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

@@ -11,7 +11,7 @@ import { dialogueCardHeightState } from '../atoms/dialogueCardHeightState';
 import { hideInterfaceState } from '../atoms/hideInterfaceState';
 import ChoiceButton from '../components/ChoiceButton';
 import { INTERFACE_DATA_USE_QUEY_KEY, useQueryChoiceMenuOptions } from '../use_query/useQueryInterface';
-import { useMyNavigate } from '../utilities/navigate-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
 
 export default function ChoiceMenu({ fullscreen = true }: {
     fullscreen?: boolean,

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

@@ -14,8 +14,8 @@ import GameSaveSlot from '../components/GameSaveSlot';
 import ModalDialogCustom from '../components/ModalDialog';
 import { MAIN_MENU_ROUTE } from '../constans';
 import { INTERFACE_DATA_USE_QUEY_KEY } from '../use_query/useQueryInterface';
-import { useMyNavigate } from '../utilities/navigate-utility';
-import { downloadGameSave, loadGameSaveFromFile } from '../utilities/save-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
+import { downloadGameSave, loadGameSaveFromFile } from '../utils/save-utility';
 
 export default function GameSaveScreen() {
     const [open, setOpen] = useRecoilState(openGameSaveScreenState);

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

@@ -14,8 +14,8 @@ import { NARRATION_ROUTE } from '../constans';
 import startLabel from '../labels/startLabel';
 import { INTERFACE_DATA_USE_QUEY_KEY } from '../use_query/useQueryInterface';
 import useQueryLastSave from '../use_query/useQueryLastSave';
-import { useMyNavigate } from '../utilities/navigate-utility';
-import { loadSave } from '../utilities/save-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
+import { loadSave } from '../utils/save-utility';
 
 export default function MainMenu() {
     const navigate = useMyNavigate();

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

@@ -16,9 +16,9 @@ import TextMenuButton from '../components/TextMenuButton';
 import { INTERFACE_DATA_USE_QUEY_KEY, useQueryCanGoBack } from '../use_query/useQueryInterface';
 import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from '../use_query/useQueryLastSave';
 import { SAVES_USE_QUEY_KEY } from '../use_query/useQuerySaves';
-import { goBack } from '../utilities/actions-utility';
-import { useMyNavigate } from '../utilities/navigate-utility';
-import { putSaveIntoIndexDB } from '../utilities/save-utility';
+import { goBack } from '../utils/actions-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
+import { putSaveIntoIndexDB } from '../utils/save-utility';
 
 export default function QuickTools() {
     const setOpenSettings = useSetRecoilState(openSettingsState);

package/template-react-vite-muijoy/src/screens/modals/SaveLoadAlert.tsx

@@ -11,8 +11,8 @@ import ModalConfirmation from '../../components/ModalConfirmation';
 import { INTERFACE_DATA_USE_QUEY_KEY } from '../../use_query/useQueryInterface';
 import { LAST_SAVE_USE_QUEY_KEY } from '../../use_query/useQueryLastSave';
 import { SAVES_USE_QUEY_KEY } from '../../use_query/useQuerySaves';
-import { useMyNavigate } from '../../utilities/navigate-utility';
-import { deleteSaveFromIndexDB, loadSave, putSaveIntoIndexDB } from '../../utilities/save-utility';
+import { useMyNavigate } from '../../utils/navigate-utility';
+import { deleteSaveFromIndexDB, loadSave, putSaveIntoIndexDB } from '../../utils/save-utility';
 
 export default function SaveLoadAlert() {
     const navigate = useMyNavigate();

package/template-react-vite-muijoy/src/screens/settings/SaveLoadSettingButtons.tsx

@@ -16,8 +16,8 @@ import SettingButton from '../../components/SettingButton';
 import { INTERFACE_DATA_USE_QUEY_KEY } from '../../use_query/useQueryInterface';
 import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from '../../use_query/useQueryLastSave';
 import { SAVES_USE_QUEY_KEY } from '../../use_query/useQuerySaves';
-import { useMyNavigate } from '../../utilities/navigate-utility';
-import { downloadGameSave, loadGameSaveFromFile, putSaveIntoIndexDB } from '../../utilities/save-utility';
+import { useMyNavigate } from '../../utils/navigate-utility';
+import { downloadGameSave, loadGameSaveFromFile, putSaveIntoIndexDB } from '../../utils/save-utility';
 
 export default function SaveLoadSettingButtons() {
     const navigate = useMyNavigate();

package/template-react-vite-muijoy/src/use_query/useQueryLastSave.ts

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { getLastSaveFromIndexDB } from "../utilities/save-utility";
+import { getLastSaveFromIndexDB } from "../utils/save-utility";
 
 export const LAST_SAVE_USE_QUEY_KEY = "last_save_use_quey_key";
 

package/template-react-vite-muijoy/src/use_query/useQuerySaves.ts

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { getSaveFromIndexDB } from "../utilities/save-utility";
+import { getSaveFromIndexDB } from "../utils/save-utility";
 
 export const SAVES_USE_QUEY_KEY = "saves_use_quey_key";
 

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

@@ -18,6 +18,45 @@ The history modal is a list of all the dialogues and choices that have been disp
 
 The settings modal allows you to change the text speed, go to full screen, edit theme colors, and change go to main menu. The settings for the audio have not been added nor the libraries to manage it, but I recommend adding them.
 
+### Keyboard shortcuts (hotkeys)
+
+* `Space` or `Enter`: Continue the dialogue.
+* `Keep Space` or `Keep Enter`: Skip the dialogue.
+* `Shift` + `S`: Quick save the game.
+* `Shift` + `L`: Quick load the game.
+* `Shift` + `H`: Open the history modal.
+* `Esc`: Open the settings modal.
+* `Shift` + `V`: Hide the UI (Show only the canvas).
+
+### Used libraries
+
+This template uses the following libraries:
+
+Core libraries:
+
+* [Pixi’VN](https://www.npmjs.com/package/@drincs/pixi-vn): A visual novel library.
+* [Pixi’VN - *ink* Integration](https://www.npmjs.com/package/@drincs/pixi-vn-ink): A library that provides integration with the *ink* language.
+* [Vite](https://vitejs.dev/): A build tool that aims to provide a faster and leaner development experience for modern web projects.
+* [Vite Checker](https://www.npmjs.com/package/vite-plugin-checker): A Vite plugin that checks TypeScript types and ESLint on each build.
+* [PWA Vite Plugin](https://vite-pwa-org.netlify.app): A Vite plugin that provides PWA support. This allows the possibility of installing the game as a Progressive Web App.
+* [Recoil](https://recoiljs.org/): A state management library for React.
+* [React Router](https://reactrouter.com/): A library that provides routing for React applications.
+* [Tanstack Query](https://tanstack.com/tanstack-query/): A library that provides a set of tools for getting, caching, and updating game data.
+  <img width="44" alt="image" src="https://github.com/user-attachments/assets/bf70dddc-68c0-48f4-9c41-74c22f54e3d1">
+  You can use the following button to show Tanstack Query interactions with the game. (the button will be automatically hidden when released)
+
+UI libraries:
+
+* [Mui Joy](https://mui.com/joy-ui/getting-started/): A React UI framework that provides a set of components and styles for building a website.
+* [Motion](https://motion.dev/): A simple yet powerful motion library for React.
+* [Notistack](https://iamhosseindhv.com/notistack): A library that provides snackbar notifications for React.
+* [React Color Palette](https://www.npmjs.com/package/react-color-palette): A library that provides a color picker for React.
+
+Text libraries:
+
+* [i18next](https://www.i18next.com/): A library that gives the possibility to manage multiple translations in the application.
+* [Reacr Markdown](https://www.npmjs.com/package/react-markdown): A library that allows you to render markdown in React components.
+
 ## How to use
 
 Before starting, you need to have Node.js installed on your computer. If you don't have it, you can download it [here](https://nodejs.org/).
@@ -34,31 +73,42 @@ Before starting, you need to have Node.js installed on your computer. If you don
 
 You can change the icon of the game by replacing the images in the `public` folder.
 
-### Writing/testing the narrative with Inky
+## *ink* - Custom hashtag scripts
 
-To write and test the narrative, you can use the **Inky editor**. Inky is a tool for writing interactive fiction using the Ink language. Of course, the special features introduced by pixi-vn will not be ignored by Inky. You can download it [here](https://www.inklestudios.com/ink/).
+By using the [onInkHashtagScript](https://pixi-vn.web.app/ink/ink-hashtag.html) function, in this template the following features have been added.
+
+**Moving between screens**: This feature allows you to navigate between different screens. The syntax is as follows:
+
+`#` + `navigate` + `[route]`
 
-To use Inky with this template, you can open the `src/main.ink` file in Inky. Ricorda che quando Importi nuovi file con Inky devi anche importarli in usando TypeScript:
+`route`: The route/path to navigate to. Read more about routes in the [Router documentation](https://pixi-vn.web.app/start/interface-navigate.html).
 
 ```ink
-// main.ink
-INCLUDE ink_labels/start.ink
-INCLUDE ink_labels/second.ink
--> start
+#navigate /narration
 ```
 
-```tsx
-// utilities/ink-utility.ts
-import { importInkText } from '@drincs/pixi-vn-ink';
-import startLabel from '../ink_labels/start.ink?raw';
-import secondLabel from '../ink_labels/second.ink?raw';
+**Rename the character**: This feature allows you to change the name of the character speaking. The syntax is as follows:
+
+`#` + `rename` + `[character id]` + `[new name]`
+
+### *ink* - ink files in the project
+
+The `ink` folder contains the *ink* files that will be used in the game. In this project, all files `.ink`, that are in the `ink` folder, will be included automatically in the project. You can change this behavior by modifying the `src/utils/ink-utility.ts` file.
 
-export async function importAllInkLabels() {
-    await importInkText([startLabel, secondLabel])
-}
+### *ink* - Writing/testing the narrative with Inky
+
+To write and test the narrative, you can use the **Inky editor**. Inky is a tool for writing interactive fiction using the Ink language. Of course, the special features introduced by pixi-vn will not be ignored by Inky. You can download it [here](https://www.inklestudios.com/ink/).
+
+To use Inky with this template, you can open the `src/main.ink` file in Inky.
+
+```ink
+// main.ink
+INCLUDE ink/start.ink
+INCLUDE ink/second.ink
+-> start
 ```
 
-### Installation
+## Installation
 
 First, is necessary install the dependencies. To do this, open a terminal in the root folder of the project and run the following command:
 
@@ -66,7 +116,7 @@ First, is necessary install the dependencies. To do this, open a terminal in the
 npm install
 ```
 
-### Start the web application
+## Start the web application
 
 To start the web application, run the following command:
 
@@ -76,67 +126,10 @@ npm start
 
 This command will start the development server. Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
 
-#### Debugging the web application
+### Debugging the web application
 
 If you are using Visual Studio Code, you can use the debug configuration provided with the template. To do this, after launching `npm start`, go to the debug section and select the `Launch Chrome` configuration.
 
-## Keyboard shortcuts (hotkeys)
-
-* `Space` or `Enter`: Continue the dialogue.
-* `Keep Space` or `Keep Enter`: Skip the dialogue.
-* `Shift` + `S`: Quick save the game.
-* `Shift` + `L`: Quick load the game.
-* `Shift` + `H`: Open the history modal.
-* `Esc`: Open the settings modal.
-* `Shift` + `V`: Hide the UI (Show only the canvas).
-
-## Custom hashtag scripts
-
-By using the [onInkHashtagScript](https://pixi-vn.web.app/ink/ink-hashtag.html) function, in this template the following features have been added.
-
-**Moving between screens**: This feature allows you to navigate between different screens. The syntax is as follows:
-
-`#` + `navigate` + `[route]`
-
-`route`: The route/path to navigate to. Read more about routes in the [Router documentation](https://pixi-vn.web.app/start/interface-navigate.html).
-
-```ink
-#navigate /narration
-```
-
-**Rename the character**: This feature allows you to change the name of the character speaking. The syntax is as follows:
-
-`#` + `rename` + `[character id]` + `[new name]`
-
-## Used libraries
-
-This template uses the following libraries:
-
-Core libraries:
-
-* [Pixi’VN](https://www.npmjs.com/package/@drincs/pixi-vn): A visual novel library.
-* [Pixi’VN - Ink Integration](https://www.npmjs.com/package/@drincs/pixi-vn-ink): A library that provides integration with the Ink language.
-* [Vite](https://vitejs.dev/): A build tool that aims to provide a faster and leaner development experience for modern web projects.
-* [Vite Checker](https://www.npmjs.com/package/vite-plugin-checker): A Vite plugin that checks TypeScript types and ESLint on each build.
-* [PWA Vite Plugin](https://vite-pwa-org.netlify.app): A Vite plugin that provides PWA support. This allows the possibility of installing the game as a Progressive Web App.
-* [Recoil](https://recoiljs.org/): A state management library for React.
-* [React Router](https://reactrouter.com/): A library that provides routing for React applications.
-* [Tanstack Query](https://tanstack.com/tanstack-query/): A library that provides a set of tools for getting, caching, and updating game data.
-  <img width="44" alt="image" src="https://github.com/user-attachments/assets/bf70dddc-68c0-48f4-9c41-74c22f54e3d1">
-  You can use the following button to show Tanstack Query interactions with the game. (the button will be automatically hidden when released)
-
-UI libraries:
-
-* [Mui Joy](https://mui.com/joy-ui/getting-started/): A React UI framework that provides a set of components and styles for building a website.
-* [Motion](https://motion.dev/): A simple yet powerful motion library for React.
-* [Notistack](https://iamhosseindhv.com/notistack): A library that provides snackbar notifications for React.
-* [React Color Palette](https://www.npmjs.com/package/react-color-palette): A library that provides a color picker for React.
-
-Text libraries:
-
-* [i18next](https://www.i18next.com/): A library that gives the possibility to manage multiple translations in the application.
-* [Reacr Markdown](https://www.npmjs.com/package/react-markdown): A library that allows you to render markdown in React components.
-
 ## Distribution
 
 ### Web application

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

@@ -1,9 +1,9 @@
 import { lazy, Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import LoadingScreen from "./screens/LoadingScreen";
-import { defineAssets } from "./utilities/assets-utility";
-import { initializeIndexedDB } from "./utilities/indexedDB-utility";
-import { importAllInkLabels } from "./utilities/ink-utility";
+import { defineAssets } from "./utils/assets-utility";
+import { initializeIndexedDB } from "./utils/indexedDB-utility";
+import { importAllInkLabels } from "./utils/ink-utility";
 
 export default function App() {
     const Home = lazy(async () => {

package/template-react-vite-muijoy-ink/src/components/GameSaveSlot.tsx

@@ -9,7 +9,7 @@ import TypographyShadow from "../components/TypographyShadow";
 import { MAIN_MENU_ROUTE } from '../constans';
 import GameSaveData from '../models/GameSaveData';
 import useQuerySaves from '../use_query/useQuerySaves';
-import { downloadGameSave } from '../utilities/save-utility';
+import { downloadGameSave } from '../utils/save-utility';
 
 export default function GameSaveSlot({ saveId, onDelete, onLoad, onOverwriteSave, onSave }: {
     saveId: number,

package/template-react-vite-muijoy-ink/src/components/NextButton.tsx

@@ -10,7 +10,7 @@ import { hideInterfaceState } from '../atoms/hideInterfaceState';
 import { nextStepLoadingState } from '../atoms/nextStepLoadingState';
 import { skipEnabledState } from '../atoms/skipEnabledState';
 import { INTERFACE_DATA_USE_QUEY_KEY, useQueryCanGoNext } from '../use_query/useQueryInterface';
-import { useMyNavigate } from '../utilities/navigate-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
 
 export default function NextButton() {
     const [skip, setSkip] = useRecoilState(skipEnabledState)

package/template-react-vite-muijoy-ink/src/components/ReturnMainMenuButton.tsx

@@ -6,8 +6,8 @@ import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { openSettingsState } from '../atoms/openSettingsState';
 import ModalDialogCustom from '../components/ModalDialog';
-import { gameEnd } from '../utilities/actions-utility';
-import { useMyNavigate } from '../utilities/navigate-utility';
+import { gameEnd } from '../utils/actions-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
 
 export default function ReturnMainMenuButton() {
     const openSettings = useSetRecoilState(openSettingsState);

package/template-react-vite-muijoy-ink/src/i18n.ts

@@ -1,7 +1,7 @@
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
-import strings_en from '../src/values/translations/strings_en.json';
+import strings_en from '../src/locales/strings_en.json';
 
 const getUserLang = (): string => {
     let userLang: string = navigator.language || "en";

package/template-react-vite-muijoy-ink/src/interceptors/InkInitialization.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { initializeInk } from '../utilities/ink-utility';
-import { useMyNavigate } from '../utilities/navigate-utility';
+import { initializeInk } from '../utils/ink-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
 
 export default function InkInitialization() {
     const navigate = useMyNavigate();

package/template-react-vite-muijoy-ink/src/interceptors/OnKeyEventInterceptor.tsx

@@ -8,7 +8,7 @@ import { hideInterfaceState } from '../atoms/hideInterfaceState';
 import { saveLoadAlertState } from '../atoms/saveLoadAlertState';
 import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from '../use_query/useQueryLastSave';
 import { SAVES_USE_QUEY_KEY } from '../use_query/useQuerySaves';
-import { putSaveIntoIndexDB } from '../utilities/save-utility';
+import { putSaveIntoIndexDB } from '../utils/save-utility';
 
 export default function EventInterceptor() {
     const [hideInterface, setHideInterface] = useRecoilState(hideInterfaceState);

package/template-react-vite-muijoy-ink/src/interceptors/RefreshEventInterceptor.tsx

@@ -3,8 +3,8 @@ import { useCallback, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { LOADING_ROUTE, MAIN_MENU_ROUTE } from '../constans';
 import { INTERFACE_DATA_USE_QUEY_KEY } from '../use_query/useQueryInterface';
-import { useMyNavigate } from '../utilities/navigate-utility';
-import { addRefreshSave, loadRefreshSave } from '../utilities/save-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
+import { addRefreshSave, loadRefreshSave } from '../utils/save-utility';
 
 export default function RefreshSaveEventInterceptor() {
     const navigate = useMyNavigate();

package/template-react-vite-muijoy-ink/src/interceptors/SkipAutoInterceptor.tsx

@@ -9,7 +9,7 @@ import { nextStepLoadingState } from '../atoms/nextStepLoadingState';
 import { skipEnabledState } from '../atoms/skipEnabledState';
 import { typewriterIsAnimatedState } from '../atoms/typewriterIsAnimatedState';
 import { INTERFACE_DATA_USE_QUEY_KEY } from '../use_query/useQueryInterface';
-import { useMyNavigate } from '../utilities/navigate-utility';
+import { useMyNavigate } from '../utils/navigate-utility';
 
 export default function SkipAutoInterceptor() {
     const navigate = useMyNavigate();

package/template-react-vite-muijoy-ink/src/main-ink.ink

@@ -1,2 +1,2 @@
-INCLUDE ink_labels/start.ink
+INCLUDE ink/start.ink
 -> start