background image and touch-up
This commit is contained in:
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user