Merge branch 'main' into deploy

DRincs-Productions · Oct 13, 2024 · 55b4f09 · 55b4f09
2 parents b71a4e3 + c7b1921
commit 55b4f09
Show file tree

Hide file tree

Showing 57 changed files with 3,568 additions and 2,749 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ This Template contains basic functionality inspired by the widespread Visual Nov
 
 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 `/game` 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.
+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.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,41 +12,42 @@
     "publish": "npm run build && firebase deploy"
   },
   "dependencies": {
-    "@drincs/pixi-vn": "^0.7.0",
+    "@drincs/pixi-vn": "^0.8.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.7",
+    "@mui/icons-material": "^6.1.2",
     "@mui/joy": "^5.0.0-beta.28",
-    "framer-motion": "^11.3.28",
-    "i18next": "^23.14.0",
+    "@tanstack/react-query": "^5.59.11",
+    "framer-motion": "^11.11.1",
+    "i18next": "^23.15.2",
     "i18next-browser-languagedetector": "^8.0.0",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
-    "react-color": "^2.19.3",
+    "react-color-palette": "^7.3.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "react-i18next": "^15.0.1",
+    "react-i18next": "^15.0.2",
     "react-markdown": "^9.0.1",
-    "react-router-dom": "^6.26.1",
+    "react-router-dom": "^6.26.2",
     "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"
+    "vite-plugin-checker": "^0.8.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.4",
+    "@types/react": "^18.3.11",
     "@types/react-color": "^3.0.12",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.2.0",
-    "@typescript-eslint/parser": "^8.2.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.57.0",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.10",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2",
-    "vite-plugin-pwa": "^0.20.1"
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.8",
+    "vite-plugin-pwa": "^0.20.5"
   },
   "keywords": [
     "game",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,13 @@
 import { lazy, Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import LoadingPage from "./screens/LoadingPage";
+import LoadingScreen from "./screens/LoadingScreen";
 
 export default function App() {
     const Home = lazy(async () => import('./Home'))
     return (
         <ErrorBoundary fallback={<div>Something went wrong</div>}>
             <Suspense
-                fallback={<LoadingPage />}
+                fallback={<LoadingScreen />}
             >
                 <Home />
             </Suspense>

diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx
@@ -1,31 +1,34 @@
-import { GameStepManager } from '@drincs/pixi-vn';
+import { narration } from '@drincs/pixi-vn';
 import { StepLabelProps } from '@drincs/pixi-vn/dist/override';
+import { useQueryClient } from '@tanstack/react-query';
 import { Route, Routes } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { nextStepLoadingState } from './atoms/nextStepLoadingState';
-import { reloadInterfaceDataEventAtom } from './atoms/reloadInterfaceDataEventAtom';
-import DialogueDataEventInterceptor from './interceptors/DialogueDataEventInterceptor';
 import SkipAutoInterceptor from './interceptors/SkipAutoInterceptor';
-import Dialogue from './screens/Dialogue';
-import History from './screens/History';
-import LoadingPage from './screens/LoadingPage';
+import GameSaveScreen from './screens/GameSaveScreen';
+import HistoryScreen from './screens/HistoryScreen';
+import LoadingScreen from './screens/LoadingScreen';
 import MainMenu from './screens/MainMenu';
-import QuickActions from './screens/QuickActions';
-import QuickLoadAlert from './screens/QuickLoadAlert';
+import SaveLoadAlert from './screens/modals/SaveLoadAlert';
+import TextInput from './screens/modals/TextInput';
+import NarrationScreen from './screens/NarrationScreen';
+import QuickTools from './screens/QuickTools';
+import { INTERFACE_DATA_USE_QUEY_KEY } from './use_query/useQueryInterface';
 
 export default function AppRoutes() {
-    const notifyReloadInterfaceDataEvent = useSetRecoilState(reloadInterfaceDataEventAtom);
     const setNextStepLoading = useSetRecoilState(nextStepLoadingState);
+    const queryClient = useQueryClient()
+
     async function nextOnClick(props: StepLabelProps): Promise<void> {
         setNextStepLoading(true);
         try {
-            if (!GameStepManager.canGoNext) {
+            if (!narration.canGoNext) {
                 setNextStepLoading(false);
                 return;
             }
-            GameStepManager.goNext(props)
+            narration.goNext(props)
                 .then(() => {
-                    notifyReloadInterfaceDataEvent((p) => p + 1);
+                    queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] })
                     setNextStepLoading(false);
                 })
                 .catch((e) => {
@@ -43,19 +46,20 @@ export default function AppRoutes() {
     return (
         <Routes>
             <Route key={"main_menu"} path={"/"} element={<MainMenu />} />
-            <Route key={"main_menu"} path={"/loading"} element={<LoadingPage />} />
-            <Route key={"game"} path={"/game"}
+            <Route key={"main_menu"} path={"/loading"} element={<LoadingScreen />} />
+            <Route key={"narration"} path={"/narration"}
                 element={<>
-                    <History />
-                    <QuickLoadAlert />
-                    <QuickActions />
-                    <DialogueDataEventInterceptor />
-                    <Dialogue
+                    <HistoryScreen />
+                    <GameSaveScreen />
+                    <SaveLoadAlert />
+                    <QuickTools />
+                    <NarrationScreen
                         nextOnClick={nextOnClick}
                     />
                     <SkipAutoInterceptor
                         nextOnClick={nextOnClick}
                     />
+                    <TextInput />
                 </>}
             />
             <Route path="*" element={<MainMenu />} />

diff --git a/src/Imports.tsx b/src/Imports.tsx
@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SnackbarProvider } from 'notistack';
 import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
@@ -10,20 +11,23 @@ type Iprops = {
 
 export default function Imports(props: Iprops) {
     useI18n()
+    const queryClient = new QueryClient()
 
     return (
         <BrowserRouter>
             <RecoilRoot>
-                <MyThemeProvider>
-                    <SnackbarProvider
-                        anchorOrigin={{
-                            vertical: 'top',
-                            horizontal: 'left',
-                        }}
-                    >
-                        {props.children}
-                    </SnackbarProvider>
-                </MyThemeProvider>
+                <QueryClientProvider client={queryClient}>
+                    <MyThemeProvider>
+                        <SnackbarProvider
+                            anchorOrigin={{
+                                vertical: 'top',
+                                horizontal: 'left',
+                            }}
+                        >
+                            {props.children}
+                        </SnackbarProvider>
+                    </MyThemeProvider>
+                </QueryClientProvider>
             </RecoilRoot>
         </BrowserRouter>
     );

diff --git a/src/atoms/canGoBackState.ts b/src/atoms/canGoBackState.ts
diff --git a/src/atoms/choiceMenuState.ts b/src/atoms/choiceMenuState.ts
diff --git a/src/atoms/dialogDataState.ts b/src/atoms/dialogDataState.ts
diff --git a/src/atoms/hideNextButtonState.ts b/src/atoms/hideNextButtonState.ts
diff --git a/src/atoms/openGameSaveScreenState.ts b/src/atoms/openGameSaveScreenState.ts
@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const openGameSaveScreenState = atom<boolean>({
+    key: 'openGameSaveScreenState',
+    default: false,
+});
diff --git a/src/atoms/openHistoryScreenState.ts b/src/atoms/openHistoryScreenState.ts
@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const openHistoryScreenState = atom<boolean>({
+    key: 'openHistoryScreenState',
+    default: false,
+});
diff --git a/src/atoms/openHistoryState.ts b/src/atoms/openHistoryState.ts
diff --git a/src/atoms/openLoadAlertState.ts b/src/atoms/openLoadAlertState.ts
diff --git a/src/atoms/quickSaveState.ts b/src/atoms/quickSaveState.ts
diff --git a/src/atoms/reloadInterfaceDataEventAtom.ts b/src/atoms/reloadInterfaceDataEventAtom.ts
diff --git a/src/atoms/saveLoadAlertState.ts b/src/atoms/saveLoadAlertState.ts
@@ -0,0 +1,26 @@
+import { atom } from "recoil";
+import GameSaveData from "../models/GameSaveData";
+
+export const saveLoadAlertState = atom<{
+    open: false;
+    data?: any;
+    type?: string;
+    deafultName?: string;
+} | {
+    open: true;
+    data: GameSaveData & { id: number };
+    type: 'load';
+} | {
+    open: true;
+    data: number;
+    type: 'overwrite_save' | 'save';
+    deafultName: string;
+} | {
+    open: true;
+    data: number;
+    type: 'delete';
+}
+>({
+    key: 'saveLoadAlertState',
+    default: { open: false },
+});
diff --git a/src/atoms/saveScreenPageState.ts b/src/atoms/saveScreenPageState.ts
@@ -0,0 +1,23 @@
+import { atom, selector } from "recoil";
+
+const saveScreenPageAtomState = atom<number>({
+    key: 'saveScreenPageAtomState',
+    default: localStorage.getItem("save_screen_page") ? parseInt(localStorage.getItem("save_screen_page") as string) : 0,
+});
+
+export const saveScreenPageState = selector<number>({
+    key: 'saveScreenPageState',
+    get: ({ get }) => {
+        return get(saveScreenPageAtomState)
+    },
+    set: ({ set }, value) => {
+        if (typeof value === "number") {
+            let valueString = value.toString()
+            localStorage.setItem("save_screen_page", valueString)
+        }
+        else {
+            localStorage.removeItem("save_screen_page")
+        }
+        set(saveScreenPageAtomState, value)
+    },
+});