create-pixi-vn 1.9.7 → 2.0.1

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

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

package/template-react-vite-muijoy/src/components/menus/narration/click-overlay.tsx

@@ -0,0 +1,15 @@
+import { useNarrationPointerHandlers } from "@/lib/hooks/narration-hooks";
+
+export function NarrationClickOverlay() {
+    const { handlePointerDown, handlePointerCancel, handlePointerMove, handlePointerUp } =
+        useNarrationPointerHandlers();
+    return (
+        <div
+            className="fixed inset-0 z-0 pointer-events-auto"
+            onPointerDown={handlePointerDown}
+            onPointerCancel={handlePointerCancel}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+        />
+    );
+}

package/template-react-vite-muijoy/src/components/menus/narration/index.tsx

@@ -0,0 +1,30 @@
+import { ChoiceMenu } from "@/components/menus/choice-menus";
+import { NarrationCards } from "@/components/menus/narration/narration-cards";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { useQueryDialogue } from "@/lib/query/interface-query";
+
+export function NarrationScreen() {
+    const { data: { animatedText, text } = {} } = useQueryDialogue();
+
+    return (
+        <div className="absolute flex h-full w-full flex-col">
+            <div className="mb-0 mx-0 flex min-h-0 flex-1 flex-col sm:mb-4 sm:mx-10 md:mx-20 lg:mx-20">
+                <ResizablePanelGroup orientation="vertical">
+                    <ResizablePanel>
+                        <ChoiceMenu />
+                    </ResizablePanel>
+                    {(animatedText || text) && (
+                        <div className="mx-4">
+                            <ResizableHandle />
+                        </div>
+                    )}
+                    {(animatedText || text) && (
+                        <ResizablePanel defaultSize={"40%"}>
+                            <NarrationCards />
+                        </ResizablePanel>
+                    )}
+                </ResizablePanelGroup>
+            </div>
+        </div>
+    );
+}

package/template-react-vite-muijoy/src/components/menus/narration/narration-cards.tsx

@@ -0,0 +1,133 @@
+import { AnimatedDots } from "@/components/loading";
+import { QuickTools } from "@/components/menus/quick-tools";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Card, CardContent } from "@/components/ui/card";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useNarrationPointerHandlers } from "@/lib/hooks/narration-hooks";
+import { useQueryDialogue } from "@/lib/query/interface-query";
+import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
+import { useSelector } from "@tanstack/react-store";
+import { type RefObject, useCallback, useRef } from "react";
+import Markdown from "react-markdown";
+import { MarkdownTypewriterHooks } from "react-markdown-typewriter";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+
+export function NarrationCards() {
+    const { data: { character } = {} } = useQueryDialogue();
+    const paragraphRef = useRef<HTMLDivElement>(null);
+    const characterName = `${character?.name || ""} ${character?.surname || ""}`.trim();
+    const { handlePointerDown, handlePointerCancel, handlePointerUp } =
+        useNarrationPointerHandlers();
+
+    return (
+        <div className="flex h-full flex-col">
+            <Card className="pointer-events-none min-h-0 flex-1 gap-1 px-1.5 pb-1.5 py-4">
+                <div className="min-h-0 flex-1">
+                    <ResizablePanelGroup orientation="horizontal">
+                        {character?.icon && (
+                            <ResizablePanel defaultSize={"16%"}>
+                                <CharacterIcon icon={character.icon} alt={characterName} />
+                            </ResizablePanel>
+                        )}
+                        {character?.icon && <ResizableHandle />}
+                        <ResizablePanel>
+                            <div className="flex h-full flex-col">
+                                <CardContent className="min-h-0 flex-1 px-3">
+                                    <ScrollArea
+                                        ref={paragraphRef}
+                                        className="h-full"
+                                        onPointerDown={handlePointerDown}
+                                        onPointerCancel={handlePointerCancel}
+                                        onPointerUp={handlePointerUp}
+                                    >
+                                        {character && (
+                                            <p
+                                                className="text-xl font-bold"
+                                                style={{ color: character?.color }}
+                                            >
+                                                {characterName}
+                                            </p>
+                                        )}
+                                        <Text paragraphRef={paragraphRef} />
+                                    </ScrollArea>
+                                </CardContent>
+                            </div>
+                        </ResizablePanel>
+                    </ResizablePanelGroup>
+                </div>
+                <QuickTools />
+            </Card>
+        </div>
+    );
+}
+
+export function Text({ paragraphRef }: { paragraphRef: RefObject<HTMLDivElement | null> }) {
+    const typewriterDelay = useSelector(TextDisplaySettings.store, (state) => state.delay);
+    const { data: { animatedText, text } = {} } = useQueryDialogue();
+
+    const handleCharacterAnimationComplete = useCallback(
+        (ref: { current: HTMLSpanElement | null }) => {
+            const container = paragraphRef.current;
+            const char = ref.current;
+            if (container && char) {
+                const containerRect = container.getBoundingClientRect();
+                const charRect = char.getBoundingClientRect();
+                // Position of the character relative to the top of the scroll container
+                const charOffsetInContainer =
+                    charRect.top - containerRect.top + container.scrollTop;
+                const scrollTop = charOffsetInContainer - container.clientHeight / 2;
+                container.scrollTo({
+                    top: scrollTop,
+                    behavior: "smooth",
+                });
+            }
+        },
+        [paragraphRef],
+    );
+
+    return (
+        <p className="prose dark:prose-invert m-0 max-w-full p-0">
+            <span>
+                <Markdown
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[rehypeRaw]}
+                    components={{
+                        p: (props) => <span {...props} />,
+                    }}
+                >
+                    {text}
+                </Markdown>
+            </span>
+            <span>
+                <span> </span>
+                <MarkdownTypewriterHooks
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[rehypeRaw]}
+                    delay={typewriterDelay}
+                    motionProps={{
+                        onAnimationStart: TextDisplaySettings.start,
+                        onAnimationComplete: (definition: "visible" | "hidden") => {
+                            if (definition === "visible") {
+                                TextDisplaySettings.end();
+                            }
+                        },
+                        onCharacterAnimationComplete: handleCharacterAnimationComplete,
+                    }}
+                    fallback={<AnimatedDots />}
+                >
+                    {animatedText}
+                </MarkdownTypewriterHooks>
+            </span>
+        </p>
+    );
+}
+
+export function CharacterIcon({ alt, icon }: { icon: string; alt: string }) {
+    return (
+        <AspectRatio ratio={16 / 9}>
+            <img src={icon} loading="lazy" alt={alt} className="h-full w-full object-cover" />
+        </AspectRatio>
+    );
+}