init
This commit is contained in:
commit
2af1f281f8
SSH key fingerprint:
SHA256:vW1EA0fRR3Fw+dD/sM0K+x3Il2gSry6YRYHqOeQwrfk
16 changed files with 2965 additions and 0 deletions
228
src/App.tsx
Normal file
228
src/App.tsx
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
// import './App.css' // Removed, now using TailwindCSS
|
||||
import React from 'react'; // Added for useEffect
|
||||
|
||||
// --- Scratch Card Game Types and State ---
|
||||
type Tier = {
|
||||
name: string;
|
||||
unlockPrice: number;
|
||||
buyPrice: number;
|
||||
};
|
||||
|
||||
const TIERS: Tier[] = [
|
||||
{ name: 'Bronze', unlockPrice: 2, buyPrice: 3 },
|
||||
{ name: 'Silver', unlockPrice: 5, buyPrice: 7 },
|
||||
{ name: 'Gold', unlockPrice: 10, buyPrice: 15 },
|
||||
];
|
||||
|
||||
function App() {
|
||||
// --- Game State ---
|
||||
const [money, setMoney] = useState(20); // User starts with $20
|
||||
const [unlockedTiers, setUnlockedTiers] = useState<string[]>([]); // Unlocked tier names
|
||||
const [selectedTier, setSelectedTier] = useState<string | null>(null); // Currently selected tier
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
// --- Card State ---
|
||||
const [card, setCard] = useState<{
|
||||
winningNumbers: number[];
|
||||
fields: { value: number; scratched: boolean; won: number | null }[];
|
||||
tier: Tier | null;
|
||||
} | null>(null);
|
||||
|
||||
// --- Play History State ---
|
||||
const [history, setHistory] = useState<{
|
||||
tier: string;
|
||||
winnings: number;
|
||||
winningNumbers: number[];
|
||||
fields: number[];
|
||||
}[]>([]);
|
||||
|
||||
// --- Tier Unlock Logic ---
|
||||
const handleUnlockTier = (tier: Tier) => {
|
||||
if (money >= tier.unlockPrice && !unlockedTiers.includes(tier.name)) {
|
||||
setMoney(money - tier.unlockPrice);
|
||||
setUnlockedTiers([...unlockedTiers, tier.name]);
|
||||
}
|
||||
};
|
||||
|
||||
// --- Tier Select Logic ---
|
||||
const handleSelectTier = (tier: Tier) => {
|
||||
if (unlockedTiers.includes(tier.name)) {
|
||||
setSelectedTier(tier.name);
|
||||
}
|
||||
};
|
||||
|
||||
// --- Buy Card Logic ---
|
||||
const handleBuyCard = () => {
|
||||
if (!selectedTier) return;
|
||||
const tier = TIERS.find((t) => t.name === selectedTier);
|
||||
if (!tier || money < tier.buyPrice) return;
|
||||
// Generate 3 unique winning numbers (1-9)
|
||||
const winningNumbers: number[] = [];
|
||||
while (winningNumbers.length < 3) {
|
||||
const n = Math.floor(Math.random() * 9) + 1;
|
||||
if (!winningNumbers.includes(n)) winningNumbers.push(n);
|
||||
}
|
||||
// Generate 6 random fields (1-9)
|
||||
const fields = Array.from({ length: 6 }, () => ({ value: Math.floor(Math.random() * 9) + 1, scratched: false, won: null }));
|
||||
setMoney(money - tier.buyPrice);
|
||||
setCard({ winningNumbers, fields, tier });
|
||||
// Add to history (winnings will be updated after all fields scratched)
|
||||
setHistory((h) => [
|
||||
{ tier: tier.name, winnings: 0, winningNumbers, fields: fields.map(f => f.value) },
|
||||
...h.slice(0, 9)
|
||||
]);
|
||||
};
|
||||
|
||||
// --- Update history winnings after all fields scratched ---
|
||||
React.useEffect(() => {
|
||||
if (!card) return;
|
||||
const allScratched = card.fields.every(f => f.scratched);
|
||||
if (allScratched) {
|
||||
setHistory((h) => {
|
||||
const [latest, ...rest] = h;
|
||||
if (!latest || latest.winningNumbers !== card.winningNumbers) return h;
|
||||
return [
|
||||
{ ...latest, winnings: card.fields.reduce((sum, f) => sum + (f.won || 0), 0) },
|
||||
...rest
|
||||
];
|
||||
});
|
||||
}
|
||||
}, [card]);
|
||||
|
||||
// --- UI ---
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
|
||||
<h1 className="text-3xl font-bold text-blue-600 mb-2">Scratch Card Game</h1>
|
||||
<div className="mb-4 text-lg">Money: <span className="font-mono font-bold">${money}</span></div>
|
||||
<div className="flex gap-6 mb-8">
|
||||
{TIERS.map((tier) => {
|
||||
const unlocked = unlockedTiers.includes(tier.name);
|
||||
return (
|
||||
<div key={tier.name} className="bg-white rounded-lg shadow p-4 flex flex-col items-center w-40">
|
||||
<div className="text-xl font-semibold mb-1">{tier.name}</div>
|
||||
<div className="text-gray-500 text-sm mb-2">Unlock: ${tier.unlockPrice}</div>
|
||||
<div className="text-gray-500 text-sm mb-2">Buy: ${tier.buyPrice}</div>
|
||||
{!unlocked ? (
|
||||
<button
|
||||
className="bg-yellow-400 hover:bg-yellow-500 text-white font-bold px-4 py-1 rounded mb-1 disabled:opacity-50"
|
||||
disabled={money < tier.unlockPrice}
|
||||
onClick={() => handleUnlockTier(tier)}
|
||||
>
|
||||
Unlock
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className={`bg-blue-500 hover:bg-blue-600 text-white font-bold px-4 py-1 rounded mb-1 ${selectedTier === tier.name ? 'ring-2 ring-blue-400' : ''}`}
|
||||
onClick={() => handleSelectTier(tier)}
|
||||
>
|
||||
{selectedTier === tier.name ? 'Selected' : 'Select'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* Tier Info and Card Summary */}
|
||||
{selectedTier && (
|
||||
<div className="mb-4 text-sm text-gray-700">
|
||||
<span className="font-semibold">Selected Tier:</span> {selectedTier} |
|
||||
<span className="ml-2">Unlock: ${TIERS.find(t => t.name === selectedTier)?.unlockPrice}</span> |
|
||||
<span className="ml-2">Buy: ${TIERS.find(t => t.name === selectedTier)?.buyPrice}</span>
|
||||
</div>
|
||||
)}
|
||||
{card && (
|
||||
<div className="mb-2 text-sm text-gray-600">
|
||||
<span className="font-semibold">Winnings this card: </span>
|
||||
${card.fields.reduce((sum, f) => sum + (f.won || 0), 0)}
|
||||
</div>
|
||||
)}
|
||||
{/* Play History */}
|
||||
{history.length > 0 && (
|
||||
<div className="w-full max-w-md mb-8">
|
||||
<div className="font-semibold text-gray-700 mb-2">Play History</div>
|
||||
<ul className="divide-y divide-gray-200 bg-white rounded-lg shadow">
|
||||
{history.map((h, i) => (
|
||||
<li key={i} className="p-3 flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<span className="font-bold text-blue-600">{h.tier}</span>
|
||||
<span className="ml-2 text-gray-500">Win: ${h.winnings}</span>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-2 sm:mt-0">
|
||||
{h.winningNumbers.map((n, j) => (
|
||||
<span key={j} className="w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-700 text-xs font-bold border border-blue-300">{n}</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-1 mt-2 sm:mt-0">
|
||||
{h.fields.map((n, j) => (
|
||||
<span key={j} className="w-5 h-5 flex items-center justify-center rounded bg-gray-100 text-gray-700 text-xs border border-gray-300">{n}</span>
|
||||
))}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{/* Card Buy Button */}
|
||||
{selectedTier && (
|
||||
<button
|
||||
className="mb-6 bg-green-500 hover:bg-green-600 text-white font-bold px-6 py-2 rounded disabled:opacity-50"
|
||||
disabled={money < (TIERS.find(t => t.name === selectedTier)?.buyPrice ?? 0)}
|
||||
onClick={handleBuyCard}
|
||||
>
|
||||
Buy Scratch Card
|
||||
</button>
|
||||
)}
|
||||
{/* Card UI */}
|
||||
{card && (
|
||||
<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}
|
||||
onClick={() => {
|
||||
if (field.scratched) 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>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
Loading…
Add table
Add a link
Reference in a new issue