gavin/Tarokka
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

background image and touch-up

Browse Source
This commit is contained in:
Gavin McDonald
2025-04-10 12:15:54 -04:00
parent 5fc5fcd486
commit ffa9c5a9a6
3 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/[gameID]/page.tsx
View File

@@ -6,13 +6,13 @@ import { socket } from "@/socket";
import Card from '@/components/Card'; import Card from '@/components/Card';
import type { GameCard, GameUpdate, ClientUpdate } from '@/types'; import type { GameUpdate, ClientUpdate, StandardGameCard, TarokkaGameCard } from '@/types';
export default function GamePage() { export default function GamePage() {
const { gameID: gameIDParam } = useParams(); const { gameID: gameIDParam } = useParams();
const [gameID, setGameID] = useState(''); const [gameID, setGameID] = useState('');
const [cards, setCards] = useState<GameCard[]>([]); const [cards, setCards] = useState<StandardGameCard[] | TarokkaGameCard[]>([]);
useEffect(() => { useEffect(() => {
if (gameIDParam) { if (gameIDParam) {
@@ -51,15 +51,15 @@ export default function GamePage() {
}; };
return cards.length ? ( return cards.length ? (
<main className="min-h-screen flex flex-col items-center justify-center gap-4"> <main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
<h1 className="text-2xl font-bold">Game ID: {gameID}</h1> <h1 className="text-2xl font-bold">Game ID: {gameID}</h1>
<div className="grid grid-cols-3 grid-rows-3 gap-4 w-fit mx-auto"> <div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
{Array.from({ length: 9 }).map((_, i) => { {Array.from({ length: 9 }).map((_, i) => {
const cardIndex = [1, 3, 4, 5, 7].indexOf(i); const cardIndex = [1, 3, 4, 5, 7].indexOf(i);
return ( return (
<div key={i} className="aspect-[2/3] w-24}"> <div key={i} className="aspect-[2/3]}">
{cardIndex !== -1 && <Card card={cards[cardIndex]} flipAction={() => flipCard(cardIndex)} />} {cardIndex !== -1 && <Card card={cards[cardIndex]} flipAction={() => flipCard(cardIndex)} />}
</div> </div>
) )

3
components/Card.tsx
View File

@@ -10,10 +10,11 @@ type CardProps = {
export default function Card({ card: { aria, url }, flipAction }: CardProps) { export default function Card({ card: { aria, url }, flipAction }: CardProps) {
return ( return (
<div <div
className={`w-24 h-32 flex items-center justify-center cursor-pointer`} className="h-[21vh] w-[15vh] flex items-center justify-center cursor-pointer"
onClick={flipAction} onClick={flipAction}
> >
<img <img
className="rounded-xl"
src={url} src={url}
alt={aria} alt={aria}
/> />

4
lib/GameStore.ts
View File

@@ -1,6 +1,6 @@
import Deck from './TarokkaDeck' import Deck from './TarokkaDeck'
import { GameState, GameUpdate } from '../types' import { GameState, GameUpdate, TarokkaGameCard } from '../types'
const deck = new Deck(); const deck = new Deck();
@@ -66,7 +66,7 @@ export default class GameStore {
gameUpdate(game: GameState): GameUpdate { gameUpdate(game: GameState): GameUpdate {
const { id, cards } = game; const { id, cards } = game;
return { id, cards: cards.map(card => card.flipped ? card : deck.getBack()) }; return { id, cards: (cards as TarokkaGameCard[]).map((card: TarokkaGameCard) => card.flipped ? card : { ...deck.getBack(), flipped: false }) };
} }
deleteGame(gameID: string): void { deleteGame(gameID: string): void {