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';
@@ -12,9 +12,10 @@ import LoadingPage from './screens/LoadingPage';
 import MainMenu from './screens/MainMenu';
 import QuickActions from './screens/QuickActions';
 import QuickLoadAlert from './screens/QuickLoadAlert';
+import TextInput from './screens/TextInput';
 
 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);
@@ -56,6 +57,7 @@ export default function AppRoutes() {
                     <SkipAutoInterceptor
                         nextOnClick={nextOnClick}
                     />
+                    <TextInput />
                 </>}
             />
             <Route path="*" element={<MainMenu />} />

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/atoms/textInputOptionsState.ts

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

src/components/ModalDialog.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 
 interface ModalDialogCustomProps extends ModalDialogProps {
     open: boolean;
-    setOpen: (open: boolean) => void;
+    setOpen?: (open: boolean) => void;
     children?: React.ReactNode;
     head?: string | React.ReactNode;
     actions?: React.ReactNode;
@@ -41,7 +41,7 @@ export default function ModalDialogCustom(props: ModalDialogCustomProps) {
             <Modal
                 keepMounted
                 open={internalOpen}
-                onClose={() => setOpen(false)}
+                onClose={() => setOpen && setOpen(false)}
                 component={motion.div}
                 variants={{
                     open: {
@@ -85,9 +85,9 @@ export default function ModalDialogCustom(props: ModalDialogCustomProps) {
                     }}
                     {...rest}
                 >
-                    <ModalClose />
+                    {setOpen && <ModalClose />}
                     {head}
-                    <Divider />
+                    {head && <Divider />}
                     <DialogContent>
                         {children}
                     </DialogContent>

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)
                         }}