lubiana/rubbellos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better

Browse source
This commit is contained in:
lubiana 2025-07-12 14:10:03 +02:00
parent 2af1f281f8
commit fd393c8d89
Signed by: lubiana
SSH key fingerprint: SHA256:vW1EA0fRR3Fw+dD/sM0K+x3Il2gSry6YRYHqOeQwrfk
1 changed files with 42 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/App.tsx
View file

@ -1,7 +1,4 @@
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 ---
@ -21,7 +18,8 @@ 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
// Remove selectedTier state
// const [selectedTier, setSelectedTier] = useState<string | null>(null); // Currently selected tier
const [count, setCount] = useState(0)
// --- Card State ---
@ -48,17 +46,16 @@ function App() {
};
// --- Tier Select Logic ---
const handleSelectTier = (tier: Tier) => {
if (unlockedTiers.includes(tier.name)) {
setSelectedTier(tier.name);
}
};
// Remove handleSelectTier
// 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;
// Update handleBuyCard to accept tier as argument
const handleBuyCard = (tier: Tier) => {
if (!unlockedTiers.includes(tier.name) || money < tier.buyPrice) return;
// Generate 3 unique winning numbers (1-9)
const winningNumbers: number[] = [];
while (winningNumbers.length < 3) {
@ -115,10 +112,11 @@ function App() {
</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)}
className="bg-green-500 hover:bg-green-600 text-white font-bold px-4 py-1 rounded mb-1 disabled:opacity-50"
disabled={money < tier.buyPrice}
onClick={() => handleBuyCard(tier)}
>
{selectedTier === tier.name ? 'Selected' : 'Select'}
Buy Card
</button>
)}
</div>
@ -126,55 +124,13 @@ function App() {
})}
</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>
)}
{/* Remove all selectedTier-dependent UI (selected tier info, buy button outside tier cards, etc.) */}
{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">
@ -221,6 +177,32 @@ function App() {
<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>
)}
{/* 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>
)}
</div>
)
}