create-pixi-vn 2.0.14 → 2.1.0

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

@@ -0,0 +1,164 @@
+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 { useImageSrc } from "@/lib/hooks/image-hooks";
+import { useQueryNarrativeHistory } from "@/lib/query/narration-query";
+import { cn } from "@/lib/utils";
+import { useDebouncedValue } from "@tanstack/react-pacer";
+import { Check, Search } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+
+function HistoryItemAvatar({ icon, character }: { icon?: string; character: string }) {
+    const resolvedSrc = useImageSrc(icon);
+    return (
+        <Avatar size="sm">
+            <AvatarImage src={resolvedSrc} loading="lazy" />
+            <AvatarFallback>{character.slice(0, 1).toUpperCase()}</AvatarFallback>
+        </Avatar>
+    );
+}
+
+export function HistoryList({ searchString }: { searchString?: string }) {
+    const { data = [] } = useQueryNarrativeHistory({ searchString });
+    const bottomRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (data.length === 0 || !bottomRef.current) return;
+        let parent = bottomRef.current.parentElement;
+        while (parent) {
+            const { overflowY } = window.getComputedStyle(parent);
+            if (overflowY === "auto" || overflowY === "scroll") {
+                parent.scrollTop = parent.scrollHeight;
+                break;
+            }
+            parent = parent.parentElement;
+        }
+    }, [data]);
+
+    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">
+                                    <HistoryItemAvatar
+                                        icon={item.icon}
+                                        character={item.character}
+                                    />
+                                </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-center 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>
+            <div ref={bottomRef} />
+        </>
+    );
+}
+
+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-nqtr-react-vite-muijoy-ink/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>
+    );
+}

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

@@ -0,0 +1,126 @@
+import { useAlertDialog } from "@/components/providers/alert-dialog-provider";
+import { Button } from "@/components/ui/button";
+import { Kbd, KbdGroup } from "@/components/ui/kbd";
+import { Separator } from "@/components/ui/separator";
+import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
+import { Game } from "@drincs/pixi-vn";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+import { Gamepad2Icon, HistoryIcon, LogOutIcon, SaveIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export function QuickMenus() {
+    const location = useLocation();
+    const isInGame = location.pathname.startsWith("/game");
+
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                {isInGame && <OpenHistorySettingButton />}
+                <SaveLoadMenuButton />
+                <OpenControlsListSettingButton />
+            </div>
+            {isInGame && <Separator />}
+            {isInGame && <ReturnMainMenuButton />}
+        </div>
+    );
+}
+
+export function OpenControlsListSettingButton() {
+    const { t } = useTranslation(["ui"]);
+    const setSettingsOpen = useSetSearchParamState<boolean>("settings");
+    const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+
+    return (
+        <Button
+            variant="outline"
+            className="w-full justify-start"
+            onClick={() => {
+                setSettingsOpen(true);
+                setSettingsTab("menus/controls");
+            }}
+        >
+            <Gamepad2Icon />
+            {t("hotkeys_menu")}
+            <KbdGroup className="ml-auto">
+                <Kbd>Ctrl</Kbd>
+                <Kbd>K</Kbd>
+            </KbdGroup>
+        </Button>
+    );
+}
+
+export function ReturnMainMenuButton() {
+    const navigate = useNavigate();
+    const { t } = useTranslation(["ui"]);
+    const setOpenSettings = useSetSearchParamState<boolean>("settings");
+    const { openAlertDialog } = useAlertDialog();
+
+    return (
+        <Button
+            variant="destructive"
+            onClick={() => {
+                openAlertDialog({
+                    head: t("attention"),
+                    content: t("you_sure_to_return_main_menu"),
+                    onConfirm: () => {
+                        Game.clear();
+                        navigate({ to: "/" });
+                        setOpenSettings(false);
+                        return true;
+                    },
+                });
+            }}
+        >
+            <LogOutIcon />
+            {t("return_main_menu")}
+        </Button>
+    );
+}
+
+export function OpenHistorySettingButton() {
+    const { t } = useTranslation(["ui"]);
+    const setSettings = useSetSearchParamState<boolean>("settings");
+    const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+
+    return (
+        <Button
+            variant="outline"
+            className="w-full justify-start"
+            onClick={() => {
+                setSettings(true);
+                setSettingsTab("menus/history");
+            }}
+        >
+            <HistoryIcon />
+            {t("history")}
+            <KbdGroup className="ml-auto">
+                <Kbd>Ctrl</Kbd>
+                <Kbd>H</Kbd>
+            </KbdGroup>
+        </Button>
+    );
+}
+
+export function SaveLoadMenuButton() {
+    const { t } = useTranslation(["ui"]);
+    const setSettingsOpen = useSetSearchParamState<boolean>("settings");
+    const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+
+    return (
+        <Button
+            variant="outline"
+            className="w-full justify-start"
+            onClick={() => {
+                setSettingsOpen(true);
+                setSettingsTab("menus/save-load");
+            }}
+        >
+            <SaveIcon />
+            {t(`${t("save")}/${t("load")}`)}
+            <KbdGroup className="ml-auto">
+                <Kbd>F5</Kbd>
+                <Kbd>F9</Kbd>
+            </KbdGroup>
+        </Button>
+    );
+}

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

@@ -0,0 +1,114 @@
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { ChannelSound } from "@/lib/stores/channel-sound-stores";
+import { MasterSound } from "@/lib/stores/master-sound-storage";
+import { sound } from "@drincs/pixi-vn";
+import { useSelector } from "@tanstack/react-store";
+import { Volume2Icon, VolumeXIcon } from "lucide-react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+export function SoundControls() {
+    const { t } = useTranslation(["ui"]);
+
+    const masterVolume = useSelector(MasterSound.store, (s) => s.volume);
+    const masterMuted = useSelector(MasterSound.store, (s) => s.muted);
+
+    return (
+        <div className="flex flex-col gap-4">
+            <SoundRow
+                label={t("master_volume") || "Master"}
+                helper={t("master_volume_description")}
+                volume={masterVolume}
+                muted={masterMuted}
+                onMuteToggle={() => MasterSound.toggleMuted()}
+                onVolumeChange={(v) => MasterSound.setVolume(v)}
+            />
+
+            {sound.channels.map((c) => (
+                <SoundChannelControl
+                    key={c.alias}
+                    label={t(`${c.alias}_volume`)}
+                    helper={t(`${c.alias}_volume_description`)}
+                    alias={c.alias}
+                    disabled={masterMuted}
+                />
+            ))}
+        </div>
+    );
+}
+
+function SoundRow({
+    label,
+    helper,
+    volume,
+    muted,
+    disabled,
+    onMuteToggle,
+    onVolumeChange,
+}: {
+    label: string;
+    helper?: string;
+    volume: number;
+    muted: boolean;
+    disabled?: boolean;
+    onMuteToggle: () => void;
+    onVolumeChange: (v: number) => void;
+}) {
+    return (
+        <div className="flex flex-col gap-1.5">
+            <div>
+                <p className="text-sm font-medium leading-none">{label}</p>
+                {helper && <p className="mt-1 text-xs text-muted-foreground">{helper}</p>}
+            </div>
+            <div className="flex items-center gap-2">
+                <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    disabled={disabled}
+                    onClick={onMuteToggle}
+                    aria-label={muted ? "Unmute" : "Mute"}
+                >
+                    {muted ? <VolumeXIcon /> : <Volume2Icon />}
+                </Button>
+                <Slider
+                    min={0}
+                    max={100}
+                    value={[volume]}
+                    onValueChange={(v) => typeof v === "number" && onVolumeChange(v)}
+                    disabled={disabled}
+                    className="flex-1"
+                />
+                <span className="w-9 text-right text-xs tabular-nums">{volume}%</span>
+            </div>
+        </div>
+    );
+}
+
+export function SoundChannelControl({
+    label,
+    alias,
+    disabled,
+    helper,
+}: {
+    label: string;
+    alias: string;
+    disabled?: boolean;
+    helper?: string;
+}) {
+    const store = useMemo(() => ChannelSound.getStore(alias), [alias]);
+    const volume = useSelector(store, (s) => s.volume);
+    const muted = useSelector(store, (s) => s.muted);
+
+    return (
+        <SoundRow
+            label={label}
+            helper={helper}
+            volume={volume}
+            muted={muted}
+            disabled={disabled}
+            onMuteToggle={() => ChannelSound.toggleMuted(alias)}
+            onVolumeChange={(v) => ChannelSound.setVolume(alias, v)}
+        />
+    );
+}