Quintine
e3cfd82540
Wrap existing physical hand cards with local name search, printed-category filters and saved/name/category display order. Preserve card IDs, actions and inspectors, keep required decisions outside filtering, and recompute results from current owned cards. Provide count, clear filters, keyboard scrolling, separate empty/no-match states and internal guidance. Filters reset on leaving the hand tab, changing seats or refreshing; saved order is never modified. Correct the stale Harass availability note to reflect connected allocation. Six focused tests cover normalized literal search, duplicate physical IDs, canonical expansion categories, stable immutable sorting, current holdings, JSON restoration, full-table per-seat privacy and empty setup messaging. Independent review found no material issue. Types, lint, all 4996 offline tests and production build pass on stable source. No HTTP, auth, schema or persistence implementation changed, so HTTP tests were not repeated. Browser QA used a new two-player Basic Harkonnen/Easy Atreides game created through genuine setup. Search/category/reset, named inspector and all three sort orders worked. An active no-match filter updated from 0 of 2 to 0 of 4 when a real auction purchase and Harkonnen bonus arrived. Leaving the hand tab and refreshing restored all four cards in their original saved order while the second auction remained at a human decision. Enter in search performed no game action. The internal guide worked by keyboard. At 390px, controls were 44px high with 16px text and 14px labels, form width/scroll width 339px; the focused overflowing card row responded to ArrowRight. Normal viewport restored. Screenshot capture timed out; full visual/screen-reader acceptance and complete expansion/card-effect combinations remain open. All 1538 opening rooms, 3258 seats and auxiliary rows remain unchanged. SQLite integrity and foreign keys pass. Only one isolated QA game, its human seat and entry receipt were added; the AI remains in game state. Healthy server reused without restart, migration, reset or automation. No AI strategy or mode/publication gate changed. Private evidence: 20260921-hand-browsing. Verified source tree: 39dce28efa52dd66baf019baaf8610e6795601b3b569ac4ac0b6f405bffc1d96
65 lines
3.1 KiB
TypeScript
65 lines
3.1 KiB
TypeScript
'use client';
|
||
import { Fragment, useId, useState, type ReactNode } from 'react';
|
||
import Link from 'next/link';
|
||
import type { Card } from '@/game/cards';
|
||
import { browseHand, type HandCategory, type HandSort } from '@/game/hand-browsing';
|
||
import { Button } from './ui/button';
|
||
|
||
export function HandBrowser({ cards, empty, children }: {
|
||
cards: readonly Card[];
|
||
empty: ReactNode;
|
||
children: (card: Card) => ReactNode;
|
||
}) {
|
||
const [query, setQuery] = useState('');
|
||
const [category, setCategory] = useState<HandCategory>('all');
|
||
const [sort, setSort] = useState<HandSort>('hand');
|
||
const gridId = useId();
|
||
const shown = browseHand(cards, query, category, sort);
|
||
const filtered = query !== '' || category !== 'all';
|
||
return (
|
||
<>
|
||
{cards.length > 0 && (
|
||
<search aria-label="Browse your private hand">
|
||
<form className="hand-browse" onSubmit={event => event.preventDefault()}>
|
||
<label>
|
||
Search your hand
|
||
<input type="search" placeholder="Card name" value={query} maxLength={128} autoComplete="off" spellCheck={false}
|
||
aria-controls={gridId} onChange={event => setQuery(event.target.value)} />
|
||
</label>
|
||
<label>
|
||
Printed category
|
||
<select value={category} aria-controls={gridId} onChange={event => setCategory(event.target.value as HandCategory)}>
|
||
<option value="all">All categories</option>
|
||
<option value="weapon">Weapons</option>
|
||
<option value="defense">Defenses</option>
|
||
<option value="worthless">Worthless</option>
|
||
<option value="hero">Cheap Hero / Heroine</option>
|
||
<option value="special">Special</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Display order
|
||
<select value={sort} aria-controls={gridId} onChange={event => setSort(event.target.value as HandSort)}>
|
||
<option value="hand">Hand order</option>
|
||
<option value="name">Name A–Z</option>
|
||
<option value="category">Printed category</option>
|
||
</select>
|
||
</label>
|
||
<div className="hand-browse-results">
|
||
<output aria-live="polite">{shown.length} of {cards.length} {cards.length === 1 ? 'card' : 'cards'} shown</output>
|
||
{filtered && <Button type="button" variant="outline" onClick={() => { setQuery(''); setCategory('all'); }}>Show all cards</Button>}
|
||
<Link href="/rules?topic=hand-browsing#hand-browsing">Hand browsing help</Link>
|
||
</div>
|
||
</form>
|
||
</search>
|
||
)}
|
||
{/* oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Keyboard users need access to this independently scrolling card row. */}
|
||
<section className="hand-grid" id={gridId} aria-label="Your hand cards" tabIndex={0}>
|
||
{cards.length === 0 ? empty : shown.length === 0
|
||
? <p className="hand-browse-empty">No cards match. Change the name or category, or choose Show all cards.</p>
|
||
: shown.map(card => <Fragment key={card.id}>{children(card)}</Fragment>)}
|
||
</section>
|
||
</>
|
||
);
|
||
}
|