From 12ae8dd6d88fa65b57a3df8ec2f4bb1e47dfb639 Mon Sep 17 00:00:00 2001 From: Gavin McDonald Date: Thu, 26 Jun 2025 13:59:27 -0400 Subject: [PATCH] refactoring --- app/AppContext.tsx | 13 ++++++++++-- app/[gameID]/page.tsx | 41 +++++--------------------------------- components/Card.tsx | 30 +++++++++++----------------- components/TarokkaGrid.tsx | 30 ++++++++++++++++++++++++++++ 4 files changed, 58 insertions(+), 56 deletions(-) create mode 100644 components/TarokkaGrid.tsx diff --git a/app/AppContext.tsx b/app/AppContext.tsx index 6efc698..6f2a99a 100644 --- a/app/AppContext.tsx +++ b/app/AppContext.tsx @@ -26,14 +26,16 @@ export interface AppContext { flipCard: (cardIndex: number) => void; handleSettings: (gameData: GameUpdate) => void; redraw: (cardIndex: number) => void; - select: (cardIndex: number, cardID: string) => void; + select: (cardID: string) => void; setGameID: (gameID: string) => void; + setSelectCardIndex: (cardIndex: number) => void; setTilts: (tilts: Tilt[]) => void; } export function AppProvider({ children }: { children: ReactNode }) { const [gameID, setGameID] = useState(''); const [noGame, setNoGame] = useState(false); + const [selectCardIndex, setSelectCardIndex] = useState(-1); const [gameData, setGameData] = useState(gameStart); const { flipCard, redraw, select, handleSettings } = useSocket({ @@ -44,6 +46,12 @@ export function AppProvider({ children }: { children: ReactNode }) { const [tilts, setTilts] = useState([]); + const handleSelect = (cardID: string) => { + setSelectCardIndex(-1); + + select(selectCardIndex, cardID); + }; + const appInterface = { gameData, noGame, @@ -51,8 +59,9 @@ export function AppProvider({ children }: { children: ReactNode }) { flipCard, handleSettings, redraw, - select, + select: handleSelect, setGameID, + setSelectCardIndex, setTilts, }; diff --git a/app/[gameID]/page.tsx b/app/[gameID]/page.tsx index 5f89a70..a9221a6 100644 --- a/app/[gameID]/page.tsx +++ b/app/[gameID]/page.tsx @@ -5,19 +5,17 @@ import { useParams } from 'next/navigation'; import { useAppContext } from '@/app/AppContext'; import { Eye } from 'lucide-react'; -import Card from '@/components/Card'; +import CardSelect from '@/components/CardSelect'; import CopyButton from '@/components/CopyButton'; import Notes from '@/components/Notes'; import NotFound from '@/components/NotFound'; import Settings from '@/components/Settings'; -import CardSelect from '@/components/CardSelect'; - -import { cardMap, layout } from '@/constants/tarokka'; +import TarokkaGrid from '@/components/TarokkaGrid'; import type { Deck } from '@/types'; export default function GamePage() { - const { gameData, noGame, flipCard, handleSettings, redraw, select, setGameID } = useAppContext(); + const { gameData, noGame, handleSettings, select, setGameID } = useAppContext(); const { gameID } = useParams(); const [selectCard, setSelectCard] = useState(-1); @@ -32,17 +30,6 @@ export default function GamePage() { } }, [gameID]); - const handleSelect = (cardIndex: number, cardID: string) => { - setSelectCard(-1); - - select(cardIndex, cardID); - }; - - // 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: unknown, index: number) => cards[cardMap[index]]; - return noGame ? ( ) : cards ? ( @@ -58,32 +45,14 @@ export default function GamePage() { )} {isDM && } -
- {Array.from({ length: 9 }) - .map(arrangeCards) - .map((card, index) => ( -
- {card && ( - flipCard(cardMap[index])} - redrawAction={() => redraw(cardMap[index])} - selectAction={() => setSelectCard(cardMap[index])} - /> - )} -
- ))} -
+ flipped)} /> setSelectCard(-1)} - selectAction={(cardID) => handleSelect(selectCard, cardID)} + selectAction={select} /> ) : null; diff --git a/components/Card.tsx b/components/Card.tsx index 52c979e..663739c 100644 --- a/components/Card.tsx +++ b/components/Card.tsx @@ -1,43 +1,37 @@ 'use client'; import { useState } from 'react'; +import { useAppContext } from '@/app/AppContext'; import TiltCard from '@/components/TiltCard'; import ToolTip from '@/components/ToolTip'; import StackTheDeck from '@/components/StackTheDeck'; -import tarokkaCards from '@/constants/tarokkaCards'; import getCardInfo from '@/tools/getCardInfo'; import getURL from '@/tools/getURL'; -import { Layout, Settings, TarokkaGameCard } from '@/types'; +import tarokkaCards from '@/constants/tarokkaCards'; +import { layout } from '@/constants/tarokka'; + +import { Settings, TarokkaGameCard } from '@/types'; const cardBack = tarokkaCards.find((card) => card.back)!; type CardProps = { dm: boolean; card: TarokkaGameCard; - position: Layout; + cardIndex: number; settings: Settings; - flipAction: () => void; - redrawAction: () => void; - selectAction: () => void; }; -export default function Card({ - dm, - card, - position, - settings, - flipAction, - redrawAction, - selectAction, -}: CardProps) { +export default function Card({ dm, card, cardIndex, settings }: CardProps) { const [tooltip, setTooltip] = useState(null); + const { flipCard, redraw, setSelectCardIndex } = useAppContext(); const { aria, flipped } = card; + const position = layout[cardIndex]; const handleClick = () => { if (dm) { - flipAction(); + flipCard(cardIndex); } }; @@ -84,8 +78,8 @@ export default function Card({ /> {dm && !flipped && ( selectAction()} + onRedraw={() => redraw(cardIndex)} + onSelect={() => setSelectCardIndex(cardIndex)} onHover={setTooltip} /> )} diff --git a/components/TarokkaGrid.tsx b/components/TarokkaGrid.tsx new file mode 100644 index 0000000..089b149 --- /dev/null +++ b/components/TarokkaGrid.tsx @@ -0,0 +1,30 @@ +'use client'; + +import { useAppContext } from '@/app/AppContext'; +import Card from '@/components/Card'; +import { cardMap } from '@/constants/tarokka'; +import type {} from '@/types'; + +export default function TarokkaGrid() { + const { gameData } = useAppContext(); + + const { dmID, cards, settings } = gameData; + const isDM = !!dmID; + + // 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: unknown, index: number) => cards[cardMap[index]]; + + return ( +
+ {Array.from({ length: 9 }) + .map(arrangeCards) + .map((card, index) => ( +
+ {card && } +
+ ))} +
+ ); +}