Implement turn-based gameplay with dice roll turn determination

[Copilot]

Transforms simultaneous-play grid game to turn-based: only one player can act at a time, with a dice roll after color selection determining who goes first.

Server Changes

• Game state: Added currentTurn (active player index) and turnDiceRolls to track turn state
• New phase: 'turn-rolling' between color selection and active gameplay
• Turn determination: startTurnDiceRoll() → determineTurnDiceWinner() with tie re-roll support
• Move validation: toggleSquare now rejects moves when gameState.currentTurn !== playerIndex
• Auto-switching: switchTurn() called after each valid move, broadcasts turnChanged to both players
• WebSocket messages: turnDiceRollStart, turnDiceRollTie, turnDiceRollWinner, turnChanged

Client Changes

• Board locking: isBoardLocked computed property now checks currentTurn === playerIndex
• Turn dice modal: Shows animated dice with "🎲 Rolling for First Turn 🎲", displays actual server rolls
• Turn indicator modal: Penguin emoji (🐧) with "Your Turn!" shown to active player on turn change
• Status display: Game status shows "🐧 Your Turn! 🐧" vs "Opponent's Turn - Please Wait"
• CSS animations: bounceIn for modal entrance, wiggle for penguin

Flow

Color Selection → Turn Dice Roll → First Player Turn → Auto-switch → Second Player Turn → ...
     (existing)        (new)             (new)              (new)            (new)

Server enforces turn order; client provides locked board (opacity: 0.6, cursor: not-allowed) for non-active player.

Original prompt

Problem Statement

Transform the current simultaneous-play game into a turn-based game with the following features:

1. Turn-Based Gameplay

• Currently, both players can toggle squares on the grid simultaneously
• Change this so only ONE player can act at a time
• The other player's board should be locked during their opponent's turn
• Add clear visual indicators showing whose turn it is

2. Dice Roll to Determine First Player

• After the color selection phase completes, add ANOTHER dice roll to determine who goes first
• Both players should see animated dice rolling
• The winner of this second dice roll gets to take the first turn
• Handle ties with re-rolls (same as the color selection dice roll)

3. Turn Indicator Modal with Penguin

• Whenever it becomes a player's turn, show them a modal with:
  • A penguin character emoji (🐧) or image
  • A message like "Your Turn!" or "It's your turn to play!"
  • An "OK" or "Let's Go!" button to dismiss the modal
• The opponent should see a message indicating it's not their turn (can be in the game status area)

4. Turn Switching

• After a player makes a move (toggles a square), the turn automatically switches to the other player
• Show the penguin modal to the new active player
• Update the game status to clearly indicate whose turn it is at all times

Implementation Requirements

Server-side (server/index.js):

• Add a currentTurn field to the game state (0 or 1 for player index)
• Create a startTurnDiceRoll() function that happens after color selection
• Modify handleColorSelection() to trigger the turn dice roll
• Add validation to toggleSquare to only allow the current turn player to act
• Create a switchTurn() function that changes the current turn and notifies players
• Broadcast turn changes with a new message type like turnChanged

Client-side (src/App.vue):

• Add new data properties: currentTurn, showTurnModal
• Create a new modal for the turn indicator with penguin character
• Handle new WebSocket messages: turnDiceRollStart, turnDiceRollWinner, turnChanged
• Update the isBoardLocked computed property to check if it's the player's turn
• Show turn modal when receiving turn change notification
• Update game status display to show whose turn it is
• Add visual styling for the turn modal with penguin theme

Testing Considerations

• Ensure players cannot act out of turn
• Verify turn switching happens after each move
• Test dice roll tie handling for the turn determination
• Confirm modals display correctly to both players
• Check that the game state properly resets when players leave

Current Code Context

The game currently:

• Uses dice rolls to determine who picks their color first (this should remain)
• Has a gameState.phase system: 'waiting' → 'rolling' → 'color-selection' → 'active'
• Allows both players to toggle squares simultaneously once in 'active' phase
• Has modals for dice rolling and color selection already implemented

Your changes should add a new phase between 'color-selection' and 'active' for the turn determination dice roll, then implement the turn-based system during the 'active' phase.

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.