Add condition tooltips with 5.5e descriptions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/components/__tests__/condition-picker.test.tsx

@@ -4,6 +4,7 @@ import "@testing-library/jest-dom/vitest";
 import { CONDITION_DEFINITIONS, type ConditionId } from "@initiative/domain";
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { createRef, type RefObject } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { ConditionPicker } from "../condition-picker";
 
@@ -18,8 +19,13 @@ function renderPicker(
 ) {
 	const onToggle = overrides.onToggle ?? vi.fn();
 	const onClose = overrides.onClose ?? vi.fn();
+	const anchorRef = createRef<HTMLElement>() as RefObject<HTMLElement>;
+	const anchor = document.createElement("div");
+	document.body.appendChild(anchor);
+	(anchorRef as { current: HTMLElement }).current = anchor;
 	const result = render(
 		<ConditionPicker
+			anchorRef={anchorRef}
 			activeConditions={overrides.activeConditions ?? []}
 			onToggle={onToggle}
 			onClose={onClose}

apps/web/src/components/combatant-row.tsx

@@ -6,7 +6,7 @@ import {
 	type PlayerIcon,
 	type RollMode,
 } from "@initiative/domain";
-import { Book, BookOpen, Brain, X } from "lucide-react";
+import { Brain, Pencil, X } from "lucide-react";
 import { type Ref, useCallback, useEffect, useRef, useState } from "react";
 import { useEncounterContext } from "../contexts/encounter-context.js";
 import { useInitiativeRollsContext } from "../contexts/initiative-rolls-context.js";
@@ -47,11 +47,13 @@ function EditableName({
 	combatantId,
 	onRename,
 	color,
+	onToggleStatBlock,
 }: Readonly<{
 	name: string;
 	combatantId: CombatantId;
 	onRename: (id: CombatantId, newName: string) => void;
 	color?: string;
+	onToggleStatBlock?: () => void;
 }>) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(name);
@@ -89,14 +91,31 @@ function EditableName({
 	}
 
 	return (
-		<button
-			type="button"
-			onClick={startEditing}
-			className="cursor-text truncate text-left text-foreground text-sm transition-colors hover:text-hover-neutral"
-			style={color ? { color } : undefined}
-		>
-			{name}
-		</button>
+		<>
+			<button
+				type="button"
+				onClick={onToggleStatBlock}
+				disabled={!onToggleStatBlock}
+				className={cn(
+					"truncate text-left text-sm transition-colors",
+					onToggleStatBlock
+						? "cursor-pointer text-foreground hover:text-hover-neutral"
+						: "cursor-default text-foreground",
+				)}
+				style={color ? { color } : undefined}
+			>
+				{name}
+			</button>
+			<button
+				type="button"
+				onClick={startEditing}
+				title="Rename"
+				aria-label="Rename"
+				className="inline-flex shrink-0 items-center rounded p-0.5 text-muted-foreground opacity-0 pointer-coarse:opacity-100 transition-colors transition-opacity hover:bg-hover-neutral-bg hover:text-hover-neutral focus:opacity-100 group-hover:opacity-100"
+			>
+				<Pencil size={14} />
+			</button>
+		</>
 	);
 }
 
@@ -428,14 +447,22 @@ export function CombatantRow({
 		toggleCondition,
 		toggleConcentration,
 	} = useEncounterContext();
-	const { selectedCreatureId, showCreature } = useSidePanelContext();
+	const { selectedCreatureId, showCreature, toggleCollapse } =
+		useSidePanelContext();
 	const { handleRollInitiative } = useInitiativeRollsContext();
 
 	// Derive what was previously conditional props
 	const isStatBlockOpen = combatant.creatureId === selectedCreatureId;
 	const { creatureId } = combatant;
-	const onShowStatBlock = creatureId
-		? () => showCreature(creatureId)
+	const hasStatBlock = !!creatureId;
+	const onToggleStatBlock = hasStatBlock
+		? () => {
+				if (isStatBlockOpen) {
+					toggleCollapse();
+				} else {
+					showCreature(creatureId);
+				}
+			}
 		: undefined;
 	const onRollInitiative = combatant.creatureId
 		? handleRollInitiative
@@ -445,6 +472,7 @@ export function CombatantRow({
 	const status = deriveHpStatus(currentHp, maxHp);
 	const dimmed = status === "unconscious";
 	const [pickerOpen, setPickerOpen] = useState(false);
+	const conditionAnchorRef = useRef<HTMLDivElement>(null);
 
 	const prevHpRef = useRef(currentHp);
 	const [isPulsing, setIsPulsing] = useState(false);
@@ -517,17 +545,6 @@ export function CombatantRow({
 						dimmed && "opacity-50",
 					)}
 				>
-					{!!onShowStatBlock && (
-						<button
-							type="button"
-							onClick={onShowStatBlock}
-							title="View stat block"
-							aria-label="View stat block"
-							className="shrink-0 text-foreground transition-colors hover:text-hover-neutral"
-						>
-							{isStatBlockOpen ? <BookOpen size={16} /> : <Book size={16} />}
-						</button>
-					)}
 					{!!combatant.icon &&
 						!!combatant.color &&
 						(() => {
@@ -549,14 +566,18 @@ export function CombatantRow({
 						combatantId={id}
 						onRename={editCombatant}
 						color={pcColor}
+						onToggleStatBlock={onToggleStatBlock}
 					/>
-					<ConditionTags
-						conditions={combatant.conditions}
-						onRemove={(conditionId) => toggleCondition(id, conditionId)}
-						onOpenPicker={() => setPickerOpen((prev) => !prev)}
-					/>
+					<div ref={conditionAnchorRef}>
+						<ConditionTags
+							conditions={combatant.conditions}
+							onRemove={(conditionId) => toggleCondition(id, conditionId)}
+							onOpenPicker={() => setPickerOpen((prev) => !prev)}
+						/>
+					</div>
 					{!!pickerOpen && (
 						<ConditionPicker
+							anchorRef={conditionAnchorRef}
 							activeConditions={combatant.conditions}
 							onToggle={(conditionId) => toggleCondition(id, conditionId)}
 							onClose={() => setPickerOpen(false)}

apps/web/src/components/condition-picker.tsx

@@ -18,7 +18,9 @@ import {
 	ZapOff,
 } from "lucide-react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { cn } from "../lib/utils";
+import { Tooltip } from "./ui/tooltip.js";
 
 const ICON_MAP: Record<string, LucideIcon> = {
 	EyeOff,
@@ -52,34 +54,45 @@ const COLOR_CLASSES: Record<string, string> = {
 };
 
 interface ConditionPickerProps {
+	anchorRef: React.RefObject<HTMLElement | null>;
 	activeConditions: readonly ConditionId[] | undefined;
 	onToggle: (conditionId: ConditionId) => void;
 	onClose: () => void;
 }
 
 export function ConditionPicker({
+	anchorRef,
 	activeConditions,
 	onToggle,
 	onClose,
 }: Readonly<ConditionPickerProps>) {
 	const ref = useRef<HTMLDivElement>(null);
-	const [flipped, setFlipped] = useState(false);
-	const [maxHeight, setMaxHeight] = useState<number | undefined>(undefined);
+	const [pos, setPos] = useState<{
+		top: number;
+		left: number;
+		maxHeight: number;
+	} | null>(null);
 
 	useLayoutEffect(() => {
+		const anchor = anchorRef.current;
 		const el = ref.current;
-		if (!el) return;
-		const rect = el.getBoundingClientRect();
-		const spaceBelow = window.innerHeight - rect.top;
-		const spaceAbove = rect.bottom;
-		const shouldFlip =
-			rect.bottom > window.innerHeight && spaceAbove > spaceBelow;
-		setFlipped(shouldFlip);
-		const available = shouldFlip ? spaceAbove : spaceBelow;
-		if (rect.height > available) {
-			setMaxHeight(available - 16);
-		}
-	}, []);
+		if (!anchor || !el) return;
+
+		const anchorRect = anchor.getBoundingClientRect();
+		const menuHeight = el.scrollHeight;
+		const pad = 8;
+
+		const spaceBelow = window.innerHeight - anchorRect.bottom - pad;
+		const spaceAbove = anchorRect.top - pad;
+		const openBelow = spaceBelow >= menuHeight || spaceBelow >= spaceAbove;
+
+		const top = openBelow
+			? anchorRect.bottom + 4
+			: Math.max(pad, anchorRect.top - Math.min(menuHeight, spaceAbove) - 4);
+		const maxHeight = openBelow ? spaceBelow : Math.min(menuHeight, spaceAbove);
+
+		setPos({ top, left: anchorRect.left, maxHeight });
+	}, [anchorRef]);
 
 	useEffect(() => {
 		function handleClickOutside(e: MouseEvent) {
@@ -93,14 +106,15 @@ export function ConditionPicker({
 
 	const active = new Set(activeConditions ?? []);
 
-	return (
+	return createPortal(
 		<div
 			ref={ref}
-			className={cn(
-				"card-glow absolute left-0 z-10 w-fit overflow-y-auto rounded-lg border border-border bg-background p-1",
-				flipped ? "bottom-full mb-1" : "top-full mt-1",
-			)}
-			style={maxHeight ? { maxHeight } : undefined}
+			className="card-glow fixed z-50 w-fit overflow-y-auto rounded-lg border border-border bg-background p-1"
+			style={
+				pos
+					? { top: pos.top, left: pos.left, maxHeight: pos.maxHeight }
+					: { visibility: "hidden" as const }
+			}
 		>
 			{CONDITION_DEFINITIONS.map((def) => {
 				const Icon = ICON_MAP[def.iconName];
@@ -108,27 +122,31 @@ export function ConditionPicker({
 				const isActive = active.has(def.id);
 				const colorClass = COLOR_CLASSES[def.color] ?? "text-muted-foreground";
 				return (
-					<button
-						key={def.id}
-						type="button"
-						className={cn(
-							"flex w-full items-center gap-2 rounded px-2 py-1 text-sm transition-colors hover:bg-hover-neutral-bg",
-							isActive && "bg-card/50",
-						)}
-						onClick={() => onToggle(def.id)}
-					>
-						<Icon
-							size={14}
-							className={isActive ? colorClass : "text-muted-foreground"}
-						/>
-						<span
-							className={isActive ? "text-foreground" : "text-muted-foreground"}
+					<Tooltip key={def.id} content={def.description} className="block">
+						<button
+							type="button"
+							className={cn(
+								"flex w-full items-center gap-2 rounded px-2 py-1 text-sm transition-colors hover:bg-hover-neutral-bg",
+								isActive && "bg-card/50",
+							)}
+							onClick={() => onToggle(def.id)}
 						>
-							{def.label}
-						</span>
-					</button>
+							<Icon
+								size={14}
+								className={isActive ? colorClass : "text-muted-foreground"}
+							/>
+							<span
+								className={
+									isActive ? "text-foreground" : "text-muted-foreground"
+								}
+							>
+								{def.label}
+							</span>
+						</button>
+					</Tooltip>
 				);
 			})}
-		</div>
+		</div>,
+		document.body,
 	);
 }

apps/web/src/components/condition-tags.tsx

@@ -19,6 +19,7 @@ import {
 	ZapOff,
 } from "lucide-react";
 import { cn } from "../lib/utils.js";
+import { Tooltip } from "./ui/tooltip.js";
 
 const ICON_MAP: Record<string, LucideIcon> = {
 	EyeOff,
@@ -71,22 +72,22 @@ export function ConditionTags({
 				if (!Icon) return null;
 				const colorClass = COLOR_CLASSES[def.color] ?? "text-muted-foreground";
 				return (
-					<button
-						key={condId}
-						type="button"
-						title={def.label}
-						aria-label={`Remove ${def.label}`}
-						className={cn(
-							"inline-flex items-center rounded p-0.5 transition-colors hover:bg-hover-neutral-bg",
-							colorClass,
-						)}
-						onClick={(e) => {
-							e.stopPropagation();
-							onRemove(condId);
-						}}
-					>
-						<Icon size={14} />
-					</button>
+					<Tooltip key={condId} content={`${def.label}: ${def.description}`}>
+						<button
+							type="button"
+							aria-label={`Remove ${def.label}`}
+							className={cn(
+								"inline-flex items-center rounded p-0.5 transition-colors hover:bg-hover-neutral-bg",
+								colorClass,
+							)}
+							onClick={(e) => {
+								e.stopPropagation();
+								onRemove(condId);
+							}}
+						>
+							<Icon size={14} />
+						</button>
+					</Tooltip>
 				);
 			})}
 			<button

apps/web/src/components/ui/tooltip.tsx

@@ -0,0 +1,55 @@
+import { type ReactNode, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+interface TooltipProps {
+	content: string;
+	children: ReactNode;
+	className?: string;
+}
+
+export function Tooltip({
+	content,
+	children,
+	className,
+}: Readonly<TooltipProps>) {
+	const ref = useRef<HTMLSpanElement>(null);
+	const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+	function show() {
+		const el = ref.current;
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		setPos({
+			top: rect.top - 4,
+			left: rect.left + rect.width / 2,
+		});
+	}
+
+	function hide() {
+		setPos(null);
+	}
+
+	return (
+		<>
+			<span
+				ref={ref}
+				onPointerEnter={show}
+				onPointerLeave={hide}
+				className={className ?? "inline-flex"}
+			>
+				{children}
+			</span>
+			{pos !== null &&
+				createPortal(
+					<div
+						role="tooltip"
+						className="pointer-events-none fixed z-[60] max-w-64 -translate-x-1/2 -translate-y-full rounded-md border border-border bg-background px-2.5 py-1.5 text-foreground text-xs leading-snug shadow-lg"
+						style={{ top: pos.top, left: pos.left }}
+					>
+						{content}
+					</div>,
+					document.body,
+				)}
+		</>
+	);
+}

packages/domain/src/conditions.ts

@@ -18,63 +18,127 @@ export type ConditionId =
 export interface ConditionDefinition {
 	readonly id: ConditionId;
 	readonly label: string;
+	readonly description: string;
 	readonly iconName: string;
 	readonly color: string;
 }
 
 export const CONDITION_DEFINITIONS: readonly ConditionDefinition[] = [
-	{ id: "blinded", label: "Blinded", iconName: "EyeOff", color: "neutral" },
-	{ id: "charmed", label: "Charmed", iconName: "Heart", color: "pink" },
-	{ id: "deafened", label: "Deafened", iconName: "EarOff", color: "neutral" },
+	{
+		id: "blinded",
+		label: "Blinded",
+		description:
+			"Can't see. Auto-fail sight checks. Attacks have Disadvantage; attacks against have Advantage.",
+		iconName: "EyeOff",
+		color: "neutral",
+	},
+	{
+		id: "charmed",
+		label: "Charmed",
+		description:
+			"Can't attack or target the charmer with harmful abilities. Charmer has Advantage on social checks.",
+		iconName: "Heart",
+		color: "pink",
+	},
+	{
+		id: "deafened",
+		label: "Deafened",
+		description: "Can't hear. Auto-fail hearing checks.",
+		iconName: "EarOff",
+		color: "neutral",
+	},
 	{
 		id: "exhaustion",
 		label: "Exhaustion",
+		description:
+			"Subtract exhaustion level from D20 Tests and Spell save DCs. Speed reduced by 5 ft. \u00D7 level. Removed by long rest (1 level) or death at 10 levels.",
 		iconName: "BatteryLow",
 		color: "amber",
 	},
 	{
 		id: "frightened",
 		label: "Frightened",
+		description:
+			"Disadvantage on ability checks and attacks while source of fear is in line of sight. Can't willingly move closer to the source.",
 		iconName: "Siren",
 		color: "orange",
 	},
-	{ id: "grappled", label: "Grappled", iconName: "Hand", color: "neutral" },
+	{
+		id: "grappled",
+		label: "Grappled",
+		description:
+			"Speed is 0 and can't benefit from bonuses to speed. Ends if grappler is Incapacitated or moved out of reach.",
+		iconName: "Hand",
+		color: "neutral",
+	},
 	{
 		id: "incapacitated",
 		label: "Incapacitated",
+		description:
+			"Can't take Actions, Bonus Actions, or Reactions. Concentration is broken.",
 		iconName: "Ban",
 		color: "gray",
 	},
 	{
 		id: "invisible",
 		label: "Invisible",
+		description:
+			"Impossible to see without magic or special sense. Heavily Obscured. Attacks have Advantage; attacks against have Disadvantage.",
 		iconName: "Ghost",
 		color: "violet",
 	},
 	{
 		id: "paralyzed",
 		label: "Paralyzed",
+		description:
+			"Incapacitated. Can't move or speak. Auto-fail Str/Dex saves. Attacks against have Advantage. Hits within 5 ft. are critical.",
 		iconName: "ZapOff",
 		color: "yellow",
 	},
 	{
 		id: "petrified",
 		label: "Petrified",
+		description:
+			"Turned to stone. Weight \u00D710. Incapacitated. Can't move or speak. Attacks against have Advantage. Auto-fail Str/Dex saves. Resistant to all damage. Immune to poison and disease.",
 		iconName: "Gem",
 		color: "slate",
 	},
-	{ id: "poisoned", label: "Poisoned", iconName: "Droplet", color: "green" },
-	{ id: "prone", label: "Prone", iconName: "ArrowDown", color: "neutral" },
+	{
+		id: "poisoned",
+		label: "Poisoned",
+		description: "Disadvantage on attack rolls and ability checks.",
+		iconName: "Droplet",
+		color: "green",
+	},
+	{
+		id: "prone",
+		label: "Prone",
+		description:
+			"Can only crawl (costs extra movement). Disadvantage on attacks. Attacks within 5 ft. have Advantage; ranged attacks have Disadvantage. Standing up costs half movement.",
+		iconName: "ArrowDown",
+		color: "neutral",
+	},
 	{
 		id: "restrained",
 		label: "Restrained",
+		description:
+			"Speed is 0. Attacks have Disadvantage. Attacks against have Advantage. Disadvantage on Dex saves.",
 		iconName: "Link",
 		color: "neutral",
 	},
-	{ id: "stunned", label: "Stunned", iconName: "Sparkles", color: "yellow" },
+	{
+		id: "stunned",
+		label: "Stunned",
+		description:
+			"Incapacitated. Can't move. Can speak only falteringly. Auto-fail Str/Dex saves. Attacks against have Advantage.",
+		iconName: "Sparkles",
+		color: "yellow",
+	},
 	{
 		id: "unconscious",
 		label: "Unconscious",
+		description:
+			"Incapacitated. Can't move or speak. Unaware of surroundings. Drops held items, falls Prone. Auto-fail Str/Dex saves. Attacks against have Advantage. Hits within 5 ft. are critical.",
 		iconName: "Moon",
 		color: "indigo",
 	},