Add DEBUG-gated panel to buy any card in the shop

When the server's DEBUG env var is on, expose a card catalog endpoint and a collapsible client panel that drops any pet or food straight into your deck (free, off-turn). Gated server-side so it is inert in normal play.
2026-07-23 01:07:14 -04:00
parent 71fa20493a
commit b2aa7c5ca3
13 changed files with 282 additions and 7 deletions
@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react'
+import type { Card, ClientMessage } from '../types'
+import { fetchCatalog } from '../api'
+import { CardView } from './CardView'
+
+interface Props {
+  canGrant: boolean // shop/cleanup phase — grants only land then
+  send: (msg: ClientMessage) => void
+}
+
+// DebugPanel is a testing aid (server DEBUG mode only): a collapsible drawer
+// listing every card in the game, tier by tier. Clicking one drops it into
+// your deck for free, off-turn.
+export function DebugPanel({ canGrant, send }: Props) {
+  const [open, setOpen] = useState(false)
+  const [catalog, setCatalog] = useState<Card[]>([])
+
+  useEffect(() => {
+    fetchCatalog()
+      .then(setCatalog)
+      .catch(() => setCatalog([]))
+  }, [])
+
+  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>
+  )
+}