61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
import type { Card, ClientMessage } from '../types'
|
||
import { fetchCatalog } from '../api'
|
||
import { CardView } from './CardView'
|
||
|
||
interface Props {
|
||
canGrant: boolean // shop phase — grants only land then
|
||
pack: string // active pack, so the catalog matches the game
|
||
send: (msg: ClientMessage) => void
|
||
}
|
||
|
||
// DebugPanel is a testing aid (server DEBUG mode only): a collapsible drawer
|
||
// listing every card in the active pack, tier by tier. Clicking one drops it
|
||
// into your deck for free, off-turn.
|
||
export function DebugPanel({ canGrant, pack, send }: Props) {
|
||
const [open, setOpen] = useState(false)
|
||
const [catalog, setCatalog] = useState<Card[]>([])
|
||
|
||
useEffect(() => {
|
||
fetchCatalog(pack)
|
||
.then(setCatalog)
|
||
.catch(() => setCatalog([]))
|
||
}, [pack])
|
||
|
||
const tiers = [...new Set(catalog.map((c) => c.tier ?? 0))].sort((a, b) => a - b)
|
||
|
||
return (
|
||
<div className={`debug-panel ${open ? 'is-open' : ''}`}>
|
||
<button className="debug-toggle" onClick={() => setOpen((o) => !o)}>
|
||
🐛 {open ? '›' : '‹'} Debug
|
||
</button>
|
||
{open && (
|
||
<div className="debug-body">
|
||
<div className="debug-head">
|
||
Buy any card
|
||
{!canGrant && <span className="muted"> · only in the shop</span>}
|
||
</div>
|
||
{tiers.map((tier) => (
|
||
<div key={tier} className="debug-tier">
|
||
<div className="debug-tier-label">Tier {tier}</div>
|
||
<div className="debug-grid">
|
||
{catalog
|
||
.filter((c) => (c.tier ?? 0) === tier)
|
||
.map((c) => (
|
||
<CardView
|
||
key={c.id}
|
||
card={c}
|
||
size="sm"
|
||
disabled={!canGrant}
|
||
onClick={canGrant ? () => send({ type: 'debugAdd', name: c.name }) : undefined}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|