Chainreact/public/data/scripts/online.js

'use strict';

let playerName;
function nameTyped(dom){
    playerName = $(dom).val();
    let disabled = isValid(playerName, 1, 20) ? false : 'disabled';
    $('#main > button').attr('disabled', disabled);
}
function roomTyped(dom){
    let roomName = $(dom).val();
    let disabled = isValid(roomName, 1, 30) ? false : 'disabled';
    $('#create_room').attr('disabled', disabled);
}
function isValid(name, min, max){
    let regExp = /^\w+(?:[' _-]\w+)*$/;
    return name.length >= min && name.length <= max && regExp.test(name);
}

let menuesFadeTime = 200;
let connecting = false;
function socketConnect(project, name = playerName){
    if (connecting)
        return;
    connecting = true;

    let urlQueries = '?game=' + project.name + '&name=' + name;
    $.get('data/settings/get_port.php', port => {
        let url = 'https://' + location.hostname + ':' + port + urlQueries;

        socket = io.connect(url);
        socket.on('connect', () => {
            console.log('Connected to ', url);
            $('#start_feedback, #give_feedback').attr('disabled', false);
            socket.on('disconnect', () => {
                connecting = false;
                console.log('Disconnected from ' + url);
                $('#lobby, #room, #game_room').filter(':visible').fadeOut(menuesFadeTime, () => {
                    $('#main').fadeIn(menuesFadeTime);
                    $('#start_feedback, #give_feedback').attr('disabled', 'disabled');
                });
            });
            socket.emit('room-list');
            socket.on('room-list', (roomList) => {
                roomList = roomList.filter(r => r.game === project.name);
                console.log('Received room list: ', roomList);
                $('#room_listings').html('');
                for (let room of roomList){
                    let button = $('<button></button>');
                    button.html(room.name);
                    button.addClass('room_listing');
                    button.on('click', () => socket.emit('join-lobby', room.id));
                    $('#room_listings').append(button);
                }
            });
            $('#main').fadeOut(menuesFadeTime, () => {
                $('#lobby > h1').html('Welcome, ' + name + '!');
                $('#lobby > input').val(name + "'s room");
                $('#lobby').fadeIn(menuesFadeTime);
                roomTyped($('#lobby > input'));
            });
            socket.on('created-lobby', (room) => {
                console.log('You successfully created a room!');
                $('#create_room').attr('disabled', false);
                $('#lobby').fadeOut(menuesFadeTime, () => {
                    roomSetup(room);
                });
            });
            socket.on('client-list', (room, clients) => {
                console.log('Received client list: ', clients);

                let players = clients.filter(c => c.isPlayer);
                let spectators = clients.filter(c => c.isSpectator);
                let leader = players[0];

                if (game)
                    game.players = players;

                setInterfacePlayers(players);
                setInterfaceSpectators(spectators);

                function setInterfacePlayers(players){
                    $('#player_listings').html('');
                    for (let c of players){
                        let div = $('<div></div>');
                        let span = $('<span></span>');
                        let ready = $('<button></button>');
                        div.addClass('player_listing');
                        ready.addClass('player_ready');
                        ready.on('click', () => {
                            if (c.id !== socket.id)
                                return;
                            let isReady = $(ready).data('isReady');
                            $(ready).data('isReady', !isReady);
                            socket.emit('set-ready', !isReady);
                        });
                        span.html(c.name);
                        ready.css('background-color', c.isReady ? 'green' : 'transparent');
                        ready.data('isReady', c.isReady);
                        div.append(span, ready);
                        $('#player_listings').append(div);
                    }

                    let allReady = players.find(c => !c.isReady) == null;
                    let startClickable = allReady && players.length <= 4 && (players.length > 1 || productionMode);
                    if (startClickable && players[0])
                        startClickable = players[0].id === socket.id;
                    $('#start_button').attr('disabled', startClickable ? false : 'disabled');

                    if (players.find(p => p.id === socket.id)){
                        $('#player_list .join_type').hide();
                    } else {
                        $('#player_list .join_type').show();
                    }

                    refreshGamePlayers(players);
                }

                function setInterfaceSpectators(spectators){
                    $('.spectator_listings').html('');
                    spectators.forEach(s => {
                        let div = $('<div></div>');
                        div.addClass('spectator_listing');
                        div.html(s.name);

                        $('.spectator_listings').append(div);
                    });
                    if (spectators.find(p => p.id === socket.id)){
                        $('.spectator_list .join_type').hide();
                    } else {
                        $('.spectator_list .join_type').show();
                    }
                }

                if (leader){
                    if (leader.id === socket.id)
                        readGameSettings();
                    else
                        disableSettings();
                } else
                    disableSettings();

                function disableSettings(){
                    $('.setting').attr('disabled', 'disabled');
                }
            });
            socket.on('member-joined', (room, joinedId, joinedName) => {
                if (joinedId === socket.id){
                    console.log('You joined a room!');
                    $('#lobby').fadeOut(menuesFadeTime, () => {
                        if (room.hasStarted){
                            $('#game_room').fadeIn(menuesFadeTime);
                        } else {
                            roomSetup(room);
                        }
                    });
                }
                else
                    console.log('A player joined your room: ' + joinedName + ' (' + joinedId + ')');
            });
            socket.on('member-left', (room, leftId, leftName) => {
                console.log('A player left your room: ' + leftName + ' (' + leftId + ')');
                if (game)
                    game.onPlayerLeft(leftId);
            });
            socket.on('start-game', (room, seed) => startGame(room, seed));
            socket.on('start-spectate', (room, data, hues, turnId) => spectateGame(room, data, hues, turnId));
            socket.on('game-settings', (room, settings) => applySettings(settings));
            socket.on('left-lobby', () => {
                console.log('You left a room!');
                $('#leave_room').get(0).disabled = false;
                game = null;
                socket.removeAllListeners('player-colors');
                socket.removeAllListeners('current-turn');
                socket.removeAllListeners('set-slot');
                $('#room, #game_room').filter(':visible').fadeOut(menuesFadeTime, () => {
                    $('#lobby').fadeIn(menuesFadeTime);
                });
            });
        });
    });

}

function applySettings(settings){
    for (let key in settings)
        gameSettings[key] = settings[key];

    console.log('Applied game settings: ', gameSettings);
    
    $('#fieldsize_select').val(gameSettings.fieldSize);
    $('#turntime_select').val(gameSettings.turnTime);
    $('#mixed_check').prop('checked', gameSettings.mixed);
    $('#silent_check').prop('checked', gameSettings.silent);
}

function roomSetup(room){
    $('#room > h1').html(room.name);
    $('#room').fadeIn(menuesFadeTime);
}

function createRoom(dom){
    dom.disabled = true;
    let name = $('#lobby > input').val();
    if (name === '' || name.length > 30)
        dom.disabled = false;
    else
        socket.emit('create-lobby', localSettings, name);
}

function leaveRoom(dom){
    dom.disabled = true;
    socket.emit('leave-lobby');
}

function serverStartGame(dom){
    socket.emit('start-game');
}

function startGame(room, seed){
    p.randomSeed(seed);
    buildGame(room);
    console.log('Game started');
    socket.emit('ready-for-turn');
}

function spectateGame(room, data, hues, turnId){
    let players = room.clients.filter(c => c.isPlayer);
    buildGame(room);
    if (data)
        game.setAllSlots(data);
    if (hues)
        game.setPlayerHues(hues);
    if (turnId)
        game.setTurnPlayer(players, turnId);
    refreshGamePlayers(players);
    console.log('Started spectating');
}

function buildGame(room){
    $('#room').filter(':visible').fadeOut(menuesFadeTime, () => {
        $('#game_room').fadeIn(menuesFadeTime);
        $('#play_again').hide();
    });
    game = new Game(room.clients.filter(c => c.isPlayer));
}

function refreshGamePlayers(players){
    $('#game_players').html('');
    for (let c of players){
        let div = $('<div></div>');
        div.addClass('game_player');
        div.html(c.name);
        let color = 'hsl(0, 0%, 50%)';
        if (game){
            if (game.turn === c.id){
                color = 'hsl(' + game.playerHues[c.id] + ', 100%, 50%)';
            } else {
                color = 'hsl(' + game.playerHues[c.id] + ', 10%, 50%)';
            }
            if (game.winId === c.id){
                div.effect('pulsate', 5000, () => {
                    div.css('background-color', color);
                });
            }
        }       
        div.css('background-color', color);
        
        $('#game_players').append(div);
    }
}