140 lines
3.4 KiB
TypeScript
140 lines
3.4 KiB
TypeScript
import { Heart, Sword } from "lucide-react";
|
|
import {
|
|
useCallback,
|
|
useEffect,
|
|
useLayoutEffect,
|
|
useRef,
|
|
useState,
|
|
} from "react";
|
|
import { Button } from "./ui/button";
|
|
import { Input } from "./ui/input";
|
|
|
|
interface HpAdjustPopoverProps {
|
|
readonly onAdjust: (delta: number) => void;
|
|
readonly onClose: () => void;
|
|
}
|
|
|
|
export function HpAdjustPopover({ onAdjust, onClose }: HpAdjustPopoverProps) {
|
|
const [inputValue, setInputValue] = useState("");
|
|
const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
useLayoutEffect(() => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
const parent = el.parentElement;
|
|
if (!parent) return;
|
|
const trigger = parent.getBoundingClientRect();
|
|
const popover = el.getBoundingClientRect();
|
|
const vw = document.documentElement.clientWidth;
|
|
let left = trigger.left;
|
|
if (left + popover.width > vw) {
|
|
left = vw - popover.width - 8;
|
|
}
|
|
if (left < 8) {
|
|
left = 8;
|
|
}
|
|
setPos({ top: trigger.bottom + 4, left });
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
}, []);
|
|
|
|
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 parsedValue =
|
|
inputValue === "" ? null : Number.parseInt(inputValue, 10);
|
|
const isValid =
|
|
parsedValue !== null && !Number.isNaN(parsedValue) && parsedValue > 0;
|
|
|
|
const applyDelta = useCallback(
|
|
(sign: -1 | 1) => {
|
|
if (inputValue === "") return;
|
|
const n = Number.parseInt(inputValue, 10);
|
|
if (Number.isNaN(n) || n <= 0) return;
|
|
onAdjust(sign * n);
|
|
onClose();
|
|
},
|
|
[inputValue, onAdjust, onClose],
|
|
);
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Enter") {
|
|
if (e.shiftKey) {
|
|
applyDelta(1);
|
|
} else {
|
|
applyDelta(-1);
|
|
}
|
|
} else if (e.key === "Escape") {
|
|
onClose();
|
|
}
|
|
},
|
|
[applyDelta, onClose],
|
|
);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="fixed z-10 rounded-md border border-border bg-background p-2 shadow-lg"
|
|
style={
|
|
pos
|
|
? { top: pos.top, left: pos.left }
|
|
: { visibility: "hidden" as const }
|
|
}
|
|
>
|
|
<div className="flex items-center gap-1">
|
|
<Input
|
|
ref={inputRef}
|
|
type="text"
|
|
inputMode="numeric"
|
|
value={inputValue}
|
|
placeholder="HP"
|
|
className="h-7 w-[7ch] text-center text-sm tabular-nums"
|
|
onChange={(e) => {
|
|
const v = e.target.value;
|
|
if (v === "" || /^\d+$/.test(v)) {
|
|
setInputValue(v);
|
|
}
|
|
}}
|
|
onKeyDown={handleKeyDown}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
disabled={!isValid}
|
|
className="h-7 w-7 shrink-0 text-red-400 hover:bg-red-950 hover:text-red-300"
|
|
onClick={() => applyDelta(-1)}
|
|
title="Apply damage"
|
|
aria-label="Apply damage"
|
|
>
|
|
<Sword size={14} />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
disabled={!isValid}
|
|
className="h-7 w-7 shrink-0 text-emerald-400 hover:bg-emerald-950 hover:text-emerald-300"
|
|
onClick={() => applyDelta(1)}
|
|
title="Apply healing"
|
|
aria-label="Apply healing"
|
|
>
|
|
<Heart size={14} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|