create-pixi-vn 1.9.7 → 2.0.0

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

@@ -1,25 +0,0 @@
-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";
-
-export default function useGameProps(): StepLabelProps {
-    const navigate = useMyNavigate();
-    const { t } = useTranslation(["narration"]);
-    const { t: uiTransition } = useTranslation(["ui"]);
-    const { enqueueSnackbar } = useSnackbar();
-    const queryClient = useQueryClient();
-
-    return {
-        navigate,
-        t,
-        uiTransition,
-        notify: enqueueSnackbar,
-        invalidateInterfaceData: async (delay: number = 0) => {
-            if (delay > 0) await new Promise((resolve) => setTimeout(resolve, delay));
-            return await queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
-        },
-    };
-}

package/template-react-vite-muijoy-tauri/src/hooks/useInterval.ts

@@ -1,44 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * A custom hook that sets up an interval to call a callback function.
- * @param callback The callback function to call on each interval.
- * @param options An object containing the delay and enabled state for the interval.
- * @param dependencies The dependencies array that determines when to re-run the effect.
- */
-export default function useInterval(
-    callback: () => any,
-    options: {
-        /**
-         * The delay in milliseconds between each interval.
-         * @default 1000
-         */
-        delay?: number;
-        /**
-         * A boolean indicating whether the interval is enabled or not.
-         * @default true
-         */
-        enabled?: boolean;
-    },
-    dependencies: any[] = []
-) {
-    const savedCallback = useRef<() => any | null>(null);
-    const { delay = 1000, enabled = true } = options;
-
-    useEffect(() => {
-        savedCallback.current = callback;
-    }, [callback]);
-
-    useEffect(() => {
-        function tick() {
-            if (savedCallback.current) {
-                savedCallback.current();
-            }
-        }
-
-        if (enabled && delay > 0) {
-            const id = setInterval(tick, delay);
-            return () => clearInterval(id);
-        }
-    }, [delay, enabled, ...dependencies]);
-}

package/template-react-vite-muijoy-tauri/src/hooks/useKeyDetector.ts

@@ -1,19 +0,0 @@
-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-tauri/src/hooks/useKeyboardDetector.ts

@@ -1,57 +0,0 @@
-import { useQueryClient } from "@tanstack/react-query";
-import { useSnackbar } from "notistack";
-import { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import useGameSaveScreenStore from "../stores/useGameSaveScreenStore";
-import { saveGameToIndexDB } 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 setOpenLoadAlert = useGameSaveScreenStore((state) => state.editLoadAlert);
-    const queryClient = useQueryClient();
-    const { t } = useTranslation(["ui"]);
-    const location = useLocation();
-    const { enqueueSnackbar } = useSnackbar();
-    const { data: lastSave = null } = useQueryLastSave();
-
-    const onkeydown = useCallback(
-        (event: KeyboardEvent) => {
-            switch (event.code) {
-                case "KeyS":
-                    if (event.altKey) {
-                        if (location.pathname === "/") {
-                            console.log("Can't save on home page");
-                            break;
-                        }
-                        saveGameToIndexDB()
-                            .then((save) => {
-                                queryClient.setQueryData([SAVES_USE_QUEY_KEY, save.id], save);
-                                queryClient.setQueryData([LAST_SAVE_USE_QUEY_KEY], save);
-                                enqueueSnackbar(t("success_save"), { variant: "success" });
-                            })
-                            .catch(() => {
-                                enqueueSnackbar(t("fail_save"), { variant: "error" });
-                            });
-                    }
-                    break;
-                case "KeyL":
-                    if (event.altKey) {
-                        if (!lastSave) {
-                            console.log("No save to load");
-                            return;
-                        }
-                        setOpenLoadAlert(lastSave);
-                    }
-                    break;
-            }
-        },
-        [location, lastSave, queryClient, t]
-    );
-
-    useEventListener({ type: "keydown", listener: onkeydown });
-
-    return null;
-}

package/template-react-vite-muijoy-tauri/src/hooks/useMinigame.ts

@@ -1,55 +0,0 @@
-import { canvas, Layer } from "@drincs/pixi-vn";
-import { Container } from "@drincs/pixi-vn/pixi.js";
-import { useEffect, useRef } from "react";
-import { CANVAS_MINIGAME_LAYER_NAME } from "../constans";
-
-export default function useMinigame(
-    game: (layer: Layer) => void,
-    props?: {
-        onStart?: () => Promise<void>;
-        onExit?: (layer: Layer) => void;
-    }
-) {
-    const loading = useRef(false);
-
-    // Keep latest callbacks in refs to avoid effect restarts
-    const startRef = useRef<() => Promise<void>>(props?.onStart ?? (async () => {}));
-    const exitRef = useRef<(layer: Layer) => void>(props?.onExit);
-
-    // Update refs when props change, without changing effect identity
-    useEffect(() => {
-        startRef.current = props?.onStart ?? (async () => {});
-    }, [props?.onStart]);
-
-    useEffect(() => {
-        exitRef.current = props?.onExit;
-    }, [props?.onExit]);
-
-    useEffect(() => {
-        // Create the layer and start the game once
-        loading.current = true;
-        const layer = canvas.addLayer(CANVAS_MINIGAME_LAYER_NAME, new Container());
-        if (!layer) {
-            console.error("Failed to create UI layer for minigame");
-            return;
-        }
-
-        let cancelled = false;
-
-        startRef.current().then(() => {
-            if (cancelled) return;
-            loading.current = false;
-            game(layer);
-        });
-
-        return () => {
-            cancelled = true;
-            canvas.removeLayer(CANVAS_MINIGAME_LAYER_NAME);
-            if (exitRef.current) {
-                exitRef.current(layer);
-            }
-        };
-    }, [game]);
-
-    return { loading };
-}

package/template-react-vite-muijoy-tauri/src/hooks/useMyNavigate.ts

@@ -1,19 +0,0 @@
-import { Assets } from "@drincs/pixi-vn";
-import { NavigateFunction, NavigateOptions, To, useNavigate } from "react-router-dom";
-
-/**
- * https://pixi-vn.web.app/it/start/interface-navigate#block-back-forward
- */
-export default function useMyNavigate(): NavigateFunction {
-    const navigate = useNavigate();
-
-    return async (to: To | number, options?: NavigateOptions) => {
-        if (typeof to === "number") {
-            await navigate(to);
-        } else {
-            Assets.backgroundLoadBundle(to as string);
-            await navigate(to, options);
-        }
-        window.history.pushState(null, window.location.href, window.location.href);
-    };
-}

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

@@ -1,78 +0,0 @@
-import { narration, stepHistory, StoredIndexedChoiceInterface } from "@drincs/pixi-vn";
-import { useCallback } from "react";
-import { useShallow } from "zustand/react/shallow";
-import useInterfaceStore from "../stores/useInterfaceStore";
-import useStepStore from "../stores/useStepStore";
-import useGameProps from "./useGameProps";
-
-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 gameProps = useGameProps();
-
-    const goNext = useCallback(async () => {
-        setNextStepLoading(true);
-        try {
-            if (hidden) {
-                setHideInterface(false);
-            }
-            if (!narration.canContinue) {
-                setNextStepLoading(false);
-                return;
-            }
-            return narration
-                .continue(gameProps)
-                .then(() => {
-                    gameProps.invalidateInterfaceData();
-                    setNextStepLoading(false);
-                })
-                .catch((e) => {
-                    setNextStepLoading(false);
-                    console.error(e);
-                });
-        } catch (e) {
-            setNextStepLoading(false);
-            console.error(e);
-            return;
-        }
-    }, [gameProps]);
-
-    const goBack = useCallback(async () => {
-        setBackLoading(true);
-        return stepHistory
-            .back(gameProps)
-            .then(() => {
-                setBackLoading(false);
-                gameProps.invalidateInterfaceData();
-            })
-            .catch((e) => {
-                setBackLoading(false);
-                console.error(e);
-            });
-    }, [gameProps]);
-
-    const selectChoice = useCallback(
-        async (item: StoredIndexedChoiceInterface) => {
-            setNextStepLoading(true);
-            return narration
-                .selectChoice(item, gameProps)
-                .then(() => {
-                    gameProps.invalidateInterfaceData();
-                    setNextStepLoading(false);
-                })
-                .catch((e) => {
-                    setNextStepLoading(false);
-                    console.error(e);
-                });
-        },
-        [gameProps],
-    );
-
-    return {
-        goNext,
-        goBack,
-        selectChoice,
-    };
-}

package/template-react-vite-muijoy-tauri/src/hooks/useNetworkDetector.ts

@@ -1,18 +0,0 @@
-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-tauri/src/hooks/useQueryInterface.ts

@@ -1,141 +0,0 @@
-import { CharacterInterface, narration, stepHistory } from "@drincs/pixi-vn";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
-
-export const INTERFACE_DATA_USE_QUEY_KEY = "interface_data_use_quey_key";
-
-const CAN_GO_BACK_USE_QUEY_KEY = "can_go_back_use_quey_key";
-export function useQueryCanGoBack() {
-    return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CAN_GO_BACK_USE_QUEY_KEY],
-        queryFn: async () => stepHistory.canGoBack,
-    });
-}
-
-const CHOICE_MENU_OPTIONS_USE_QUEY_KEY = "choice_menu_options_use_quey_key";
-export function useQueryChoiceMenuOptions() {
-    const { t } = useTranslation(["narration"]);
-    return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CHOICE_MENU_OPTIONS_USE_QUEY_KEY],
-        queryFn: async () =>
-            narration.choices?.map((option) => ({
-                ...option,
-                text: typeof option.text === "string" ? t(option.text) : option.text.map((text) => t(text)).join(" "),
-            })) || [],
-    });
-}
-
-const INPUT_VALUE_USE_QUEY_KEY = "input_value_use_quey_key";
-export function useQueryInputValue<T>() {
-    return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, INPUT_VALUE_USE_QUEY_KEY],
-        queryFn: async () => ({
-            isRequired: narration.isRequiredInput,
-            type: narration.inputType,
-            currentValue: narration.inputValue as T | undefined,
-        }),
-    });
-}
-
-type DialogueModel = {
-    animatedText?: string;
-    text?: string;
-    character?: CharacterInterface;
-};
-const DIALOGUE_USE_QUEY_KEY = "dialogue_use_quey_key";
-export function useQueryDialogue() {
-    const { t } = useTranslation(["narration"]);
-    const queryClient = useQueryClient();
-
-    return useQuery<DialogueModel>({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, DIALOGUE_USE_QUEY_KEY],
-        queryFn: async ({ queryKey }) => {
-            let dialogue = narration.dialogue;
-            let text = dialogue?.text;
-            if (Array.isArray(text)) {
-                text = text.map((text) => t(text)).join(" ");
-            } else if (typeof text === "string") {
-                text = t(text);
-            }
-            let character = dialogue?.character;
-            if (typeof character === "string") {
-                character = {
-                    id: character,
-                    name: t(character),
-                } as CharacterInterface;
-            }
-
-            let prevData = queryClient.getQueryData<DialogueModel>(queryKey) || {};
-            let oldText = (prevData.text || "") + (prevData.animatedText || "");
-            if (text && character?.id === prevData?.character?.id && text.startsWith(oldText)) {
-                let newText = text.slice(oldText.length);
-                if (!newText && oldText && character === prevData?.character) {
-                    return prevData;
-                }
-                return {
-                    animatedText: newText,
-                    text: oldText,
-                    character: character,
-                };
-            }
-
-            return {
-                animatedText: text,
-                character: character,
-            };
-        },
-    });
-}
-
-const CAN_GO_NEXT_USE_QUEY_KEY = "can_go_next_use_quey_key";
-export function useQueryCanGoNext() {
-    return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CAN_GO_NEXT_USE_QUEY_KEY],
-        queryFn: async () => narration.canContinue && !narration.isRequiredInput,
-    });
-}
-
-const NARRATIVE_HISTORY_USE_QUEY_KEY = "narrative_history_use_quey_key";
-export function useQueryNarrativeHistory({ searchString }: { searchString?: string }) {
-    const { t } = useTranslation(["narration"]);
-
-    return useQuery({
-        queryKey: [INTERFACE_DATA_USE_QUEY_KEY, NARRATIVE_HISTORY_USE_QUEY_KEY, searchString],
-        queryFn: async () => {
-            const promises = stepHistory.narrativeHistory.map(async (step) => {
-                let character = step.dialogue?.character;
-                let icon: string | undefined;
-                let characterName: string | undefined;
-                if (typeof character === "string") {
-                    characterName = t(character);
-                } else {
-                    characterName = character?.name
-                        ? character.name + (character.surname ? " " + character.surname : "")
-                        : undefined;
-                    icon = character?.icon;
-                }
-                let text = step.dialogue?.text;
-                if (Array.isArray(text)) {
-                    text = text.map((text) => t(text)).join(" ");
-                } else if (typeof text === "string") {
-                    text = t(text);
-                }
-                return {
-                    character: characterName,
-                    text: text || "",
-                    icon: icon,
-                    choices: step.choices,
-                    inputValue: step.inputValue,
-                };
-            });
-            const data = await Promise.all(promises);
-            return data.filter((data) => {
-                if (!searchString) return true;
-                return (
-                    data.character?.toLowerCase().includes(searchString.toLowerCase()) ||
-                    data.text?.toLowerCase().includes(searchString.toLowerCase())
-                );
-            });
-        },
-    });
-}

package/template-react-vite-muijoy-tauri/src/hooks/useQueryIsFullModeScreen.ts

@@ -1,16 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { getCurrentWindow } from "@tauri-apps/api/window";
-
-export const IS_FULL_SCREEN_MODE_USE_QUEY_KEY = "is_full_screen_mode_use_quey_key";
-
-export default function useQueryIsFullModeScreen() {
-    return useQuery({
-        queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY],
-        queryFn: async () => {
-            if (window.__TAURI__) {
-                return getCurrentWindow().isFullscreen();
-            }
-            return document.fullscreenElement !== null;
-        },
-    });
-}

package/template-react-vite-muijoy-tauri/src/hooks/useQueryLastSave.ts

@@ -1,11 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { getLastSaveFromIndexDB } from "../utils/save-utility";
-
-export const LAST_SAVE_USE_QUEY_KEY = "last_save_use_quey_key";
-
-export default function useQueryLastSave() {
-    return useQuery({
-        queryKey: [LAST_SAVE_USE_QUEY_KEY],
-        queryFn: async () => (await getLastSaveFromIndexDB()) || null,
-    });
-}

package/template-react-vite-muijoy-tauri/src/hooks/useQuerySaves.ts

@@ -1,11 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { getSaveFromIndexDB } from "../utils/save-utility";
-
-export const SAVES_USE_QUEY_KEY = "saves_use_quey_key";
-
-export default function useQuerySaves({ id }: { id: number }) {
-    return useQuery({
-        queryKey: [SAVES_USE_QUEY_KEY, id],
-        queryFn: async () => (await getSaveFromIndexDB(id)) || null,
-    });
-}

package/template-react-vite-muijoy-tauri/src/hooks/useSkipAutoDetector.ts

@@ -1,52 +0,0 @@
-import { useShallow } from "zustand/react/shallow";
-import { SKIP_DELAY } from "../constans";
-import useAutoInfoStore from "../stores/useAutoInfoStore";
-import useSkipStore from "../stores/useSkipStore";
-import useTypewriterStore from "../stores/useTypewriterStore";
-import useDebouncedEffect from "./useDebouncedEffect";
-import useInterval from "./useInterval";
-import useEventListener from "./useKeyDetector";
-import useNarrationFunctions from "./useNarrationFunctions";
-
-export default function useSkipAutoDetector() {
-    const skipEnabled = useSkipStore(useShallow((state) => state.enabled));
-    const setSkipEnabled = useSkipStore((state) => state.setEnabled);
-    const autoEnabled = useAutoInfoStore(useShallow((state) => state.enabled));
-    const autoTime = useAutoInfoStore(useShallow((state) => state.time));
-    const typewriterInProgress = useTypewriterStore(useShallow((state) => state.inProgress));
-    const { goNext } = useNarrationFunctions();
-
-    useInterval(goNext, {
-        delay: SKIP_DELAY,
-        enabled: skipEnabled,
-    });
-
-    useDebouncedEffect(
-        () => autoEnabled && !skipEnabled && goNext(),
-        {
-            delay: autoTime * 1000,
-            enabled: autoEnabled && !skipEnabled && !typewriterInProgress,
-        },
-        [autoEnabled, skipEnabled, goNext]
-    );
-
-    useEventListener({
-        type: "keypress",
-        listener: (event) => {
-            if (event.code == "Enter" || event.code == "Space") {
-                setSkipEnabled(true);
-            }
-        },
-    });
-    useEventListener({
-        type: "keyup",
-        listener: (event) => {
-            if (event.code == "Enter" || event.code == "Space") {
-                setSkipEnabled(false);
-                goNext();
-            }
-        },
-    });
-
-    return null;
-}

package/template-react-vite-muijoy-tauri/src/hooks/useWheelActions.ts

@@ -1,101 +0,0 @@
-import { stepHistory, StepLabelProps } from "@drincs/pixi-vn";
-import { narration } from "@drincs/pixi-vn/narration";
-import { throttle } from "es-toolkit";
-import { useCallback, useEffect, useRef } from "react";
-import { HTML_CANVAS_LAYER_NAME, HTML_UI_LAYER_NAME } from "../constans";
-import useStepStore from "../stores/useStepStore";
-import useGameProps from "./useGameProps";
-
-function isScrollableElement(element: HTMLElement | null): boolean {
-    if (!element) return false;
-
-    const style = window.getComputedStyle(element);
-    const overflowY = style.overflowY;
-
-    const isScrollable =
-        (overflowY === "auto" || overflowY === "scroll") && element.scrollHeight > element.clientHeight;
-
-    return isScrollable;
-}
-
-function hasScrollableParent(target: EventTarget | null): boolean {
-    let el = target as HTMLElement | null;
-
-    while (el) {
-        if (isScrollableElement(el)) {
-            return true;
-        }
-        el = el.parentElement;
-    }
-
-    return false;
-}
-
-function isInsideRoot(target: EventTarget | null, selector: string): boolean {
-    if (!(target instanceof HTMLElement)) return false;
-    return target.closest("#" + selector) !== null;
-}
-
-export function useWheelActions({
-    throttleMs = 300,
-    minDelta = 20,
-}: {
-    throttleMs?: number;
-    minDelta?: number;
-} = {}) {
-    const pendingAsync = useRef(0);
-    const setLoading = useStepStore((state) => state.setLoading);
-    const gameProps = useGameProps();
-
-    const runAsync = async (fn: (props: StepLabelProps) => Promise<unknown>) => {
-        try {
-            pendingAsync.current += 1;
-            setLoading(pendingAsync.current > 0);
-            await fn(gameProps);
-        } finally {
-            pendingAsync.current -= 1;
-            setLoading(pendingAsync.current > 0);
-            if (pendingAsync.current === 0) {
-                gameProps.invalidateInterfaceData();
-            }
-        }
-    };
-
-    const handleWheel = useCallback(
-        throttle(async (event: WheelEvent) => {
-            if (!(isInsideRoot(event.target, HTML_UI_LAYER_NAME) || isInsideRoot(event.target, HTML_CANVAS_LAYER_NAME)))
-                return;
-            if (hasScrollableParent(event.target)) return;
-
-            // blocca lo scroll nativo
-            event.preventDefault();
-
-            const { deltaY } = event;
-
-            // ignora micro-movimenti del trackpad
-            if (Math.abs(deltaY) < minDelta) return;
-
-            if (deltaY < 0) {
-                // ⬆️ Scroll up
-                await runAsync(narration.continue.bind(narration));
-            }
-
-            if (deltaY > 0) {
-                // ⬇️ Scroll down
-                await runAsync(stepHistory.back.bind(stepHistory));
-            }
-        }, throttleMs),
-        [throttleMs, minDelta],
-    );
-
-    useEffect(() => {
-        window.addEventListener("wheel", handleWheel, { passive: false });
-
-        return () => {
-            window.removeEventListener("wheel", handleWheel);
-            handleWheel.cancel();
-        };
-    }, [handleWheel]);
-
-    return null;
-}