create-pixi-vn 1.6.1 → 1.6.2

package/package.json

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

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

@@ -47,6 +47,7 @@ Core libraries:
   You can use the following button to show Tanstack Query interactions with the game. (the button will be automatically hidden when released)
 * [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework for rapidly building custom designs.
   * [Tailwind CSS Motion](https://rombo.co/tailwind/): A library that provides a set of utilities for creating animations with Tailwind CSS.
+  * [Tailwind CSS Typography](https://tailwindcss.com/docs/typography-plugin): A plugin that provides a set of utilities for styling text.
 
 UI libraries:
 

package/template-nqtr-react-vite-muijoy/package.json

@@ -11,50 +11,53 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@drincs/nqtr": "^0.4.2",
-    "@drincs/pixi-vn": "^1.2.15",
+    "@drincs/nqtr": "^0.5.5",
+    "@drincs/pixi-vn": "^1.2.22",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^7.1.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.2.0",
     "@mui/joy": "^5.0.0-beta.52",
-    "@mui/material": "^7.1.0",
-    "@tailwindcss/vite": "^4.1.6",
-    "@tanstack/react-query": "^5.75.7",
-    "i18next": "^25.1.2",
+    "@mui/material": "^7.2.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-query": "^5.83.0",
+    "i18next": "^25.3.2",
     "i18next-chained-backend": "^4.6.2",
     "i18next-resources-to-backend": "^1.2.1",
-    "motion": "^12.10.5",
+    "motion": "^12.23.6",
     "notistack": "^3.0.2",
     "react": "^19.1.0",
     "react-color-palette": "^7.3.0",
     "react-dom": "^19.1.0",
     "react-error-boundary": "^6.0.0",
-    "react-i18next": "^15.5.1",
+    "react-i18next": "^15.6.0",
+    "react-lazy-load-image-component": "^1.6.3",
     "react-markdown": "^10.1.0",
     "react-markdown-typewriter": "^1.1.4",
-    "react-router-dom": "^7.6.0",
+    "react-router-dom": "^7.6.3",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "shade-generator": "^1.2.7",
-    "tailwindcss": "^4.1.6",
-    "vite-plugin-checker": "^0.9.3",
-    "zustand": "^5.0.4"
+    "tailwindcss": "^4.1.11",
+    "vite-plugin-checker": "^0.10.0",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^5.75.7",
-    "@types/node": "^22.15.17",
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.3",
-    "@typescript-eslint/eslint-plugin": "^8.32.0",
-    "@typescript-eslint/parser": "^8.32.0",
-    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.26.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tanstack/react-query-devtools": "^5.83.0",
+    "@types/node": "^24.0.14",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@types/react-lazy-load-image-component": "^1.6.4",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.31.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "tailwindcss-motion": "^1.1.0",
+    "tailwindcss-motion": "^1.1.1",
     "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "vite-plugin-pwa": "^1.0.0"
+    "vite": "^7.0.4",
+    "vite-plugin-pwa": "^1.0.1"
   },
   "keywords": [
     "game",

package/template-nqtr-react-vite-muijoy/src/App.tsx

@@ -4,9 +4,17 @@ import { useI18n } from "./i18n";
 import LoadingScreen from "./screens/LoadingScreen";
 import { defineAssets } from "./utils/assets-utility";
 import { initializeIndexedDB } from "./utils/indexedDB-utility";
+import { initializeNQTR } from "./utils/nqtr-utility";
 
 const Home = lazy(async () => {
-    await Promise.all([initializeIndexedDB(), defineAssets(), useI18n()]);
+    await Promise.all([
+        import("./values"),
+        import("./labels"),
+        initializeIndexedDB(),
+        defineAssets(),
+        useI18n(),
+        initializeNQTR(),
+    ]);
     return import("./Home");
 });
 

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

@@ -1,5 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 import NextButton from "./components/NextButton";
+import VisibilityButton from "./components/VisibilityButton";
 import { LOADING_ROUTE, MAIN_MENU_ROUTE, MAP_ROUTE, NARRATION_ROUTE, NAVIGATION_ROUTE } from "./constans";
 import useNQTRDetector from "./hooks/useNQTRDetector";
 import useSkipAutoDetector from "./hooks/useSkipAutoDetector";
@@ -37,7 +38,8 @@ function NarrationElement() {
             <QuickTools />
             <TextInput />
             <NextButton />
-            <Detectors />
+            <NarrationDetectors />
+            <VisibilityButton />
         </>
     );
 }
@@ -52,11 +54,12 @@ function NavigationElement() {
             <QuickRooms />
             <TimeScreen />
             <NqtrQuickTools />
+            <VisibilityButton />
         </>
     );
 }
 
-function Detectors() {
+function NarrationDetectors() {
     useSkipAutoDetector();
     return <></>;
 }

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

@@ -4,7 +4,7 @@ import Routes from "./AppRoutes";
 import useClosePageDetector from "./hooks/useClosePageDetector";
 import useKeyboardDetector from "./hooks/useKeyboardDetector";
 import useEventListener from "./hooks/useKeyDetector";
-import Imports from "./Imports";
+import RootProvider from "./providers/RootProvider";
 import GameSaveScreen from "./screens/GameSaveScreen";
 import SaveLoadAlert from "./screens/modals/SaveLoadAlert";
 import OfflineScreen from "./screens/OfflineScreen";
@@ -41,8 +41,8 @@ function HomeChild() {
 
 export default function Home() {
     return (
-        <Imports>
+        <RootProvider>
             <HomeChild />
-        </Imports>
+        </RootProvider>
     );
 }

package/template-nqtr-react-vite-muijoy/src/assets/manifest.ts

@@ -1,6 +1,6 @@
 import { AssetsManifest } from "@drincs/pixi-vn";
 import { MAIN_MENU_ROUTE } from "../constans";
-import { mainMap } from "../values/maps";
+import { mainMap, nightcityMap } from "../values/maps";
 import { aliceRoom, annRoom, bathroom, gymRoom, lounge, mcRoom, terrace } from "../values/rooms";
 
 /**
@@ -41,6 +41,23 @@ const manifest: AssetsManifest = {
                     alias: "map-3",
                     src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/images/location/map-3.webp",
                 },
+                {
+                    alias: "icon_location_home",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/nqtr_interface/home-00.webp",
+                },
+                {
+                    alias: "icon_location_gym",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/nqtr_interface/gym.webp",
+                },
+            ],
+        },
+        {
+            name: nightcityMap.id,
+            assets: [
+                {
+                    alias: "map-nightcity",
+                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/images/location/nightcity.webp",
+                },
             ],
         },
         // rooms
@@ -167,20 +184,6 @@ const manifest: AssetsManifest = {
                 },
             ],
         },
-        // locations
-        {
-            name: "locations",
-            assets: [
-                {
-                    alias: "icon_location_home",
-                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/nqtr_interface/home-00.webp",
-                },
-                {
-                    alias: "icon_location_gym",
-                    src: "https://raw.githubusercontent.com/DRincs-Productions/NQTR-System/refs/heads/main/game/nqtr_interface/gym.webp",
-                },
-            ],
-        },
         // alice
         {
             name: "alice",

package/template-nqtr-react-vite-muijoy/src/components/MenuButton.tsx

@@ -1,4 +1,5 @@
 import { Button, ButtonProps, ButtonTypeMap } from "@mui/joy";
+import { motion, Variants } from "motion/react";
 
 interface MenuButtonProps
     extends ButtonProps<
@@ -12,6 +13,14 @@ interface MenuButtonProps
 
 export default function MenuButton(props: MenuButtonProps) {
     const { sx, transitionDelay, ...rest } = props;
+    const itemVariants: Variants = {
+        open: {
+            opacity: 1,
+            x: 0,
+            transition: { type: "spring", stiffness: 300, damping: 24, delay: transitionDelay },
+        },
+        closed: { opacity: 0, x: -50, transition: { duration: 0.2 } },
+    };
 
     return (
         <Button
@@ -20,7 +29,8 @@ export default function MenuButton(props: MenuButtonProps) {
                 fontSize: { xs: "0.75rem", sm: "0.75rem", md: "1rem", lg: "1.25rem", xl: "1.5rem" },
                 ...sx,
             }}
-            className='motion-preset-pop'
+            component={motion.div}
+            variants={itemVariants}
             {...rest}
         />
     );

package/template-nqtr-react-vite-muijoy/src/components/ModalDialog.tsx

@@ -1,7 +1,6 @@
 import { DialogActions, DialogContent, Divider, ModalClose } from "@mui/joy";
 import Modal from "@mui/joy/Modal";
 import { default as ModalDialogJoy, ModalDialogProps } from "@mui/joy/ModalDialog";
-import { AnimatePresence } from "motion/react";
 import { useEffect, useMemo, useState } from "react";
 
 export interface ModalDialogCustomProps extends ModalDialogProps {
@@ -41,31 +40,29 @@ export default function ModalDialogCustom(props: ModalDialogCustomProps) {
     );
 
     return (
-        <AnimatePresence>
-            <Modal
-                keepMounted
-                open={internalOpen}
-                onClose={() => canBeIgnored && setOpen(false)}
+        <Modal
+            keepMounted
+            open={internalOpen}
+            onClose={() => canBeIgnored && setOpen(false)}
+            sx={{
+                pointerEvents: open ? "auto" : "none",
+            }}
+            className={modalVarians}
+        >
+            <ModalDialogJoy
                 sx={{
                     pointerEvents: open ? "auto" : "none",
+                    ...sx,
                 }}
-                className={modalVarians}
+                className={modalDialogVarians}
+                {...rest}
             >
-                <ModalDialogJoy
-                    sx={{
-                        pointerEvents: open ? "auto" : "none",
-                        ...sx,
-                    }}
-                    className={modalDialogVarians}
-                    {...rest}
-                >
-                    {canBeIgnored && <ModalClose />}
-                    {head}
-                    {head && <Divider />}
-                    <DialogContent>{internalOpen && children}</DialogContent>
-                    {actions && <DialogActions>{actions}</DialogActions>}
-                </ModalDialogJoy>
-            </Modal>
-        </AnimatePresence>
+                {canBeIgnored && <ModalClose />}
+                {head}
+                {head && <Divider />}
+                <DialogContent>{internalOpen && children}</DialogContent>
+                {actions && <DialogActions>{actions}</DialogActions>}
+            </ModalDialogJoy>
+        </Modal>
     );
 }

package/template-nqtr-react-vite-muijoy/src/components/NqtrRoundIconButton.tsx

@@ -1,10 +1,11 @@
 import { OnRunProps } from "@drincs/nqtr";
-import { Assets } from "@drincs/pixi-vn";
 import { useTheme } from "@mui/joy";
 import { isValidElement, ReactElement } from "react";
+import { LazyLoadComponent } from "react-lazy-load-image-component";
 import useGameProps from "../hooks/useGameProps";
-import ImageTimeSlots from "../models/ImageTimeSlots";
+import TimeSlotsImage from "../models/TimeSlotsImage";
 import useNqtrScreenStore from "../stores/useNqtrScreenStore";
+import { getPixiJSAsset } from "../utils/assets-utility";
 import RoundIconButton, { RoundIconButtonProps } from "./RoundIconButton";
 
 interface NqtrRoundIconButtonProps extends RoundIconButtonProps {
@@ -17,7 +18,6 @@ export default function NqtrRoundIconButton(props: NqtrRoundIconButtonProps) {
 
     return (
         <RoundIconButton
-            className='motion-preset-pop'
             sx={{
                 "--IconButton-size": { xs: "40px", sm: "60px", md: "80px" },
                 border: 3,
@@ -32,7 +32,7 @@ export default function NqtrRoundIconButton(props: NqtrRoundIconButtonProps) {
 
 export function NqtrRoundIconButtonConvertor(
     props: NqtrRoundIconButtonProps & {
-        image?: string | ImageTimeSlots | ReactElement | ((props: OnRunProps) => ReactElement);
+        image?: string | TimeSlotsImage | ReactElement | ((props: OnRunProps) => ReactElement);
     }
 ) {
     let { image, ...rest } = props;
@@ -47,26 +47,27 @@ export function NqtrRoundIconButtonConvertor(
         return image;
     }
 
-    if (image instanceof ImageTimeSlots) {
+    if (image instanceof TimeSlotsImage) {
         image = image.src;
     }
 
     if (typeof image == "string") {
         try {
-            // check if the image is a PixiAsset
-            image = Assets.resolver.resolve(image).src || image;
+            image = getPixiJSAsset(image);
         } catch {}
         return (
-            <NqtrRoundIconButton
-                {...rest}
-                sx={{
-                    backgroundImage: `url(${image})`,
-                    backgroundSize: "cover",
-                    backgroundPosition: "center",
-                    fontSize: { xs: "1rem", sm: "1.5rem", md: "2rem", lg: "2.5rem", xl: "3rem" },
-                    ...rest.sx,
-                }}
-            />
+            <LazyLoadComponent>
+                <NqtrRoundIconButton
+                    {...rest}
+                    sx={{
+                        backgroundImage: `url(${image})`,
+                        backgroundSize: "cover",
+                        backgroundPosition: "center",
+                        fontSize: { xs: "1rem", sm: "1.5rem", md: "2rem", lg: "2.5rem", xl: "3rem" },
+                        ...rest.sx,
+                    }}
+                />
+            </LazyLoadComponent>
         );
     }
 }

package/template-nqtr-react-vite-muijoy/src/components/RoundIconButton.tsx

@@ -1,4 +1,6 @@
 import { IconButton, IconButtonProps, Shadow, Tooltip } from "@mui/joy";
+import { useShallow } from "zustand/react/shallow";
+import useInterfaceStore from "../stores/useInterfaceStore";
 
 export interface RoundIconButtonProps extends IconButtonProps {
     circumference?: string | {} | number;
@@ -8,6 +10,7 @@ export interface RoundIconButtonProps extends IconButtonProps {
 
 export default function RoundIconButton(props: RoundIconButtonProps) {
     const { sx, circumference, ariaLabel, elevation, ...rest } = props;
+    const hidden = useInterfaceStore(useShallow((state) => state.hidden));
 
     return (
         <Tooltip key={props.key ? "tooltip-" + props.key : undefined} title={ariaLabel}>
@@ -15,11 +18,13 @@ export default function RoundIconButton(props: RoundIconButtonProps) {
                 {/* This div is necessary to avoid the tooltip to be cutted */}
                 <IconButton
                     title={ariaLabel}
+                    className={hidden ? "motion-scale-out-[0]" : "motion-scale-in-[0]"}
                     sx={{
                         borderRadius: "50%",
                         height: circumference,
                         width: circumference,
                         boxShadow: elevation ?? undefined,
+                        pointerEvents: hidden ? "none" : "auto",
                         ...sx,
                     }}
                     {...rest}

package/template-nqtr-react-vite-muijoy/src/components/VisibilityButton.tsx

@@ -0,0 +1,46 @@
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import { IconButton, useTheme } from "@mui/joy";
+import { useEffect, useMemo } from "react";
+import { useShallow } from "zustand/react/shallow";
+import useEventListener from "../hooks/useKeyDetector";
+import useInterfaceStore from "../stores/useInterfaceStore";
+
+export default function VisibilityButton() {
+    const hidden = useInterfaceStore(useShallow((state) => state.hidden));
+    const editHideInterface = useInterfaceStore((state) => state.editHidden);
+    const showInterface = useInterfaceStore((state) => state.show);
+    const iconVarians = useMemo(() => (hidden ? `motion-preset-pop` : `motion-scale-out-0`), [hidden]);
+
+    useEffect(() => {
+        return () => {
+            showInterface();
+        };
+    }, [showInterface]);
+
+    useEventListener({
+        type: "keyup",
+        listener: (event) => {
+            if (event.code == "KeyV" && event.altKey) {
+                editHideInterface();
+            }
+        },
+    });
+
+    return (
+        <IconButton
+            onClick={editHideInterface}
+            sx={{
+                position: "absolute",
+                top: 0,
+                right: 0,
+            }}
+            className={iconVarians}
+        >
+            <VisibilityOffIcon
+                sx={{
+                    color: useTheme().palette.neutral[500],
+                }}
+            />
+        </IconButton>
+    );
+}

package/template-nqtr-react-vite-muijoy/src/hooks/useGameProps.ts

@@ -1,18 +1,28 @@
 import { StepLabelProps } from "@drincs/pixi-vn";
+import { useQueryClient } from "@tanstack/react-query";
 import { useSnackbar } from "notistack";
 import { useTranslation } from "react-i18next";
 import useMyNavigate from "./useMyNavigate";
+import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";
+import useTimeTracker from "./useTimeTracker";
 
 export default function useGameProps(): StepLabelProps {
     const navigate = useMyNavigate();
     const { t } = useTranslation(["narration"]);
     const { t: uiTransition } = useTranslation(["ui"]);
     const { enqueueSnackbar } = useSnackbar();
+    const queryClient = useQueryClient();
+    const { sleep, wait } = useTimeTracker();
 
     return {
         navigate,
         t,
         uiTransition,
         notify: enqueueSnackbar,
+        invalidateInterfaceData: () => {
+            queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
+        },
+        sleep,
+        wait,
     };
 }

package/template-nqtr-react-vite-muijoy/src/hooks/useKeyboardDetector.ts

@@ -4,15 +4,12 @@ import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import useGameSaveScreenStore from "../stores/useGameSaveScreenStore";
-import useInterfaceStore from "../stores/useInterfaceStore";
 import { putSaveIntoIndexDB } from "../utils/save-utility";
 import useEventListener from "./useKeyDetector";
 import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from "./useQueryLastSave";
 import { SAVES_USE_QUEY_KEY } from "./useQuerySaves";
 
 export default function useKeyboardDetector() {
-    const hideInterface = useInterfaceStore((state) => state.hidden);
-    const setHideInterface = useInterfaceStore((state) => state.setHidden);
     const setOpenLoadAlert = useGameSaveScreenStore((state) => state.editLoadAlert);
     const queryClient = useQueryClient();
     const { t } = useTranslation(["ui"]);
@@ -23,17 +20,6 @@ export default function useKeyboardDetector() {
     const onkeydown = useCallback(
         (event: KeyboardEvent) => {
             switch (event.code) {
-                case "Enter":
-                case "Space":
-                    if (hideInterface) {
-                        setHideInterface(false);
-                    }
-                    break;
-                case "KeyV":
-                    if (event.altKey) {
-                        setHideInterface(!hideInterface);
-                    }
-                    break;
                 case "KeyS":
                     if (event.altKey) {
                         if (location.pathname === "/") {
@@ -62,7 +48,7 @@ export default function useKeyboardDetector() {
                     break;
             }
         },
-        [location, hideInterface, lastSave, queryClient, t]
+        [location, lastSave, queryClient, t]
     );
 
     useEventListener({ type: "keydown", listener: onkeydown });

package/template-nqtr-react-vite-muijoy/src/hooks/useNQTRDetector.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import { CANVAS_UI_LAYER_NAME } from "../constans";
 import { useQueryCurrentRoomId, useQueryRoom, useQueryTime } from "../hooks/useQueryNQTR";
 import useNqtrScreenStore from "../stores/useNqtrScreenStore";
+import { convertMultiTypeSprite } from "../utils/image-utility";
 import useGameProps from "./useGameProps";
 import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";
 
@@ -17,44 +18,46 @@ export default function useNQTRDetector() {
     const setDisable = useNqtrScreenStore((state) => state.setDisabled);
 
     useEffect(() => {
-        const { image } = currentRoom || {};
-        if (image) {
-            canvas.clear();
-            let component = new ImageSprite({}, image.src);
-            component.load();
-            canvas.getLayer(CANVAS_UI_LAYER_NAME)?.addChild(component);
-        }
-
-        // currentRoom.activities.forEach((activity) => {
-        //     if (!activity.renderIcon) {
-        //         return;
-        //     }
-        //     let icon = activity.renderIcon({
-        //         navigate: navigate,
-        //         t: t,
-        //         notify: (t(message), variant) => enqueueSnackbar(message, { variant }),
-        //     });
-        //     if (icon instanceof CanvasBase) {
-        //         container.addChild(icon);
-        //     }
-        // });
+        const { background } = currentRoom || {};
+        if (background) {
+            let image = convertMultiTypeSprite(background, gameProps);
+            let layer = canvas.getLayer(CANVAS_UI_LAYER_NAME);
+            if (layer) {
+                if (typeof image === "string") {
+                    let sprite = new ImageSprite({}, image);
+                    sprite.load();
+                    image = sprite;
+                }
+                layer.addChild(image);
 
-        // currentCommitments.forEach((commitment) => {
-        //     if (!commitment.renderIcon) {
-        //         return;
-        //     }
-        //     let icon = commitment.renderIcon({
-        //         navigate: navigate,
-        //         t: t,
-        //         notify: (t(message), variant) => enqueueSnackbar(message, { variant }),
-        //     });
-        //     if (icon instanceof CanvasBase) {
-        //         container.addChild(icon);
-        //     }
-        // });
+                currentRoom?.activities.forEach(({ sprite }) => {
+                    if (sprite) {
+                        let icon = convertMultiTypeSprite(sprite, gameProps);
+                        if (typeof icon === "string") {
+                            let sprite = new ImageSprite({}, icon);
+                            sprite.load();
+                            icon = sprite;
+                        }
+                        layer.addChild(icon);
+                    }
+                });
+                currentRoom?.routine.forEach(({ sprite }) => {
+                    if (sprite) {
+                        let icon = convertMultiTypeSprite(sprite, gameProps);
+                        if (typeof icon === "string") {
+                            let sprite = new ImageSprite({}, icon);
+                            sprite.load();
+                            icon = sprite;
+                        }
+                        layer.addChild(icon);
+                    }
+                });
+            }
+        }
 
-        let automaticFunction = navigator.currentRoom?.automaticFunction;
-        if (automaticFunction) {
+        let automaticFunctions = navigator.currentRoom?.automaticFunctions || [];
+        if (automaticFunctions.length > 0) {
+            let automaticFunction = automaticFunctions[0];
             setDisable(true);
             automaticFunction(gameProps).finally(() => {
                 queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });

package/template-nqtr-react-vite-muijoy/src/hooks/useNarrationFunctions.ts

@@ -2,6 +2,7 @@ import { narration, stepHistory, StoredIndexedChoiceInterface } from "@drincs/pi
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback } from "react";
 import { useShallow } from "zustand/react/shallow";
+import useInterfaceStore from "../stores/useInterfaceStore";
 import useStepStore from "../stores/useStepStore";
 import useGameProps from "./useGameProps";
 import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";
@@ -9,12 +10,17 @@ import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";
 export default function useNarrationFunctions() {
     const setNextStepLoading = useStepStore(useShallow((state) => state.setLoading));
     const setBackLoading = useStepStore((state) => state.setBackLoading);
+    const hidden = useInterfaceStore(useShallow((state) => state.hidden));
+    const setHideInterface = useInterfaceStore((state) => state.setHidden);
     const queryClient = useQueryClient();
     const gameProps = useGameProps();
 
     const goNext = useCallback(async () => {
         setNextStepLoading(true);
         try {
+            if (hidden) {
+                setHideInterface(false);
+            }
             if (!narration.canGoNext) {
                 setNextStepLoading(false);
                 return;