add bingo card player component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/client/src/components/bingo-card.tsx

@@ -0,0 +1,43 @@
+import type { BingoCard as BingoCardType } from "@celebrate-esc/shared"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+
+interface BingoCardProps {
+	card: BingoCardType
+	onTap: (tropeId: string) => void
+}
+
+export function BingoCard({ card, onTap }: BingoCardProps) {
+	return (
+		<Card>
+			<CardHeader className="pb-2">
+				<div className="flex items-center justify-between">
+					<CardTitle>Bingo</CardTitle>
+					{card.hasBingo && (
+						<Badge variant="default" className="bg-green-600">
+							BINGO!
+						</Badge>
+					)}
+				</div>
+			</CardHeader>
+			<CardContent>
+				<div className="grid grid-cols-4 gap-1.5">
+					{card.squares.map((square) => (
+						<button
+							key={square.tropeId}
+							type="button"
+							onClick={() => onTap(square.tropeId)}
+							className={`flex aspect-square items-center justify-center rounded-md border p-1 text-center text-xs leading-tight transition-colors ${
+								square.tapped
+									? "border-primary bg-primary/20 font-medium text-primary"
+									: "border-muted hover:bg-muted/50"
+							}`}
+						>
+							{square.label}
+						</button>
+					))}
+				</div>
+			</CardContent>
+		</Card>
+	)
+}