first prototype

wizard_website/src/screens/GameScreen/TrumpPicker.tsx

@@ -0,0 +1,22 @@
+import type { Suit } from '../../api/types'
+import { SUIT_NAMES, SUITS } from '../../util/cards'
+import styles from './TrumpPicker.module.css'
+
+interface TrumpPickerProps {
+  onChoose: (suit: Suit) => void
+}
+
+export function TrumpPicker({ onChoose }: TrumpPickerProps) {
+  return (
+    <div className={styles.panel}>
+      <p className={styles.question}>A wizard was turned up — choose the trump suit.</p>
+      <div className={styles.suits}>
+        {SUITS.map((suit) => (
+          <button key={suit} type="button" className={`${styles.suit} ${styles[suit]}`} onClick={() => onChoose(suit)}>
+            {SUIT_NAMES[suit]}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}