58 lines
No EOL
2 KiB
TypeScript
58 lines
No EOL
2 KiB
TypeScript
import React from 'react';
|
|
import type { Tier } from '../App';
|
|
import type { Upgrades } from './GubbleStore';
|
|
import ScratchFieldButton from './ScratchFieldButton';
|
|
|
|
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>>;
|
|
upgrades?: Upgrades;
|
|
};
|
|
|
|
const Card: React.FC<CardProps> = ({ card, setCard, setMoney, setGubblePoints, upgrades }) => {
|
|
const formatter = Intl.NumberFormat(
|
|
'en',
|
|
{ 'notation': 'compact' }
|
|
)
|
|
return (
|
|
<div className="bg-gray-800 rounded-lg shadow-lg p-6 flex flex-col items-center mb-6 w-full max-w-md">
|
|
<div className="mb-2 text-lg font-semibold text-gray-100">{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-900 text-blue-300 text-xl font-bold border-2 border-blue-700">
|
|
{num}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-4 mb-2">
|
|
{card.fields.map((field, idx) => (
|
|
<ScratchFieldButton
|
|
key={idx}
|
|
field={field}
|
|
idx={idx}
|
|
card={card}
|
|
setCard={setCard}
|
|
setMoney={setMoney}
|
|
setGubblePoints={setGubblePoints}
|
|
upgrades={upgrades}
|
|
formatter={formatter}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="text-xs text-gray-400">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 React.memo(Card);
|