Implement the 017-combat-conditions feature that adds D&D 5e status conditions to combatants with icon tags, color coding, and a compact toggle picker in the encounter tracker
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
@@ -1,7 +1,13 @@
|
||||
import { type CombatantId, deriveHpStatus } from "@initiative/domain";
|
||||
import {
|
||||
type CombatantId,
|
||||
type ConditionId,
|
||||
deriveHpStatus,
|
||||
} from "@initiative/domain";
|
||||
import { Shield, X } from "lucide-react";
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { ConditionPicker } from "./condition-picker";
|
||||
import { ConditionTags } from "./condition-tags";
|
||||
import { QuickHpInput } from "./quick-hp-input";
|
||||
import { Button } from "./ui/button";
|
||||
import { Input } from "./ui/input";
|
||||
@@ -13,6 +19,7 @@ interface Combatant {
|
||||
readonly maxHp?: number;
|
||||
readonly currentHp?: number;
|
||||
readonly ac?: number;
|
||||
readonly conditions?: readonly ConditionId[];
|
||||
}
|
||||
|
||||
interface CombatantRowProps {
|
||||
@@ -24,6 +31,7 @@ interface CombatantRowProps {
|
||||
onSetHp: (id: CombatantId, maxHp: number | undefined) => void;
|
||||
onAdjustHp: (id: CombatantId, delta: number) => void;
|
||||
onSetAc: (id: CombatantId, value: number | undefined) => void;
|
||||
onToggleCondition: (id: CombatantId, conditionId: ConditionId) => void;
|
||||
}
|
||||
|
||||
function EditableName({
|
||||
@@ -231,81 +239,103 @@ export function CombatantRow({
|
||||
onSetHp,
|
||||
onAdjustHp,
|
||||
onSetAc,
|
||||
onToggleCondition,
|
||||
}: CombatantRowProps) {
|
||||
const { id, name, initiative, maxHp, currentHp } = combatant;
|
||||
const status = deriveHpStatus(currentHp, maxHp);
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"grid grid-cols-[3rem_1fr_auto_auto_2rem] items-center gap-3 rounded-md px-3 py-2 transition-colors",
|
||||
"rounded-md px-3 py-2 transition-colors",
|
||||
isActive
|
||||
? "border-l-2 border-l-accent bg-accent/10"
|
||||
: "border-l-2 border-l-transparent",
|
||||
status === "unconscious" && "opacity-50",
|
||||
)}
|
||||
>
|
||||
{/* Initiative */}
|
||||
<Input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
value={initiative ?? ""}
|
||||
placeholder="--"
|
||||
className="h-7 w-[6ch] text-center text-sm tabular-nums"
|
||||
onChange={(e) => {
|
||||
const raw = e.target.value;
|
||||
if (raw === "") {
|
||||
onSetInitiative(id, undefined);
|
||||
} else {
|
||||
const n = Number.parseInt(raw, 10);
|
||||
if (!Number.isNaN(n)) {
|
||||
onSetInitiative(id, n);
|
||||
<div className="grid grid-cols-[3rem_1fr_auto_auto_2rem] items-center gap-3">
|
||||
{/* Initiative */}
|
||||
<Input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
value={initiative ?? ""}
|
||||
placeholder="--"
|
||||
className="h-7 w-[6ch] text-center text-sm tabular-nums"
|
||||
onChange={(e) => {
|
||||
const raw = e.target.value;
|
||||
if (raw === "") {
|
||||
onSetInitiative(id, undefined);
|
||||
} else {
|
||||
const n = Number.parseInt(raw, 10);
|
||||
if (!Number.isNaN(n)) {
|
||||
onSetInitiative(id, n);
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Name */}
|
||||
<EditableName name={name} combatantId={id} onRename={onRename} />
|
||||
|
||||
{/* AC */}
|
||||
<AcInput ac={combatant.ac} onCommit={(v) => onSetAc(id, v)} />
|
||||
|
||||
{/* HP */}
|
||||
<div className="flex items-center gap-1">
|
||||
<CurrentHpInput
|
||||
currentHp={currentHp}
|
||||
maxHp={maxHp}
|
||||
className={cn(
|
||||
status === "bloodied" && "text-amber-400",
|
||||
status === "unconscious" && "text-red-400",
|
||||
)}
|
||||
onCommit={(value) => {
|
||||
if (currentHp === undefined) return;
|
||||
const delta = value - currentHp;
|
||||
if (delta !== 0) onAdjustHp(id, delta);
|
||||
}}
|
||||
/>
|
||||
{maxHp !== undefined && (
|
||||
<span className="text-sm tabular-nums text-muted-foreground">/</span>
|
||||
)}
|
||||
<MaxHpInput maxHp={maxHp} onCommit={(v) => onSetHp(id, v)} />
|
||||
{maxHp !== undefined && (
|
||||
<QuickHpInput combatantId={id} onAdjustHp={onAdjustHp} />
|
||||
)}
|
||||
|
||||
{/* Name */}
|
||||
<EditableName name={name} combatantId={id} onRename={onRename} />
|
||||
|
||||
{/* AC */}
|
||||
<AcInput ac={combatant.ac} onCommit={(v) => onSetAc(id, v)} />
|
||||
|
||||
{/* HP */}
|
||||
<div className="flex items-center gap-1">
|
||||
<CurrentHpInput
|
||||
currentHp={currentHp}
|
||||
maxHp={maxHp}
|
||||
className={cn(
|
||||
status === "bloodied" && "text-amber-400",
|
||||
status === "unconscious" && "text-red-400",
|
||||
)}
|
||||
onCommit={(value) => {
|
||||
if (currentHp === undefined) return;
|
||||
const delta = value - currentHp;
|
||||
if (delta !== 0) onAdjustHp(id, delta);
|
||||
}}
|
||||
/>
|
||||
{maxHp !== undefined && (
|
||||
<span className="text-sm tabular-nums text-muted-foreground">
|
||||
/
|
||||
</span>
|
||||
)}
|
||||
<MaxHpInput maxHp={maxHp} onCommit={(v) => onSetHp(id, v)} />
|
||||
{maxHp !== undefined && (
|
||||
<QuickHpInput combatantId={id} onAdjustHp={onAdjustHp} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => onRemove(id)}
|
||||
title="Remove combatant"
|
||||
aria-label="Remove combatant"
|
||||
>
|
||||
<X size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => onRemove(id)}
|
||||
title="Remove combatant"
|
||||
aria-label="Remove combatant"
|
||||
>
|
||||
<X size={16} />
|
||||
</Button>
|
||||
{/* Conditions */}
|
||||
<div className="relative ml-[calc(3rem+0.75rem)]">
|
||||
<ConditionTags
|
||||
conditions={combatant.conditions}
|
||||
onRemove={(conditionId) => onToggleCondition(id, conditionId)}
|
||||
onOpenPicker={() => setPickerOpen((prev) => !prev)}
|
||||
/>
|
||||
{pickerOpen && (
|
||||
<ConditionPicker
|
||||
activeConditions={combatant.conditions}
|
||||
onToggle={(conditionId) => onToggleCondition(id, conditionId)}
|
||||
onClose={() => setPickerOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
124
apps/web/src/components/condition-picker.tsx
Normal file
124
apps/web/src/components/condition-picker.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import { CONDITION_DEFINITIONS, type ConditionId } from "@initiative/domain";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import {
|
||||
ArrowDown,
|
||||
Ban,
|
||||
BatteryLow,
|
||||
Droplet,
|
||||
EarOff,
|
||||
EyeOff,
|
||||
Gem,
|
||||
Ghost,
|
||||
Hand,
|
||||
Heart,
|
||||
Link,
|
||||
Moon,
|
||||
Siren,
|
||||
Sparkles,
|
||||
ZapOff,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
const ICON_MAP: Record<string, LucideIcon> = {
|
||||
EyeOff,
|
||||
Heart,
|
||||
EarOff,
|
||||
BatteryLow,
|
||||
Siren,
|
||||
Hand,
|
||||
Ban,
|
||||
Ghost,
|
||||
ZapOff,
|
||||
Gem,
|
||||
Droplet,
|
||||
ArrowDown,
|
||||
Link,
|
||||
Sparkles,
|
||||
Moon,
|
||||
};
|
||||
|
||||
const COLOR_CLASSES: Record<string, string> = {
|
||||
neutral: "text-muted-foreground",
|
||||
pink: "text-pink-400",
|
||||
amber: "text-amber-400",
|
||||
orange: "text-orange-400",
|
||||
gray: "text-gray-400",
|
||||
violet: "text-violet-400",
|
||||
yellow: "text-yellow-400",
|
||||
slate: "text-slate-400",
|
||||
green: "text-green-400",
|
||||
indigo: "text-indigo-400",
|
||||
};
|
||||
|
||||
interface ConditionPickerProps {
|
||||
activeConditions: readonly ConditionId[] | undefined;
|
||||
onToggle: (conditionId: ConditionId) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function ConditionPicker({
|
||||
activeConditions,
|
||||
onToggle,
|
||||
onClose,
|
||||
}: ConditionPickerProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [flipped, setFlipped] = useState(false);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const rect = el.getBoundingClientRect();
|
||||
setFlipped(rect.bottom > window.innerHeight);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [onClose]);
|
||||
|
||||
const active = new Set(activeConditions ?? []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"absolute z-10 w-fit rounded-md border border-border bg-background p-1 shadow-lg",
|
||||
flipped ? "bottom-full mb-1" : "mt-1",
|
||||
)}
|
||||
>
|
||||
{CONDITION_DEFINITIONS.map((def) => {
|
||||
const Icon = ICON_MAP[def.iconName];
|
||||
if (!Icon) return null;
|
||||
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-card",
|
||||
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"}
|
||||
>
|
||||
{def.label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
96
apps/web/src/components/condition-tags.tsx
Normal file
96
apps/web/src/components/condition-tags.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import { CONDITION_DEFINITIONS, type ConditionId } from "@initiative/domain";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import {
|
||||
ArrowDown,
|
||||
Ban,
|
||||
BatteryLow,
|
||||
Droplet,
|
||||
EarOff,
|
||||
EyeOff,
|
||||
Gem,
|
||||
Ghost,
|
||||
Hand,
|
||||
Heart,
|
||||
Link,
|
||||
Moon,
|
||||
Plus,
|
||||
Siren,
|
||||
Sparkles,
|
||||
ZapOff,
|
||||
} from "lucide-react";
|
||||
|
||||
const ICON_MAP: Record<string, LucideIcon> = {
|
||||
EyeOff,
|
||||
Heart,
|
||||
EarOff,
|
||||
BatteryLow,
|
||||
Siren,
|
||||
Hand,
|
||||
Ban,
|
||||
Ghost,
|
||||
ZapOff,
|
||||
Gem,
|
||||
Droplet,
|
||||
ArrowDown,
|
||||
Link,
|
||||
Sparkles,
|
||||
Moon,
|
||||
};
|
||||
|
||||
const COLOR_CLASSES: Record<string, string> = {
|
||||
neutral: "text-muted-foreground",
|
||||
pink: "text-pink-400",
|
||||
amber: "text-amber-400",
|
||||
orange: "text-orange-400",
|
||||
gray: "text-gray-400",
|
||||
violet: "text-violet-400",
|
||||
yellow: "text-yellow-400",
|
||||
slate: "text-slate-400",
|
||||
green: "text-green-400",
|
||||
indigo: "text-indigo-400",
|
||||
};
|
||||
|
||||
interface ConditionTagsProps {
|
||||
conditions: readonly ConditionId[] | undefined;
|
||||
onRemove: (conditionId: ConditionId) => void;
|
||||
onOpenPicker: () => void;
|
||||
}
|
||||
|
||||
export function ConditionTags({
|
||||
conditions,
|
||||
onRemove,
|
||||
onOpenPicker,
|
||||
}: ConditionTagsProps) {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-0.5">
|
||||
{conditions?.map((condId) => {
|
||||
const def = CONDITION_DEFINITIONS.find((d) => d.id === condId);
|
||||
if (!def) return null;
|
||||
const Icon = ICON_MAP[def.iconName];
|
||||
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={`inline-flex items-center rounded p-0.5 hover:bg-card transition-colors ${colorClass}`}
|
||||
onClick={() => onRemove(condId)}
|
||||
>
|
||||
<Icon size={14} />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
title="Add condition"
|
||||
aria-label="Add condition"
|
||||
className="inline-flex items-center rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-card transition-colors"
|
||||
onClick={onOpenPicker}
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user