add gubblepoints
This commit is contained in:
parent
eb2308dda4
commit
7b2a4520b5
2 changed files with 96 additions and 70 deletions
94
src/App.tsx
94
src/App.tsx
|
@ -1,31 +1,36 @@
|
|||
import { useState } from 'react'
|
||||
import React from 'react'; // Added for useEffect
|
||||
import Card from './components/Card';
|
||||
|
||||
// --- Scratch Card Game Types and State ---
|
||||
type Tier = {
|
||||
export type Tier = {
|
||||
name: string;
|
||||
unlockPrice: number;
|
||||
buyPrice: number;
|
||||
gubblePointChance: number;
|
||||
};
|
||||
|
||||
const TIERS: Tier[] = [
|
||||
{ name: 'Start', unlockPrice: 0, buyPrice: 1 },
|
||||
{ name: 'Bronze', unlockPrice: 2, buyPrice: 3 },
|
||||
{ name: 'Silver', unlockPrice: 5, buyPrice: 7 },
|
||||
{ name: 'Gold', unlockPrice: 10, buyPrice: 15 },
|
||||
{ name: 'Platinum', unlockPrice: 20, buyPrice: 30 },
|
||||
{ name: 'Diamond', unlockPrice: 50, buyPrice: 75 },
|
||||
{ name: 'Master', unlockPrice: 100, buyPrice: 150 },
|
||||
{ name: 'Legend', unlockPrice: 200, buyPrice: 300 },
|
||||
{ name: 'Ultimate', unlockPrice: 500, buyPrice: 750 },
|
||||
{ name: 'Champion', unlockPrice: 1000, buyPrice: 1500 },
|
||||
{ name: 'Supreme', unlockPrice: 2000, buyPrice: 3000 },
|
||||
{ name: 'Start', unlockPrice: 0, buyPrice: 1, gubblePointChance: 0.0 },
|
||||
{ name: 'Bronze', unlockPrice: 2, buyPrice: 3, gubblePointChance: 0.0 },
|
||||
{ name: 'Silver', unlockPrice: 5, buyPrice: 7, gubblePointChance: 0.0 },
|
||||
{ name: 'Gold', unlockPrice: 10, buyPrice: 15, gubblePointChance: 0.1 },
|
||||
{ name: 'Platinum', unlockPrice: 20, buyPrice: 30, gubblePointChance: 0.1 },
|
||||
{ name: 'Diamond', unlockPrice: 50, buyPrice: 75, gubblePointChance: 0.2 },
|
||||
{ name: 'Master', unlockPrice: 100, buyPrice: 150, gubblePointChance: 0.2 },
|
||||
{ name: 'Legend', unlockPrice: 200, buyPrice: 300, gubblePointChance: 0.3 },
|
||||
{ name: 'Ultimate', unlockPrice: 500, buyPrice: 750, gubblePointChance: 0.3 },
|
||||
{ name: 'Champion', unlockPrice: 1000, buyPrice: 1500, gubblePointChance: 0.4 },
|
||||
{ name: 'Supreme', unlockPrice: 2000, buyPrice: 3000, gubblePointChance: 0.4 },
|
||||
];
|
||||
|
||||
// --- Card Component ---
|
||||
|
||||
function App() {
|
||||
// --- Game State ---
|
||||
const [money, setMoney] = useState(20); // User starts with $20
|
||||
const [unlockedTiers, setUnlockedTiers] = useState<string[]>([]); // Unlocked tier names
|
||||
const [gubblePoints, setGubblePoints] = useState(0);
|
||||
// Remove selectedTier state
|
||||
|
||||
// --- Card State ---
|
||||
|
@ -95,21 +100,13 @@ function App() {
|
|||
}
|
||||
}, [card]);
|
||||
|
||||
// --- Card Disappear After All Scratched ---
|
||||
React.useEffect(() => {
|
||||
if (!card) return;
|
||||
const allScratched = card.fields.every(f => f.scratched);
|
||||
if (allScratched) {
|
||||
const timeout = setTimeout(() => setCard(null), 1500);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [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="mb-4 text-lg">Gubble Points: <span className="font-mono font-bold">{gubblePoints}</span></div>
|
||||
<div className="flex flex-wrap gap-6 mb-8 justify-center">
|
||||
{TIERS.map((tier) => {
|
||||
const unlocked = unlockedTiers.includes(tier.name);
|
||||
|
@ -142,56 +139,13 @@ function App() {
|
|||
{/* Tier Info and Card Summary */}
|
||||
{/* 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>
|
||||
)}
|
||||
{/* 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 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>
|
||||
<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>
|
||||
<Card card={card} setCard={setCard} setMoney={setMoney} setGubblePoints={setGubblePoints} />
|
||||
</>
|
||||
)}
|
||||
{/* Play History */}
|
||||
{history.length > 0 && (
|
||||
|
|
72
src/components/Card.tsx
Normal file
72
src/components/Card.tsx
Normal file
|
@ -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;
|
Loading…
Add table
Add a link
Reference in a new issue