# Team Progress Synchronization

## Overview

All team members are now synchronized in real-time. When any team member completes the required wins for a challenge, **all other team members are notified automatically** and can advance together to the next challenge.

## How It Works

### Polling System
Each game page polls the server every 2 seconds to check if the team has completed the current challenge:

```javascript
const progressSync = new ProgressSync('ChallengeName', 2000); // Check every 2 seconds
```

### When a Teammate Completes the Challenge

**Scenario**: Team Crocks has 2 players
- Player 1 is working on the password challenge
- Player 2 completes the password challenge first

**What Happens**:
1. Player 2 records the win on the server
2. Team progress is marked as complete
3. Player 2 sees the victory modal immediately
4. **Within 2 seconds**, Player 1's game automatically detects the completion
5. Player 1's game stops and shows the victory modal
6. **Both players** can now proceed to the next challenge together

## Technical Implementation

### Files Modified

#### Progress Sync Module
- **`/public/js/shared/progress-sync.js`** - New shared module
  - `ProgressSync` class that polls server for team progress
  - Automatically stops polling when challenge complete
  - Calls callback to notify player

#### HTML Files Updated
All game HTML files now include the progress-sync.js script:
- `/public/games/password.html`
- `/public/game.html` (GetToTheTemple)
- `/public/games/mastermind.html`
- `/public/games/anaconda.html`
- `/public/games/hangman.html`

#### Game Logic Updated
All game JavaScript files now:
1. Create a `ProgressSync` instance on page load
2. Start polling for team progress
3. Stop polling when local player completes challenge
4. Handle completion notification from teammates

**Modified Files**:
- `/public/js/games/password/game.js`
- `/public/js/game.js`
- `/public/js/games/mastermind/game.js`
- `/public/js/games/anaconda/game.js`
- `/public/js/games/hangman/game.js`

### Code Pattern

Each game follows this pattern:

```javascript
let progressSync = null;

// On page load
document.addEventListener('DOMContentLoaded', async () => {
    await loadGame();
    startProgressPolling(); // Start checking for teammate completion
});

function startProgressPolling() {
    progressSync = new ProgressSync('ChallengeName', 2000);

    progressSync.startPolling(async (data) => {
        console.log('[Game] Team completed the challenge!');

        // Disable game controls
        // ...

        // Show victory modal
        await sharedModals.showVictoryModal(...);
    });
}

async function handleWin() {
    // Stop polling - we're handling the win locally
    if (progressSync) {
        progressSync.stopPolling();
    }

    // Continue with win logic
    // ...
}
```

## Per-Challenge Behavior

### Password Challenge (FSPasswordEscapeRoom)
- **Required Wins**: 1
- **Notification**: When teammate enters correct password, all players see victory modal
- **Next**: Advances to GetToTheTemple

### GetToTheTemple
- **Required Wins**: 4
- **Notification**: When team reaches 4 wins, all players see confetti modal with CASE code
- **Next**: Advances to Mastermind

### Mastermind
- **Required Wins**: 1
- **Notification**: When teammate solves the code, all players see victory modal with FLOATIES code
- **Next**: Advances to Anaconda (Snake)

### Anaconda (Snake)
- **Required Wins**: 3
- **Notification**: When team reaches 3 wins, all players see custom modal with STUNGUN code
- **Special**: Opens Get Involved URL, then advances to Hangman after countdown
- **Next**: Advances to Hangman

### Hangman
- **Required Wins**: 4 (2 quotes + 2 words)
- **Notification**: When team reaches 4 wins, all players see final victory modal with ROPE code
- **Next**: Final challenge - game complete!

## Benefits

### For Teams
- ✅ **No one gets left behind** - all team members advance together
- ✅ **Faster progression** - team can split up and work in parallel
- ✅ **Better coordination** - everyone knows when objectives are met
- ✅ **Fair contribution** - any team member's win counts toward the goal

### Example Scenario

**Team Hipps with 3 players needs 4 GetToTheTemple wins:**

| Time | Player 1 | Player 2 | Player 3 | Team Progress |
|------|----------|----------|----------|---------------|
| 0:00 | Playing | Playing | Playing | 0/4 |
| 0:30 | **Won!** | Playing | Playing | 1/4 |
| 1:00 | Playing | **Won!** | Playing | 2/4 |
| 1:30 | Playing | Playing | **Won!** | 3/4 |
| 2:00 | **Won!** | Playing | Playing | **4/4 ✅** |
| 2:02 | ✅ Modal shown | ✅ Modal shown | ✅ Modal shown | All advance! |

At 2:02, **all 3 players** see the victory modal within 2 seconds and can proceed to Mastermind together.

## Polling Interval

- **Frequency**: 2 seconds (2000ms)
- **Overhead**: Minimal - simple GET request checking team progress
- **Auto-stop**: Polling stops automatically when challenge is completed
- **Why not WebSockets**: Polling is simpler to implement and adequate for this use case with low player count

## Testing

### Test Multiple Players Seeing Notification

1. Open 2 browser windows
2. Login as "Crocks" in both windows
3. Navigate to Password Challenge in both windows
4. In Window 1: Enter correct password
5. **Within 2 seconds**, Window 2 should show the victory modal
6. Both windows can now proceed to GetToTheTemple

### Test Mid-Game Notification

1. Open 2 browser windows, login as same team
2. Navigate to GetToTheTemple (requires 4 wins)
3. Player 1 wins 2 games (team: 2/4)
4. Player 2 starts playing
5. Player 1 wins 2 more games (team: 4/4)
6. **Within 2 seconds**, Player 2's game stops and shows victory modal
7. Both can advance to Mastermind

## Cleanup

When a player leaves the page, the polling automatically stops (no memory leaks or zombie pollers).