diff --git a/client/public/game/index.js b/client/public/game/index.js index 453745c..328b632 100644 --- a/client/public/game/index.js +++ b/client/public/game/index.js @@ -10,12 +10,12 @@ function onConnect() function onLobbyJoin(lobby) { - + } function onDisconnect() { destructLobbies(); - + document.location.href = document.location.href + '../'; } diff --git a/client/public/game/lobbies.js b/client/public/game/lobbies.js index 0a7e01a..343f3c7 100644 --- a/client/public/game/lobbies.js +++ b/client/public/game/lobbies.js @@ -48,11 +48,11 @@ function createLobby() const lobbyPrivate = document.querySelector('#lobby-input-private').checked; const lobbySpectators = document.querySelector('#lobby-input-spectators').checked; - if (lobbyName === "") + if (lobbyName === '') { const errorDiv = document.createElement('div'); - errorDiv.id = "lobby-error"; - errorDiv.innerHTML = "ERROR: LobbyName is required"; + errorDiv.id = 'lobby-error'; + errorDiv.innerHTML = 'ERROR: LobbyName is required'; errorDiv.classList.add('red'); CreateLobbyBlock.appendChild(errorDiv); return; @@ -83,12 +83,38 @@ function createLobby() document.querySelector('#lobby-error').remove(); } -socket.on('lobby-create-success', (...args) => { - console.log(args); +socket.on('lobby-create-success', lobby => { + showActive(); + const lobbyDiv = document.createElement('div'); + lobbyDiv.id = lobby.id; + + // TODO: Make drawlobby function + lobbyDiv.innerHTML += `

Lobby ${lobby.name}

Join Code: ${lobby.uid}

Players:`; + + for (const player of lobby.players) + lobbyDiv.innerHTML += player.name + ' '; + + if (lobby.allowspectators) + { + lobbyDiv.innerHTML += '

Spectators:'; + for (const player of lobby.spectators) + lobbyDiv.innerHTML += player.name + ' '; + } + + lobbyDiv.innerHTML += `

Visibility: ${lobby.visibility}

State: ${lobby.state}` + + lobbyDiv.innerHTML += '' + lobbyDiv.innerHTML += '' + + ActiveLobbyBlock.appendChild(lobbyDiv); }); socket.on('lobby-create-error', (...args) => { - console.log('ERROR:', args); + const errorDiv = document.createElement('div'); + errorDiv.id = 'lobby-error'; + errorDiv.innerHTML = 'ERROR: An error occured while creating the lobby' + JSON.stringify(args); + errorDiv.classList.add('red'); + CreateLobbyBlock.appendChild(errorDiv); }); @@ -97,11 +123,11 @@ function joinLobby() const lobbyID = document.querySelector('#lobby-input-join-id').value; const joinAsSpectator = document.querySelector('#lobby-input-join-spectator').checked; - if (lobbyID === "") + if (lobbyID === '') { const errorDiv = document.createElement('div'); - errorDiv.id = "lobby-error"; - errorDiv.innerHTML = "ERROR: A Lobby ID is required"; + errorDiv.id = 'lobby-error'; + errorDiv.innerHTML = 'ERROR: A Lobby ID is required'; errorDiv.classList.add('red'); JoinLobbyBlock.appendChild(errorDiv); return; @@ -140,9 +166,23 @@ socket.on('lobby-join-error', (...args) => { }); +socket.on('lobby-update'); + + +function leaveLobby() +{ + // TODO: if in lobby AND owner of lobby + socket.emit('lobby-destroy'); + + // TODO: if in lobby + socket.emit('lobby-leave'); + +} + function destructLobbies() { LobbiesBlock.style.display = 'none'; CreateLobbyBlock.style.display = 'none'; JoinLobbyBlock.style.display = 'none'; + ActiveLobbyBlock.style.display = 'none'; } diff --git a/server/src/lobbies.js b/server/src/lobbies.js index edbe121..db9dcf6 100644 --- a/server/src/lobbies.js +++ b/server/src/lobbies.js @@ -7,8 +7,8 @@ LOBBY OBJECT uid: uid, name: string owneruid: useruid, - players: [uids], - spectators: [uids], + players: [{uid, name}], + spectators: [{uid, name}], // PUBLIC, PRIVATE visibility: 'PUBLIC', allowspectators: bool, diff --git a/server/src/socketserver.js b/server/src/socketserver.js index 4b51bed..b18a8f4 100644 --- a/server/src/socketserver.js +++ b/server/src/socketserver.js @@ -50,7 +50,10 @@ async function Router(socket) socket.on('identify', args => ClientIdentify(socket, args)); socket.on('lobby-create', args => LobbyCreate(socket, args)); + socket.on('lobby-destroy'); + socket.on('lobby-join', args => LobbyJoin(socket, args)); + socket.on('lobby-leave'); socket.on('disconnect', args => HandleDisconnect(socket, ...args)); @@ -114,8 +117,7 @@ function LobbyCreate(socket, args) return; } - console.log(args); - if (!args.lobbyName || args.lobbyPrivate === undefined || args.lobbySpectators === undefined) + if (!args.lobbyName || args.lobbyPrivate === undefined || args.lobbySpectators === undefined) { err.addError(400, 'Bad Request', 'Lobby malformed'); socket.emit('lobby-create-error', err.toError);