79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
'use client';
|
||
|
||
import { useId } from 'react';
|
||
import { Input } from '@/components/ui/input';
|
||
import { TRUTH_CARD_NAMES } from '@/game/truthtrance';
|
||
import type { CardCountFact } from '@/game/truthtrance-card-count';
|
||
|
||
export function CardCountFields({
|
||
value,
|
||
onChange,
|
||
}: {
|
||
value: CardCountFact;
|
||
onChange: (fact: CardCountFact) => void;
|
||
}) {
|
||
const id = useId();
|
||
const invalid = !Number.isSafeInteger(value.value) || value.value < 0;
|
||
return (
|
||
<>
|
||
<label>
|
||
Card name
|
||
<select
|
||
value={value.name}
|
||
onChange={(event) => onChange({ ...value, name: event.target.value })}
|
||
>
|
||
{TRUTH_CARD_NAMES.map((name) => (
|
||
<option key={name}>{name}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Compare card count
|
||
<select
|
||
value={value.compare}
|
||
onChange={(event) =>
|
||
onChange({
|
||
...value,
|
||
compare: event.target.value as CardCountFact['compare'],
|
||
})
|
||
}
|
||
>
|
||
<option value="eq">Exactly</option>
|
||
<option value="gte">At least</option>
|
||
<option value="lte">At most</option>
|
||
</select>
|
||
</label>
|
||
<label htmlFor={`${id}-count`}>
|
||
Number of copies
|
||
<Input
|
||
id={`${id}-count`}
|
||
type="number"
|
||
min={0}
|
||
max={Number.MAX_SAFE_INTEGER}
|
||
step={1}
|
||
required
|
||
value={Number.isNaN(value.value) ? '' : value.value}
|
||
aria-invalid={invalid}
|
||
aria-describedby={`${id}-help${invalid ? ` ${id}-error` : ''}`}
|
||
onChange={(event) =>
|
||
onChange({ ...value, value: event.currentTarget.valueAsNumber })
|
||
}
|
||
/>
|
||
</label>
|
||
<p id={`${id}-help`} className="fine">
|
||
Counts copies of this exact named card in the player’s hand now. Cards
|
||
in the deck, discard pile, or a separate cache do not count. The answer
|
||
reveals only whether the comparison is true.
|
||
</p>
|
||
{invalid && (
|
||
<p id={`${id}-error`} className="notice" role="alert">
|
||
{Number.isInteger(value.value) &&
|
||
value.value > Number.MAX_SAFE_INTEGER
|
||
? 'That card count is too large.'
|
||
: 'Enter a whole card count of zero or more.'}
|
||
</p>
|
||
)}
|
||
</>
|
||
);
|
||
}
|