create-pixi-vn 1.1.0 → 1.1.2

package/README.md

@@ -4,9 +4,14 @@ You can start using Pixi’VN by initializing a new project.
 
 ## Prerequisites
 
+Before starting, you must have the following tools installed:
+
 * [Node.js](https://nodejs.org/) version 18 or higher.
 * Text Editor with TypeScript support.
-  * [Visual Studio Code](https://code.visualstudio.com/) is recommended.
+  * [Visual Studio Code](https://code.visualstudio.com/)
+  * [Cursor](https://www.cursor.com/)
+* (Recommended) [Git](https://git-scm.com/)
+  * Have a [GitHub account](https://github.com/)
 
 ## Project Initialization
 
@@ -17,19 +22,26 @@ To initialize a new project, you can use the following command:
 npm create pixi-vn@latest
 
 # yarn
-yarn create pixi-vn@latest
+yarn create pixi-vn
 
 # pnpm
-pnpm create pixi-vn@latest
+pnpm create pixi-vn
+
+# bun
+bun create pixi-vn
 
 # bun
-bun create pixi-vn@latest
+deno init --npm pixi-vn
 ```
 
 The supported template presets are:
 
-* **[Basic Visual Novel - Web page (Vite + React + MUI joy)](https://github.com/DRincs-Productions/pixi-vn-react-template)**
-* **[Basic Visual Novel - Multi Device (Vite + React + MUI joy + Electron Forge)](https://github.com/DRincs-Productions/pixi-vn-react-template/tree/electron)**
+**Visual Novel - React**:
+
+* **[Visual Novel - React - Typescript - Web page](https://github.com/DRincs-Productions/pixi-vn-react-template)**
+* **[Visual Novel - React - Typescript - Web page + Desktop + Mobile](https://github.com/DRincs-Productions/pixi-vn-react-template/tree/tauri)**
+* **[Visual Novel - React - Ink + Typescript - Web page](https://github.com/DRincs-Productions/pixi-vn-react-template/tree/ink)**
+* **[Visual Novel - React - Ink + Typescript - Web page + Desktop + Mobile](https://github.com/DRincs-Productions/pixi-vn-react-template/tree/ink-tauri)**
 
 ( More templates will be added in the future, see this [issue](https://github.com/DRincs-Productions/pixi-vn/issues/162) for more information )
 

package/package.json

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

package/template-react-vite-muijoy/src/AppRoutes.tsx

@@ -1,7 +1,7 @@
 import { Route, Routes } from 'react-router-dom';
 import NextButton from './components/NextButton';
 import { LOADING_ROUTE, MAIN_MENU_ROUTE, NARRATION_ROUTE } from './constans';
-import SkipAutoInterceptor from './interceptors/SkipAutoInterceptor';
+import useSkipAutoDetector from './hooks/useSkipAutoDetector';
 import HistoryScreen from './screens/HistoryScreen';
 import LoadingScreen from './screens/LoadingScreen';
 import MainMenu from './screens/MainMenu';
@@ -14,17 +14,21 @@ export default function AppRoutes() {
         <Routes>
             <Route key={"main_menu"} path={MAIN_MENU_ROUTE} element={<MainMenu />} />
             <Route key={"loading"} path={LOADING_ROUTE} element={<LoadingScreen />} />
-            <Route key={"narration"} path={NARRATION_ROUTE}
-                element={<>
-                    <HistoryScreen />
-                    <QuickTools />
-                    <NarrationScreen />
-                    <SkipAutoInterceptor />
-                    <TextInput />
-                    <NextButton />
-                </>}
-            />
+            <Route key={"narration"} path={NARRATION_ROUTE} element={<NarrationElement />} />
             <Route path="*" element={<MainMenu />} />
         </Routes>
     )
 }
+
+function NarrationElement() {
+    useSkipAutoDetector()
+    return (
+        <>
+            <HistoryScreen />
+            <QuickTools />
+            <NarrationScreen />
+            <TextInput />
+            <NextButton />
+        </>
+    )
+}

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

@@ -1,24 +1,35 @@
 import { Box } from '@mui/joy';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import Routes from './AppRoutes';
+import useClosePageDetector from './hooks/useClosePageDetector';
+import useKeyboardDetector from './hooks/useKeyboardDetector';
+import useEventListener from './hooks/useKeyDetector';
+import useNetworkDetector from './hooks/useNetworkDetector';
 import Imports from './Imports';
-import GoBackEventInterceptor from './interceptors/GoBackEventInterceptor';
-import OnKeyEventInterceptor from './interceptors/OnKeyEventInterceptor';
-import RefreshSaveEventInterceptor from './interceptors/RefreshEventInterceptor';
 import GameSaveScreen from './screens/GameSaveScreen';
 import SaveLoadAlert from './screens/modals/SaveLoadAlert';
+import OfflineScreen from './screens/OfflineScreen';
 import Settings from './screens/Settings';
 
-export default function Home() {
+function HomeChild() {
+    useKeyboardDetector()
+    useClosePageDetector()
+    useNetworkDetector()
+    // Prevent the user from going back to the previous page
+    useEventListener({
+        type: 'popstate',
+        listener: () => {
+            window.history.forward();
+        }
+    })
+
     return (
-        <Imports>
+        <>
             <Routes />
             <Settings />
             <GameSaveScreen />
             <SaveLoadAlert />
-            <OnKeyEventInterceptor />
-            <GoBackEventInterceptor />
-            <RefreshSaveEventInterceptor />
+            <OfflineScreen />
             <Box
                 sx={{
                     pointerEvents: "auto",
@@ -26,6 +37,10 @@ export default function Home() {
             >
                 <ReactQueryDevtools initialIsOpen={false} />
             </Box>
-        </Imports>
+        </>
     )
 }
+
+export default function Home() {
+    return (<Imports><HomeChild /></Imports>)
+}

package/template-react-vite-muijoy/src/components/GameSaveSlot.tsx

@@ -120,7 +120,7 @@ export default function GameSaveSlot({ saveId, onDelete, onLoad, onOverwriteSave
                         }}
                     />
                 </IconButton>
-                <IconButton
+                {location.pathname !== MAIN_MENU_ROUTE && <IconButton
                     onClick={() => onOverwriteSave(saveData)}
                 >
                     <SaveAsIcon
@@ -129,7 +129,7 @@ export default function GameSaveSlot({ saveId, onDelete, onLoad, onOverwriteSave
                             color: useTheme().palette.neutral[300],
                         }}
                     />
-                </IconButton>
+                </IconButton>}
                 <IconButton
                     onClick={() => {
                         onLoad(saveData)

package/template-react-vite-muijoy/src/components/NextButton.tsx

@@ -3,8 +3,9 @@ import { Button } from '@mui/joy';
 import { useQueryClient } from '@tanstack/react-query';
 import { motion } from "motion/react";
 import { useSnackbar } from 'notistack';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import useEventListener from '../hooks/useKeyDetector';
 import useInterfaceStore from '../stores/useInterfaceStore';
 import useSkipStore from '../stores/useSkipStore';
 import useStepStore from '../stores/useStepStore';
@@ -52,28 +53,23 @@ export default function NextButton() {
         }
     }, [tNarration, queryClient])
 
-    const onkeypress = useCallback((event: KeyboardEvent) => {
-        if ((event.code == 'Enter' || event.code == 'Space')) {
-            setSkipEnabled(true)
+    useEventListener({
+        type: 'keypress',
+        listener: (event) => {
+            if ((event.code == 'Enter' || event.code == 'Space')) {
+                setSkipEnabled(true)
+            }
         }
-    }, [])
-
-    const onkeyup = useCallback((event: KeyboardEvent) => {
-        if ((event.code == 'Enter' || event.code == 'Space')) {
-            setSkipEnabled(false)
-            nextOnClick()
+    })
+    useEventListener({
+        type: 'keyup',
+        listener: (event) => {
+            if ((event.code == 'Enter' || event.code == 'Space')) {
+                setSkipEnabled(false)
+                nextOnClick()
+            }
         }
-    }, [nextOnClick])
-
-    useEffect(() => {
-        window.addEventListener("keypress", onkeypress);
-        window.addEventListener("keyup", onkeyup);
-
-        return () => {
-            window.removeEventListener("keypress", onkeypress);
-            window.removeEventListener("keyup", onkeyup);
-        };
-    }, [onkeypress, onkeyup]);
+    })
 
     return (
         <Button

package/template-react-vite-muijoy/src/components/ReturnMainMenuButton.tsx

@@ -1,3 +1,4 @@
+import { clearAllGameDatas } from '@drincs/pixi-vn';
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import { Button, Stack, Typography } from "@mui/joy";
 import { useState } from 'react';
@@ -5,7 +6,6 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import ModalDialogCustom from '../components/ModalDialog';
 import useSettingsScreenStore from '../stores/useSettingsScreenStore';
-import { gameEnd } from '../utils/actions-utility';
 import { useMyNavigate } from '../utils/navigate-utility';
 
 export default function ReturnMainMenuButton() {
@@ -51,7 +51,8 @@ export default function ReturnMainMenuButton() {
                         color='danger'
                         variant="outlined"
                         onClick={() => {
-                            gameEnd(navigate)
+                            clearAllGameDatas()
+                            navigate('/')
                             setOpenSettings(false)
                             setOpenDialog(false)
                         }}

package/{template-react-vite-muijoy-ink-tauri/src/interceptors/RefreshEventInterceptor.tsx → template-react-vite-muijoy/src/hooks/useClosePageDetector.tsx}

@@ -1,30 +1,26 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { LOADING_ROUTE, MAIN_MENU_ROUTE } from '../constans';
 import { INTERFACE_DATA_USE_QUEY_KEY } from '../use_query/useQueryInterface';
 import { useMyNavigate } from '../utils/navigate-utility';
 import { addRefreshSave, loadRefreshSave } from '../utils/save-utility';
+import useEventListener from './useKeyDetector';
 
-export default function RefreshSaveEventInterceptor() {
+export default function useClosePageDetector() {
     const navigate = useMyNavigate();
     const queryClient = useQueryClient()
     const location = useLocation();
 
-    const beforeunload = useCallback(async () => {
-        if (location.pathname === MAIN_MENU_ROUTE || location.pathname === LOADING_ROUTE) {
-            return
+    useEventListener({
+        type: 'beforeunload',
+        listener: async () => {
+            if (location.pathname === MAIN_MENU_ROUTE || location.pathname === LOADING_ROUTE) {
+                return
+            }
+            await addRefreshSave()
         }
-        await addRefreshSave()
-    }, [location])
-
-    useEffect(() => {
-        window.addEventListener("beforeunload", beforeunload);
-
-        return () => {
-            window.removeEventListener("beforeunload", beforeunload);
-        };
-    }, [beforeunload]);
+    })
 
     useEffect(() => {
         loadRefreshSave(navigate).then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))

package/template-react-vite-muijoy/src/hooks/useKeyDetector.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export default function useEventListener<K extends keyof WindowEventMap>({ type, listener }: {
+    type: K
+    listener: (this: Window, ev: WindowEventMap[K]) => any
+}) {
+    useEffect(() => {
+        window.addEventListener(type, listener);
+
+        return () => {
+            window.removeEventListener(type, listener);
+        };
+    }, [onkeydown]);
+
+    return null
+}

package/template-react-vite-muijoy/src/{interceptors/OnKeyEventInterceptor.tsx → hooks/useKeyboardDetector.tsx}

@@ -1,6 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { useSnackbar } from 'notistack';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import useGameSaveScreenStore from '../stores/useGameSaveScreenStore';
@@ -8,8 +8,9 @@ import useInterfaceStore from '../stores/useInterfaceStore';
 import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from '../use_query/useQueryLastSave';
 import { SAVES_USE_QUEY_KEY } from '../use_query/useQuerySaves';
 import { putSaveIntoIndexDB } from '../utils/save-utility';
+import useEventListener from './useKeyDetector';
 
-export default function EventInterceptor() {
+export default function useKeyboardDetector() {
     const hideInterface = useInterfaceStore((state) => state.hidden);
     const setHideInterface = useInterfaceStore((state) => state.setHidden);
     const setOpenLoadAlert = useGameSaveScreenStore((state) => (state.editLoadAlert))
@@ -61,13 +62,7 @@ export default function EventInterceptor() {
         }
     }, [location, hideInterface, lastSave, queryClient, t])
 
-    useEffect(() => {
-        window.addEventListener('keydown', onkeydown);
-
-        return () => {
-            window.removeEventListener('keydown', onkeydown);
-        };
-    }, [onkeydown]);
+    useEventListener({ type: 'keydown', listener: onkeydown })
 
     return null
 }

package/template-react-vite-muijoy/src/hooks/useNetworkDetector.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import useNetworkStore from "../stores/useNetworkStore";
+
+export default function useNetworkDetector() {
+    const update = useNetworkStore((state) => (state.updateOnlineStatus))
+
+    useEffect(() => {
+        window.addEventListener("online", update);
+        window.addEventListener("offline", update);
+
+        return () => {
+            window.removeEventListener("online", update);
+            window.removeEventListener("offline", update);
+        };
+    }, []);
+
+    return null;
+};

package/{template-react-vite-muijoy-ink/src/interceptors/SkipAutoInterceptor.tsx → template-react-vite-muijoy/src/hooks/useSkipAutoDetector.tsx}

@@ -10,13 +10,13 @@ import useTypewriterStore from '../stores/useTypewriterStore';
 import { INTERFACE_DATA_USE_QUEY_KEY } from '../use_query/useQueryInterface';
 import { useMyNavigate } from '../utils/navigate-utility';
 
-export default function SkipAutoInterceptor() {
+export default function useSkipAutoDetector() {
     const navigate = useMyNavigate();
     const { t: tNarration } = useTranslation(["narration"]);
     const skipEnabled = useSkipStore((state) => state.enabled)
     const autoEnabled = useAutoInfoStore((state) => state.enabled)
     const autoTime = useAutoInfoStore((state) => state.time)
-    const typewriterInProgress = useTypewriterStore((state) => !state.inProgress)
+    const typewriterInProgress = useTypewriterStore((state) => state.inProgress)
     const [recheckSkip, setRecheckSkip] = useState<number>(0)
     const { enqueueSnackbar } = useSnackbar();
     const setNextStepLoading = useStepStore((state) => state.setLoading);

package/template-react-vite-muijoy/src/labels/startLabel.ts

@@ -1,4 +1,4 @@
-import { ChoiceMenuOption, ChoiceMenuOptionClose, moveIn, narration, newLabel, showImage, showImageContainer } from "@drincs/pixi-vn";
+import { Assets, ChoiceMenuOption, ChoiceMenuOptionClose, moveIn, narration, newLabel, showImage, showImageContainer } from "@drincs/pixi-vn";
 import { james, mc, sly, steph } from "../values/characters";
 
 const steph_fullname = "Stephanie";
@@ -329,7 +329,16 @@ const startLabel = newLabel("start", [
             new ChoiceMenuOptionClose("No, I want to stop here"),
         ]
     },
-]);
+], {
+    onLoadingLabel: () => {
+        Assets.load([
+            "bg01-hallway",
+            "m01-body", "m01-eyes-grin", "m01-eyes-smile", "m01-eyes-wow", "m01-mouth-grin00", "m01-mouth-smile00", "m01-mouth-smile01",
+            "fm01-body", "fm01-eyes-smile", "fm01-eyes-upset", "fm01-mouth-serious00", "fm01-mouth-serious01", "fm01-mouth-smile00",
+            "fm02-body", "fm02-eyes-joy", "fm02-eyes-nervous", "fm02-eyes-wow", "fm02-mouth-nervous00", "fm02-mouth-smile00",
+        ])
+    }
+});
 export default startLabel;
 
 const secondPart = newLabel("second_part", [

package/template-react-vite-muijoy/src/main.tsx

@@ -1,8 +1,7 @@
-import { canvas, narration } from '@drincs/pixi-vn'
+import { canvas, clearAllGameDatas, narration } from '@drincs/pixi-vn'
 import { createRoot } from 'react-dom/client'
 import App from './App'
 import './index.css'
-import { gameEnd } from './utils/actions-utility'
 import './values/characters'
 
 // Canvas setup with PIXI
@@ -32,7 +31,8 @@ canvas.initialize(body, 1920, 1080, {
 })
 
 narration.onGameEnd = async ({ navigate }) => {
-    gameEnd(navigate)
+    clearAllGameDatas()
+    navigate('/')
 }
 
 narration.onStepError = async (_error, { notify, t }) => {

package/template-react-vite-muijoy/src/screens/HistoryScreen.tsx

@@ -3,12 +3,13 @@ import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
 import { Box, Chip, Input, Stack, Theme, Typography } from "@mui/joy";
 import Avatar from '@mui/joy/Avatar';
 import { useMediaQuery } from '@mui/material';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Markdown from 'react-markdown';
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import ModalDialogCustom from '../components/ModalDialog';
+import useEventListener from '../hooks/useKeyDetector';
 import useHistoryScreenStore from '../stores/useHistoryScreenStore';
 import { useQueryNarrativeHistory } from '../use_query/useQueryInterface';
 
@@ -90,18 +91,14 @@ export default function HistoryScreen() {
     const { t } = useTranslation(["ui"]);
     const smScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down("md"));
 
-    const onkeydown = useCallback((event: KeyboardEvent) => {
-        if (event.code == 'KeyH' && event.altKey) {
-            editOpen()
+    useEventListener({
+        type: 'keydown',
+        listener: (event) => {
+            if (event.code == 'KeyH' && event.altKey) {
+                editOpen()
+            }
         }
-    }, [])
-
-    useEffect(() => {
-        window.addEventListener('keydown', onkeydown);
-        return () => {
-            window.removeEventListener('keydown', onkeydown);
-        };
-    }, [onkeydown]);
+    })
 
     return (
         <ModalDialogCustom

package/template-react-vite-muijoy/src/screens/OfflineScreen.tsx

@@ -0,0 +1,54 @@
+import SignalWifiBadIcon from '@mui/icons-material/SignalWifiBad';
+import { Box } from '@mui/joy';
+import Modal from '@mui/joy/Modal';
+import { AnimatePresence, motion } from "motion/react";
+import useNetworkStore from '../stores/useNetworkStore';
+
+export default function OfflineScreen() {
+    const open = useNetworkStore((state) => !state.isOnline)
+
+    return (
+        <AnimatePresence>
+            <Modal
+                keepMounted
+                open={open}
+                component={motion.div}
+                variants={{
+                    open: {
+                        opacity: 1,
+                        pointerEvents: "auto",
+                        backdropFilter: "blur(8px)",
+                    },
+                    closed: {
+                        opacity: 0,
+                        pointerEvents: "none",
+                        backdropFilter: "blur(0px)",
+                    }
+                }}
+                initial={"closed"}
+                animate={open ? "open" : "closed"}
+                exit={"closed"}
+                transition={{
+                    duration: 0.4,
+                }}
+            >
+                <Box
+                    sx={{
+                        position: "absolute",
+                        left: "50%",
+                        top: "50%",
+                        transform: "translate(-50%, -50%)",
+                        borderRadius: "20%",
+                    }}
+                >
+                    <SignalWifiBadIcon
+                        color="error"
+                        sx={{
+                            fontSize: "1000%",
+                        }}
+                    />
+                </Box>
+            </Modal>
+        </AnimatePresence>
+    );
+}

package/template-react-vite-muijoy/src/screens/QuickTools.tsx

@@ -1,3 +1,4 @@
+import { narration } from '@drincs/pixi-vn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { IconButton, Stack, useTheme } from '@mui/joy';
 import { useQueryClient } from '@tanstack/react-query';
@@ -14,7 +15,6 @@ import useSkipStore from '../stores/useSkipStore';
 import { INTERFACE_DATA_USE_QUEY_KEY, useQueryCanGoBack } from '../use_query/useQueryInterface';
 import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from '../use_query/useQueryLastSave';
 import { SAVES_USE_QUEY_KEY } from '../use_query/useQuerySaves';
-import { goBack } from '../utils/actions-utility';
 import { useMyNavigate } from '../utils/navigate-utility';
 import { putSaveIntoIndexDB } from '../utils/save-utility';
 
@@ -68,7 +68,7 @@ export default function QuickTools() {
                 transition={{ type: "tween" }}
             >
                 <TextMenuButton
-                    onClick={() => goBack(navigate).then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))}
+                    onClick={() => narration.goBack(navigate).then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))}
                     disabled={!canGoBack}
                     sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
                 >

package/template-react-vite-muijoy/src/screens/Settings.tsx

@@ -1,8 +1,8 @@
 import { Box, DialogContent, DialogTitle, Divider, Drawer, FormControl, ModalClose, RadioGroup, Sheet, Typography } from "@mui/joy";
 import { Theme, useMediaQuery } from '@mui/material';
-import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReturnMainMenuButton from '../components/ReturnMainMenuButton';
+import useEventListener from "../hooks/useKeyDetector";
 import useSettingsScreenStore from '../stores/useSettingsScreenStore';
 import AutoSettingToggle from './settings/AutoSettingToggle';
 import DialoguesSettings from './settings/DialoguesSettings';
@@ -19,18 +19,14 @@ export default function Settings() {
     const { t } = useTranslation(["ui"]);
     const smScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
 
-    const onkeydown = useCallback((event: KeyboardEvent) => {
-        if (event.code == 'Escape') {
-            editOpen()
+    useEventListener({
+        type: 'keydown',
+        listener: (event) => {
+            if (event.code == 'Escape') {
+                editOpen()
+            }
         }
-    }, []);
-
-    useEffect(() => {
-        window.addEventListener('keydown', onkeydown);
-        return () => {
-            window.removeEventListener('keydown', onkeydown);
-        };
-    }, [onkeydown]);
+    })
 
     return (
         <Drawer

package/template-react-vite-muijoy/src/stores/useNetworkStore.ts

@@ -0,0 +1,20 @@
+import { create } from 'zustand';
+
+type NetworkStoreType = {
+    /**
+     * Whether the user is online or not
+     */
+    isOnline: boolean,
+    /**
+     * Update the online status
+     */
+    updateOnlineStatus: () => void,
+}
+
+const useNetworkStore = create<NetworkStoreType>((set) => ({
+    isOnline: navigator.onLine,
+    updateOnlineStatus: () => {
+        set({ isOnline: navigator.onLine })
+    }
+}))
+export default useNetworkStore;

package/template-react-vite-muijoy-ink/src/AppRoutes.tsx

@@ -1,7 +1,7 @@
 import { Route, Routes } from 'react-router-dom';
 import NextButton from './components/NextButton';
 import { LOADING_ROUTE, MAIN_MENU_ROUTE, NARRATION_ROUTE } from './constans';
-import SkipAutoInterceptor from './interceptors/SkipAutoInterceptor';
+import useSkipAutoDetector from './hooks/useSkipAutoDetector';
 import HistoryScreen from './screens/HistoryScreen';
 import LoadingScreen from './screens/LoadingScreen';
 import MainMenu from './screens/MainMenu';
@@ -14,17 +14,21 @@ export default function AppRoutes() {
         <Routes>
             <Route key={"main_menu"} path={MAIN_MENU_ROUTE} element={<MainMenu />} />
             <Route key={"loading"} path={LOADING_ROUTE} element={<LoadingScreen />} />
-            <Route key={"narration"} path={NARRATION_ROUTE}
-                element={<>
-                    <HistoryScreen />
-                    <QuickTools />
-                    <NarrationScreen />
-                    <SkipAutoInterceptor />
-                    <TextInput />
-                    <NextButton />
-                </>}
-            />
+            <Route key={"narration"} path={NARRATION_ROUTE} element={<NarrationElement />} />
             <Route path="*" element={<MainMenu />} />
         </Routes>
     )
 }
+
+function NarrationElement() {
+    useSkipAutoDetector()
+    return (
+        <>
+            <HistoryScreen />
+            <QuickTools />
+            <NarrationScreen />
+            <TextInput />
+            <NextButton />
+        </>
+    )
+}