create-pixi-vn 1.5.0 → 1.5.2

package/package.json

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

package/template-game-engine/package.json

@@ -16,16 +16,16 @@
   "dependencies": {
     "@pixi/devtools": "^2.0.1",
     "@pixi/sound": "^6.0.1",
-    "pixi.js": "^8.9.2"
+    "pixi.js": "^8.10.1"
   },
   "devDependencies": {
-    "@drincs/pixi-vn": "^1.1.0",
+    "@drincs/pixi-vn": "^1.2.15",
     "@types/crypto-js": "^4.2.2",
     "crypto-js": "^4.2.0",
     "ts-node": "^10.9.2",
-    "tsup": "^8.4.0",
+    "tsup": "^8.5.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.2"
+    "vitest": "^3.2.2"
   },
   "keywords": [
     "engine",

package/template-game-engine/src/index.ts

@@ -5,6 +5,7 @@ import PIXIVN, {
     HistoryManagerStatic,
     narration,
     NarrationManagerStatic,
+    RegisteredCharacters,
     sound,
     stepHistory,
     storage,
@@ -71,10 +72,13 @@ export namespace Game {
                 NarrationManagerStatic._stepCounter = value;
             },
             getOpenedLabels: () => narration.openedLabels.length,
-            addHistoryItem: (historyInfo, opstions) => {
-                return stepHistory.add(historyInfo, opstions);
+            addHistoryItem: (historyInfo, options) => {
+                return stepHistory.add(historyInfo, options);
             },
             getCurrentStepsRunningNumber: () => NarrationManagerStatic.stepsRunning,
+            getCharacter: (id: string) => {
+                return RegisteredCharacters.get(id);
+            },
             // canvas
             onGoNextEnd: async () => {
                 CanvasManagerStatic._tickersToCompleteOnStepEnd.tikersIds.forEach(({ id }) => {
@@ -130,7 +134,11 @@ export namespace Game {
      */
     export async function restoreGameState(data: GameState, navigate: (path: string) => void) {
         stepHistory.restore(data.historyData);
-        await narration.restore(data.stepData, HistoryManagerStatic.lastHistoryStep);
+        const lastHistoryKey = stepHistory.lastKey;
+        if (typeof lastHistoryKey === "number") {
+            const historyItem = stepHistory.stepsInfoMap.get(lastHistoryKey) || null;
+            await narration.restore(data.stepData, historyItem);
+        }
         storage.restore(data.storageData);
         await canvas.restore(data.canvasData);
         sound.restore(data.soundData);

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

@@ -1,13 +1,12 @@
-# Pixi’VN template (React + Vite + MUI joy)
+# Pixi’VN template - Text-based Story - React
 
 ![pixi-vn-cover-react](https://github.com/user-attachments/assets/2abc8047-be07-487d-bf9b-de1c1f7c2ca2)
 
-This is a template for creating visual novels in React. It uses the Pixi’VN library and Vite as a build tool.
-This Template contains basic functionality inspired by the widespread Visual Noval engine Ren'Py.
+This is a template for creating text-based stories in React. It uses the Pixi’VN library and Vite as a build tool.
 
 ## Overview
 
-For testing purposes we will recreate the visual novel [Breakdown](https://joshpowlison.itch.io/breakdown) with Pixi’VN in this guide. Breakdown is a short story that has all the features that a visual novel should have. Josh Powlison, the creator of Breakdown, has given us permission to use his narration for educational purposes❤️.
+For testing purposes we will recreate the visual novel [Breakdown](https://joshpowlison.itch.io/breakdown) with Pixi’VN in this guide. Josh Powlison, the creator of Breakdown, has given us permission to use his narration for educational purposes❤️.
 
 The first page that appears is the main menu. From there, you can start the game, load a saved game, or go to the settings.
 

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

@@ -4,6 +4,7 @@
         "dbaeumer.vscode-eslint",
         "antiantisepticeye.vscode-color-picker",
         "pflannery.vscode-versionlens",
-        "esbenp.prettier-vscode"
+        "esbenp.prettier-vscode",
+        "drincs-productions.pixi-vn-ink-vscode"
     ]
 }

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

@@ -1,6 +1,6 @@
 # Pixi’VN template (React + Vite + MUI joy)
 
-![pixi-vn-cover-react](https://github.com/user-attachments/assets/2abc8047-be07-487d-bf9b-de1c1f7c2ca2)
+![pixi-vn-cover](https://github.com/user-attachments/assets/c67ea9f4-c91c-46ea-bfbe-6bc0d18b5de7)
 
 This is a template for creating visual novels in React. It uses the Pixi’VN library and Vite as a build tool.
 This Template contains basic functionality inspired by the widespread Visual Noval engine Ren'Py.
@@ -37,6 +37,7 @@ 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.
@@ -71,11 +72,47 @@ Before starting, you need to have Node.js installed on your computer. If you don
 * [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.
+* [ink - Pixi'VN](https://marketplace.visualstudio.com/items?itemName=drincs-productions.pixi-vn-ink-vscode): Syntax highlighting for the Ink language.
 
 ### Change the icon
 
 You can change the icon of the game by replacing the images in the `public` folder.
 
+## *ink* - 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]`
+
+### *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.
+
+### *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
 
 First, is necessary install the dependencies. To do this, open a terminal in the root folder of the project and run the following command:

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

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@drincs/pixi-vn": "^1.2.13",
+    "@drincs/pixi-vn-ink": "^0.7.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.1.0",

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

@@ -4,9 +4,10 @@ import { useI18n } from "./i18n";
 import LoadingScreen from "./screens/LoadingScreen";
 import { defineAssets } from "./utils/assets-utility";
 import { initializeIndexedDB } from "./utils/indexedDB-utility";
+import { importAllInkLabels } from "./utils/ink-utility";
 
 const Home = lazy(async () => {
-    await Promise.all([initializeIndexedDB(), defineAssets(), useI18n()]);
+    await Promise.all([initializeIndexedDB(), defineAssets(), useI18n(), importAllInkLabels()]);
     return import("./Home");
 });
 

package/template-story-react-vite-muijoy-ink/src/Home.tsx

@@ -2,6 +2,7 @@ import { Box } from "@mui/joy";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import Routes from "./AppRoutes";
 import useClosePageDetector from "./hooks/useClosePageDetector";
+import useInkInitialization from "./hooks/useInkInitialization";
 import useKeyboardDetector from "./hooks/useKeyboardDetector";
 import useEventListener from "./hooks/useKeyDetector";
 import Imports from "./Imports";
@@ -13,6 +14,7 @@ import Settings from "./screens/Settings";
 function HomeChild() {
     useKeyboardDetector();
     useClosePageDetector();
+    useInkInitialization();
     // Prevent the user from going back to the previous page
     useEventListener({
         type: "popstate",

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

@@ -1,6 +1,5 @@
 import { AssetsManifest } from "@drincs/pixi-vn";
 import { MAIN_MENU_ROUTE } from "../constans";
-import startLabel, { secondPart } from "../labels/startLabel";
 
 /**
  * Manifest for the assets used in the game.
@@ -20,7 +19,7 @@ const manifest: AssetsManifest = {
         },
         // labels
         {
-            name: startLabel.id,
+            name: "start",
             assets: [
                 {
                     alias: "bg01-hallway",
@@ -29,7 +28,7 @@ const manifest: AssetsManifest = {
             ],
         },
         {
-            name: secondPart.id,
+            name: "second_part",
             assets: [
                 {
                     alias: "bg02-dorm",

package/template-story-react-vite-muijoy-ink/src/hooks/useInkInitialization.tsx

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import { initializeInk } from "../utils/ink-utility";
+import useMyNavigate from "./useMyNavigate";
+
+export default function useInkInitialization() {
+    const navigate = useMyNavigate();
+
+    useEffect(() => {
+        initializeInk({ navigate });
+    }, []);
+
+    return null;
+}

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

@@ -1,3 +1,4 @@
+import { getCharacterById } from "@drincs/pixi-vn";
 import i18n from "i18next";
 import Backend from "i18next-chained-backend";
 import resourcesToBackend from "i18next-resources-to-backend";
@@ -28,6 +29,17 @@ export const useI18n = () => {
                         }),
                     ],
                 },
+                missingInterpolationHandler(_text, value, _options) {
+                    let key = value[1];
+                    if (key === "steph_fullname") {
+                        return "Stephanie";
+                    }
+                    let character = getCharacterById(key);
+                    if (character) {
+                        return character.name;
+                    }
+                    return `[${key}]`;
+                },
             });
     }
 };