Implement the 021-bestiary-statblock feature that adds a searchable D&D 2024 Monster Manual creature library with inline autocomplete suggestions, full stat block display in a fixed side panel, auto-numbering of duplicate creature names, HP/AC pre-fill from bestiary data, and automatic stat block display on turn change for wide viewports

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 11:01:07 +01:00
parent 04a4f18f98
commit fa078be2f9
30 changed files with 66221 additions and 56 deletions
--- a/apps/web/src/components/stat-block-panel.tsx
+++ b/apps/web/src/components/stat-block-panel.tsx
@@ -0,0 +1,77 @@
+import type { Creature } from "@initiative/domain";
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { StatBlock } from "./stat-block.js";
+
+interface StatBlockPanelProps {
+	creature: Creature | null;
+	onClose: () => void;
+}
+
+export function StatBlockPanel({ creature, onClose }: StatBlockPanelProps) {
+	const [isDesktop, setIsDesktop] = useState(
+		() => window.matchMedia("(min-width: 1024px)").matches,
+	);
+
+	useEffect(() => {
+		const mq = window.matchMedia("(min-width: 1024px)");
+		const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, []);
+
+	if (!creature) return null;
+
+	if (isDesktop) {
+		return (
+			<div className="fixed top-0 right-0 bottom-0 flex w-[400px] flex-col border-l border-border bg-card">
+				<div className="flex items-center justify-between border-b border-border px-4 py-2">
+					<span className="text-sm font-semibold text-muted-foreground">
+						Stat Block
+					</span>
+					<button
+						type="button"
+						onClick={onClose}
+						className="text-muted-foreground hover:text-foreground"
+					>
+						<X className="h-4 w-4" />
+					</button>
+				</div>
+				<div className="flex-1 overflow-y-auto p-4">
+					<StatBlock creature={creature} />
+				</div>
+			</div>
+		);
+	}
+
+	// Mobile drawer
+	return (
+		<div className="fixed inset-0 z-50">
+			{/* Backdrop */}
+			<button
+				type="button"
+				className="absolute inset-0 bg-black/50 animate-in fade-in"
+				onClick={onClose}
+				aria-label="Close stat block"
+			/>
+			{/* Drawer */}
+			<div className="absolute top-0 right-0 bottom-0 w-[85%] max-w-md animate-slide-in-right border-l border-border bg-card shadow-xl">
+				<div className="flex items-center justify-between border-b border-border px-4 py-2">
+					<span className="text-sm font-semibold text-muted-foreground">
+						Stat Block
+					</span>
+					<button
+						type="button"
+						onClick={onClose}
+						className="text-muted-foreground hover:text-foreground"
+					>
+						<X className="h-4 w-4" />
+					</button>
+				</div>
+				<div className="h-[calc(100%-41px)] overflow-y-auto p-4">
+					<StatBlock creature={creature} />
+				</div>
+			</div>
+		</div>
+	);
+}