create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-ink/src/components/menus/save-menu/save-slots.tsx

@@ -0,0 +1,122 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Image } from "@/components/ui/image";
+import { Skeleton } from "@/components/ui/skeleton";
+import { overlayTextShadowClass } from "@/constants";
+import { useSaveActions } from "@/lib/hooks/save-hooks";
+import { useQuerySaves } from "@/lib/query/save-query";
+import { cn } from "@/lib/utils";
+import { downloadGameSave } from "@/lib/utils/save-utility";
+import type { FileRouteTypes } from "@/routeTree.gen";
+import { useLocation } from "@tanstack/react-router";
+import { Download, Save, SquarePen, Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export function SaveSlot({ saveId }: { saveId: number }) {
+    const { t } = useTranslation(["ui"]);
+    const { isLoading, data: saveData, isError } = useQuerySaves({ id: saveId });
+    const location = useLocation();
+    const { handleLoad, handleDelete, handleSave, handleOverwriteSave } = useSaveActions();
+
+    const isHome = (location.pathname as FileRouteTypes["fullPaths"]) === "/";
+
+    if (isLoading) {
+        return (
+            <AspectRatio ratio={16 / 9} className="m-2 sm:m-4 md:m-2 lg:m-4 rounded">
+                <Skeleton className="absolute inset-0" />
+            </AspectRatio>
+        );
+    }
+
+    if (!saveData || isError) {
+        return (
+            <AspectRatio ratio={16 / 9} className="m-2 sm:m-4 md:m-2 lg:m-4 rounded">
+                <Button
+                    variant="ghost"
+                    className="absolute inset-0 h-full w-full ring-1 ring-border"
+                    onClick={() => handleSave(saveId)}
+                    disabled={isHome}
+                    aria-label={t("save")}
+                >
+                    <Save className="size-12 opacity-20" />
+                </Button>
+            </AspectRatio>
+        );
+    }
+
+    return (
+        <AspectRatio
+            ratio={16 / 9}
+            className="m-2 overflow-hidden sm:m-4 md:m-2 lg:m-4 rounded cursor-pointer"
+            onClick={() => handleLoad({ ...saveData, id: saveId })}
+        >
+            <Image
+                src={saveData.image}
+                layout="fullWidth"
+                alt={saveData.name}
+                className="absolute inset-0 size-full object-contain pointer-events-none select-none rounded-lg"
+            />
+            {/* top-left metadata */}
+            <div className="absolute top-2.5 left-2.5 flex flex-col gap-0.5 pointer-events-none">
+                <span
+                    className={cn(
+                        "text-base font-semibold text-neutral-300",
+                        overlayTextShadowClass,
+                    )}
+                >
+                    {saveData.name}
+                </span>
+                <span className={cn("text-sm text-neutral-300", overlayTextShadowClass)}>
+                    {saveData.date.toLocaleDateString()}
+                </span>
+                <span className={cn("text-sm text-neutral-300", overlayTextShadowClass)}>
+                    {saveData.date.toLocaleTimeString()}
+                </span>
+                <span className={cn("text-sm text-neutral-300", overlayTextShadowClass)}>
+                    {`${t("save_slot")} ${String(saveId + 1).padStart(2, "0")}`}
+                </span>
+            </div>
+            {/* top-right delete */}
+            <div className="absolute top-2.5 right-2.5">
+                <Button
+                    variant="destructive"
+                    size="icon"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        handleDelete(saveId);
+                    }}
+                    aria-label={t("delete")}
+                >
+                    <Trash2 className={overlayTextShadowClass} />
+                </Button>
+            </div>
+            {/* bottom-right actions */}
+            <div className="absolute bottom-2.5 right-2.5 flex flex-row gap-1">
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        downloadGameSave(saveData);
+                    }}
+                    aria-label={t("save_to_file")}
+                >
+                    <Download className={overlayTextShadowClass} />
+                </Button>
+                {!isHome && (
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            handleOverwriteSave(saveId, saveData.name);
+                        }}
+                        aria-label={t("save")}
+                    >
+                        <SquarePen className={overlayTextShadowClass} />
+                    </Button>
+                )}
+            </div>
+        </AspectRatio>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/menus/settings/about.tsx

@@ -0,0 +1,33 @@
+import packageJson from "@/../package.json";
+import { useTranslation } from "react-i18next";
+
+export function About() {
+    const { t } = useTranslation(["ui"]);
+
+    return (
+        <div className="flex flex-col gap-1 text-sm">
+            <div className="flex justify-between gap-2">
+                <span className="font-medium text-muted-foreground">{t("name")}:</span>
+                <span className="font-medium text-muted-foreground">{packageJson.name}</span>
+            </div>
+            <div className="flex justify-between gap-2">
+                <span className="font-medium text-muted-foreground">{t("version")}:</span>
+                <span className="font-medium text-muted-foreground">v{packageJson.version}</span>
+            </div>
+            <div className="flex justify-between gap-2">
+                <span className="font-medium text-muted-foreground">{t("engine")}:</span>
+                <span className="font-medium text-muted-foreground">
+                    {t("powered_by")}{" "}
+                    <a
+                        href="https://pixi-vn.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline hover:text-foreground"
+                    >
+                        Pixi&apos;VN
+                    </a>
+                </span>
+            </div>
+        </div>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/menus/settings/dialogues-controls.tsx

@@ -0,0 +1,105 @@
+import { Kbd } from "@/components/ui/kbd";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
+import { AutoSettings } from "@/lib/stores/auto-settings-store";
+import { SkipSettings } from "@/lib/stores/skip-settings-store";
+import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
+import { useSelector } from "@tanstack/react-store";
+import { useTranslation } from "react-i18next";
+
+export function DialoguesControls() {
+    const typewriterDelay = useSelector(TextDisplaySettings.store, (state) => state.delay);
+    const { t } = useTranslation(["ui"]);
+
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-1.5">
+                <div>
+                    <p className="text-sm font-medium leading-none">{t("text_speed")}</p>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                        {t("text_speed_description")}
+                    </p>
+                </div>
+                <div className="flex items-center gap-2">
+                    <Slider
+                        min={0}
+                        max={200}
+                        step={10}
+                        value={[typewriterDelay]}
+                        onValueChange={(v) =>
+                            typeof v === "number" && TextDisplaySettings.setDelay(v)
+                        }
+                        className="flex-1"
+                    />
+                    <span className="w-14 text-right text-xs tabular-nums">
+                        {typewriterDelay === 0 ? t("off") : `${typewriterDelay}ms`}
+                    </span>
+                </div>
+                <div className="flex justify-between px-1 text-xs text-muted-foreground">
+                    <span>{t("off")}</span>
+                    <span>200ms</span>
+                </div>
+            </div>
+
+            <AutoForwardToggle />
+            <SkipToggle />
+        </div>
+    );
+}
+
+export function AutoForwardToggle() {
+    const { t } = useTranslation(["ui"]);
+    const autoEnabled = useSelector(AutoSettings.store, (state) => state.enabled);
+    const autoTime = useSelector(AutoSettings.store, (state) => state.time);
+
+    return (
+        <div className="flex flex-col gap-2 rounded-md border p-3">
+            <div className="flex items-center justify-between gap-4">
+                <div className="flex-1">
+                    <p className="text-sm font-medium leading-none">
+                        {t("auto_forward_time_restricted")}
+                    </p>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                        {t("auto_forward_time_description")}
+                    </p>
+                </div>
+                <Switch checked={autoEnabled} onCheckedChange={AutoSettings.toggleEnabled} />
+            </div>
+
+            <div className="flex items-center gap-2">
+                <Slider
+                    min={1}
+                    max={10}
+                    step={1}
+                    value={[autoTime]}
+                    onValueChange={(v) => typeof v === "number" && AutoSettings.setTime(v)}
+                    disabled={!autoEnabled}
+                    className="flex-1"
+                />
+                <span className="w-8 text-right text-xs tabular-nums">{autoTime}s</span>
+            </div>
+            <div className="flex justify-between px-1 text-xs text-muted-foreground">
+                <span>1s</span>
+                <span>10s</span>
+            </div>
+        </div>
+    );
+}
+
+export function SkipToggle() {
+    const { t } = useTranslation(["ui"]);
+    const enabled = useSelector(SkipSettings.store, (state) => state.enabled);
+
+    return (
+        <div className="flex items-center justify-between gap-4 rounded-md border p-3">
+            <div className="flex-1">
+                <div className="flex items-center gap-2">
+                    <p className="text-sm font-medium leading-none">{t("skip")}</p>
+                    <Kbd>Space</Kbd>
+                </div>
+                <p className="mt-1 text-xs text-muted-foreground">{t("skip_description")}</p>
+            </div>
+            <Switch checked={enabled} onCheckedChange={SkipSettings.setEnabled} />
+        </div>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/menus/settings/index.tsx

@@ -0,0 +1,222 @@
+import { About } from "@/components/menus/settings/about";
+import { DialoguesControls } from "@/components/menus/settings/dialogues-controls";
+import { ControlsListSettingsPage } from "@/components/menus/settings/menus/controls";
+import { HistoryListSettingsPage } from "@/components/menus/settings/menus/history";
+import { SaveLoadSettingsPage } from "@/components/menus/settings/menus/save-load";
+import { QuickMenus } from "@/components/menus/settings/quick-menus";
+import { SoundControls } from "@/components/menus/settings/sound-controls";
+import { SystemControls } from "@/components/menus/settings/system-controls";
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Dialog, FullscreenDialogContent } from "@/components/ui/fullscreen-dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { useSearchParamState, useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
+import { ArrowLeftIcon } from "lucide-react";
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+
+type SettingsTabPath = "menus/controls" | "menus/history" | "menus/save-load";
+
+type BreadcrumbEntry = {
+    id: string;
+    label: string;
+};
+
+export function Settings() {
+    const { t } = useTranslation(["ui"]);
+    const currentTab = useSearchParamState<string>("settings_tab");
+    const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+
+    const normalizedTab: SettingsTabPath | undefined =
+        currentTab === "menus/controls" ||
+        currentTab === "menus/history" ||
+        currentTab === "menus/save-load"
+            ? (currentTab as SettingsTabPath)
+            : undefined;
+
+    const goBack = () => {
+        setSettingsTab(undefined);
+    };
+
+    const breadcrumbs: BreadcrumbEntry[] = (() => {
+        if (!normalizedTab) {
+            return [{ id: "home", label: t("home") }];
+        }
+
+        const trail: BreadcrumbEntry[] = [{ id: "home", label: t("home") }];
+        if (
+            normalizedTab === "menus/controls" ||
+            normalizedTab === "menus/history" ||
+            normalizedTab === "menus/save-load"
+        ) {
+            trail.push({ id: "menus", label: t("menus") });
+            trail.push({
+                id:
+                    normalizedTab === "menus/controls"
+                        ? "menus-controls"
+                        : normalizedTab === "menus/history"
+                          ? "menus-history"
+                          : "menus-save-load",
+                label:
+                    normalizedTab === "menus/controls"
+                        ? t("hotkeys_menu")
+                        : normalizedTab === "menus/history"
+                          ? t("history")
+                          : `${t("save")}/${t("load")}`,
+            });
+        }
+        return trail;
+    })();
+
+    const renderBreadcrumb = () => (
+        <Breadcrumb>
+            <BreadcrumbList>
+                {breadcrumbs.map((crumb, index) => {
+                    const isLast = index === breadcrumbs.length - 1;
+                    const isHomeRootLink = crumb.id === "home" && normalizedTab;
+
+                    return (
+                        <Fragment key={crumb.id}>
+                            <BreadcrumbItem>
+                                {isHomeRootLink ? (
+                                    <BreadcrumbLink
+                                        render={
+                                            <button
+                                                type="button"
+                                                onClick={() => setSettingsTab(undefined)}
+                                            />
+                                        }
+                                    >
+                                        {crumb.label}
+                                    </BreadcrumbLink>
+                                ) : (
+                                    <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                                )}
+                            </BreadcrumbItem>
+                            {!isLast && <BreadcrumbSeparator />}
+                        </Fragment>
+                    );
+                })}
+            </BreadcrumbList>
+        </Breadcrumb>
+    );
+
+    if (
+        normalizedTab === "menus/controls" ||
+        normalizedTab === "menus/history" ||
+        normalizedTab === "menus/save-load"
+    ) {
+        return (
+            <>
+                <div className="border-b px-4 py-3">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                        {renderBreadcrumb()}
+                        <div className="flex items-center gap-2">
+                            <Button variant="outline" size="sm" onClick={goBack}>
+                                <ArrowLeftIcon />
+                                {t("back")}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+                {normalizedTab === "menus/controls" ? <ControlsListSettingsPage /> : null}
+                {normalizedTab === "menus/history" ? <HistoryListSettingsPage /> : null}
+                {normalizedTab === "menus/save-load" ? <SaveLoadSettingsPage /> : null}
+            </>
+        );
+    }
+
+    return (
+        <div className="flex h-full flex-col">
+            <div className="border-b px-4 py-3">{renderBreadcrumb()}</div>
+            <ScrollArea className="flex-1 min-h-0">
+                {/* Two-column grid on md+, single column list below md */}
+                <div className="grid grid-cols-1 md:grid-cols-2 md:divide-x px-2 sm:px-12 md:px-14 lg:px-22 xl:px-28">
+                    {/* Left column: quick actions */}
+                    <div className="border-b p-4 md:border-b-0">
+                        <div className="grid gap-4">
+                            <div>
+                                <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                                    {t("system")}
+                                </h3>
+                                <SystemControls />
+                            </div>
+
+                            <Separator />
+
+                            <div>
+                                <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                                    {t("sound")}
+                                </h3>
+                                <SoundControls />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Right column: settings sections */}
+                    <div className="border-b p-4 md:border-b-0">
+                        <div className="grid gap-4">
+                            <div>
+                                <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                                    {t("dialogues")}
+                                </h3>
+                                <DialoguesControls />
+                            </div>
+
+                            <Separator />
+
+                            <div>
+                                <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                                    {t("menus")}
+                                </h3>
+                                <QuickMenus />
+                            </div>
+
+                            <Separator />
+
+                            <div>
+                                <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                                    {t("about")}
+                                </h3>
+                                <About />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </ScrollArea>
+        </div>
+    );
+}
+
+export function SettingsDialogue() {
+    const open = useSearchParamState<boolean>("settings");
+    const setOpen = useSetSearchParamState<boolean>("settings");
+    const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+    const { t } = useTranslation(["ui"]);
+
+    return (
+        <Dialog
+            open={open ?? false}
+            onOpenChange={(isOpen) => {
+                setOpen(isOpen || undefined);
+                if (!isOpen) {
+                    // Delay clearing the tab until after the 100ms close animation
+                    // to avoid briefly flashing the main settings view during close.
+                    setTimeout(() => setSettingsTab(undefined), 150);
+                }
+            }}
+        >
+            <FullscreenDialogContent title={t("settings")}>
+                <Settings />
+            </FullscreenDialogContent>
+        </Dialog>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/menus/settings/menus/controls.tsx

@@ -0,0 +1,115 @@
+import { Input } from "@/components/ui/input";
+import { Kbd, KbdGroup } from "@/components/ui/kbd";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { type HotkeyRegistrationView, useHotkeyRegistrations } from "@tanstack/react-hotkeys";
+import { Search } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+function splitHotkey(hotkey: string) {
+    return hotkey.split("+").filter(Boolean);
+}
+
+function isRegistrationEnabled(registration: HotkeyRegistrationView) {
+    return registration.options.enabled !== false;
+}
+
+/**
+ * Renders the controls list section used inside Settings subpages.
+ * Uses `useHotkeyRegistrations` (reads the store) but never calls `useHotkeys`,
+ * so there is no write→read→re-render loop.
+ */
+export function ControlsListSettingsPage() {
+    const { hotkeys } = useHotkeyRegistrations();
+    const [searchString, setSearchString] = useState("");
+    const { t } = useTranslation(["ui"]);
+
+    const normalizedSearch = searchString.trim().toLowerCase();
+    const hotkeyRows = useMemo(() => {
+        return hotkeys
+            .filter((registration) => {
+                if (!normalizedSearch) {
+                    return true;
+                }
+                const name = registration.options.meta?.name?.toLowerCase() ?? "";
+                const description = registration.options.meta?.description?.toLowerCase() ?? "";
+                const value = registration.hotkey.toLowerCase();
+                return (
+                    name.includes(normalizedSearch) ||
+                    description.includes(normalizedSearch) ||
+                    value.includes(normalizedSearch)
+                );
+            })
+            .sort((a, b) => {
+                const aName = a.options.meta?.name ?? a.hotkey;
+                const bName = b.options.meta?.name ?? b.hotkey;
+                return aName.localeCompare(bName);
+            });
+    }, [hotkeys, normalizedSearch]);
+
+    const toolbar = (
+        <div className="relative w-72 max-w-[50vw]">
+            <Search className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+                className="pl-8"
+                placeholder={t("search")}
+                value={searchString}
+                onChange={(e) => setSearchString(e.target.value)}
+                aria-label={t("search")}
+            />
+        </div>
+    );
+
+    return (
+        <>
+            <div className="border-b p-4">{toolbar}</div>
+            <ScrollArea className="flex-1 min-h-0">
+                <div className="p-4 space-y-2">
+                    {hotkeyRows.map((registration) => {
+                        const label = registration.options.meta?.name ?? registration.hotkey;
+                        const description =
+                            registration.options.meta?.description ??
+                            t("hotkeys_menu_no_description");
+                        const enabled = isRegistrationEnabled(registration);
+                        return (
+                            <div
+                                key={registration.id}
+                                className="flex flex-col gap-3 rounded-lg border bg-card/80 p-3 sm:flex-row sm:items-center"
+                            >
+                                <div className="flex-1 space-y-1">
+                                    <p className="font-medium">{label}</p>
+                                    <p className="text-sm text-muted-foreground">{description}</p>
+                                </div>
+                                <div className="flex flex-wrap items-center gap-1.5 sm:justify-end">
+                                    <KbdGroup>
+                                        {splitHotkey(registration.hotkey).map((part) => (
+                                            <Kbd key={`${registration.id}-${part}`}>{part}</Kbd>
+                                        ))}
+                                    </KbdGroup>
+                                    <span
+                                        className={cn(
+                                            "rounded-full px-2 py-0.5 text-xs font-medium border",
+                                            enabled
+                                                ? "border-green-500/30 bg-green-500/10 text-green-700 dark:text-green-400"
+                                                : "border-muted-foreground/30 bg-muted text-muted-foreground",
+                                        )}
+                                    >
+                                        {enabled
+                                            ? t("hotkeys_menu_active")
+                                            : t("hotkeys_menu_inactive")}
+                                    </span>
+                                </div>
+                            </div>
+                        );
+                    })}
+                    {hotkeyRows.length === 0 && (
+                        <p className="text-sm text-muted-foreground">
+                            {t("hotkeys_menu_no_results")}
+                        </p>
+                    )}
+                </div>
+            </ScrollArea>
+        </>
+    );
+}