Merge branch 'main' into deploy

package.json

@@ -12,13 +12,13 @@
     "publish": "npm run build && firebase deploy"
   },
   "dependencies": {
-    "@drincs/pixi-vn": "^0.6.14",
-    "@emotion/react": "^11.13.0",
+    "@drincs/pixi-vn": "^0.7.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/joy": "^5.0.0-beta.28",
-    "framer-motion": "^11.3.24",
-    "i18next": "^23.12.2",
+    "framer-motion": "^11.3.28",
+    "i18next": "^23.14.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
@@ -27,25 +27,25 @@
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^15.0.1",
     "react-markdown": "^9.0.1",
-    "react-router-dom": "^6.26.0",
+    "react-router-dom": "^6.26.1",
     "recoil": "^0.7.7",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "shade-generator": "^1.2.7",
     "vite-plugin-checker": "^0.7.2"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.4",
     "@types/react-color": "^3.0.12",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.1",
-    "@typescript-eslint/parser": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-react-refresh": "^0.4.10",
     "typescript": "^5.5.4",
-    "vite": "^5.4.0",
+    "vite": "^5.4.2",
     "vite-plugin-pwa": "^0.20.1"
   },
   "keywords": [

src/AppRoutes.tsx

@@ -3,7 +3,7 @@ import { StepLabelProps } from '@drincs/pixi-vn/dist/override';
 import { Route, Routes } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { nextStepLoadingState } from './atoms/nextStepLoadingState';
-import { reloadInterfaceDataEventState } from './atoms/reloadInterfaceDataEventState';
+import { reloadInterfaceDataEventAtom } from './atoms/reloadInterfaceDataEventAtom';
 import DialogueDataEventInterceptor from './interceptors/DialogueDataEventInterceptor';
 import SkipAutoInterceptor from './interceptors/SkipAutoInterceptor';
 import Dialogue from './screens/Dialogue';
@@ -14,7 +14,7 @@ import QuickActions from './screens/QuickActions';
 import QuickLoadAlert from './screens/QuickLoadAlert';
 
 export default function AppRoutes() {
-    const notifyReloadInterfaceDataEvent = useSetRecoilState(reloadInterfaceDataEventState);
+    const notifyReloadInterfaceDataEvent = useSetRecoilState(reloadInterfaceDataEventAtom);
     const setNextStepLoading = useSetRecoilState(nextStepLoadingState);
     async function nextOnClick(props: StepLabelProps): Promise<void> {
         setNextStepLoading(true);

src/atoms/canGoBackState.ts

@@ -1,12 +1,12 @@
 import { GameStepManager } from "@drincs/pixi-vn";
 import { selector } from "recoil";
-import { reloadInterfaceDataEventState } from "./reloadInterfaceDataEventState";
+import { reloadInterfaceDataEventAtom } from "./reloadInterfaceDataEventAtom";
 
 export const canGoBackState = selector<boolean>({
     key: 'canGoBackState',
     get: ({ get }) => {
         // dipendencies: when the dipendencies change, the selector will re-run
-        get(reloadInterfaceDataEventState)
+        get(reloadInterfaceDataEventAtom)
 
         return GameStepManager.canGoBack
     },

src/atoms/choiceMenuState.ts

@@ -1,7 +1,7 @@
 import { ChoiceMenuOptionsType, getChoiceMenuOptions } from "@drincs/pixi-vn";
 import { selector } from "recoil";
 import { hideInterfaceState } from "./hideInterfaceState";
-import { reloadInterfaceDataEventState } from "./reloadInterfaceDataEventState";
+import { reloadInterfaceDataEventAtom } from "./reloadInterfaceDataEventAtom";
 
 type ChoiceMenu = {
     menu: ChoiceMenuOptionsType,
@@ -12,7 +12,7 @@ export const choiceMenuState = selector<ChoiceMenu>({
     key: 'choiceMenuState',
     get: ({ get }) => {
         // dipendencies: when the dipendencies change, the selector will re-run
-        get(reloadInterfaceDataEventState)
+        get(reloadInterfaceDataEventAtom)
         let hideInterface = get(hideInterfaceState)
 
         let choiceMenu = getChoiceMenuOptions() || []

src/atoms/hideNextButtonState.ts

@@ -1,14 +1,14 @@
 import { GameStepManager } from "@drincs/pixi-vn";
 import { selector } from "recoil";
 import { hideInterfaceState } from "./hideInterfaceState";
-import { reloadInterfaceDataEventState } from "./reloadInterfaceDataEventState";
+import { reloadInterfaceDataEventAtom } from "./reloadInterfaceDataEventAtom";
 
 export const hideNextButtonState = selector<boolean>({
     key: 'hideNextButtonState',
     get: ({ get }) => {
         // dipendencies: when the dipendencies change, the selector will re-run
         let hideInterface = get(hideInterfaceState)
-        get(reloadInterfaceDataEventState)
+        get(reloadInterfaceDataEventAtom)
 
         return hideInterface || !(GameStepManager.canGoNext)
     },

src/atoms/reloadInterfaceDataEventAtom.ts

@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const reloadInterfaceDataEventAtom = atom<number>({
+    key: 'reloadInterfaceDataEventAtom',
+    default: 0,
+});

src/interceptors/DialogueDataEventInterceptor.tsx

@@ -5,10 +5,10 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { autoInfoState } from '../atoms/autoInfoState';
 import { dialogDataState } from '../atoms/dialogDataState';
 import { hideInterfaceState } from '../atoms/hideInterfaceState';
-import { reloadInterfaceDataEventState } from '../atoms/reloadInterfaceDataEventState';
+import { reloadInterfaceDataEventAtom } from '../atoms/reloadInterfaceDataEventAtom';
 
 export default function DialogueDataEventInterceptor() {
-    const reloadInterfaceDataEvent = useRecoilValue(reloadInterfaceDataEventState);
+    const reloadInterfaceDataEvent = useRecoilValue(reloadInterfaceDataEventAtom);
     const { t } = useTranslation(["translation"]);
     const hideInterface = useRecoilValue(hideInterfaceState)
     const updateAuto = useSetRecoilState(autoInfoState)

src/interceptors/EventInterceptor.tsx

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { hideInterfaceState } from '../atoms/hideInterfaceState';
-import { reloadInterfaceDataEventState } from '../atoms/reloadInterfaceDataEventState';
+import { reloadInterfaceDataEventAtom } from '../atoms/reloadInterfaceDataEventAtom';
 import { addRefreshSave, loadRefreshSave } from '../utility/ActionsUtility';
 import { useMyNavigate } from '../utility/useMyNavigate';
 
 export default function EventInterceptor() {
-    const notifyLoadEvent = useSetRecoilState(reloadInterfaceDataEventState);
+    const notifyLoadEvent = useSetRecoilState(reloadInterfaceDataEventAtom);
     const [hideInterface, setHideInterface] = useRecoilState(hideInterfaceState);
     const navigate = useMyNavigate();
 

src/main.tsx

@@ -1,15 +1,16 @@
-import { GameStepManager, GameWindowManager } from '@drincs/pixi-vn'
+import { canvas, narration } from '@drincs/pixi-vn'
 import { createRoot } from 'react-dom/client'
 import App from './App'
 import './index.css'
+import { gameEnd } from './utility/ActionsUtility'
 
 // Canvas setup with PIXI
 const body = document.body
 if (!body) {
     throw new Error('body element not found')
 }
 
-GameWindowManager.initialize(body, 1920, 1080, {
+canvas.initialize(body, 1920, 1080, {
     backgroundColor: "#303030"
 }).then(() => {
     // React setup with ReactDOM
@@ -18,14 +19,18 @@ GameWindowManager.initialize(body, 1920, 1080, {
         throw new Error('root element not found')
     }
 
-    GameWindowManager.initializeHTMLLayout(root)
-    const reactRoot = createRoot(GameWindowManager.htmlLayout)
+    canvas.initializeHTMLLayout(root)
+    const reactRoot = createRoot(canvas.htmlLayout)
 
     reactRoot.render(
         <App />
     )
 })
 
-GameStepManager.gameEnd = async (props) => {
-    props.navigate("/")
+narration.onGameEnd = async ({ navigate }) => {
+    gameEnd(navigate)
+}
+
+narration.onStepError = async (_error, { notify, t }) => {
+    notify(t("allert_error_occurred"), "error")
 }

src/screens/ChoicesMenu.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { choiceMenuState } from '../atoms/choiceMenuState';
 import { dialogueCardHeightState } from '../atoms/dialogueCardHeightState';
-import { reloadInterfaceDataEventState } from '../atoms/reloadInterfaceDataEventState';
+import { reloadInterfaceDataEventAtom } from '../atoms/reloadInterfaceDataEventAtom';
 import ChoiceButton from '../components/ChoiceButton';
 import { useMyNavigate } from '../utility/useMyNavigate';
 
@@ -26,7 +26,7 @@ export default function ChoicesMenu(props: IProps) {
     const { t } = useTranslation(["translation"]);
     const navigate = useMyNavigate();
     const { menu, hidden } = useRecoilValue(choiceMenuState)
-    const notifyReloadInterfaceDataEvent = useSetRecoilState(reloadInterfaceDataEventState);
+    const notifyReloadInterfaceDataEvent = useSetRecoilState(reloadInterfaceDataEventAtom);
     const { enqueueSnackbar } = useSnackbar();
     const gridVariants: Variants = {
         open: {

src/screens/History.tsx

@@ -1,4 +1,4 @@
-import { CharacterBaseModel, getCharacterById, getDialogueHistory } from '@drincs/pixi-vn';
+import { CharacterBaseModel, getCharacterById, narration } from '@drincs/pixi-vn';
 import CheckIcon from '@mui/icons-material/Check';
 import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
 import { Box, Chip, Input, Stack, Typography } from "@mui/joy";
@@ -69,7 +69,7 @@ export default function History() {
                 }}
             >
                 <Stack spacing={2} justifyContent="flex-end">
-                    {getDialogueHistory()
+                    {narration.narrativeHistory
                         .map((step) => {
                             let character = step.dialoge?.character ? getCharacterById(step.dialoge?.character) ?? new CharacterBaseModel(step.dialoge?.character, { name: t(step.dialoge?.character) }) : undefined
                             return {

src/screens/MainMenu.tsx

@@ -7,15 +7,15 @@ import { useTranslation } from 'react-i18next';
 import { useSetRecoilState } from 'recoil';
 import { hideInterfaceState } from '../atoms/hideInterfaceState';
 import { openSettingsState } from '../atoms/openSettingsState';
-import { reloadInterfaceDataEventState } from '../atoms/reloadInterfaceDataEventState';
+import { reloadInterfaceDataEventAtom } from '../atoms/reloadInterfaceDataEventAtom';
 import MenuButton from '../components/MenuButton';
 import { loadGameSave } from '../utility/ActionsUtility';
 import { useMyNavigate } from '../utility/useMyNavigate';
 
 export default function MainMenu() {
     const navigate = useMyNavigate();
     const setOpenSettings = useSetRecoilState(openSettingsState);
-    const notifyReloadInterfaceDataEvent = useSetRecoilState(reloadInterfaceDataEventState);
+    const notifyReloadInterfaceDataEvent = useSetRecoilState(reloadInterfaceDataEventAtom);
     const setHideInterface = useSetRecoilState(hideInterfaceState);
     const { enqueueSnackbar } = useSnackbar();
     const { t } = useTranslation(["translation"]);
@@ -45,7 +45,7 @@ export default function MainMenu() {
         >
             <MenuButton
                 onClick={() => {
-                    GameWindowManager.removeCanvasElements()
+                    GameWindowManager.removeAll()
                     navigate("/game")
                     GameStepManager.callLabel(pixivnTestStartLabel, {
                         navigate: navigate,

src/screens/QuickActions.tsx

@@ -12,7 +12,7 @@ import { openHistoryState } from '../atoms/openHistoryState';
 import { openLoadAlertState } from '../atoms/openLoadAlertState';
 import { openSettingsState } from '../atoms/openSettingsState';
 import { quickSaveState } from '../atoms/quickSaveState';
-import { reloadInterfaceDataEventState } from '../atoms/reloadInterfaceDataEventState';
+import { reloadInterfaceDataEventAtom } from '../atoms/reloadInterfaceDataEventAtom';
 import { skipEnabledState } from '../atoms/skipEnabledState';
 import TextMenuButton from '../components/TextMenuButton';
 import { goBack, loadGameSave, saveGame } from '../utility/ActionsUtility';
@@ -22,7 +22,7 @@ export default function QuickActions() {
     const setOpenSettings = useSetRecoilState(openSettingsState);
     const setOpenHistory = useSetRecoilState(openHistoryState);
     const navigate = useMyNavigate();
-    const notifyLoadEvent = useSetRecoilState(reloadInterfaceDataEventState);
+    const notifyLoadEvent = useSetRecoilState(reloadInterfaceDataEventAtom);
     const setOpenLoadAlert = useSetRecoilState(openLoadAlertState);
     const { t } = useTranslation(["translation"]);
     const [hideInterface, setHideInterface] = useRecoilState(hideInterfaceState);

src/screens/QuickLoadAlert.tsx

@@ -7,14 +7,14 @@ import { useTranslation } from 'react-i18next';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { openLoadAlertState } from '../atoms/openLoadAlertState';
 import { quickSaveState } from '../atoms/quickSaveState';
-import { reloadInterfaceDataEventState } from '../atoms/reloadInterfaceDataEventState';
+import { reloadInterfaceDataEventAtom } from '../atoms/reloadInterfaceDataEventAtom';
 import ModalDialogCustom from '../components/ModalDialog';
 import { loadQuickSave } from '../utility/ActionsUtility';
 import { useMyNavigate } from '../utility/useMyNavigate';
 
 export default function QuickLoadAlert() {
     const navigate = useMyNavigate();
-    const notifyLoadEvent = useSetRecoilState(reloadInterfaceDataEventState);
+    const notifyLoadEvent = useSetRecoilState(reloadInterfaceDataEventAtom);
     const [open, setOpen] = useRecoilState(openLoadAlertState);
     const { t } = useTranslation(["translation"]);
     const [quickSave, setQuickSave] = useRecoilState(quickSaveState)

src/screens/Settings.tsx

@@ -27,13 +27,13 @@ import { openHistoryState } from '../atoms/openHistoryState';
 import { openLoadAlertState } from '../atoms/openLoadAlertState';
 import { openSettingsState } from '../atoms/openSettingsState';
 import { quickSaveState } from '../atoms/quickSaveState';
-import { reloadInterfaceDataEventState } from '../atoms/reloadInterfaceDataEventState';
+import { reloadInterfaceDataEventAtom } from '../atoms/reloadInterfaceDataEventAtom';
 import { skipEnabledState } from '../atoms/skipEnabledState';
 import { typewriterDelayState } from '../atoms/typewriterDelayState';
 import ModalDialogCustom from '../components/ModalDialog';
 import SettingButton from '../components/SettingButton';
 import { useEditColorProvider } from '../providers/ThemeProvider';
-import { loadGameSave, saveGame } from '../utility/ActionsUtility';
+import { gameEnd, loadGameSave, saveGame } from '../utility/ActionsUtility';
 import { useMyNavigate } from '../utility/useMyNavigate';
 
 export default function Settings() {
@@ -51,7 +51,7 @@ export default function Settings() {
     const setOpenHistory = useSetRecoilState(openHistoryState);
     const setOpenLoadAlert = useSetRecoilState(openLoadAlertState);
     const [hideInterface, setHideInterface] = useRecoilState(hideInterfaceState);
-    const notifyLoadEvent = useSetRecoilState(reloadInterfaceDataEventState);
+    const notifyLoadEvent = useSetRecoilState(reloadInterfaceDataEventAtom);
     const [quickSave, setQuickSave] = useRecoilState(quickSaveState)
     const { enqueueSnackbar } = useSnackbar();
     const smScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
@@ -476,7 +476,7 @@ export default function Settings() {
                         color='danger'
                         variant="outlined"
                         onClick={() => {
-                            navigate('/')
+                            gameEnd(navigate)
                             setOpen(false)
                             setOpenYouSure(false)
                         }}

src/utility/ActionsUtility.ts

@@ -1,4 +1,4 @@
-import { GameStepManager, getSaveJson, loadSaveJson } from "@drincs/pixi-vn";
+import { clearAllGameDatas, GameStepManager, getSaveJson, loadSaveJson } from "@drincs/pixi-vn";
 
 export function saveGame() {
     const jsonString = getSaveJson()
@@ -74,3 +74,8 @@ export async function loadRefreshSave(navigate: (path: string) => void) {
         navigate("/")
     }
 }
+
+export function gameEnd(navigate: (path: string) => void) {
+    clearAllGameDatas()
+    navigate('/')
+}

src/utility/useMyNavigate.ts

@@ -1,5 +1,8 @@
 import { NavigateFunction, NavigateOptions, To, useNavigate } from "react-router-dom";
 
+/**
+ * https://pixi-vn.web.app/advanced/intercept-events.html#back-and-forward-buttons
+ */
 export function useMyNavigate(): NavigateFunction {
     const navigate = useNavigate();