create-pixi-vn 2.0.15 → 2.1.0

package/template-nqtr-react-vite-muijoy/src/components/providers/alert-dialog-provider.tsx

@@ -0,0 +1,137 @@
+import { AlertDialogState } from "@/lib/stores/alert-dialog-store";
+import { createContext, type ReactNode, useCallback, useContext, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+/** Must match the CSS transition duration used in AlertDialog. */
+const DIALOG_CLOSE_ANIMATION_DURATION_MS = 100;
+
+function generateId(): string {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+        return crypto.randomUUID();
+    }
+    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+
+export interface AlertDialogOptions {
+    head?: ReactNode;
+    content?: ReactNode;
+    onConfirm?: () => boolean | Promise<boolean>;
+    onCancel?: () => void;
+    disabledConfirm?: boolean;
+}
+
+interface AlertDialogItem {
+    id: string;
+    open: boolean;
+    loading: boolean;
+    options: AlertDialogOptions;
+}
+
+interface AlertDialogContextType {
+    openAlertDialog: (options: AlertDialogOptions) => void;
+}
+
+const AlertDialogProviderContext = createContext<AlertDialogContextType | null>(null);
+
+export function AlertDialogProvider({ children }: { children: ReactNode }) {
+    const [dialogs, setDialogs] = useState<AlertDialogItem[]>([]);
+    const { t } = useTranslation(["ui"]);
+
+    const closeDialog = useCallback((id: string) => {
+        setDialogs((prev) => prev.map((d) => (d.id === id ? { ...d, open: false } : d)));
+        AlertDialogState.decrement();
+        setTimeout(() => {
+            setDialogs((prev) => prev.filter((d) => d.id !== id));
+        }, DIALOG_CLOSE_ANIMATION_DURATION_MS);
+    }, []);
+
+    const openAlertDialog = useCallback((options: AlertDialogOptions) => {
+        const id = generateId();
+        AlertDialogState.increment();
+        setDialogs((prev) => [...prev, { id, open: true, loading: false, options }]);
+    }, []);
+
+    return (
+        <AlertDialogProviderContext.Provider value={{ openAlertDialog }}>
+            {children}
+            {dialogs.map((dialog, index) => (
+                <AlertDialog
+                    key={dialog.id}
+                    open={dialog.open && index === dialogs.length - 1}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            dialog.options.onCancel?.();
+                            closeDialog(dialog.id);
+                        }
+                    }}
+                >
+                    <AlertDialogContent>
+                        {dialog.options.head && (
+                            <AlertDialogHeader>
+                                <AlertDialogTitle>{dialog.options.head}</AlertDialogTitle>
+                            </AlertDialogHeader>
+                        )}
+                        {dialog.options.content && <div>{dialog.options.content}</div>}
+                        <AlertDialogFooter>
+                            <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+                            <AlertDialogAction
+                                disabled={dialog.options.disabledConfirm || dialog.loading}
+                                onClick={async () => {
+                                    if (!dialog.options.onConfirm) {
+                                        closeDialog(dialog.id);
+                                        return;
+                                    }
+                                    setDialogs((prev) =>
+                                        prev.map((d) =>
+                                            d.id === dialog.id ? { ...d, loading: true } : d,
+                                        ),
+                                    );
+                                    try {
+                                        const result = await dialog.options.onConfirm();
+                                        if (result) {
+                                            closeDialog(dialog.id);
+                                        } else {
+                                            setDialogs((prev) =>
+                                                prev.map((d) =>
+                                                    d.id === dialog.id
+                                                        ? { ...d, loading: false }
+                                                        : d,
+                                                ),
+                                            );
+                                        }
+                                    } catch (e) {
+                                        console.error(e);
+                                        setDialogs((prev) =>
+                                            prev.map((d) =>
+                                                d.id === dialog.id ? { ...d, loading: false } : d,
+                                            ),
+                                        );
+                                    }
+                                }}
+                            >
+                                {t("confirm")}
+                            </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+            ))}
+        </AlertDialogProviderContext.Provider>
+    );
+}
+
+export function useAlertDialog(): AlertDialogContextType {
+    const context = useContext(AlertDialogProviderContext);
+    if (!context) {
+        throw new Error("useAlertDialog must be used within an AlertDialogProvider");
+    }
+    return context;
+}

package/template-nqtr-react-vite-muijoy/src/components/providers/root-provider.tsx

@@ -0,0 +1,37 @@
+import { AlertDialogProvider } from "@/components/providers/alert-dialog-provider";
+import { ThemeProvider } from "@/components/providers/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { useSaveHotkeys, useSettingsHotkeys } from "@/lib/hooks/hotkeys-hooks";
+import { Game } from "@drincs/pixi-vn";
+import { HotkeysProvider } from "@tanstack/react-hotkeys";
+import { useNavigate } from "@tanstack/react-router";
+
+export function RootProvider({ children }: { children: React.ReactNode }) {
+    const navigate = useNavigate();
+    Game.onNavigate((to) => navigate({ to }));
+
+    return (
+        <ThemeProvider>
+            <HotkeysProvider
+                defaultOptions={{
+                    hotkey: { preventDefault: true },
+                }}
+            >
+                <AlertDialogProvider>
+                    <TooltipProvider>
+                        <Hotkeys />
+                        {children}
+                    </TooltipProvider>
+                </AlertDialogProvider>
+                <Toaster position="top-center" />
+            </HotkeysProvider>
+        </ThemeProvider>
+    );
+}
+
+function Hotkeys() {
+    useSaveHotkeys();
+    useSettingsHotkeys();
+    return null;
+}

package/template-nqtr-react-vite-muijoy/src/components/providers/theme-provider.tsx

@@ -0,0 +1,71 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+
+type ThemeProviderState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+    theme: "system",
+    setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+    children,
+    defaultTheme = "system",
+    storageKey = "vite-ui-theme",
+    ...props
+}: ThemeProviderProps) {
+    const [theme, setTheme] = useState<Theme>(
+        () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+    );
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+
+        root.classList.remove("light", "dark");
+
+        if (theme === "system") {
+            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light";
+
+            root.classList.add(systemTheme);
+            return;
+        }
+
+        root.classList.add(theme);
+    }, [theme]);
+
+    const value = {
+        theme,
+        setTheme: (theme: Theme) => {
+            localStorage.setItem(storageKey, theme);
+            setTheme(theme);
+        },
+    };
+
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    );
+}
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+
+    if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
+
+    return context;
+};

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

@@ -0,0 +1,159 @@
+import { useAlertDialog } from "@/components/providers/alert-dialog-provider";
+import { Button } from "@/components/ui/button";
+import { Toggle } from "@/components/ui/toggle";
+import { useNarrationFunctions } from "@/lib/hooks/narration-hooks";
+import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
+import { useGameProps } from "@/lib/hooks/props-hooks";
+import { useWheelActions } from "@/lib/hooks/quick-tools-hooks";
+import { useQueryCanGoBack } from "@/lib/query/narration-query";
+import {
+    LAST_SAVE_USE_QUERY_KEY,
+    SAVES_USE_QUERY_KEY,
+    useQueryLastSave,
+} from "@/lib/query/save-query";
+import { AutoSettings } from "@/lib/stores/auto-settings-store";
+import { GameStatus } from "@/lib/stores/game-status-store";
+import { SkipSettings } from "@/lib/stores/skip-settings-store";
+import { cn } from "@/lib/utils";
+import { loadSave, saveGameToIndexDB } from "@/lib/utils/save-utility";
+import { useQueryClient } from "@tanstack/react-query";
+import { useSelector } from "@tanstack/react-store";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+export function QuickTools() {
+    const { t } = useTranslation(["ui"]);
+    const skipEnabled = useSelector(SkipSettings.store, (state) => state.enabled);
+    const autoEnabled = useSelector(AutoSettings.store, (state) => state.enabled);
+    const queryClient = useQueryClient();
+    const { data: lastSave = null } = useQueryLastSave();
+    const { data: canGoBack = false } = useQueryCanGoBack();
+    const nextStepLoading = useSelector(GameStatus.store, (state) => state.loading);
+    const { goBack } = useNarrationFunctions();
+    const { openAlertDialog } = useAlertDialog();
+    const gameProps = useGameProps();
+    useWheelActions();
+    const setHistory = useSetSearchParamState<boolean>("history");
+    const setSaves = useSetSearchParamState<boolean>("saves");
+    const setSettings = useSetSearchParamState<boolean>("settings");
+    const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+
+    return (
+        <div
+            className={cn(
+                "flex flex-wrap items-center justify-end gap-0.5 sm:gap-1",
+            )}
+        >
+            <Button
+                variant="ghost"
+                size="xs"
+                className="h-5 px-1 text-[10px] sm:h-6 sm:px-2 sm:text-xs"
+                onClick={() => {
+                    if (skipEnabled) {
+                        SkipSettings.setEnabled(false);
+                    }
+                    goBack();
+                }}
+                disabled={!canGoBack || nextStepLoading}
+            >
+                {t("back")}
+            </Button>
+            <Button
+                variant="ghost"
+                size="xs"
+                className="h-5 px-1 text-[10px] sm:h-6 sm:px-2 sm:text-xs"
+                onClick={() => {
+                    setHistory(undefined);
+                    setSettings(true);
+                    setSettingsTab("menus/history");
+                }}
+            >
+                {t("history")}
+            </Button>
+            <Toggle
+                size="sm"
+                className="h-5 min-w-0 px-1 text-[10px] sm:h-7 sm:px-2.5 sm:text-[0.8rem]"
+                pressed={skipEnabled}
+                onPressedChange={(v) => SkipSettings.setEnabled(v)}
+            >
+                {t("skip")}
+            </Toggle>
+            <Toggle
+                size="sm"
+                className="h-5 min-w-0 px-1 text-[10px] sm:h-7 sm:px-2.5 sm:text-[0.8rem]"
+                pressed={autoEnabled}
+                onPressedChange={(v) => AutoSettings.setEnabled(v)}
+                disabled={skipEnabled}
+            >
+                {t("auto_forward_time_restricted")}
+            </Toggle>
+            <Button
+                variant="ghost"
+                size="xs"
+                className="h-5 px-1 text-[10px] sm:h-6 sm:px-2 sm:text-xs"
+                onClick={() => {
+                    setSaves(undefined);
+                    setSettings(true);
+                    setSettingsTab("menus/save-load");
+                }}
+            >
+                {t(`${t("save")}/${t("load")}`)}
+            </Button>
+            <Button
+                variant="ghost"
+                size="xs"
+                className="h-5 px-1 text-[10px] sm:h-6 sm:px-2 sm:text-xs"
+                onClick={() => {
+                    const savePromise = saveGameToIndexDB().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"),
+                    });
+                }}
+            >
+                {t("quick_save_restricted")}
+            </Button>
+            <Button
+                variant="ghost"
+                size="xs"
+                className="h-5 px-1 text-[10px] sm:h-6 sm:px-2 sm:text-xs"
+                onClick={() => {
+                    if (!lastSave) return;
+                    openAlertDialog({
+                        head: t("load"),
+                        content: t("you_sure_to_load_save", {
+                            name: lastSave.name || `${t("save_slot")} ${lastSave.id}`,
+                        }),
+                        onConfirm: () =>
+                            loadSave(lastSave)
+                                .then(() => {
+                                    gameProps.invalidateInterfaceData();
+                                    toast.success(t("success_load"));
+                                    return true;
+                                })
+                                .catch((e) => {
+                                    toast.error(t("fail_load"));
+                                    console.error(e);
+                                    return false;
+                                }),
+                    });
+                }}
+                disabled={!lastSave}
+            >
+                {t("load_last_save_restricted")}
+            </Button>
+            <Button
+                variant="ghost"
+                size="xs"
+                className="h-5 px-1 text-[10px] sm:h-6 sm:px-2 sm:text-xs"
+                onClick={() => setSettings(true)}
+            >
+                {t("settings_restricted")}
+            </Button>
+        </div>
+    );
+}

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

@@ -0,0 +1,87 @@
+import { Button } from "@/components/ui/button";
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
+import { useMapLayerSync } from "@/lib/hooks/nqtr-hooks";
+import { CURRENT_MAP_USE_QUERY_KEY, useQueryCurrentMap } from "@/lib/query/map-query";
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, X } from "lucide-react";
+
+export default function MapScreen() {
+    const { data: { map } = {} } = useQueryCurrentMap();
+    useMapLayerSync();
+    const queryClient = useQueryClient();
+    const navigate = useNavigate();
+
+    return (
+        <>
+            {map?.neighboringMaps.north && (
+                <Button
+                    variant="secondary"
+                    size="icon"
+                    className="absolute top-1 left-1/2 -translate-x-1/2"
+                    onClick={() =>
+                        queryClient.setQueryData(
+                            [INTERFACE_DATA_USE_QUERY_KEY, CURRENT_MAP_USE_QUERY_KEY],
+                            map.neighboringMaps.north,
+                        )
+                    }
+                >
+                    <ChevronsUp />
+                </Button>
+            )}
+            {map?.neighboringMaps.west && (
+                <Button
+                    variant="secondary"
+                    size="icon"
+                    className="absolute top-1/2 left-1 -translate-y-1/2"
+                    onClick={() =>
+                        queryClient.setQueryData(
+                            [INTERFACE_DATA_USE_QUERY_KEY, CURRENT_MAP_USE_QUERY_KEY],
+                            map.neighboringMaps.west,
+                        )
+                    }
+                >
+                    <ChevronsLeft />
+                </Button>
+            )}
+            {map?.neighboringMaps.south && (
+                <Button
+                    variant="secondary"
+                    size="icon"
+                    className="absolute bottom-1 left-1/2 -translate-x-1/2"
+                    onClick={() =>
+                        queryClient.setQueryData(
+                            [INTERFACE_DATA_USE_QUERY_KEY, CURRENT_MAP_USE_QUERY_KEY],
+                            map.neighboringMaps.south,
+                        )
+                    }
+                >
+                    <ChevronsDown />
+                </Button>
+            )}
+            {map?.neighboringMaps.east && (
+                <Button
+                    variant="secondary"
+                    size="icon"
+                    className="absolute top-1/2 right-1 -translate-y-1/2"
+                    onClick={() =>
+                        queryClient.setQueryData(
+                            [INTERFACE_DATA_USE_QUERY_KEY, CURRENT_MAP_USE_QUERY_KEY],
+                            map.neighboringMaps.east,
+                        )
+                    }
+                >
+                    <ChevronsRight />
+                </Button>
+            )}
+            <Button
+                variant="destructive"
+                size="icon"
+                className="absolute top-1 right-1"
+                onClick={() => navigate({ to: "/game/navigation" })}
+            >
+                <X />
+            </Button>
+        </>
+    );
+}

package/template-nqtr-react-vite-muijoy/src/components/screens/narration/click-overlay.tsx

@@ -0,0 +1,15 @@
+import { useNarrationPointerHandlers } from "@/lib/hooks/narration-hooks";
+
+export function NarrationClickOverlay() {
+    const { handlePointerDown, handlePointerCancel, handlePointerMove, handlePointerUp } =
+        useNarrationPointerHandlers();
+    return (
+        <div
+            className="fixed inset-0 z-0 pointer-events-auto"
+            onPointerDown={handlePointerDown}
+            onPointerCancel={handlePointerCancel}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+        />
+    );
+}

package/template-nqtr-react-vite-muijoy/src/components/screens/narration/index.tsx

@@ -0,0 +1,33 @@
+import { ChoiceMenu } from "@/components/menus/choice-menus";
+import { NarrationCards } from "@/components/screens/narration/narration-cards";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { QuickTools } from "@/components/quick-tools";
+import { useQueryDialogue } from "@/lib/query/narration-query";
+
+export function NarrationScreen() {
+    const { data: { animatedText, text } = {} } = useQueryDialogue();
+    const hasText = !!(animatedText || text);
+
+    return (
+        <div className="absolute flex h-full w-full flex-col">
+            <div className="mb-0 mx-0 flex min-h-0 flex-1 flex-col sm:mb-4 sm:mx-10 md:mx-20 lg:mx-20">
+                <ResizablePanelGroup orientation="vertical">
+                    <ResizablePanel>
+                        <ChoiceMenu />
+                    </ResizablePanel>
+                    {hasText && (
+                        <div className="mx-4">
+                            <ResizableHandle />
+                        </div>
+                    )}
+                    {hasText && (
+                        <ResizablePanel defaultSize={"40%"}>
+                            <NarrationCards />
+                        </ResizablePanel>
+                    )}
+                </ResizablePanelGroup>
+                {!hasText && <QuickTools />}
+            </div>
+        </div>
+    );
+}