create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-ink/src/components/screens/narration/narration-cards.tsx

@@ -0,0 +1,156 @@
+import { DelayedAnimatedDots } from "@/components/loading";
+import { QuickTools } from "@/components/quick-tools";
+import { Card, CardContent } from "@/components/ui/card";
+import { Image } from "@/components/ui/image";
+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/narration-query";
+import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
+import { useSelector } from "@tanstack/react-store";
+import { type RefObject, memo, useCallback, useMemo, 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 const Text = memo(function Text({
+    paragraphRef,
+}: {
+    paragraphRef: RefObject<HTMLDivElement | null>;
+}) {
+    const typewriterDelay = useSelector(TextDisplaySettings.store, (state) => state.delay);
+    const { data: { animatedText, text } = {}, finalizeDialogue } = useQueryDialogue();
+
+    const handleCharacterAnimationComplete = useCallback(
+        (ref: { current: HTMLSpanElement | null }) => {
+            const container = paragraphRef.current?.querySelector<HTMLElement>(
+                '[data-slot="scroll-area-viewport"]',
+            );
+            const char = ref.current;
+            if (container && char) {
+                const containerRect = container.getBoundingClientRect();
+                const charRect = char.getBoundingClientRect();
+                const charOffsetInContainer =
+                    charRect.top - containerRect.top + container.scrollTop;
+                const scrollTop = charOffsetInContainer - container.clientHeight / 2;
+                container.scrollTo({
+                    top: scrollTop,
+                    behavior: "smooth",
+                });
+            }
+        },
+        [paragraphRef],
+    );
+
+    const markdownComponents = useMemo(() => ({ p: (props: object) => <span {...props} /> }), []);
+
+    const motionProps = useMemo(
+        () => ({
+            onAnimationStart: TextDisplaySettings.start,
+            onAnimationComplete: (definition: "visible" | "hidden") => {
+                if (definition === "visible") {
+                    finalizeDialogue();
+                    TextDisplaySettings.end();
+                }
+            },
+            onCharacterAnimationComplete: handleCharacterAnimationComplete,
+        }),
+        [finalizeDialogue, handleCharacterAnimationComplete],
+    );
+
+    const specialCharacters = useMemo(
+        () => ({
+            ".": { delayAfter: typewriterDelay + 300 },
+            "!": { delayAfter: typewriterDelay + 300 },
+            "?": { delayAfter: typewriterDelay + 300 },
+            ",": { delayAfter: typewriterDelay + 75 },
+            ":": { delay: typewriterDelay + 50, delayAfter: typewriterDelay + 150 },
+        }),
+        [typewriterDelay],
+    );
+
+    return (
+        <p className="prose dark:prose-invert m-0 max-w-full p-0">
+            <span>
+                <Markdown
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[rehypeRaw]}
+                    components={markdownComponents}
+                >
+                    {text}
+                </Markdown>
+            </span>
+            <span>
+                <span> </span>
+                <MarkdownTypewriterHooks
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[rehypeRaw]}
+                    delay={typewriterDelay}
+                    motionProps={motionProps}
+                    fallback={<DelayedAnimatedDots />}
+                    specialCharacters={specialCharacters}
+                >
+                    {animatedText}
+                </MarkdownTypewriterHooks>
+            </span>
+        </p>
+    );
+});
+
+export function CharacterIcon({ alt, icon }: { icon: string; alt: string }) {
+    return (
+        <div className="h-full w-full">
+            <Image src={icon} layout="fullWidth" alt={alt} className="h-full w-full object-cover" />
+        </div>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/screens/navigation/activity-buttons.tsx

@@ -0,0 +1,135 @@
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarGroup,
+    AvatarGroupCount,
+    AvatarImage,
+} from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Image } from "@/components/ui/image";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useGameProps } from "@/lib/hooks/props-hooks";
+import { useQueryActivity, useQueryCommitment } from "@/lib/query/activity-query";
+import { cn } from "@/lib/utils";
+import type TimeSlotsImage from "@/models/TimeSlotsImage";
+import type { OnRunProps } from "@drincs/nqtr";
+import type { CharacterInterface } from "@drincs/pixi-vn";
+import { isValidElement, type ComponentProps, type ReactElement } from "react";
+
+export function ActivityButton({ id }: { id: string }) {
+    const gameProps = useGameProps();
+    const { uiTransition: t } = gameProps;
+    const { data: activity } = useQueryActivity(id);
+
+    if (!activity) return null;
+
+    return (
+        <ActivityBaseButton
+            disabled={activity.disabled}
+            onClick={() => activity.run(gameProps)}
+            ariaLabel={t(activity.name)}
+            image={activity.icon}
+        />
+    );
+}
+
+export function CommitmentButton({ id }: { id: string }) {
+    const gameProps = useGameProps();
+    const { uiTransition: t } = gameProps;
+    const { data: commitment } = useQueryCommitment(id);
+
+    if (!commitment) return null;
+
+    return (
+        <ActivityBaseButton
+            disabled={commitment.disabled}
+            onClick={() => commitment.run(gameProps)}
+            ariaLabel={t(commitment.name)}
+            image={commitment.icon}
+            characters={commitment.characters}
+        />
+    );
+}
+
+export function ActivityBaseButton({
+    ariaLabel,
+    image: imageProp,
+    characters,
+    className,
+    disabled,
+    children,
+    ...rest
+}: ComponentProps<typeof Button> & {
+    ariaLabel: string;
+    image?: string | TimeSlotsImage | ReactElement | ((props: OnRunProps) => ReactElement);
+    characters?: CharacterInterface[];
+}) {
+    const gameProps = useGameProps();
+
+    let image = imageProp;
+    if (typeof image === "function") {
+        image = image(gameProps);
+    }
+
+    if (isValidElement(image)) {
+        return image;
+    }
+
+    const trigger = (
+        <Button
+            {...rest}
+            role="menuitem"
+            disabled={disabled}
+            size="icon-lg"
+            variant={"secondary"}
+            className={cn(
+                "relative size-10 overflow-hidden rounded-lg shadow-lg sm:size-14 md:size-20",
+                className,
+            )}
+        >
+            {image && (
+                <Image
+                    src={image}
+                    alt={ariaLabel}
+                    layout="constrained"
+                    width={128}
+                    height={128}
+                    className="absolute inset-0 size-full object-cover"
+                />
+            )}
+            {children}
+
+            {characters && (
+                <AvatarGroup className="absolute right-0 bottom-0">
+                    {characters.length <= 3 &&
+                        characters.map((character) => (
+                            <Avatar key={character.id} size="sm">
+                                <AvatarImage src={character.icon} alt={character.name} />
+                                <AvatarFallback>{character.name.slice(0, 1)}</AvatarFallback>
+                            </Avatar>
+                        ))}
+                    {characters.length > 3 && (
+                        <>
+                            {characters.slice(0, 2).map((character) => (
+                                <Avatar key={character.id} size="sm">
+                                    <AvatarImage src={character.icon} alt={character.name} />
+                                    <AvatarFallback>{character.name.slice(0, 1)}</AvatarFallback>
+                                </Avatar>
+                            ))}
+                            <AvatarGroupCount className="size-6 bg-black/50 text-white">
+                                +{characters.length - 2}
+                            </AvatarGroupCount>
+                        </>
+                    )}
+                </AvatarGroup>
+            )}
+        </Button>
+    );
+
+    return (
+        <Tooltip>
+            <TooltipTrigger render={<span />}>{trigger}</TooltipTrigger>
+            <TooltipContent>{ariaLabel}</TooltipContent>
+        </Tooltip>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/screens/navigation/index.tsx

@@ -0,0 +1,30 @@
+import { Activities } from "@/components/screens/navigation/quick-activities";
+import { Rooms } from "@/components/screens/navigation/quick-rooms";
+import { Time } from "@/components/screens/navigation/time";
+import { ToolsLeft, ToolsRight } from "@/components/screens/navigation/tools";
+
+export function NavigationScreen() {
+    return (
+        <div className="absolute inset-0 pointer-events-none flex flex-col">
+            {/* Top row: tools and time */}
+            <div className="flex-none relative flex flex-row items-start opacity-50 hover:opacity-100 transition-opacity">
+                <ToolsLeft />
+                <div className="absolute left-1/2 -translate-x-1/2">
+                    <Time />
+                </div>
+                <div className="flex-1" />
+                <ToolsRight />
+            </div>
+
+            {/* Bottom area: fills remaining height — Rooms bottom-left, Activities bottom-right */}
+            <div className="flex-1 min-h-0 flex flex-row">
+                <div className="flex-1 min-w-0 overflow-hidden self-end opacity-50 hover:opacity-100 transition-opacity">
+                    <Rooms />
+                </div>
+                <div className="flex-none self-stretch opacity-50 hover:opacity-100 transition-opacity">
+                    <Activities />
+                </div>
+            </div>
+        </div>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/screens/navigation/quick-activities.tsx

@@ -0,0 +1,24 @@
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useActivitiesHotkey } from "@/lib/hooks/hotkeys-hooks";
+import { useQueryCurrentRoomId, useQueryRoom } from "@/lib/query/room-query";
+import { ActivityButton, CommitmentButton } from "./activity-buttons";
+
+export function Activities() {
+    const { data: currentRoomId } = useQueryCurrentRoomId();
+    const { data } = useQueryRoom(currentRoomId);
+    const { room: { activities = [], routine = [] } = {} } = data || {};
+    const { containerRef } = useActivitiesHotkey();
+
+    return (
+        <ScrollArea className="h-full">
+            <div ref={containerRef} className="flex min-h-full flex-col-reverse items-end gap-0.5">
+                {routine.map((item) => (
+                    <CommitmentButton key={`commitment-${item.id}`} id={item.id} />
+                ))}
+                {activities.map((item) => (
+                    <ActivityButton key={`activity-${item.id}`} id={item.id} />
+                ))}
+            </div>
+        </ScrollArea>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/screens/navigation/quick-rooms.tsx

@@ -0,0 +1,122 @@
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarGroup,
+    AvatarGroupCount,
+    AvatarImage,
+} from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Image } from "@/components/ui/image";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useRoomHotkey } from "@/lib/hooks/hotkeys-hooks";
+import { useQueryCurrentRoomId, useQueryQuickRooms, useQueryRoom } from "@/lib/query/room-query";
+import { cn } from "@/lib/utils";
+import type TimeSlotsImage from "@/models/TimeSlotsImage";
+import { useMemo, type ComponentProps } from "react";
+
+export function Rooms() {
+    const { data: rooms = [] } = useQueryQuickRooms();
+
+    return (
+        <ScrollArea className="w-full">
+            <div className="flex flex-row items-end justify-start gap-0.5">
+                {rooms.map((room, index) => (
+                    <RoomButton key={`room-${room.id}`} roomId={room.id} index={index} />
+                ))}
+            </div>
+            <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+    );
+}
+
+function RoomButton({ roomId, index }: { roomId: string; index: number }) {
+    const { data } = useQueryRoom(roomId);
+    const { data: currentRoomId } = useQueryCurrentRoomId();
+    const { room, icon } = data || {};
+    const { disabled, name, characters } = room || {};
+    const selected = useMemo(() => currentRoomId === roomId, [currentRoomId, roomId]);
+
+    const { navigateHere } = useRoomHotkey(roomId, index, disabled, selected);
+
+    return (
+        <RoomNavButton
+            disabled={disabled || selected}
+            selected={selected}
+            onClick={navigateHere}
+            ariaLabel={name || ""}
+            image={icon}
+        >
+            {characters && (
+                <AvatarGroup className="absolute right-0 bottom-0">
+                    {characters.length <= 3 &&
+                        characters.map((character) => (
+                            <Avatar key={character.id} size="sm">
+                                <AvatarImage src={character.icon} alt={character.name} />
+                                <AvatarFallback>{character.name.slice(0, 1)}</AvatarFallback>
+                            </Avatar>
+                        ))}
+                    {characters.length > 3 && (
+                        <>
+                            {characters.slice(0, 2).map((character) => (
+                                <Avatar key={character.id} size="sm">
+                                    <AvatarImage src={character.icon} alt={character.name} />
+                                    <AvatarFallback>{character.name.slice(0, 1)}</AvatarFallback>
+                                </Avatar>
+                            ))}
+                            <AvatarGroupCount className="size-6 bg-black/50 text-white">
+                                +{characters.length - 2}
+                            </AvatarGroupCount>
+                        </>
+                    )}
+                </AvatarGroup>
+            )}
+        </RoomNavButton>
+    );
+}
+
+export function RoomNavButton({
+    ariaLabel,
+    selected,
+    image,
+    className,
+    disabled,
+    children,
+    ...rest
+}: ComponentProps<typeof Button> & {
+    ariaLabel: string;
+    selected?: boolean;
+    image?: string | TimeSlotsImage;
+}) {
+    const trigger = (
+        <Button
+            {...rest}
+            disabled={disabled}
+            size="icon-lg"
+            className={cn(
+                "relative h-8 w-14 overflow-hidden rounded-lg border-3 shadow-lg sm:h-11 sm:w-20 md:h-16 md:w-28",
+                selected ? "border-primary" : "border-background",
+                className,
+            )}
+        >
+            {image && (
+                <Image
+                    src={image}
+                    alt={ariaLabel}
+                    layout="constrained"
+                    width={128}
+                    height={128}
+                    className="absolute inset-0 size-full object-cover"
+                />
+            )}
+            {children}
+        </Button>
+    );
+
+    return (
+        <Tooltip>
+            <TooltipTrigger render={<span />}>{trigger}</TooltipTrigger>
+            <TooltipContent>{ariaLabel}</TooltipContent>
+        </Tooltip>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/screens/navigation/time.tsx

@@ -0,0 +1,54 @@
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { overlayTextShadowClass } from "@/constants";
+import useTimeTracker from "@/lib/hooks/nqtr-hooks";
+import { useQueryTime } from "@/lib/query/time-query";
+import { GameStatus } from "@/lib/stores/game-status-store";
+import { cn } from "@/lib/utils";
+import { useSelector } from "@tanstack/react-store";
+import { Clock } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export function Time() {
+    const { t } = useTranslation(["ui"]);
+    const { wait } = useTimeTracker();
+    const { data: { hourFormatted = "...", dayName } = {} } = useQueryTime();
+    const disabled = useSelector(GameStatus.store, (state) => state.loading);
+
+    return (
+        <div className="flex flex-row items-center gap-1">
+            <div className="flex flex-col items-center">
+                <span
+                    className={cn(
+                        "text-white text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl",
+                        overlayTextShadowClass,
+                    )}
+                >
+                    {hourFormatted}
+                </span>
+                <span
+                    className={cn(
+                        "text-white text-xs sm:text-sm md:text-base lg:text-xl xl:text-2xl",
+                        overlayTextShadowClass,
+                    )}
+                >
+                    {dayName}
+                </span>
+            </div>
+            <Tooltip>
+                <TooltipTrigger render={<span />}>
+                    <Button
+                        variant={"secondary"}
+                        size="icon"
+                        className="rounded-lg"
+                        onClick={() => wait(1)}
+                        disabled={disabled}
+                    >
+                        <Clock className="size-5 sm:size-5 md:size-5 lg:size-6 xl:size-7" />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("wait")}</TooltipContent>
+            </Tooltip>
+        </div>
+    );
+}

package/template-nqtr-react-vite-muijoy-ink/src/components/screens/navigation/tools.tsx

@@ -0,0 +1,102 @@
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
+import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
+import { CURRENT_MAP_USE_QUERY_KEY } from "@/lib/query/map-query";
+import { GameStatus } from "@/lib/stores/game-status-store";
+import { cn } from "@/lib/utils";
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { useSelector } from "@tanstack/react-store";
+import { MapIcon, NotebookPen, Save, Settings } from "lucide-react";
+import type { ComponentProps } from "react";
+import { useTranslation } from "react-i18next";
+
+export function ToolsLeft() {
+    const setOpenSettings = useSetSearchParamState<boolean>("settings");
+    const setOpenMemo = useSetSearchParamState<boolean>("memo");
+    const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+    const { t } = useTranslation(["ui"]);
+
+    return (
+        <ScrollArea>
+            <div className="flex flex-row items-end justify-center gap-0.5">
+                <ToolButton ariaLabel={t("settings")} onClick={() => setOpenSettings(true)}>
+                    <Settings className="size-6 sm:size-8 md:size-10" />
+                </ToolButton>
+                <ToolButton
+                    ariaLabel={`${t("save")}/${t("load")}`}
+                    onClick={() => {
+                        setOpenSettings(true);
+                        setSettingsTab("menus/save-load");
+                    }}
+                >
+                    <Save className="size-6 sm:size-8 md:size-10" />
+                </ToolButton>
+                <ToolButton
+                    ariaLabel={t("memo")}
+                    onClick={() => setOpenMemo((prev) => !prev || undefined)}
+                >
+                    <NotebookPen className="size-6 sm:size-8 md:size-10" />
+                </ToolButton>
+            </div>
+        </ScrollArea>
+    );
+}
+
+export function ToolsRight() {
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const { t } = useTranslation(["ui"]);
+
+    return (
+        <ScrollArea>
+            <div className="flex flex-row items-end justify-center gap-0.5">
+                <ToolButton
+                    ariaLabel={t("map")}
+                    onClick={() => {
+                        queryClient.invalidateQueries({
+                            queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CURRENT_MAP_USE_QUERY_KEY],
+                        });
+                        navigate({ to: "/game/map" });
+                    }}
+                >
+                    <MapIcon className="size-6 sm:size-8 md:size-10" />
+                </ToolButton>
+            </div>
+        </ScrollArea>
+    );
+}
+
+export function ToolButton({
+    ariaLabel,
+    className,
+    disabled,
+    children,
+    ...rest
+}: ComponentProps<typeof Button> & {
+    ariaLabel: string;
+}) {
+    const loading = useSelector(GameStatus.store, (state) => state.loading);
+
+    return (
+        <Tooltip>
+            <TooltipTrigger render={<span />}>
+                <Button
+                    {...rest}
+                    disabled={disabled ?? loading}
+                    size="icon-lg"
+                    variant={"secondary"}
+                    className={cn(
+                        "relative size-9 overflow-hidden rounded-lg shadow-lg sm:size-12 md:size-16",
+                        className,
+                    )}
+                >
+                    {children}
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>{ariaLabel}</TooltipContent>
+        </Tooltip>
+    );
+}