background image and touch-up

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

View File

@@ -6,13 +6,13 @@ import { socket } from "@/socket";
import Card from '@/components/Card';
import type { GameCard, GameUpdate, ClientUpdate } from '@/types';
import type { GameUpdate, ClientUpdate, StandardGameCard, TarokkaGameCard } from '@/types';
export default function GamePage() {
const { gameID: gameIDParam } = useParams();
const [gameID, setGameID] = useState('');
const [cards, setCards] = useState<GameCard[]>([]);
const [cards, setCards] = useState<StandardGameCard[] | TarokkaGameCard[]>([]);
useEffect(() => {
if (gameIDParam) {
@@ -51,15 +51,15 @@ export default function GamePage() {
};
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>
<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) => {
const cardIndex = [1, 3, 4, 5, 7].indexOf(i);
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)} />}
</div>
)