create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/hooks/props-hooks.ts

@@ -0,0 +1,30 @@
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
+import useTimeTracker from "@/lib/hooks/nqtr-hooks";
+import type { StepLabelProps } from "@drincs/pixi-vn";
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+export function useGameProps(): StepLabelProps {
+    const navigate = useNavigate();
+    const { t } = useTranslation(["narration"]);
+    const { t: uiTransition } = useTranslation(["ui"]);
+    const queryClient = useQueryClient();
+    const { sleep, wait } = useTimeTracker();
+
+    return {
+        navigate,
+        t,
+        uiTransition,
+        toast,
+        invalidateInterfaceData: async (delay: number = 0) => {
+            if (delay > 0) await new Promise((resolve) => setTimeout(resolve, delay));
+            return await queryClient.invalidateQueries({
+                queryKey: [INTERFACE_DATA_USE_QUERY_KEY],
+            });
+        },
+        sleep,
+        wait,
+    };
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/hooks/quick-tools-hooks.ts

@@ -0,0 +1,80 @@
+import { HTML_CANVAS_LAYER_NAME, HTML_UI_LAYER_NAME } from "@/constants";
+import { useGameProps } from "@/lib/hooks/props-hooks";
+import { GameStatus } from "@/lib/stores/game-status-store";
+import { hasScrollableParent } from "@/lib/utils/scroll-utils";
+import { type StepLabelProps, stepHistory } from "@drincs/pixi-vn";
+import { narration } from "@drincs/pixi-vn/narration";
+import { useThrottler } from "@tanstack/react-pacer";
+import { useEffect, useRef } from "react";
+
+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 gameProps = useGameProps();
+
+    const runAsync = async (fn: (props: StepLabelProps) => Promise<unknown>) => {
+        try {
+            pendingAsync.current += 1;
+            GameStatus.setLoading(pendingAsync.current > 0);
+            await fn(gameProps);
+        } finally {
+            pendingAsync.current -= 1;
+            GameStatus.setLoading(pendingAsync.current > 0);
+            if (pendingAsync.current === 0) {
+                gameProps.invalidateInterfaceData();
+            }
+        }
+    };
+
+    const handleWheel = useThrottler(
+        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));
+            }
+        },
+        { wait: throttleMs },
+    );
+
+    useEffect(() => {
+        window.addEventListener("wheel", handleWheel.maybeExecute, { passive: false });
+
+        return () => {
+            window.removeEventListener("wheel", handleWheel.maybeExecute);
+        };
+    }, [handleWheel.maybeExecute]);
+
+    return null;
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/hooks/quit-hooks.ts

@@ -0,0 +1,24 @@
+import { useAlertDialog } from "@/components/providers/alert-dialog-provider";
+import { exit } from "@tauri-apps/plugin-process";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+export function useQuit() {
+    const { openAlertDialog } = useAlertDialog();
+    const { t } = useTranslation(["ui"]);
+
+    const canQuit = typeof window !== "undefined" && !!window.__TAURI__;
+
+    const quit = useCallback(() => {
+        openAlertDialog({
+            head: t("quit"),
+            content: t("quit_confirm"),
+            onConfirm: async () => {
+                await exit();
+                return true;
+            },
+        });
+    }, [openAlertDialog, t]);
+
+    return { quit, canQuit };
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/hooks/save-hooks.tsx

@@ -0,0 +1,203 @@
+import { SaveNameInput } from "@/components/menus/save-menu/save-forms";
+import { useAlertDialog } from "@/components/providers/alert-dialog-provider";
+import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
+import { useGameProps } from "@/lib/hooks/props-hooks";
+import { LAST_SAVE_USE_QUERY_KEY, SAVES_USE_QUERY_KEY } from "@/lib/query/save-query";
+import {
+    addRefreshSave,
+    deleteSaveFromIndexDB,
+    loadSave,
+    saveGameToIndexDB,
+} from "@/lib/utils/save-utility";
+import type GameSaveData from "@/models/GameSaveData";
+import type { FileRouteTypes } from "@/routeTree.gen";
+import { useQueryClient } from "@tanstack/react-query";
+import { useLocation } from "@tanstack/react-router";
+import { useCallback, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+export function useSaveActions() {
+    const setSettingsOpen = useSetSearchParamState<boolean>("settings");
+    const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+    const { t } = useTranslation(["ui"]);
+    const gameProps = useGameProps();
+    const queryClient = useQueryClient();
+    const { openAlertDialog } = useAlertDialog();
+    const tempSaveNameRef = useRef<string>("");
+
+    const handleLoad = useCallback(
+        (data: GameSaveData & { id: number }) => {
+            openAlertDialog({
+                head: t("load"),
+                content: t("you_sure_to_load_save", {
+                    name: data.name || `${t("save_slot")} ${String(data.id + 1).padStart(2, "0")}`,
+                }),
+                onConfirm: () =>
+                    loadSave(data)
+                        .then(() => {
+                            gameProps.invalidateInterfaceData();
+                            toast.success(t("success_load"));
+                            setSettingsTab(undefined);
+                            setSettingsOpen(undefined);
+                            return true;
+                        })
+                        .catch((e) => {
+                            toast.error(t("fail_load"));
+                            console.error(e);
+                            return false;
+                        }),
+            });
+        },
+        [openAlertDialog, t, gameProps, setSettingsOpen, setSettingsTab],
+    );
+
+    const handleDelete = useCallback(
+        (id: number) => {
+            openAlertDialog({
+                head: t("delete"),
+                content: t("you_sure_to_delete_save", {
+                    name: `${t("save_slot")} ${String(id + 1).padStart(2, "0")}`,
+                }),
+                onConfirm: () =>
+                    deleteSaveFromIndexDB(id)
+                        .then(() => {
+                            queryClient.setQueryData([SAVES_USE_QUERY_KEY, id], null);
+                            queryClient.invalidateQueries({ queryKey: [LAST_SAVE_USE_QUERY_KEY] });
+                            toast.success(t("success_delete"));
+                            return true;
+                        })
+                        .catch((e) => {
+                            toast.error(t("fail_delete"));
+                            console.error(e);
+                            return false;
+                        }),
+            });
+        },
+        [openAlertDialog, t, queryClient],
+    );
+
+    const handleSave = useCallback(
+        (id: number) => {
+            tempSaveNameRef.current = "";
+            openAlertDialog({
+                head: t("save"),
+                content: (
+                    <SaveNameInput
+                        initialValue=""
+                        onValueChange={(v) => {
+                            tempSaveNameRef.current = v;
+                        }}
+                    />
+                ),
+                onConfirm: () => {
+                    const savePromise = saveGameToIndexDB({
+                        id,
+                        name: tempSaveNameRef.current,
+                    }).then((save) => {
+                        queryClient.setQueryData([SAVES_USE_QUERY_KEY, save.id], save);
+                        queryClient.setQueryData([LAST_SAVE_USE_QUERY_KEY], save);
+                    });
+                    toast.promise(savePromise, {
+                        loading: t("saving"),
+                        success: t("success_save"),
+                        error: t("fail_save"),
+                    });
+                    return savePromise
+                        .then(() => true)
+                        .catch((e) => {
+                            console.error(e);
+                            return false;
+                        });
+                },
+            });
+        },
+        [openAlertDialog, t, queryClient],
+    );
+
+    const handleOverwriteSave = useCallback(
+        (id: number, existingName: string) => {
+            tempSaveNameRef.current = existingName;
+            openAlertDialog({
+                head: t("overwrite_save"),
+                content: (
+                    <div className="flex flex-col gap-2">
+                        <p className="text-sm font-medium text-destructive">
+                            {t("you_sure_to_overwrite_save")}
+                        </p>
+                        <SaveNameInput
+                            initialValue={existingName}
+                            onValueChange={(v) => {
+                                tempSaveNameRef.current = v;
+                            }}
+                        />
+                    </div>
+                ),
+                onConfirm: () => {
+                    const savePromise = saveGameToIndexDB({
+                        id,
+                        name: tempSaveNameRef.current,
+                    }).then((save) => {
+                        queryClient.setQueryData([SAVES_USE_QUERY_KEY, save.id], save);
+                        queryClient.setQueryData([LAST_SAVE_USE_QUERY_KEY], save);
+                    });
+                    toast.promise(savePromise, {
+                        loading: t("saving"),
+                        success: t("success_save"),
+                        error: t("fail_save"),
+                    });
+                    return savePromise
+                        .then(() => true)
+                        .catch((e) => {
+                            console.error(e);
+                            return false;
+                        });
+                },
+            });
+        },
+        [openAlertDialog, t, queryClient],
+    );
+
+    return {
+        handleLoad,
+        handleDelete,
+        handleSave,
+        handleOverwriteSave,
+    };
+}
+
+/**
+ * useAutoSaveOnPageClose
+ *
+ * Trigger a refresh/save when the user is about to leave the page or when the
+ * document becomes hidden. Skips the root path (`/`).
+ *
+ * This hook does not return a value.
+ */
+export function useAutoSaveOnPageClose(): void {
+    const location = useLocation();
+
+    const callback = useCallback(() => {
+        if ((location.pathname as FileRouteTypes["fullPaths"]) === "/") {
+            return;
+        }
+        addRefreshSave();
+    }, [location.pathname]);
+
+    useEffect(() => {
+        const onBeforeUnload = () => callback();
+        const onVisibilityChange = () => {
+            if (document.visibilityState === "hidden") {
+                callback();
+            }
+        };
+
+        window.addEventListener("beforeunload", onBeforeUnload);
+        document.addEventListener("visibilitychange", onVisibilityChange);
+
+        return () => {
+            window.removeEventListener("beforeunload", onBeforeUnload);
+            document.removeEventListener("visibilitychange", onVisibilityChange);
+        };
+    }, [callback]);
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/i18n.ts

@@ -0,0 +1,80 @@
+import { generateJsonInkTranslation } from "@drincs/pixi-vn-ink";
+import i18n, { type ReadCallback } from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import ChainedBackend from "i18next-chained-backend";
+import { initReactI18next } from "react-i18next";
+
+class Backend extends ChainedBackend {
+    override async read(lng: string, ns: string, callback: ReadCallback) {
+        try {
+            const object = await getLocalesResource(lng);
+            const result = object[ns];
+            callback(null, result);
+        } catch (error) {
+            callback(error as Error, { data: null });
+        }
+    }
+}
+
+export const useI18n = async () => {
+    if (!i18n.isInitialized) {
+        return await i18n
+            .use(Backend)
+            .use(LanguageDetector)
+            .use(initReactI18next)
+            .init({
+                debug: false,
+                fallbackLng: "en",
+                supportedLngs: ["en"],
+                interpolation: {
+                    escapeValue: false,
+                },
+                load: "currentOnly",
+                detection: {
+                    order: ["localStorage"],
+                    caches: ["localStorage"],
+                },
+                missingInterpolationHandler(_text, value, _options) {
+                    return value[1];
+                },
+            });
+    }
+};
+
+function getLocalesResource(lng: string): Promise<Record<string, Record<string, string>>> {
+    return import(`./../locales/${lng}.json`);
+}
+
+async function generateResourceToTranslate(lng: string): Promise<any> {
+    let res = await getLocalesResource(lng);
+    res = { ...res };
+    if (!res) {
+        res = {};
+    }
+    if (!res.narration) {
+        res.narration = {};
+    }
+    if (res.default) {
+        delete res.default;
+    }
+    const manifest = await import("@/assets/ink-manifest.gen.json");
+    for (const path of manifest.default) {
+        const element = await fetch(path).then((r) => r.json());
+        element && (await generateJsonInkTranslation(element, res.narration));
+    }
+    return res;
+}
+
+export async function downloadResourceToTranslate() {
+    const lng = i18n.options.fallbackLng?.toString() || "en";
+    const data = await generateResourceToTranslate(lng);
+    const jsonString = JSON.stringify(data);
+    // download the save data as a JSON file
+    const blob = new Blob([jsonString], { type: "application/json" });
+    // download the file
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `strings_${lng}.json`;
+    a.click();
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/query/activity-query.ts

@@ -0,0 +1,24 @@
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
+import { useQueryTime } from "@/lib/query/time-query";
+import { RegisteredActivities, RegisteredCommitments } from "@drincs/nqtr";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+
+const ACTIVITY_USE_QUERY_KEY = "activity_use_query_key";
+export function useQueryActivity(activityId: string) {
+    const { data: { day, hour } = {} } = useQueryTime();
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, ACTIVITY_USE_QUERY_KEY, activityId, day, hour],
+        queryFn: () => RegisteredActivities.get(activityId),
+        placeholderData: keepPreviousData,
+    });
+}
+
+const COMMITMENT_USE_QUERY_KEY = "commitment_use_query_key";
+export function useQueryCommitment(activityId: string) {
+    const { data: { day, hour } = {} } = useQueryTime();
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, COMMITMENT_USE_QUERY_KEY, activityId, day, hour],
+        queryFn: () => RegisteredCommitments.get(activityId),
+        placeholderData: keepPreviousData,
+    });
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/query/map-query.ts

@@ -0,0 +1,78 @@
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
+import { useGameProps } from "@/lib/hooks/props-hooks";
+import { useQueryTime } from "@/lib/query/time-query";
+import { normalizePixiElement } from "@/lib/utils/ui-utility";
+import type { PixiUIProp } from "@/models/nqtr/ui-elements";
+import { navigator, RegisteredMaps } from "@drincs/nqtr";
+import { Assets, ImageSprite } from "@drincs/pixi-vn";
+import type { ContainerChild } from "@drincs/pixi-vn/pixi.js";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useCallback } from "react";
+
+const MAP_USE_QUERY_KEY = "map_use_query_key";
+export function useQueryMap(id?: string) {
+    const gameProps = useGameProps();
+    const { data: { day, hour } = {} } = useQueryTime();
+
+    const loadIcons = useCallback(
+        (items: Array<{ sprite?: PixiUIProp }>) =>
+            items.reduce(async (accPromise, { sprite }) => {
+                const acc = await accPromise;
+                if (!sprite) return acc;
+                const icon = await normalizePixiElement(sprite, gameProps);
+                if (typeof icon === "string") {
+                    const s = new ImageSprite({}, icon);
+                    await s.load();
+                    acc.push(s);
+                    return acc;
+                }
+                acc.push(icon);
+                return acc;
+            }, Promise.resolve<(ImageSprite | ContainerChild)[]>([])),
+        [gameProps],
+    );
+
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, MAP_USE_QUERY_KEY, id, day, hour],
+        queryFn: async () => {
+            if (!id) return {};
+            const map = RegisteredMaps.get(id);
+            if (!map) return undefined;
+
+            let background = await normalizePixiElement(map.background, gameProps);
+            if (typeof background === "string") {
+                const sprite = new ImageSprite({}, background);
+                await sprite.load();
+                background = sprite;
+            }
+
+            const locations = await loadIcons(map.locations);
+
+            map.neighboringMaps.north && Assets.backgroundLoadBundle(map.neighboringMaps.north);
+            map.neighboringMaps.south && Assets.backgroundLoadBundle(map.neighboringMaps.south);
+            map.neighboringMaps.east && Assets.backgroundLoadBundle(map.neighboringMaps.east);
+            map.neighboringMaps.west && Assets.backgroundLoadBundle(map.neighboringMaps.west);
+
+            return {
+                map: map,
+                background: background,
+                locations,
+            };
+        },
+        placeholderData: keepPreviousData,
+    });
+}
+
+export const CURRENT_MAP_USE_QUERY_KEY = "current_map_use_query_key";
+export function useQueryCurrentMapId() {
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CURRENT_MAP_USE_QUERY_KEY],
+        queryFn: async () => navigator.currentMap?.id,
+        placeholderData: keepPreviousData,
+    });
+}
+
+export function useQueryCurrentMap() {
+    const { data: currentMapId } = useQueryCurrentMapId();
+    return useQueryMap(currentMapId);
+}