Game Scenes

scene: [
    LoginScene,        // 1. Entry point for authentication
    RegisterScene,     // 2. User registration
    PreloaderScene,    // 3. Asset loading (not in flow, utility)
    HomeScenes,        // 4. Main menu/lobby
    CreateRoomScene,   // 5. Room creation and joining
    GameSceneLAN,      // 6. LAN game transition
    GameScene,         // 7. Main gameplay scene
    UIScene            // 8. Overlaid UI scene
]

export default class LoginScene extends Phaser.Scene {
    constructor() {
        super('LoginScene');
    }

    preload() {
        this.load.video('inicio-video', '/assets/images/inicio/inicio.mp4');
        this.load.image('logo', '/assets/images/Logotipoletras.png');
    }

    create() {
        // Setup video background
        this.bg = this.add.video(width / 2, height / 2, 'inicio-video');
        this.bg.play(true); // Loop
        
        // Create DOM form for inputs
        this.formElement = this.add.dom(width / 2, height / 2)
            .createFromHTML(formHTML);
        
        // Handle login button
        loginButton.addEventListener('click', async () => {
            const res = await fetch(scriptURL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password })
            });
            
            if (res.ok && json.token) {
                localStorage.setItem('token', json.token);
                this.scene.start('HomeScenes');
            }
        });
    }
}

// Field validation
if (!username || !email || !password || !passwordConfirm) {
    alert('Completa todos los campos.');
    return;
}

if (password !== passwordConfirm) {
    alert('Las contraseñas no coinciden.');
    return;
}

// Email validation
if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
    alert('Introduce un email válido.');
    return;
}

create() {
    // Left panel: Play options
    const playPanel = `
        <button id="play">Jugar en LAN</button>
        <button id="play-bot">Jugar con bot</button>
    `;
    
    // Right panel: Stats and actions
    const statsPanel = `
        <div class="stats-grid">
            <span>Partidas jugadas</span> <span>0</span>
            <span>Partidas ganadas</span> <span>0</span>
        </div>
        <button data-modal="mechanics">Mecánicas del juego</button>
    `;
    
    // Modal system for displaying rules
    const openModal = (title, htmlContent) => {
        modalTitle.textContent = title;
        modalBody.innerHTML = htmlContent;
        modalOverlay.classList.add('show');
    };
}

preload() {
    this.createLoadingBar();
    
    // Card backs
    this.load.image('card_back', '/assets/images/cartas/abajo.png');
    
    // All card fronts (6 types × 3 levels)
    const types = ['fuego', 'agua', 'planta', 'luz', 'sombra', 'espiritu'];
    for (const type of types) {
        for (let level = 1; level <= 3; level++) {
            const key = `${type}_${level}`;
            this.load.image(key, `/assets/images/cartas/carta-${type}-${level}.png`);
        }
    }
}

create() {
    // Determine backend URL
    const params = new URLSearchParams(window.location.search);
    let SERVER_URL = params.get('backend') || 
                     window.BACKEND_URL || 
                     `http://${location.hostname}:3001`;
    
    // Connect to Socket.IO server
    this.socket = io(SERVER_URL);
    
    // Create room button
    startBtn.addEventListener('click', () => {
        if (!this.currentRoom) {
            this.socket.emit('create_room', (res) => {
                if (res.success) {
                    this.playerRole = res.role; // 'host'
                    updateCodeUI(res.code);
                }
            });
        }
    });
    
    // Join room button
    joinBtn.onclick = () => {
        const code = rawCode.replace(/\s+/g, '');
        this.socket.emit('join_room', { code }, (res) => {
            if (res.success) {
                this.playerRole = res.role; // 'guest'
                this.currentRoom = res.code;
            }
        });
    };
    
    // Auto-start when room is full
    this.socket.on('game_start', (data) => {
        this.keepSocket = true;
        this.scene.start('GameSceneLAN', {
            roomCode: this.currentRoom,
            socket: this.socket,
            playerData: this.playerData,
            playerRole: this.playerRole,
            gameStartData: data
        });
    });
}

export default class GameSceneLAN extends Phaser.Scene {
    init(data) {
        this.playerData = data.playerData;
        this.roomCode = data.roomCode;
        this.socket = data.socket;
        this.playerRole = data.playerRole; // 'host' or 'guest'
        this.gameStartData = data.gameStartData;
    }

    create() {
        // Ensure socket is connected
        if (!this.socket) {
            this.socket = io(SERVER_URL);
        }
        
        // Transition to main game scene
        this.scene.start('GameScene', {
            playerData: this.playerData,
            roomCode: this.roomCode,
            socket: this.socket,
            isLAN: true,
            playerRole: this.playerRole,
            gameStartData: this.gameStartData
        });
    }
}

init(data) {
    this.playerData = data.playerData;
    this.socket = data.socket;
    this.isLAN = !!data.isLAN;
    this.roomCode = data.roomCode;
    this.playerRole = data.playerRole;
    this.vsBot = !!data.vsBot;
}

create() {
    this.gameState = 'pre-start';
    // States: 'pre-start', 'player-turn', 'opponent-turn', 'game-over'
    
    // Create players
    this.player = new Player('player', this);
    this.opponent = new Player('opponent', this);
    
    // Setup field zones
    this.setupFieldZones();
    
    // Socket event listeners
    if (this.isLAN && this.socket) {
        this.socket.on('game_event', (payload) => {
            this.handleOpponentAction(payload);
        });
        
        this.socket.on('turn_changed', (data) => {
            this.handleTurnChange(data);
        });
    }
    
    // Launch UIScene in parallel
    this.scene.launch('UIScene', { playerData: this.playerData });
}

export default class UIScene extends Phaser.Scene {
    create(data) {
        this.playerData = data.playerData;
        
        // Get reference to GameScene
        this.gameScene = this.scene.get('GameScene');
        
        // Create UI elements
        this.createEssenceOrbs();
        this.createHeader();
        this.createMenuButton();
    }
    
    createEssenceOrbs() {
        const types = ['fuego', 'agua', 'planta', 'luz', 'espiritu', 'sombra'];
        
        types.forEach((type, index) => {
            // Player orbs (bottom)
            const playerOrb = this.add.image(x, y, `orb-${type}`);
            playerOrb.setAlpha(0.3); // Dimmed when empty
            this.playerOrbs[type] = playerOrb;
            
            // Opponent orbs (top)
            const opponentOrb = this.add.image(x, y, `orb-${type}`);
            opponentOrb.setAlpha(0.3);
            this.opponentOrbs[type] = opponentOrb;
        });
    }
}