create-pixi-vn 2.0.14 → 2.1.0

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

@@ -0,0 +1,225 @@
+import { useTheme } from "@/components/providers/theme-provider";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { Toggle } from "@/components/ui/toggle";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useLanguageSettings } from "@/lib/hooks/language-settings-hooks";
+import { downloadResourceToTranslate } from "@/lib/i18n";
+import {
+    IS_FULL_SCREEN_MODE_USE_QUERY_KEY,
+    useQueryIsFullModeScreen,
+} from "@/lib/query/settings-query";
+import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
+import { useQueryClient } from "@tanstack/react-query";
+import { useSelector } from "@tanstack/react-store";
+import {
+    DownloadIcon,
+    FullscreenIcon,
+    Minimize2Icon,
+    MonitorIcon,
+    MoonIcon,
+    SunIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export function SystemControls() {
+    return (
+        <div className="flex flex-col gap-4">
+            <FullScreenSettings />
+            <ModeToggle />
+            <LanguageSettings />
+            <TextSizeSettings />
+        </div>
+    );
+}
+
+export function TextSizeSettings() {
+    const { t } = useTranslation(["ui"]);
+    const fontSize = useSelector(TextDisplaySettings.store, (state) => state.fontSize);
+
+    return (
+        <div className="flex flex-col gap-1.5">
+            <div>
+                <p className="text-sm font-medium leading-none">{t("text_size")}</p>
+                <p className="mt-1 text-xs text-muted-foreground">{t("text_size_description")}</p>
+            </div>
+            <div className="flex items-center gap-2">
+                <Slider
+                    min={50}
+                    max={200}
+                    step={10}
+                    value={[fontSize]}
+                    onValueChange={(v) =>
+                        typeof v === "number" && TextDisplaySettings.setFontSize(v)
+                    }
+                    className="flex-1"
+                />
+                <span className="w-14 text-right text-xs tabular-nums">{fontSize}%</span>
+            </div>
+            <div className="flex justify-between px-1 text-xs text-muted-foreground">
+                <span>50%</span>
+                <span>200%</span>
+            </div>
+        </div>
+    );
+}
+
+export function ModeToggle() {
+    const { setTheme, theme } = useTheme();
+    const { t } = useTranslation(["ui"]);
+
+    return (
+        <div className="flex items-center justify-between gap-4">
+            <div className="flex-1">
+                <p className="text-sm font-medium leading-none">{t("theme_mode")}</p>
+                <p className="mt-1 text-xs text-muted-foreground">{t("theme_mode_description")}</p>
+            </div>
+            <ButtonGroup className="shrink-0">
+                <TooltipProvider>
+                    <Tooltip>
+                        <TooltipTrigger render={<span />}>
+                            <Toggle
+                                size="sm"
+                                pressed={theme === "light"}
+                                onPressedChange={() => setTheme("light")}
+                                aria-label="Light Mode"
+                            >
+                                <SunIcon />
+                            </Toggle>
+                        </TooltipTrigger>
+                        <TooltipContent>Light Mode</TooltipContent>
+                    </Tooltip>
+                    <Tooltip>
+                        <TooltipTrigger render={<span />}>
+                            <Toggle
+                                size="sm"
+                                pressed={theme === "system"}
+                                onPressedChange={() => setTheme("system")}
+                                aria-label="System Mode"
+                            >
+                                <MonitorIcon />
+                            </Toggle>
+                        </TooltipTrigger>
+                        <TooltipContent>System Mode</TooltipContent>
+                    </Tooltip>
+                    <Tooltip>
+                        <TooltipTrigger render={<span />}>
+                            <Toggle
+                                size="sm"
+                                pressed={theme === "dark"}
+                                onPressedChange={() => setTheme("dark")}
+                                aria-label="Dark Mode"
+                            >
+                                <MoonIcon />
+                            </Toggle>
+                        </TooltipTrigger>
+                        <TooltipContent>Dark Mode</TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
+            </ButtonGroup>
+        </div>
+    );
+}
+
+export function FullScreenSettings() {
+    const { data: isFullScreenMode } = useQueryIsFullModeScreen();
+    const [loading, setLoading] = useState(false);
+    const queryClient = useQueryClient();
+    const { t } = useTranslation(["ui"]);
+
+    if (document.fullscreenEnabled === false) {
+        return null;
+    }
+
+    return (
+        <div className="flex items-center justify-between gap-4">
+            <div className="flex-1">
+                <p className="text-sm font-medium leading-none">{t("fullscreen")}</p>
+                <p className="mt-1 text-xs text-muted-foreground">{t("fullscreen_description")}</p>
+            </div>
+            <Button
+                variant="outline"
+                size="sm"
+                disabled={loading}
+                className="shrink-0"
+                onClick={() => {
+                    setLoading(true);
+                    let promise: Promise<void>;
+                    if (isFullScreenMode) {
+                        promise = document.exitFullscreen();
+                    } else {
+                        promise = document.documentElement.requestFullscreen();
+                    }
+                    promise.finally(() => {
+                        setLoading(false);
+                        queryClient.invalidateQueries({
+                            queryKey: [IS_FULL_SCREEN_MODE_USE_QUERY_KEY],
+                        });
+                    });
+                }}
+            >
+                {isFullScreenMode ? <Minimize2Icon /> : <FullscreenIcon />}
+                {isFullScreenMode ? t("exit_fullscreen") : t("enter_fullscreen")}
+            </Button>
+        </div>
+    );
+}
+
+export function LanguageSettings() {
+    const { t } = useTranslation(["ui"]);
+    const { selectedLang, displayLabel, handleChange, languageOptions } = useLanguageSettings();
+
+    return (
+        <div className="flex flex-col gap-1.5">
+            <div className="flex items-center justify-between gap-2">
+                <div className="flex-1">
+                    <p className="text-sm font-medium leading-none">{t("language")}</p>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                        {t("language_description")}
+                    </p>
+                </div>
+                {!import.meta.env.PROD && (
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger render={<span />}>
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    onClick={() => {
+                                        downloadResourceToTranslate();
+                                    }}
+                                    aria-label={t("download_locale")}
+                                >
+                                    <DownloadIcon />
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>{t("download_locale")}</TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                )}
+            </div>
+            <Select value={selectedLang} onValueChange={handleChange}>
+                <SelectTrigger className="w-full">
+                    {/* Render display name explicitly so the trigger always shows text, not the value code */}
+                    <SelectValue>{displayLabel}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                    {languageOptions.map(({ label, value }) => (
+                        <SelectItem key={value} value={value}>
+                            {label}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+        </div>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/modals/error-allerts.tsx

@@ -0,0 +1,42 @@
+import { Button } from "@/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import { useNetworkDetector } from "@/lib/hooks/network-hooks";
+import { RefreshCwIcon, WifiOffIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export function OfflineAllert() {
+    const { t } = useTranslation(["ui"]);
+    const { isOnline, retry } = useNetworkDetector();
+
+    if (isOnline) return null;
+
+    return (
+        <div className="fixed inset-0 z-[120] flex items-center justify-center bg-background/70 p-4 backdrop-blur-md animate-in fade-in-0">
+            <Card className="w-full max-w-md border-destructive/30 shadow-2xl">
+                <CardHeader className="items-center text-center">
+                    <div className="mb-2 inline-flex size-14 items-center justify-center rounded-2xl bg-destructive/10 text-destructive">
+                        <WifiOffIcon className="size-7" />
+                    </div>
+                    <CardTitle>{t("offline_title")}</CardTitle>
+                    <CardDescription>{t("offline_description")}</CardDescription>
+                </CardHeader>
+                <CardContent className="flex flex-col items-center gap-2 text-sm text-muted-foreground">
+                    <div>{t("offline_hint")}</div>
+                </CardContent>
+                <CardFooter className="justify-center">
+                    <Button variant="outline" onClick={retry} aria-label={t("offline_retry")}>
+                        <RefreshCwIcon className="size-4" />
+                        {t("offline_retry")}
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/modals/input-request-dialogues.tsx

@@ -0,0 +1,82 @@
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogFooter } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { useGameProps } from "@/lib/hooks/props-hooks";
+import { useQueryDialogue, useQueryInputValue } from "@/lib/query/narration-query";
+import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
+import { narration } from "@drincs/pixi-vn";
+import { useDebouncedValue } from "@tanstack/react-pacer";
+import { useSelector } from "@tanstack/react-store";
+import { useCallback, useEffect, 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 InputRequestDialog() {
+    const { data: { lastText: text } = {} } = useQueryDialogue();
+    const {
+        data: { isRequired, type, currentValue } = { currentValue: undefined, isRequired: false },
+    } = useQueryInputValue<string | number>();
+    const isTyping = useSelector(TextDisplaySettings.store, (state) => state.inProgress);
+    const [open] = useDebouncedValue(!isTyping && isRequired, { wait: 50 });
+    const [tempValue, setTempValue] = useState<string | number>();
+    const gameProps = useGameProps();
+    const { t } = useTranslation(["ui"]);
+
+    useEffect(() => {
+        setTempValue(currentValue);
+    }, [currentValue]);
+
+    const canConfirm = tempValue !== undefined && tempValue !== "";
+
+    const submitInputValue = useCallback(() => {
+        if (!canConfirm) {
+            return;
+        }
+        narration.inputValue = tempValue || currentValue;
+        setTempValue(undefined);
+        gameProps.invalidateInterfaceData();
+    }, [canConfirm, currentValue, gameProps, tempValue]);
+
+    return (
+        <Dialog open={open}>
+            <DialogContent showCloseButton={false}>
+                {text && (
+                    <Markdown
+                        remarkPlugins={[remarkGfm]}
+                        rehypePlugins={[rehypeRaw]}
+                        components={{
+                            p: (props) => <span {...props} />,
+                        }}
+                    >
+                        {text}
+                    </Markdown>
+                )}
+                <Input
+                    value={tempValue ?? ""}
+                    type={type}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter" && canConfirm) {
+                            submitInputValue();
+                        }
+                    }}
+                    onChange={(e) => {
+                        switch (e.target.type) {
+                            case "number":
+                                setTempValue(e.target.valueAsNumber);
+                                break;
+                            default:
+                                setTempValue(e.target.value);
+                        }
+                    }}
+                />
+                <DialogFooter>
+                    <Button disabled={!canConfirm} onClick={submitInputValue}>
+                        {t("confirm")}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/modals/quick-actions-wheel.tsx

@@ -0,0 +1,264 @@
+import { QuickActionsWheelState } from "@/lib/stores/quick-actions-wheel-store";
+import { cn } from "@/lib/utils";
+import { getHotkeyManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
+import type { HotkeyRegistrationView } from "@tanstack/react-hotkeys";
+import { useSelector } from "@tanstack/react-store";
+import { type MouseEvent, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+function dispatchKeyboardEvent(
+    target: HTMLElement | Document | Window,
+    type: "keydown" | "keyup",
+    registration: HotkeyRegistrationView,
+) {
+    const { parsedHotkey } = registration;
+    target.dispatchEvent(
+        new KeyboardEvent(type, {
+            key: parsedHotkey.key,
+            ctrlKey: parsedHotkey.ctrl,
+            shiftKey: parsedHotkey.shift,
+            altKey: parsedHotkey.alt,
+            metaKey: parsedHotkey.meta,
+            bubbles: true,
+            cancelable: true,
+        }),
+    );
+}
+
+function triggerRegistration(registration: HotkeyRegistrationView) {
+    const eventType = registration.options.eventType ?? "keydown";
+    dispatchKeyboardEvent(registration.target, eventType, registration);
+    if (eventType === "keydown") {
+        dispatchKeyboardEvent(registration.target, "keyup", registration);
+    }
+}
+
+function shouldShowInWheel(registration: HotkeyRegistrationView) {
+    if (registration.options.enabled === false) {
+        return false;
+    }
+    if (registration.hotkey === "Tab") {
+        return false;
+    }
+    return true;
+}
+
+type WheelActionItem = {
+    id: string;
+    label: string;
+    description: string;
+    hotkeyLabel: string;
+    registration: HotkeyRegistrationView;
+};
+
+function getRegistrationGroupKey(registration: HotkeyRegistrationView) {
+    const name = registration.options.meta?.name?.trim();
+    const eventType = registration.options.eventType ?? "keydown";
+
+    if (!name) {
+        return `single:${registration.id}`;
+    }
+
+    // Group by action name and event type so aliases with different wording
+    // (e.g. hold/release variants) are merged into one wheel action.
+    return `meta:${name}::${eventType}`;
+}
+
+function buildWheelItems(hotkeys: HotkeyRegistrationView[]): WheelActionItem[] {
+    const grouped = new Map<string, HotkeyRegistrationView[]>();
+
+    for (const registration of hotkeys.filter(shouldShowInWheel)) {
+        const key = getRegistrationGroupKey(registration);
+        const existing = grouped.get(key);
+        if (existing) {
+            existing.push(registration);
+        } else {
+            grouped.set(key, [registration]);
+        }
+    }
+
+    return Array.from(grouped.values())
+        .map((group) => {
+            const registration = group.find((item) => item.options.enabled !== false) ?? group[0];
+            const label = registration.options.meta?.name ?? registration.hotkey;
+            const description = registration.options.meta?.description ?? "";
+            const hotkeyLabel = Array.from(new Set(group.map((item) => item.hotkey))).join(" OR ");
+
+            return {
+                id: `group:${group
+                    .map((item) => item.id)
+                    .sort()
+                    .join("|")}`,
+                label,
+                description,
+                hotkeyLabel,
+                registration,
+            };
+        })
+        .sort((a, b) => a.label.localeCompare(b.label));
+}
+
+/**
+ * Reads active hotkey registrations and renders the radial wheel overlay.
+ */
+function QuickActionsWheelContent({
+    open,
+    selectedId,
+    setSelectedId,
+}: {
+    open: boolean;
+    selectedId: string | undefined;
+    setSelectedId: (id: string | undefined) => void;
+}) {
+    const { t } = useTranslation(["ui"]);
+    const wheelContainerRef = useRef<HTMLDivElement>(null);
+
+    const wheelItems = useMemo(() => {
+        if (!open) {
+            return [];
+        }
+        const hotkeys = Array.from(getHotkeyManager().registrations.state.values()).map(
+            toHotkeyRegistrationView,
+        );
+        return buildWheelItems(hotkeys);
+    }, [open]);
+
+    if (!open || !wheelItems.length) {
+        return null;
+    }
+
+    const selectedRegistration =
+        wheelItems.find((item) => item.id === selectedId) ?? (wheelItems[0] as WheelActionItem);
+    const radius = Math.min(168, Math.max(135, 120 + wheelItems.length * 3));
+
+    const getRegistrationForPointer = (clientX: number, clientY: number) => {
+        if (!wheelItems.length) {
+            return undefined;
+        }
+
+        const rect = wheelContainerRef.current?.getBoundingClientRect();
+        const centerX = rect ? rect.left + rect.width / 2 : window.innerWidth / 2;
+        const centerY = rect ? rect.top + rect.height / 2 : window.innerHeight / 2;
+        const dx = clientX - centerX;
+        const dy = clientY - centerY;
+
+        if (dx === 0 && dy === 0) {
+            return selectedRegistration;
+        }
+
+        const pointerAngle = Math.atan2(dy, dx);
+        const step = (Math.PI * 2) / wheelItems.length;
+        const normalizedAngle = (pointerAngle + Math.PI / 2 + Math.PI * 2) % (Math.PI * 2);
+        const index = Math.round(normalizedAngle / step) % wheelItems.length;
+
+        return wheelItems[index];
+    };
+
+    const selectRegistrationFromPointer = (clientX: number, clientY: number) => {
+        const registration = getRegistrationForPointer(clientX, clientY);
+        if (registration && registration.id !== selectedRegistration.id) {
+            setSelectedId(registration.id);
+        }
+        return registration;
+    };
+
+    const handleOverlayMouseMove = (event: MouseEvent<HTMLDivElement>) => {
+        if ((event.target as HTMLElement).closest("button")) {
+            return;
+        }
+        selectRegistrationFromPointer(event.clientX, event.clientY);
+    };
+
+    const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {
+        if ((event.target as HTMLElement).closest("button")) {
+            return;
+        }
+
+        const registration = selectRegistrationFromPointer(event.clientX, event.clientY);
+        if (!registration) {
+            return;
+        }
+
+        triggerRegistration(registration.registration);
+        QuickActionsWheelState.setOpen(false);
+    };
+
+    return (
+        <div
+            role="presentation"
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-xs"
+            onMouseMove={handleOverlayMouseMove}
+            onClick={handleOverlayClick}
+        >
+            <div
+                ref={wheelContainerRef}
+                className="relative h-[350px] w-[390px] rounded-[9999px] border border-primary/20 bg-background/90 shadow-xl"
+            >
+                {wheelItems.map((registration, index) => {
+                    const angle = (index / wheelItems.length) * Math.PI * 2 - Math.PI / 2;
+                    const x = Math.cos(angle) * radius;
+                    const y = Math.sin(angle) * radius;
+                    const selected = registration.id === selectedRegistration.id;
+                    return (
+                        <button
+                            key={registration.id}
+                            type="button"
+                            className={cn(
+                                "absolute flex w-28 flex-col items-center rounded-md border p-2 text-center text-xs transition-colors",
+                                selected
+                                    ? "border-primary bg-primary text-primary-foreground"
+                                    : "border-border bg-card/90 text-card-foreground hover:border-primary/60",
+                            )}
+                            style={{
+                                left: `calc(50% + ${x}px)`,
+                                top: `calc(50% + ${y}px)`,
+                                transform: "translate(-50%, -50%)",
+                            }}
+                            onMouseEnter={() => setSelectedId(registration.id)}
+                            onClick={(event) => {
+                                event.stopPropagation();
+                                triggerRegistration(registration.registration);
+                                QuickActionsWheelState.setOpen(false);
+                            }}
+                        >
+                            <span className="font-semibold">{registration.label}</span>
+                            <span className="text-[11px] opacity-85">
+                                {registration.hotkeyLabel.length > 15
+                                    ? `${registration.hotkeyLabel.slice(0, 12)}…`
+                                    : registration.hotkeyLabel}
+                            </span>
+                        </button>
+                    );
+                })}
+
+                <div className="absolute top-1/2 left-1/2 flex w-44 -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-1 rounded-full border bg-card p-4 text-center">
+                    <span className="text-sm font-semibold">{selectedRegistration.label}</span>
+                    <span className="text-xs text-muted-foreground">
+                        {selectedRegistration.description || t("hotkeys_menu_no_description")}
+                    </span>
+                    <span className="text-[11px] text-muted-foreground">
+                        {t("quick_actions_click_hint")}
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/**
+ * Mounts the wheel display and reads state from the shared store.
+ */
+export function QuickActionsWheel() {
+    const open = useSelector(QuickActionsWheelState.store, (state) => state.open);
+    const [selectedId, setSelectedId] = useState<string>();
+
+    return (
+        <div className="pointer-events-auto">
+            <QuickActionsWheelContent
+                open={open}
+                selectedId={selectedId}
+                setSelectedId={setSelectedId}
+            />
+        </div>
+    );
+}