proper card layout

app/[gameID]/page.tsx

@@ -8,6 +8,19 @@ import Card from '@/components/Card';
 
 import type { GameUpdate, ClientUpdate, StandardGameCard, TarokkaGameCard } from '@/types';
 
+// map our five cards to their appropriate
+// locations in a 3x3 grid
+// █1█
+// 042
+// █3█
+const cardMap = {
+	3: 0,
+	1: 1,
+	5: 2,
+	7: 3,
+	4: 4,
+};
+
 export default function GamePage() {
 	const { gameID: gameIDParam } = useParams();
 
@@ -52,20 +65,21 @@ export default function GamePage() {
 		socket.emit('flip-card', flip);
 	};
 
+	// map our five Tarokka cards to their proper locations in a 3x3 grid
+	// common deck cards: left, top, and right
+	// high deck cards: bottom and center
+	const arrangeCards = (_cell: any, index: number) => cards[cardMap[index]];
+
 	return cards.length ? (
 		<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
 			<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 })
-					const cardIndex = [1, 3, 4, 5, 7].indexOf(i);
+					.map(arrangeCards)
-
+					.map((card, index) => (
-					return (
+						<div key={index} className="aspect-[2/3]}">
-						<div key={i} className="aspect-[2/3]}">
+							{card && <Card card={card} flipAction={() => flipCard(cardMap[index])} />}
-							{cardIndex !== -1 && (
-								<Card card={cards[cardIndex]} flipAction={() => flipCard(cardIndex)} />
-							)}
 						</div>
-					);
+					))}
-				})}
 			</div>
 		</main>
 	) : null;

lib/GameStore.ts

@@ -17,7 +17,7 @@ export default class GameStore {
 		const newGame: GameState = {
 			id,
 			players: new Set(),
-			cards: deck.select(5).map((card) => ({ ...card, flipped: false })),
+			cards: deck.getHand(),
 			lastUpdated: Date.now(),
 		};
 

lib/TarokkaDeck.ts

@@ -1,18 +1,22 @@
 import getRandomItems from '../tools/getRandomItems';
 import cards from '../constants/tarokkaCards';
-import type { TarokkaCard } from '../types';
+import type { TarokkaCard, TarokkaGameCard } from '../types';
 
 export default class TarokkaDeck {
-	private deck: TarokkaCard[] = [];
+	private highDeck: TarokkaCard[] = [];
+	private commonDeck: TarokkaCard[] = [];
 	private backs: TarokkaCard[] = [];
 
 	constructor() {
-		this.deck = cards.filter((card) => !card.back);
+		this.highDeck = cards.filter((card) => !card.back && card.suit === 'High Deck');
+		this.commonDeck = cards.filter((card) => !card.back && card.suit !== 'High Deck');
 		this.backs = cards.filter((card) => card.back);
 	}
 
-	select(count: number): TarokkaCard[] {
+	getHand(): TarokkaGameCard[] {
-		return getRandomItems(this.deck, count);
+		return [...getRandomItems(this.commonDeck, 3), ...getRandomItems(this.highDeck, 2)].map(
+			(card) => ({ ...card, flipped: false }),
+		);
 	}
 
 	getBack(): TarokkaCard {

types/index.ts

@@ -30,13 +30,13 @@ export interface TarokkaGameCard extends TarokkaCard {
 export interface GameState {
 	id: string;
 	players: Set<string>;
-	cards: StandardGameCard[] | TarokkaGameCard[];
+	cards: TarokkaGameCard[];
 	lastUpdated: number;
 }
 
 export interface GameUpdate {
 	id: string;
-	cards: StandardGameCard[] | TarokkaGameCard[];
+	cards: TarokkaGameCard[];
 }
 
 export interface ClientUpdate {