create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-tauri/src/components/menus/main-menu.tsx

@@ -0,0 +1,304 @@
+import packageJson from "@/../package.json";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Spinner } from "@/components/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+    CANVAS_UI_LAYER_NAME,
+    INTERFACE_DATA_USE_QUERY_KEY,
+    overlayTextShadowClass,
+} from "@/constants";
+import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
+import { useGameProps } from "@/lib/hooks/props-hooks";
+import { useQuit } from "@/lib/hooks/quit-hooks";
+import { useQueryLastSave } from "@/lib/query/save-query";
+import { InterfaceSettings } from "@/lib/stores/interface-settings-store";
+import { cn } from "@/lib/utils";
+import { loadSave } from "@/lib/utils/save-utility";
+import { canvas, Game, ImageSprite } from "@drincs/pixi-vn";
+import { useHotkeys } from "@tanstack/react-hotkeys";
+import { useQueryClient } from "@tanstack/react-query";
+import { AlertCircle, CirclePlay, LogOut, Play, Save, Settings } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+const menuButtonClass =
+    "justify-start hover:scale-105 focus-visible:scale-105 transition-transform duration-150 ease-out";
+
+export function MainMenu() {
+    const gameProps = useGameProps();
+    const { uiTransition: t } = gameProps;
+    const setSettings = useSetSearchParamState<boolean>("settings");
+    const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+    const [loading, setLoading] = useState(false);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const { quit, canQuit } = useQuit();
+
+    /** Returns all enabled menuitem buttons inside the menu container. */
+    function getMenuItems(): HTMLButtonElement[] {
+        if (!menuRef.current) return [];
+        return Array.from(
+            menuRef.current.querySelectorAll<HTMLButtonElement>(
+                "button[role='menuitem']:not(:disabled)",
+            ),
+        );
+    }
+
+    /** Arrow-key navigation between menu items. */
+    function focusMenuItem(direction: "up" | "down" | "home" | "end") {
+        const items = getMenuItems();
+        if (!items.length) return;
+
+        const active = document.activeElement as HTMLElement;
+        const currentIndex = items.indexOf(active as HTMLButtonElement);
+
+        let next = -1;
+        if (direction === "down") {
+            next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        } else if (direction === "up") {
+            next = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        } else if (direction === "home") {
+            next = 0;
+        } else if (direction === "end") {
+            next = items.length - 1;
+        }
+        if (next !== -1) {
+            items[next].focus();
+        }
+    }
+
+    useHotkeys([
+        {
+            hotkey: "ArrowDown",
+            callback: () => focusMenuItem("down"),
+            options: {
+                preventDefault: true,
+                meta: {
+                    name: t("menu_navigation"),
+                    description: t("menu_navigation_down_description"),
+                },
+            },
+        },
+        {
+            hotkey: "ArrowUp",
+            callback: () => focusMenuItem("up"),
+            options: {
+                preventDefault: true,
+                meta: {
+                    name: t("menu_navigation"),
+                    description: t("menu_navigation_up_description"),
+                },
+            },
+        },
+        {
+            hotkey: "Home",
+            callback: () => focusMenuItem("home"),
+            options: {
+                preventDefault: true,
+                meta: {
+                    name: t("menu_navigation"),
+                    description: t("menu_navigation_home_description"),
+                },
+            },
+        },
+        {
+            hotkey: "End",
+            callback: () => focusMenuItem("end"),
+            options: {
+                preventDefault: true,
+                meta: {
+                    name: t("menu_navigation"),
+                    description: t("menu_navigation_end_description"),
+                },
+            },
+        },
+    ]);
+
+    useEffect(() => {
+        InterfaceSettings.setHidden(false);
+        const bg = new ImageSprite({}, "background_main_menu");
+        bg.load();
+        const layer = canvas.getLayer(CANVAS_UI_LAYER_NAME);
+        if (layer) {
+            layer.addChild(bg);
+        }
+
+        // Auto-focus the first enabled button so arrow-key navigation works immediately.
+        const firstItem = menuRef.current?.querySelector<HTMLButtonElement>(
+            "button[role='menuitem']:not(:disabled)",
+        );
+        firstItem?.focus();
+
+        return () => {
+            canvas.getLayer(CANVAS_UI_LAYER_NAME)?.removeChildren();
+        };
+    }, []);
+
+    return (
+        <div className="relative h-full w-full flex items-center justify-start p-3 sm:p-6 md:p-10">
+            {/* Buttons card – semi-transparent, fade-in from left on mount */}
+            <Card className="relative z-10 w-full max-w-xs sm:max-w-sm bg-background/70 backdrop-blur-sm animate-in fade-in slide-in-from-left-10 duration-500 ease-out fill-mode-both">
+                <CardContent ref={menuRef} role="menu" className="flex flex-col gap-2 pt-4">
+                    <ContinueMenuButton disabled={loading} onLoadingChange={setLoading} />
+
+                    <Button
+                        role="menuitem"
+                        onClick={async () => {
+                            setLoading(true);
+                            Game.start("start", gameProps)
+                                .then(() => gameProps.invalidateInterfaceData())
+                                .finally(() => setLoading(false));
+                        }}
+                        disabled={loading}
+                        className={menuButtonClass}
+                    >
+                        <Play className="size-4" />
+                        {t("start")}
+                    </Button>
+
+                    <Button
+                        role="menuitem"
+                        onClick={() => {
+                            setSettings(true);
+                            setSettingsTab("menus/save-load");
+                        }}
+                        disabled={loading}
+                        variant="outline"
+                        className={menuButtonClass}
+                    >
+                        <Save className="size-4" />
+                        {t("load")}
+                    </Button>
+
+                    <Button
+                        role="menuitem"
+                        onClick={() => setSettings(true)}
+                        disabled={loading}
+                        variant="outline"
+                        className={menuButtonClass}
+                    >
+                        <Settings className="size-4" />
+                        {t("settings")}
+                    </Button>
+
+                    {canQuit && (
+                        <Button
+                            role="menuitem"
+                            onClick={quit}
+                            disabled={loading}
+                            variant="outline"
+                            className={menuButtonClass}
+                        >
+                            <LogOut className="size-4" />
+                            {t("quit")}
+                        </Button>
+                    )}
+
+                    {loading ? (
+                        <div
+                            className="flex items-center justify-end pt-1 text-muted-foreground"
+                            aria-live="polite"
+                        >
+                            <Spinner />
+                            <span className="sr-only">Loading</span>
+                        </div>
+                    ) : null}
+                </CardContent>
+            </Card>
+
+            {/* Game name + version – bottom right, outlined for readability on any bg */}
+            <div className="absolute bottom-3 right-3 z-0 text-right pointer-events-none">
+                <p className={cn("text-xs font-semibold text-white", overlayTextShadowClass)}>
+                    {packageJson.name}
+                </p>
+                <p className={cn("text-[0.65rem] text-white/80", overlayTextShadowClass)}>
+                    v{packageJson.version}
+                </p>
+            </div>
+        </div>
+    );
+}
+
+export function ContinueMenuButton({
+    disabled = false,
+    onLoadingChange,
+}: {
+    /** Disables the button when another action is in progress. */
+    disabled?: boolean;
+    /** Called when the continue action starts or finishes loading. */
+    onLoadingChange?: (loading: boolean) => void;
+}) {
+    const { data: lastSave = null, isLoading } = useQueryLastSave();
+    const { t } = useTranslation(["ui"]);
+    const queryClient = useQueryClient();
+    const [loading, setLoading] = useState(false);
+    const hasRefreshSave = lastSave?.id === -1;
+
+    const handleClick = useCallback(() => {
+        if (!lastSave) return;
+        setLoading(true);
+        onLoadingChange?.(true);
+        loadSave(lastSave)
+            .then(() =>
+                queryClient.invalidateQueries({
+                    queryKey: [INTERFACE_DATA_USE_QUERY_KEY],
+                }),
+            )
+            .catch((e) => {
+                toast.error(t("fail_load"));
+                console.error(e);
+            })
+            .finally(() => {
+                setLoading(false);
+                onLoadingChange?.(false);
+            });
+    }, [lastSave, queryClient, t, onLoadingChange]);
+
+    const isDisabled = (!isLoading && !lastSave) || loading || disabled;
+
+    const buttonContent = (
+        <>
+            {isLoading || loading ? (
+                <Spinner className="size-4" />
+            ) : (
+                <CirclePlay className="size-4" />
+            )}
+            {t("continue")}
+            {hasRefreshSave ? (
+                <AlertCircle aria-hidden="true" className="ml-1 size-4 text-orange-500" />
+            ) : null}
+        </>
+    );
+
+    if (hasRefreshSave) {
+        return (
+            <Tooltip>
+                <TooltipTrigger
+                    render={
+                        <Button
+                            role="menuitem"
+                            onClick={handleClick}
+                            disabled={isDisabled}
+                            className={menuButtonClass}
+                        >
+                            {buttonContent}
+                        </Button>
+                    }
+                />
+                <TooltipContent>{t("continue_refresh_save_tooltip")}</TooltipContent>
+            </Tooltip>
+        );
+    }
+
+    return (
+        <Button
+            role="menuitem"
+            onClick={handleClick}
+            disabled={isDisabled}
+            className={menuButtonClass}
+        >
+            {buttonContent}
+        </Button>
+    );
+}

package/template-nqtr-react-vite-muijoy-tauri/src/components/menus/memo-menu.tsx

@@ -0,0 +1,163 @@
+import { Button } from "@/components/ui/button";
+import { Dialog, FullscreenDialogContent } from "@/components/ui/fullscreen-dialog";
+import { Image } from "@/components/ui/image";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { useSearchParamState, useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
+import { useQueryQuests, useQuerySelectedQuest } from "@/lib/query/quest-query";
+import { Memo } from "@/lib/stores/memo-store";
+import { cn } from "@/lib/utils";
+import { useHotkeys } from "@tanstack/react-hotkeys";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+function QuestButton({
+    id,
+    name,
+    selected,
+}: {
+    id: string;
+    name: string | undefined;
+    selected: boolean;
+}) {
+    return (
+        <Button
+            variant="ghost"
+            size="sm"
+            disabled={selected}
+            onClick={() => Memo.setSelectedQuestId(id)}
+            className={cn(
+                "w-full justify-start",
+                selected && "bg-accent text-accent-foreground font-medium",
+            )}
+        >
+            {name}
+        </Button>
+    );
+}
+
+export function MemoMenu() {
+    const { t } = useTranslation(["ui"]);
+    const open = useSearchParamState<boolean>("memo");
+    const setOpen = useSetSearchParamState<boolean>("memo");
+    const {
+        data: { inProgressQuests, completedQuests, failedQuests } = {
+            inProgressQuests: [],
+            completedQuests: [],
+            failedQuests: [],
+        },
+    } = useQueryQuests();
+    const { data: selectedQuest } = useQuerySelectedQuest();
+
+    useEffect(() => {
+        if (!open) return;
+        const currentId = Memo.store.state.selectedQuestId;
+        const isVisible =
+            inProgressQuests.some((q) => q.id === currentId) ||
+            completedQuests.some((q) => q.id === currentId) ||
+            failedQuests.some((q) => q.id === currentId);
+        if (!isVisible) {
+            Memo.setSelectedQuestId(inProgressQuests[0]?.id);
+        }
+    }, [open, inProgressQuests, completedQuests, failedQuests]);
+
+    useHotkeys([
+        {
+            hotkey: "Alt+J",
+            callback: () => setOpen((prev) => !prev || undefined),
+            options: {
+                meta: {
+                    name: t("quests"),
+                    description: t("quests_toggle_hotkey_description"),
+                },
+            },
+        },
+    ]);
+
+    return (
+        <Dialog open={open ?? false} onOpenChange={(isOpen) => setOpen(isOpen || undefined)}>
+            <FullscreenDialogContent title={t("quests")}>
+                <div className="flex flex-1 min-h-0">
+                    {/* Sidebar */}
+                    <aside className="w-48 shrink-0 border-r">
+                        <ScrollArea className="h-full">
+                            <div className="flex flex-col gap-1 p-3">
+                                {inProgressQuests.map((quest) => (
+                                    <QuestButton
+                                        key={quest.id}
+                                        id={quest.id}
+                                        name={quest.name}
+                                        selected={selectedQuest?.id === quest.id}
+                                    />
+                                ))}
+                                {completedQuests.length > 0 && (
+                                    <>
+                                        <Separator className="my-1" />
+                                        <p className="px-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                            {t("completed")}
+                                        </p>
+                                        {completedQuests.map((quest) => (
+                                            <QuestButton
+                                                key={quest.id}
+                                                id={quest.id}
+                                                name={quest.name}
+                                                selected={selectedQuest?.id === quest.id}
+                                            />
+                                        ))}
+                                    </>
+                                )}
+                                {failedQuests.length > 0 && (
+                                    <>
+                                        <Separator className="my-1" />
+                                        <p className="px-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                            {t("failed")}
+                                        </p>
+                                        {failedQuests.map((quest) => (
+                                            <QuestButton
+                                                key={quest.id}
+                                                id={quest.id}
+                                                name={quest.name}
+                                                selected={selectedQuest?.id === quest.id}
+                                            />
+                                        ))}
+                                    </>
+                                )}
+                            </div>
+                        </ScrollArea>
+                    </aside>
+
+                    {/* Main content */}
+                    {!selectedQuest ? (
+                        <div className="flex flex-1 items-center justify-center">
+                            <p className="text-muted-foreground">{t("no_active_quests")}</p>
+                        </div>
+                    ) : (
+                        <ScrollArea className="flex-1">
+                            <div className="flex flex-col gap-3 p-8">
+                                {selectedQuest?.questImageUrl && (
+                                    <div className="max-h-[10dvh] overflow-hidden rounded">
+                                        <Image
+                                            src={selectedQuest.questImageUrl}
+                                            alt={selectedQuest.name ?? ""}
+                                            className="h-full w-full object-cover"
+                                        />
+                                    </div>
+                                )}
+                                <h2 className="text-center text-2xl font-bold">
+                                    {selectedQuest?.name}
+                                </h2>
+                                <p className="max-h-[20dvh] overflow-y-auto text-primary">
+                                    {selectedQuest?.description}
+                                </p>
+                                <Separator />
+                                <p className="max-h-[20dvh] overflow-y-auto">
+                                    {selectedQuest?.currentStage?.description}
+                                </p>
+                            </div>
+                        </ScrollArea>
+                    )}
+                </div>
+            </FullscreenDialogContent>
+        </Dialog>
+    );
+}

package/template-nqtr-react-vite-muijoy-tauri/src/components/menus/save-menu/index.tsx

@@ -0,0 +1,94 @@
+import { SaveSlot } from "@/components/menus/save-menu/save-slots";
+import {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+} from "@/components/ui/pagination";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { SaveMenuPagination } from "@/lib/stores/save-menu-pagination-store";
+import { useSelector } from "@tanstack/react-store";
+
+const TOTAL_PAGES = 999;
+
+function getPageNumbers(current: number, total: number): (number | "ellipsis")[] {
+    if (total <= 7) {
+        return Array.from({ length: total }, (_, i) => i + 1);
+    }
+    const pages: (number | "ellipsis")[] = [1];
+    if (current > 3) pages.push("ellipsis");
+    for (let i = Math.max(2, current - 1); i <= Math.min(total - 1, current + 1); i++) {
+        pages.push(i);
+    }
+    if (current < total - 2) pages.push("ellipsis");
+    pages.push(total);
+    return pages;
+}
+
+export function GameSaveMenu() {
+    const page = useSelector(SaveMenuPagination.store, (state) => state.page);
+
+    const currentPage = page + 1;
+    const pageNumbers = getPageNumbers(currentPage, TOTAL_PAGES);
+
+    return (
+        <div className="flex flex-1 min-h-0 flex-col">
+            <ScrollArea className="min-h-0 flex-1">
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
+                    {Array.from({ length: 6 }).map((_, index) => {
+                        const id = page * 6 + index;
+                        return <SaveSlot key={`SaveFile${id}`} saveId={id} />;
+                    })}
+                </div>
+            </ScrollArea>
+            <Pagination className="shrink-0 border-t py-1.5">
+                <PaginationContent>
+                    <PaginationItem>
+                        <PaginationPrevious
+                            onClick={(e) => {
+                                e.preventDefault();
+                                if (currentPage > 1) SaveMenuPagination.setPage(page - 1);
+                            }}
+                            aria-disabled={currentPage === 1}
+                            className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
+                        />
+                    </PaginationItem>
+                    {pageNumbers.map((p) =>
+                        p === "ellipsis" ? (
+                            <PaginationItem key={`ellipsis-${currentPage}`}>
+                                <PaginationEllipsis />
+                            </PaginationItem>
+                        ) : (
+                            <PaginationItem key={p} className="hidden sm:list-item">
+                                <PaginationLink
+                                    isActive={p === currentPage}
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        SaveMenuPagination.setPage((p as number) - 1);
+                                    }}
+                                >
+                                    {p}
+                                </PaginationLink>
+                            </PaginationItem>
+                        ),
+                    )}
+                    <PaginationItem>
+                        <PaginationNext
+                            onClick={(e) => {
+                                e.preventDefault();
+                                if (currentPage < TOTAL_PAGES) SaveMenuPagination.setPage(page + 1);
+                            }}
+                            aria-disabled={currentPage === TOTAL_PAGES}
+                            className={
+                                currentPage === TOTAL_PAGES ? "pointer-events-none opacity-50" : ""
+                            }
+                        />
+                    </PaginationItem>
+                </PaginationContent>
+            </Pagination>
+        </div>
+    );
+}

package/template-nqtr-react-vite-muijoy-tauri/src/components/menus/save-menu/save-forms.tsx

@@ -0,0 +1,27 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+
+export function SaveNameInput({
+    initialValue,
+    onValueChange,
+}: {
+    initialValue: string;
+    onValueChange: (value: string) => void;
+}) {
+    const { t } = useTranslation(["ui"]);
+    const [value, setValue] = useState(initialValue);
+    return (
+        <Field>
+            <FieldLabel>{t("save_name")}</FieldLabel>
+            <Input
+                value={value}
+                onChange={(e) => {
+                    setValue(e.target.value);
+                    onValueChange(e.target.value);
+                }}
+            />
+        </Field>
+    );
+}