create-pixi-vn 2.0.2 → 2.0.4

package/template-react-vite-muijoy-tauri/src/components/ui/image.tsx

@@ -1,50 +1,19 @@
-import { getPixiJSAsset } from "@/lib/utils/assets-utility";
-import { Image as UnpicImage } from "@unpic/react";
-import type * as React from "react";
-import { useMemo } from "react";
+import { useImageSrc } from "@/lib/hooks/image-hooks";
+import { Image as UnpicImage, type ImageProps } from "@unpic/react";
+import { ImageOff } from "lucide-react";
 
 export function Image({
     src,
     loading = "lazy",
-    width,
-    height,
     ...props
-}: React.ComponentProps<"img">) {
-    const resolvedSrc = useMemo(() => {
-        if (!src) {
-            return undefined;
-        }
-        return getPixiJSAsset(src);
-    }, [src]);
+}: Omit<ImageProps, "src"> & { src?: ImageProps["src"] | null }) {
+    const resolvedSrc = useImageSrc(src);
 
     if (!resolvedSrc) {
-        return null;
-    }
-
-    const parsedWidth =
-        typeof width === "number" ? width : width ? Number.parseFloat(width) : undefined;
-    const parsedHeight =
-        typeof height === "number" ? height : height ? Number.parseFloat(height) : undefined;
-
-    if (
-        parsedWidth !== undefined &&
-        parsedHeight !== undefined &&
-        Number.isFinite(parsedWidth) &&
-        Number.isFinite(parsedHeight) &&
-        parsedWidth > 0 &&
-        parsedHeight > 0
-    ) {
         return (
-            <UnpicImage
-                src={resolvedSrc}
-                width={parsedWidth}
-                height={parsedHeight}
-                layout="constrained"
-                loading={loading}
-                {...props}
-            />
+            <ImageOff aria-label={props.alt ?? "Image unavailable"} className={props.className} />
         );
     }
 
-    return <UnpicImage src={resolvedSrc} layout="fullWidth" loading={loading} {...props} />;
+    return <UnpicImage {...({ src: resolvedSrc, loading, ...props } as ImageProps)} />;
 }

package/template-react-vite-muijoy-tauri/src/content/labels/start.label.ts

@@ -1,7 +1,5 @@
 import { BGM_CHANNEL_NAME } from "@/constants";
 import { james, mc, sly, steph, steph_fullname } from "@/content/characters";
-import { animation01 } from "@/content/labels/animations.label";
-import { secondPart } from "@/content/labels/second.label";
 import {
     Assets,
     moveIn,
@@ -489,7 +487,7 @@ export const startLabel = newLabel(
             narration.dialogGlue = true;
             narration.dialogue = `and returns with a HUGE tinfoil-covered platter.`;
             await sound.play("sfx_whoosh", { delay: 0.1 });
-            await narration.call(animation01, props);
+            await narration.call("animation_01", props);
         },
         async () => {
             await showImageContainer("james", [
@@ -555,7 +553,7 @@ export const startLabel = newLabel(
             moveOut("steph", { direction: "left", ease: "easeInOut", duration: 0.5, delay: 0.1 });
             narration.dialogue = `You want continue to the next part?`;
             narration.choices = [
-                newChoiceOption("Yes, I want to continue", secondPart, {}, { type: "jump" }),
+                newChoiceOption("Yes, I want to continue", "second_part", {}, { type: "jump" }),
                 newCloseChoiceOption("No, I want to stop here"),
             ];
         },

package/template-react-vite-muijoy-tauri/src/pixi-vn-keys.gen.d.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck
+/* eslint-disable */
+// noinspection JSUnusedGlobalSymbols
+// This file is auto-generated by @drincs/pixi-vn vite plugin. Do not edit manually.
+declare module "@drincs/pixi-vn/characters" {
+    interface PixivnCharacterIds {
+        "mc": never;
+        "james": never;
+        "steph": never;
+        "sly": never;
+    }
+}
+declare module "@drincs/pixi-vn/narration" {
+    interface PixivnLabelIds {
+        "animation_01": never;
+        "second_part": never;
+        "start": never;
+    }
+}
+export {};

package/template-react-vite-muijoy-tauri/vite.config.ts

@@ -37,6 +37,7 @@ export default defineConfig({
             content: "./src/content/index.ts",
             characters: "./src/content/characters.ts",
             labels: "./src/content/labels/*.label.ts",
+            typeFilePath: "./src/pixi-vn-keys.gen.d.ts",
         }),
         VitePWA({
             // generate icons with: npm run icon

package/template-react-vite-muijoy-electron/.eslintrc.cjs

@@ -1,29 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true, "node": true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:import/recommended',
-    'plugin:import/electron',
-    'plugin:import/typescript',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-  "prefer-const": ["error", {
-    "destructuring": "all",
-    "ignoreReadBeforeAssign": true
-  }],
-  packagerConfig: {
-    icon: 'src-electron/icons/icon' // no file extension required
-  }
-}

package/template-react-vite-muijoy-electron/.vscode/extensions.json

@@ -1,9 +0,0 @@
-{
-    "recommendations": [
-        "ms-vscode.vscode-typescript-next",
-        "dbaeumer.vscode-eslint",
-        "antiantisepticeye.vscode-color-picker",
-        "pflannery.vscode-versionlens",
-        "ionic.ionic"
-    ]
-}

package/template-react-vite-muijoy-electron/.vscode/launch.json

@@ -1,32 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    // bash: https://docs.microsoft.com/it-it/windows/dev-environment/javascript/nodejs-on-wsl
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Launch Chrome localhost 5173",
-            "request": "launch",
-            "type": "chrome",
-            "url": "http://localhost:5173",
-            "webRoot": "${workspaceFolder}",
-        },
-        {
-            "name": "Launch Desktop Program",
-            "type": "node",
-            "request": "launch",
-            "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.sh",
-            "windows": {
-              "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.cmd"
-            },
-            // runtimeArgs will be passed directly to your Electron application
-            "runtimeArgs": [
-              "foo",
-              "bar"
-            ],
-            "cwd": "${workspaceFolder}",
-            "console": "integratedTerminal"
-        }
-    ]
-}

package/template-react-vite-muijoy-electron/.vscode/settings.json

@@ -1,49 +0,0 @@
-{
-    // Formatter
-    "[javascript]": {
-        "editor.defaultFormatter": "vscode.typescript-language-features",
-        "editor.formatOnSave": true
-    },
-    "[javascriptreact]": {
-        "editor.defaultFormatter": "vscode.typescript-language-features",
-        "editor.formatOnSave": true
-    },
-    "[typescript]": {
-        "editor.defaultFormatter": "vscode.typescript-language-features",
-        "editor.formatOnSave": true
-    },
-    "[typescriptreact]": {
-        "editor.defaultFormatter": "vscode.typescript-language-features",
-        "editor.formatOnSave": true
-    },
-    "[css]": {
-        "editor.defaultFormatter": "vscode.css-language-features",
-        "editor.formatOnSave": true
-    },
-    "[html]": {
-        "editor.defaultFormatter": "vscode.html-language-features"
-    },
-    // reorganise imports
-    "editor.codeActionsOnSave": {
-        "source.organizeImports": "explicit"
-    },
-    // references
-    "javascript.referencesCodeLens.enabled": true,
-    "javascript.referencesCodeLens.showOnAllFunctions": true,
-    "typescript.referencesCodeLens.enabled": true,
-    "typescript.referencesCodeLens.showOnAllFunctions": true,
-    // does fetch when he does Pull
-    "git.fetchOnPull": true,
-    // move file
-    "javascript.updateImportsOnFileMove.enabled": "always",
-    "typescript.updateImportsOnFileMove.enabled": "always",
-    // color
-    "vscode-color-picker.languages": [
-        "javascript",
-        "typescript",
-        "javascriptreact",
-        "typescriptreact",
-    ],
-    // olther
-    "extensions.ignoreRecommendations": false,
-}

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

@@ -1,207 +0,0 @@
-# Pixi’VN template (React + Vite + MUI joy)
-
-![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.
-
-## Overview
-
-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.
-
-The game page is in `/narration` route. It contains the text box, character avatar, and canvas for the background image. The text box displays the text of the current dialogue. The character avatar displays the character speaking the dialogue. The background image is the background of the scene.
-When a choice has to be made, the choices are displayed at the top of the screen.
-
-When you are in the game page, you can access with many features through a list of buttons located at the bottom. In this list you can save the game, load a saved game, skip the dialogue, auto play the dialogue, access to the history modal, and access to the settings modal.
-
-The history modal is a list of all the dialogues and choices that have been displayed.
-
-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/).
-
-### 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 use Visual Studio Code, you can use the debug configuration that comes with the template. To do this, go to the debug section and select the `Launch Chrome` configuration.
-
-### Start the Desktop Program (Electron)
-
-To start the Electron application, run the following command:
-
-```bash
-npm run electron:start
-```
-
-This command will start the Electron application. The application will open in a window on your computer.
-
-#### Debugging the Desktop Program
-
-If you use Visual Studio Code, you can use the debug configuration that comes with the template. To do this, go to the debug section and select the `Launch Desktop Program` configuration.
-
-### Mobile development
-
-This project gives the possibility to introduce the Ionic Framework to develop a mobile application. To do this I recommend following [this tutorial](https://pixi-vn.web.app/distribution%E2%80%90mobile.html).
-
-## 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 for PixiJS.
-* [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.
-* [Framer 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 distribution
-
-To build the project, run the following command:
-
-```bash
-npm run build
-```
-
-This command will create a `dist` folder with the files necessary to run the application. You can deploy this folder to a web server.
-
-You can read more about the possibilities of hosting in the [Pixi’VN documentation](https://pixi-vn.web.app/advanced/distribution.html#hosting).
-
-### Desktop application distribution
-
-To generate packages to install desktop devices we will use [Electron Forge Maker](https://www.electronforge.io/config/makers). Add more distribution settings to the `forge.config.cts` file.
-
-Basically it can run the following commands, installing the necessary libraries. You can reparse the generated packages from the `out` folder.
-
-```bash
-# Windows
-npm run electron:make -- --platform win32
-# Linux
-npm run electron:make -- --platform linux
-# MacOS
-npm run electron:make -- --platform darwin
-```
-
-Below is a more detailed explanation of the steps to take. (Not having an Apple Mac, I was unable to test this process)
-
-### Windows Distribution
-
-#### From Windows to Windows
-
-You can run the following commands to generate the distribution package.
-
-```bash
-npm i @rollup/rollup-win32-x64-msvc
-npm run electron:make -- --platform win32
-```
-
-#### From Linux to Windows
-
-You can run the following commands to generate the distribution package.
-
-```bash
-sudo apt install wine
-sudo apt install mono-complete
-sudo dpkg --add-architecture i386 && sudo apt-get update && sudo apt-get install wine32
-npm run electron:make -- --platform win32
-```
-
-### Linux Distribution
-
-#### From Windows to Linux
-
-You can run the following commands to generate the distribution package.
-
-```bash
-npm i @rollup/rollup-win32-x64-msvc
-npm run electron:make -- --platform linux
-```
-
-If you get the following error `the maker declared that it cannot run on win32.` then you will need to [install WSL](https://learn.microsoft.com/en-us/windows/wsl/install) and after that run the following command.
-
-```bash
-bash
-npm run electron:make -- --platform linux
-exit
-```
-
-#### Fom Linux to Linux
-
-You can run the following commands to generate the distribution package.
-
-```bash
-sudo apt install rpm dpkg fakeroot
-npm run electron:make -- --platform linux
-```
-
-### MacOS Distribution
-
-#### From Windows to MacOS
-
-You can run the following commands to generate the distribution package.
-
-```bash
-npm i @rollup/rollup-win32-x64-msvc
-npm run electron:make -- --platform darwin
-```
-
-#### From Linux to MacOS
-
-You can run the following commands to generate the distribution package.
-
-```bash
-sudo apt install zip
-npm run electron:make -- --platform darwin
-```
-
-## Custom App Icons
-
-Read the [Electron Forge documentation](https://www.electronforge.io/guides/create-and-add-icons).

package/template-react-vite-muijoy-electron/_gitignore

@@ -1,107 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-.DS_Store
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# Webpack
-.webpack/
-
-# Vite
-.vite/
-
-# Electron-Forge
-out/

package/template-react-vite-muijoy-electron/forge.config.cts

@@ -1,73 +0,0 @@
-import { MakerDeb } from '@electron-forge/maker-deb';
-import { MakerRpm } from '@electron-forge/maker-rpm';
-import { MakerSquirrel } from '@electron-forge/maker-squirrel';
-import { MakerZIP } from '@electron-forge/maker-zip';
-import { FusesPlugin } from '@electron-forge/plugin-fuses';
-import { VitePlugin } from '@electron-forge/plugin-vite';
-import type { ForgeConfig } from '@electron-forge/shared-types';
-import { FuseV1Options, FuseVersion } from '@electron/fuses';
-
-const config: ForgeConfig = {
-  packagerConfig: {
-    asar: true,
-  },
-  rebuildConfig: {},
-  makers: [
-    // The `MakerSquirrel` maker is only supported on Windows
-    new MakerSquirrel({
-      setupIcon: "src-electron/icons/icon.ico",
-      setupExe: "game.exe",
-    }),
-    // The `MakerZIP` maker is only supported on macOS
-    new MakerZIP({}, ['darwin']),
-    // The `MakerRpm` and `MakerDeb` makers are only supported on Linux
-    new MakerRpm({
-      options: {
-        categories: ["Game"],
-        icon: "src-electron/icons/icon.png",
-      }
-    }),
-    new MakerDeb({
-      options: {
-        categories: ["Game"],
-        icon: "src-electron/icons/icon.png",
-      }
-    })
-  ],
-  plugins: [
-    new VitePlugin({
-      // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
-      // If you are familiar with Vite configuration, it will look really familiar.
-      build: [
-        {
-          // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
-          entry: 'src-electron/main.ts',
-          config: 'vite.main.config.ts',
-        },
-        {
-          entry: 'src-electron/preload.ts',
-          config: 'vite.preload.config.ts',
-        },
-      ],
-      renderer: [
-        {
-          name: 'main_window',
-          config: 'vite.renderer.config.ts',
-        },
-      ],
-    }),
-    // Fuses are used to enable/disable various Electron functionality
-    // at package time, before code signing the application
-    new FusesPlugin({
-      version: FuseVersion.V1,
-      [FuseV1Options.RunAsNode]: false,
-      [FuseV1Options.EnableCookieEncryption]: true,
-      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
-      [FuseV1Options.EnableNodeCliInspectArguments]: false,
-      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
-      [FuseV1Options.OnlyLoadAppFromAsar]: true,
-    }),
-  ],
-};
-
-export default config;

package/template-react-vite-muijoy-electron/forge.env.d.ts

@@ -1 +0,0 @@
-/// <reference types="@electron-forge/plugin-vite/forge-vite-env" />

package/template-react-vite-muijoy-electron/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/pixi-vn.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/template-react-vite-muijoy-electron/ionic.config.json

@@ -1,7 +0,0 @@
-{
-  "name": "my-app",
-  "integrations": {
-    "capacitor": {}
-  },
-  "type": "react-vite"
-}