Memory/public/data/scripts/Online.js

let formState = "type", lobby;

function joinLobby(dom){
    loader(dom);
    let name = playerNameEntered();
    if (name === '') return;
    let codeTyped = $('#join-lobby > input').val();
    socket.emit('join-lobby', codeTyped, name);
}

function leaveLobby(dom){
    loader(dom);
    socket.emit('leave-lobby', lobby.id);

    if (game){
        $('#initialize-wrapper, ' + 
        '.setup:eq(1), .setup:eq(2), #join-lobby').show();
        game = null;
    }

    lobby = null;
    $('#interface').hide();
    $('#initialize').show();
    $('#initialize *').attr('disabled', false);
    $('#lobby').hide();
}

function createLobby(dom){
    loader(dom);
    let name = playerNameEntered();
    if (name === '') return;
    socket.emit('create-lobby', settings);
    showLobby();
}

function addSocketEvents(){
    socket.on('member-joined', (lobby) => setLobby(lobby));
    socket.on('member-left', (lobby) => setLobby(lobby));
    socket.on('join-failed', (message) => joinFailed(message));
    socket.on('start-game', (lobby, seed) => startOnlineGame(lobby, seed));
    socket.on('game-action', (lobby, action, argument) => startAction(action, argument));
}

function startAction(action, argument){
    game[action].call(game, true, argument);
}

function startLobby(){
    socket.emit('start-game', lobby.id);
}

function startOnlineGame(lobby, seed){
    setLobby(lobby);
    $("#initialize-wrapper").hide();
    console.log(seed);
    game = new OnlineGame(lobby.clients, seed);
}

function continueForm(){
    
    if (formState === "type"){
        let type = $('input[name="game-type"]:checked').val();
        $("#game-type input").attr("disabled", "disabled");
        if (type === "online"){
            $("#game-type").hide();
            $("#player-name").show();
            formState = "player-name";
        }
        if (type === "offline"){
            $("#player-count").show();
            formState = "player-count";
        }
    }
    
    else if (formState === "player-count"){
        let playerCount = int($("#player-count select").val());
        $("#initialize-wrapper").hide();
        game = new Game(playerCount);
    } else if (formState === "player-name"){
        if (playerNameEntered() != ""){
            $(".setup:eq(0)").hide();
            $(".setup:eq(1), .setup:eq(2), #join-lobby").show();
            $("#player-name").hide();
            let queries = "?game=memory&name=" + playerNameEntered();
			socket = io('https://' + location.hostname + queries, {
				path: "/memory/"
			});
			addSocketEvents();
        }
    }
    
}

function joinFailed(reason){
    $("#join-lobby .error-label").html(reason);
    $("#join-lobby .error-label").show();
}

function showLobby(){
    $("#initialize").hide();
    $("#lobby").show();
}

function setLobby(newLobby){
    lobby = newLobby;
    let leader = lobby.clients[0];
    $("#lobby-members").html("");
    for (let p of lobby.clients){
        $("#lobby-members").append(createLobbyMember(p, p.id === leader.id));
    }
    if (lobby.clientCounts.indexOf(lobby.clients.length) === -1){
        let strCounts = '';
        for (let c of lobby.clientCounts){
            let comma = lobby.clientCounts.indexOf(c) === lobby.clientCounts.length - 1 ? '' : ', ';
            strCounts += c + comma;
        }
        $('#lobby > .error-label').html('Only as ' + strCounts);
        $('#lobby > .error-label').show();
        $("#start-lobby").attr("disabled", "disabled");
    } else {
        $('#lobby > .error-label').hide();
        $("#start-lobby").attr("disabled", false);
    }
    if (!(socket.id === leader.id)){
        $("#start-lobby").attr({"disabled": "disabled"});
    } else {
        $("#start-lobby").attr("disabled", false);
    }
    $("#lobby-id").html("Id: " + lobby.id);
    showLobby();
    if (game) game.setPlayers(lobby.clients);
}

function createLobbyMember(player, isLeader){
    let member = $("<div></div>");
    member.attr("class", "lobby-member");
    member.html(player.name);
    if (isLeader) member.attr("id", "lobby-leader");
    return member;
}

function playerNameEntered(){
    let name = $("#player-name > input").val();
    if (name === ""){
        $("#player-name .error-label").html("Please enter a name!");
        $("#player-name .error-label").show();
    }
    return name;
}