create-pixi-vn 1.9.7 → 2.0.0

package/template-react-vite-muijoy-tauri/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="skeleton"
+            className={cn("animate-pulse rounded-md bg-muted", className)}
+            {...props}
+        />
+    );
+}
+
+export { Skeleton };

package/template-react-vite-muijoy-tauri/src/components/ui/slider.tsx

@@ -0,0 +1,52 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+
+import { cn } from "@/lib/utils";
+
+function Slider({
+    className,
+    defaultValue,
+    value,
+    min = 0,
+    max = 100,
+    ...props
+}: SliderPrimitive.Root.Props) {
+    const _values = Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max];
+
+    return (
+        <SliderPrimitive.Root
+            className={cn("data-horizontal:w-full data-vertical:h-full", className)}
+            data-slot="slider"
+            defaultValue={defaultValue}
+            value={value}
+            min={min}
+            max={max}
+            thumbAlignment="edge"
+            {...props}
+        >
+            <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
+                <SliderPrimitive.Track
+                    data-slot="slider-track"
+                    className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+                >
+                    <SliderPrimitive.Indicator
+                        data-slot="slider-range"
+                        className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+                    />
+                </SliderPrimitive.Track>
+                {Array.from({ length: _values.length }, (_, index) => (
+                    <SliderPrimitive.Thumb
+                        data-slot="slider-thumb"
+                        key={index}
+                        className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+                    />
+                ))}
+            </SliderPrimitive.Control>
+        </SliderPrimitive.Root>
+    );
+}
+
+export { Slider };

package/template-react-vite-muijoy-tauri/src/components/ui/sonner.tsx

@@ -0,0 +1,43 @@
+import {
+    CircleCheckIcon,
+    InfoIcon,
+    Loader2Icon,
+    OctagonXIcon,
+    TriangleAlertIcon,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+    const { theme = "system" } = useTheme();
+
+    return (
+        <Sonner
+            theme={theme as ToasterProps["theme"]}
+            className="toaster group"
+            icons={{
+                success: <CircleCheckIcon className="size-4" />,
+                info: <InfoIcon className="size-4" />,
+                warning: <TriangleAlertIcon className="size-4" />,
+                error: <OctagonXIcon className="size-4" />,
+                loading: <Loader2Icon className="size-4 animate-spin" />,
+            }}
+            style={
+                {
+                    "--normal-bg": "var(--popover)",
+                    "--normal-text": "var(--popover-foreground)",
+                    "--normal-border": "var(--border)",
+                    "--border-radius": "var(--radius)",
+                } as React.CSSProperties
+            }
+            toastOptions={{
+                classNames: {
+                    toast: "cn-toast",
+                },
+            }}
+            {...props}
+        />
+    );
+};
+
+export { Toaster };

package/template-react-vite-muijoy-tauri/src/components/ui/spinner.tsx

@@ -0,0 +1,15 @@
+import { Loader2Icon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+    return (
+        <Loader2Icon
+            role="status"
+            aria-label="Loading"
+            className={cn("size-4 animate-spin", className)}
+            {...props}
+        />
+    );
+}
+
+export { Spinner };

package/template-react-vite-muijoy-tauri/src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cn } from "@/lib/utils";
+
+function Switch({
+    className,
+    size = "default",
+    ...props
+}: SwitchPrimitive.Root.Props & {
+    size?: "sm" | "default";
+}) {
+    return (
+        <SwitchPrimitive.Root
+            data-slot="switch"
+            data-size={size}
+            className={cn(
+                "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+                className,
+            )}
+            {...props}
+        >
+            <SwitchPrimitive.Thumb
+                data-slot="switch-thumb"
+                className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+            />
+        </SwitchPrimitive.Root>
+    );
+}
+
+export { Switch };

package/template-react-vite-muijoy-tauri/src/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+    return (
+        <textarea
+            data-slot="textarea"
+            className={cn(
+                "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Textarea };

package/template-react-vite-muijoy-tauri/src/components/ui/toggle.tsx

@@ -0,0 +1,43 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+    "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    {
+        variants: {
+            variant: {
+                default: "bg-transparent",
+                outline: "border border-input bg-transparent hover:bg-muted",
+            },
+            size: {
+                default:
+                    "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+                sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+                lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+function Toggle({
+    className,
+    variant = "default",
+    size = "default",
+    ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+    return (
+        <TogglePrimitive
+            data-slot="toggle"
+            className={cn(toggleVariants({ variant, size, className }))}
+            {...props}
+        />
+    );
+}
+
+export { Toggle, toggleVariants };

package/template-react-vite-muijoy-tauri/src/components/ui/tooltip.tsx

@@ -0,0 +1,52 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+    return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+    return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+    return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+    className,
+    side = "top",
+    sideOffset = 4,
+    align = "center",
+    alignOffset = 0,
+    children,
+    ...props
+}: TooltipPrimitive.Popup.Props &
+    Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+    return (
+        <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Positioner
+                align={align}
+                alignOffset={alignOffset}
+                side={side}
+                sideOffset={sideOffset}
+                className="isolate z-50"
+            >
+                <TooltipPrimitive.Popup
+                    data-slot="tooltip-content"
+                    className={cn(
+                        "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+                        className,
+                    )}
+                    {...props}
+                >
+                    {children}
+                    <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+                </TooltipPrimitive.Popup>
+            </TooltipPrimitive.Positioner>
+        </TooltipPrimitive.Portal>
+    );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/template-react-vite-muijoy-tauri/src/constants.ts

@@ -0,0 +1,13 @@
+export const CANVAS_UI_LAYER_NAME = "ui";
+export const CANVAS_MINIGAME_LAYER_NAME = "minigame";
+export const HTML_UI_LAYER_NAME = "ui";
+export const HTML_CANVAS_LAYER_NAME = "canvas";
+
+export const AUDIO_BUNDLE_NAME = "audio";
+export const BGM_CHANNEL_NAME = "bgm";
+export const SFX_CHANNEL_NAME = "sfx";
+
+export const SKIP_DELAY = 100;
+
+/** Text-shadow that outlines text with black so it remains legible over any image or canvas background. */
+export const overlayTextShadowClass = "[text-shadow:0_0_3px_black,0_0_6px_black]";

package/template-react-vite-muijoy-tauri/src/content/characters.ts

@@ -0,0 +1,24 @@
+import Character from "@/models/Character";
+import { RegisteredCharacters } from "@drincs/pixi-vn";
+
+export const mc = new Character("mc", {
+    name: "Me",
+});
+
+export const james = new Character("james", {
+    name: "James",
+    color: "#0084ac",
+});
+
+export const steph_fullname = "Stephanie";
+export const steph = new Character("steph", {
+    name: "Steph",
+    color: "#ac5900",
+});
+
+export const sly = new Character("sly", {
+    name: "Sly",
+    color: "#6d00ac",
+});
+
+RegisteredCharacters.add([mc, james, steph, sly]);

package/template-react-vite-muijoy-tauri/src/content/index.ts

@@ -0,0 +1,4 @@
+// Auto-load every content module for side effects (e.g. narration registrations).
+void import.meta.glob(["./**/*.ts", "./**/*.tsx", "!./index.ts"], {
+    eager: true,
+});

package/template-react-vite-muijoy-tauri/src/content/labels/animations.label.ts

@@ -0,0 +1,22 @@
+import { canvas, type ImageContainer, moveIn, newLabel } from "@drincs/pixi-vn";
+
+export const animation01 = newLabel("animation_01", [
+    async () => {
+        const tickerId = canvas.animate<ImageContainer>(
+            "steph",
+            {
+                scaleX: 1,
+            },
+            { autoplay: false, completeOnContinue: true },
+        );
+
+        await moveIn(
+            "steph",
+            {
+                value: ["fm02-body", "fm02-eyes-joy", "fm02-mouth-smile01"],
+                options: { xAlign: 0.8, yAlign: 1, scale: { y: 1, x: -1 }, anchor: 0.5 },
+            },
+            { direction: "right", ease: "easeInOut", tickerIdToResume: tickerId },
+        );
+    },
+]);