Create Card Game in React

function getGridClass(cardCount: number) { if (cardCount <= 12) { return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4"; } else { return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"; }}

return ( <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4"> <h1 className="text-4xl font-bold mb-4">Set Game</h1> <div className="mb-4"> Score: {score} | Time: {time}s </div> <motion.div className={`grid ${getGridClass(board.length)} gap-4 mb-4`} animate={controls} > {board.map((card) => renderCard(card))} </motion.div> {/* ... rest of the JSX ... */} </div>);

We can dynamically adjust the grid layout based on the number of cards on the board. Here's how we can modify the component to achieve this:

First, let's create a function to determine the appropriate grid class:

function getGridClass(cardCount: number) {  if (cardCount <= 12) {    return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4";  } else {    return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5";  }}

Now, let's update the return statement to use this function:

return (  <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">    <h1 className="text-4xl font-bold mb-4">Set Game</h1>    <div className="mb-4">      Score: {score} | Time: {time}s    </div>    <motion.div      className={`grid ${getGridClass(board.length)} gap-4 mb-4`}      animate={controls}    >      {board.map((card) => renderCard(card))}    </motion.div>    {/* ... rest of the JSX ... */}  </div>);

We should also update the addThreeCards function to ensure it doesn't add cards if there are already more than 12 on the board:

function addThreeCards() {  if (deck.length >= 3 && board.length <= 12) {    setBoard(prevBoard => [...prevBoard, ...deck.slice(0, 3)]);    setDeck(prevDeck => prevDeck.slice(3));  }}

Finally, let's modify the handleValidSet function to maintain at least 12 cards on the board if possible:

function handleValidSet(validSet: GameCard[]) {  setScore(score + 1);    // Remove the valid set from the board  let newBoard = board.filter(card => !validSet.includes(card));    // If there are less than 12 cards on the board after removing the set, add new cards  let newDeck = [...deck];  while (newBoard.length < 12 && newDeck.length > 0) {    newBoard.push(newDeck[0]);    newDeck = newDeck.slice(1);  }  setBoard(newBoard);  setDeck(newDeck);  setSelected([]);  if (newBoard.length === 0 && newDeck.length === 0) {    setGameOver(true);    setIsRunning(false);  }}

These changes will:

Keep the 4-column layout when there are 12 or fewer cards.
Expand to a 5-column layout only when there are more than 12 cards.
Ensure that the "Add 3 Cards" button only works when there are 12 or fewer cards on the board.
Maintain at least 12 cards on the board after a valid set is removed, as long as there are cards left in the deck.

This approach should give you the desired behavior: the board will only expand to 5 columns when necessary, and it will try to maintain at least 12 cards on the board at all times.