add gubblepoints

src/components/Card.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import type { Tier } from '../App';
+
+type CardProps = {
+  card: {
+    winningNumbers: number[];
+    fields: { value: number; scratched: boolean; won: number | null }[];
+    tier: Tier | null;
+  };
+  setCard: React.Dispatch<React.SetStateAction<{
+    winningNumbers: number[];
+    fields: { value: number; scratched: boolean; won: number | null }[];
+    tier: Tier | null;
+  } | null>>;
+  setMoney: React.Dispatch<React.SetStateAction<number>>;
+  setGubblePoints: React.Dispatch<React.SetStateAction<number>>;
+};
+
+const Card: React.FC<CardProps> = ({ card, setCard, setMoney, setGubblePoints }) => {
+  return (
+    <div className="bg-white rounded-lg shadow p-6 flex flex-col items-center mb-6 w-full max-w-md">
+      <div className="mb-2 text-lg font-semibold text-gray-700">{card.tier?.name} Scratch Card</div>
+      <div className="mb-4 flex gap-4 justify-center">
+        {card.winningNumbers.map((num, i) => (
+          <div key={i} className="w-12 h-12 flex items-center justify-center rounded-full bg-blue-100 text-blue-700 text-xl font-bold border-2 border-blue-400">
+            {num}
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-3 gap-4 mb-2">
+        {card.fields.map((field, idx) => (
+          <button
+            key={idx}
+            className={`w-16 h-16 flex items-center justify-center rounded-lg border-2 text-2xl font-bold transition
+              ${field.scratched ? (field.won ? 'bg-green-200 border-green-500 text-green-700' : 'bg-gray-200 border-gray-400 text-gray-500') : 'bg-yellow-100 border-yellow-400 text-yellow-700 hover:bg-yellow-200'}`}
+            disabled={field.scratched}
+            onMouseEnter={() => {
+              if (field.scratched) return;
+              if (Math.random() < (card.tier?.gubblePointChance ?? 0)) {
+                setGubblePoints((g) => g + 1);
+                return;
+              }
+              // Determine win amount
+              let won = null;
+              if (card.winningNumbers.includes(field.value)) {
+                if (idx < 2) won = Math.floor((card.tier?.buyPrice ?? 0) * 0.5);
+                else if (idx < 4) won = Math.floor((card.tier?.buyPrice ?? 0) * 0.8);
+                else won = Math.floor((card.tier?.buyPrice ?? 0) * 1.2);
+              }
+              setCard((prev) => {
+                if (!prev) return prev;
+                const newFields = prev.fields.map((f, i) => i === idx ? { ...f, scratched: true, won } : f);
+                return { ...prev, fields: newFields };
+              });
+              if (won) setMoney((m) => m + won);
+            }}
+          >
+            {field.scratched ? (
+              <span>{field.value}{field.won ? <span className="block text-xs font-normal text-green-700">+${field.won}</span> : ''}</span>
+            ) : (
+              <span className="text-3xl select-none">?</span>
+            )}
+          </button>
+        ))}
+      </div>
+      <div className="text-xs text-gray-500">Scratch each field one at a time. Winnings: 1-2 = 50%, 3-4 = 80%, 5-6 = 120% of card price.</div>
+    </div>
+  );
+};
+
+export type { CardProps };
+export default Card;