setup.js

document.addEventListener('DOMContentLoaded', () => {
    const sound = new AudioSynthesizer();
    
    // Retrieve configurations from landing page
    const selectedGame = sessionStorage.getItem('selectedGame');
    const playerCountRaw = sessionStorage.getItem('playerCount');

    if (!selectedGame || !playerCountRaw) {
        window.location.href = 'index.html';
        return;
    }

    const playerCount = parseInt(playerCountRaw, 10);
    let players = [];

    const colors = [
        { hex: '#ff2a5f', name: 'Red' },
        { hex: '#05d9e8', name: 'Cyan' },
        { hex: '#39ff14', name: 'Green' },
        { hex: '#f5ee30', name: 'Yellow' },
        { hex: '#b026ff', name: 'Purple' },
        { hex: '#ff5f1f', name: 'Orange' },
        { hex: '#ff007f', name: 'Pink' },
        { hex: '#00ffff', name: 'Cyan' }
    ];

    const avatarKeys = Object.keys(AVATARS);
    const grid = document.getElementById('player-setup-grid');

    // Generate player cards
    for (let i = 0; i < playerCount; i++) {
        const colorObj = colors[i % colors.length];
        const avatarKey = avatarKeys[i % avatarKeys.length];

        players.push({
            name: `CHAMPION_${i + 1}`,
            color: colorObj.hex,
            avatar: avatarKey,
            score: 0
        });

        const card = document.createElement('div');
        card.className = 'player-setup-card';
        card.setAttribute('style', `--player-color: ${colorObj.hex}`);
        card.setAttribute('data-index', i);

        card.innerHTML = `
            <div class="card-index">P${i + 1}</div>
            <div style="display:flex; flex-direction:column; gap:6px;">
                <label class="avatar-selector-label">Player Name</label>
                <input type="text" class="player-name-input" value="CHAMPION_${i + 1}" maxlength="14" data-player-idx="${i}">
            </div>
            
            <div class="avatar-selector">
                <div class="avatar-selector-label">Select Icon</div>
                <div class="avatar-grid" data-player-idx="${i}">
                    ${avatarKeys.map(key => `
                        <div class="avatar-option ${key === avatarKey ? 'selected' : ''}" data-avatar="${key}" style="--player-color: ${colorObj.hex}">
                            <svg viewBox="0 0 512 512">${AVATARS[key]}</svg>
                        </div>
                    `).join('')}
                </div>
            </div>

            <div class="color-selector">
                <div class="avatar-selector-label">Theme Color</div>
                <div class="color-dots" data-player-idx="${i}">
                    ${colors.map(col => `
                        <div class="color-dot ${col.hex === colorObj.hex ? 'active' : ''}" data-color="${col.hex}" style="background-color: ${col.hex}; --dot-color: ${col.hex}"></div>
                    `).join('')}
                </div>
            </div>
        `;

        grid.appendChild(card);
    }

    // Attach listeners
    document.querySelectorAll('.player-name-input').forEach(input => {
        input.addEventListener('input', (e) => {
            const idx = parseInt(e.target.getAttribute('data-player-idx'), 10);
            players[idx].name = e.target.value.trim().toUpperCase() || `P${idx + 1}`;
            validateConfigs();
        });
    });

    document.querySelectorAll('.avatar-option').forEach(option => {
        option.addEventListener('click', (e) => {
            const optionEl = e.currentTarget;
            const gridEl = optionEl.parentElement;
            const playerIdx = parseInt(gridEl.getAttribute('data-player-idx'), 10);
            const avatarKey = optionEl.getAttribute('data-avatar');

            sound.playSelect();
            gridEl.querySelectorAll('.avatar-option').forEach(opt => opt.classList.remove('selected'));
            optionEl.classList.add('selected');
            players[playerIdx].avatar = avatarKey;
        });
    });

    document.querySelectorAll('.color-dot').forEach(dot => {
        dot.addEventListener('click', (e) => {
            const dotEl = e.target;
            const containerEl = dotEl.parentElement;
            const playerIdx = parseInt(containerEl.getAttribute('data-player-idx'), 10);
            const colorHex = dotEl.getAttribute('data-color');

            sound.playSelect();
            containerEl.querySelectorAll('.color-dot').forEach(d => d.classList.remove('active'));
            dotEl.classList.add('active');
            
            players[playerIdx].color = colorHex;

            const cardEl = containerEl.closest('.player-setup-card');
            cardEl.setAttribute('style', `--player-color: ${colorHex}`);
            cardEl.querySelectorAll('.avatar-option').forEach(opt => {
                opt.setAttribute('style', `--player-color: ${colorHex}`);
            });

            validateConfigs();
        });
    });

    function validateConfigs() {
        const btnStart = document.getElementById('btn-start-game');
        
        const chosenColors = players.map(p => p.color);
        const uniqueColors = new Set(chosenColors);
        const colorConflict = uniqueColors.size !== chosenColors.length;

        let nameConflict = false;
        players.forEach(p => {
            if (!p.name) {
                nameConflict = true;
            }
        });

        if (colorConflict || nameConflict) {
            btnStart.setAttribute('disabled', 'true');
            return false;
        }

        btnStart.removeAttribute('disabled');
        return true;
    }

    document.getElementById('btn-back-to-landing').addEventListener('click', () => {
        sound.playSelect();
        window.location.href = 'index.html';
    });

    document.getElementById('btn-start-game').addEventListener('click', () => {
        sound.playSelect();
        sessionStorage.setItem('players', JSON.stringify(players));
        
        if (selectedGame === 'ttt') {
            window.location.href = 'ttt.html';
        } else if (selectedGame === 'dots') {
            window.location.href = 'dots.html';
        } else if (selectedGame === 'maze') {
            window.location.href = 'maze.html';
        } else if (selectedGame === 'reflex') {
            window.location.href = 'reflex.html';
        } else if (selectedGame === 'dice') {
            window.location.href = 'dice.html';
        } else if (selectedGame === 'time_attack') {
            window.location.href = 'time_attack.html';
        }
    });

    bindLogoHomeClick(sound);
});