create-pixi-vn 1.9.7 → 2.0.0

package/template-react-vite-muijoy/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.web.app"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline hover:text-foreground"
+                    >
+                        Pixi&apos;VN
+                    </a>
+                </span>
+            </div>
+        </div>
+    );
+}

package/template-react-vite-muijoy/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-react-vite-muijoy/src/components/menus/settings/index.tsx

@@ -0,0 +1,220 @@
+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) {
+                    setSettingsTab(undefined);
+                }
+            }}
+        >
+            <FullscreenDialogContent title={t("settings")}>
+                <Settings />
+            </FullscreenDialogContent>
+        </Dialog>
+    );
+}

package/template-react-vite-muijoy/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>
+        </>
+    );
+}

package/template-react-vite-muijoy/src/components/menus/settings/menus/history.tsx

@@ -0,0 +1,135 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Input } from "@/components/ui/input";
+import {
+    Item,
+    ItemContent,
+    ItemFooter,
+    ItemGroup,
+    ItemMedia,
+    ItemTitle,
+} from "@/components/ui/item";
+import { Kbd } from "@/components/ui/kbd";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useQueryNarrativeHistory } from "@/lib/query/interface-query";
+import { cn } from "@/lib/utils";
+import { useDebouncedValue } from "@tanstack/react-pacer";
+import { Check, Search } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+
+export function HistoryList({ searchString }: { searchString?: string }) {
+    const { data = [] } = useQueryNarrativeHistory({ searchString });
+
+    return (
+        <ItemGroup>
+            {data.map((item, index) => {
+                const key = `${item.character ?? "unknown"}-${item.text}-${index}`;
+                return (
+                    <Item key={key} variant="outline">
+                        {item.character && (
+                            <ItemMedia variant="image">
+                                <Avatar size="sm">
+                                    <AvatarImage src={item.icon} />
+                                    <AvatarFallback>
+                                        {item.character?.slice(0, 1).toUpperCase() ?? "?"}
+                                    </AvatarFallback>
+                                </Avatar>
+                            </ItemMedia>
+                        )}
+                        <ItemContent
+                            className={!item.character ? "items-center text-center" : undefined}
+                        >
+                            {item.character && <ItemTitle>{item.character}</ItemTitle>}
+                            <Markdown
+                                remarkPlugins={[remarkGfm]}
+                                rehypePlugins={[rehypeRaw]}
+                                components={{
+                                    p: ({ children, id }) => (
+                                        <p key={id} className="m-0 text-sm text-muted-foreground">
+                                            {children}
+                                        </p>
+                                    ),
+                                }}
+                            >
+                                {item.text}
+                            </Markdown>
+                        </ItemContent>
+                        {(item.choices?.some((c) => !c.hidden) || item.inputValue) && (
+                            <ItemFooter className="flex-wrap justify-start gap-1.5">
+                                {item.choices?.map((choice) => {
+                                    const choiceKey = `${choice.text}-${choice.isResponse ? "1" : "0"}-${choice.hidden ? "1" : "0"}`;
+                                    if (choice.hidden) {
+                                        return null;
+                                    }
+                                    if (choice.isResponse) {
+                                        return (
+                                            <Kbd
+                                                key={`choices-success-${choiceKey}`}
+                                                className={cn(
+                                                    "h-auto border px-2 py-1",
+                                                    "border-green-500/30 bg-green-500/10 text-green-700 dark:text-green-400",
+                                                )}
+                                            >
+                                                {choice.text}
+                                                <Check className="size-3" />
+                                            </Kbd>
+                                        );
+                                    }
+                                    return (
+                                        <Kbd
+                                            key={`choices-${choiceKey}`}
+                                            className={cn(
+                                                "h-auto border px-2 py-1",
+                                                "border-primary/30 bg-primary/10 text-primary",
+                                            )}
+                                        >
+                                            {choice.text}
+                                        </Kbd>
+                                    );
+                                })}
+                                {item.inputValue && (
+                                    <Kbd className="h-auto px-2 py-1">
+                                        {item.inputValue.toString()}
+                                    </Kbd>
+                                )}
+                            </ItemFooter>
+                        )}
+                    </Item>
+                );
+            })}
+        </ItemGroup>
+    );
+}
+
+export function HistoryListSettingsPage() {
+    const [searchString, setSearchString] = useState("");
+    const [debouncedSearchString] = useDebouncedValue(searchString, { wait: 120 });
+    const { t } = useTranslation(["ui"]);
+
+    const toolbar = (
+        <div className="relative w-60 max-w-[40vw]">
+            <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 px-2 sm:px-12 md:px-14 lg:px-22 xl:px-28">
+                    <HistoryList searchString={debouncedSearchString} />
+                </div>
+            </ScrollArea>
+        </>
+    );
+}

package/template-react-vite-muijoy/src/components/menus/settings/menus/save-load.tsx

@@ -0,0 +1,66 @@
+import { GameSaveMenu } from "@/components/menus/save-menu";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useGameProps } from "@/lib/hooks/props-hooks";
+import { downloadGameSave, loadGameSaveFromFile } from "@/lib/utils/save-utility";
+import type { FileRouteTypes } from "@/routeTree.gen";
+import { useLocation } from "@tanstack/react-router";
+import { Download, FolderOpen } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+export function SaveLoadSettingsPage() {
+    const { t } = useTranslation(["ui"]);
+    const gameProps = useGameProps();
+    const location = useLocation();
+
+    const toolbar = (
+        <TooltipProvider>
+            <div className="flex items-center gap-1">
+                <Tooltip>
+                    <TooltipTrigger render={<span />}>
+                        <Button
+                            variant="ghost"
+                            size="icon-lg"
+                            onClick={() =>
+                                loadGameSaveFromFile((err) => {
+                                    if (err) {
+                                        toast.error(t("allert_error_occurred"));
+                                        return;
+                                    }
+                                    gameProps.invalidateInterfaceData();
+                                    toast.success(t("success_load"));
+                                })
+                            }
+                            aria-label={t("load_from_file")}
+                        >
+                            <FolderOpen className="size-6" />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("load_from_file")}</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                    <TooltipTrigger render={<span />}>
+                        <Button
+                            variant="ghost"
+                            size="icon-lg"
+                            onClick={() => downloadGameSave()}
+                            disabled={(location.pathname as FileRouteTypes["fullPaths"]) === "/"}
+                            aria-label={t("save_to_file")}
+                        >
+                            <Download className="size-6" />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("save_to_file")}</TooltipContent>
+                </Tooltip>
+            </div>
+        </TooltipProvider>
+    );
+
+    return (
+        <div className="flex min-h-0 flex-1 flex-col">
+            <div className="border-b p-4">{toolbar}</div>
+            <GameSaveMenu />
+        </div>
+    );
+}