From d21ea5dd43917bfae2b2eaba5398b0efb8b0ce91 Mon Sep 17 00:00:00 2001 From: Ben Kyd Date: Wed, 17 Mar 2021 21:21:33 +0000 Subject: [PATCH] lobby system functional --- client/README | 0 client/game.html | 13 +++++++++++++ client/public/game/index.html | 3 +++ client/public/game/index.js | 13 ++++++------- client/public/game/lobbies.js | 34 +++++++++++++++++++++++++++------- client/public/game/lobby.css | 20 +++++++++++++++++--- client/public/index.html | 2 +- server/README | 0 server/src/lobbies.js | 2 +- server/src/socketserver.js | 4 ++-- 10 files changed, 70 insertions(+), 21 deletions(-) create mode 100644 client/README create mode 100644 client/game.html create mode 100644 server/README diff --git a/client/README b/client/README new file mode 100644 index 0000000..e69de29 diff --git a/client/game.html b/client/game.html new file mode 100644 index 0000000..a13f7c4 --- /dev/null +++ b/client/game.html @@ -0,0 +1,13 @@ + + + + + + + + Scrabble! + + + + + \ No newline at end of file diff --git a/client/public/game/index.html b/client/public/game/index.html index 132ac43..0316f6f 100644 --- a/client/public/game/index.html +++ b/client/public/game/index.html @@ -74,6 +74,9 @@ + + + diff --git a/client/public/game/index.js b/client/public/game/index.js index 328b632..3f44d0c 100644 --- a/client/public/game/index.js +++ b/client/public/game/index.js @@ -1,16 +1,15 @@ // page control logic +function pageLog(message) +{ + document.querySelector('#log-console').value += message + "\n" + document.querySelector('#log-console').scrollTop = document.querySelector('#log-console').scrollHeight +} + function onConnect() { initLobbies(); - - -} - -function onLobbyJoin(lobby) -{ - } function onDisconnect() diff --git a/client/public/game/lobbies.js b/client/public/game/lobbies.js index 48cdbfb..4bc25e7 100644 --- a/client/public/game/lobbies.js +++ b/client/public/game/lobbies.js @@ -41,6 +41,8 @@ function showActive() ActiveLobbyBlock.style.display = 'block'; } +// TODO: Lobbylist & buttons + function drawLobby(lobby) { const lobbyDiv = document.createElement('div'); @@ -114,7 +116,7 @@ function createLobby() document.querySelector('#lobby-error').remove(); } -socket.on('lobby-create-success', lobby => { +socket.on('lobby-create-success', obj => { if (document.querySelector('#lobby-success')) document.querySelector('#lobby-success').innerHTML = ""; @@ -122,6 +124,7 @@ socket.on('lobby-create-success', lobby => { successDiv.id = 'lobby-success'; successDiv.innerHTML = 'SUCCESS: Lobby created, Joining...'; CreateLobbyBlock.appendChild(successDiv); + pageLog(`created lobby ${obj.lobby.uid} (${(obj.lobby.name)})`); }); socket.on('lobby-create-error', obj => { @@ -133,15 +136,16 @@ socket.on('lobby-create-error', obj => { errorDiv.innerHTML = 'ERROR: An error occured while creating the lobby' + JSON.stringify(args); errorDiv.classList.add('red'); CreateLobbyBlock.appendChild(errorDiv); + pageLog('ERROR: An error occured while creating the lobby ' + JSON.stringify(args)); }); function joinLobby() { - const lobbyID = document.querySelector('#lobby-input-join-id').value; + const lobbyuid = document.querySelector('#lobby-input-join-id').value; const joinAsSpectator = document.querySelector('#lobby-input-join-spectator').checked; - if (lobbyID === '') + if (lobbyuid === '') { const errorDiv = document.createElement('div'); errorDiv.id = 'lobby-error'; @@ -167,17 +171,21 @@ function joinLobby() user: { uid: user.uid }, - lobbyID: lobbyID, + lobbyuid: lobbyuid, joinAsSpectator: joinAsSpectator }); if (document.querySelector('#lobby-error')) document.querySelector('#lobby-error').remove(); + + pageLog(`joining lobby ${lobbyuid}`); + } socket.on('lobby-join-success', lobby => { showActive(); drawLobby(lobby); + pageLog(`joined lobby ${lobby.uid} (${(lobby.name)})`); }); socket.on('lobby-join-error', obj => { @@ -186,12 +194,12 @@ socket.on('lobby-join-error', obj => { const errorDiv = document.createElement('div'); errorDiv.id = 'lobby-error'; - errorDiv.innerHTML = 'ERROR: An error occured while joining the lobby ' + JSON.stringify(args); + errorDiv.innerHTML = 'ERROR: An error occured while joining the lobby ' + JSON.stringify(obj); errorDiv.classList.add('red'); JoinLobbyBlock.appendChild(errorDiv); + pageLog('ERROR: An error occured while joining the lobby ' + JSON.stringify(obj)); }); - socket.on('lobby-update', obj => { if (!obj) return; if (!obj.state) return; @@ -199,13 +207,25 @@ socket.on('lobby-update', obj => { if (!obj.lobby) return; drawLobby(obj.lobby); -}); + if (obj.state === 'lobby-join') + pageLog(`${obj.updateuser.username} joined`); + + if (obj.state ==='lobby-leave') + pageLog(`${obj.updateuser.username} left`); + + if (obj.state === 'lobby-deregister') + { + pageLog(`${obj.updateuser.username} deregistered lobby`); + leaveLobby(); + } +}); function leaveLobby() { // TODO: error check socket.emit('lobby-leave'); + pageLog('left lobby'); showBack(); } diff --git a/client/public/game/lobby.css b/client/public/game/lobby.css index 470f107..878f0a3 100644 --- a/client/public/game/lobby.css +++ b/client/public/game/lobby.css @@ -1,8 +1,22 @@ +textarea { + resize: none; +} + +#log-console { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + position: fixed; + bottom: 0; +} + .lobby-type { - display: block; + /* display: block; margin-left: auto; margin-right: auto; - border: 1px solid green ; - + border: 1px solid green ;*/ } + + diff --git a/client/public/index.html b/client/public/index.html index 0f3d115..aa21eac 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -6,7 +6,7 @@ - Bruh online + Scrabble online
diff --git a/server/README b/server/README new file mode 100644 index 0000000..e69de29 diff --git a/server/src/lobbies.js b/server/src/lobbies.js index 49e7295..11e0e62 100644 --- a/server/src/lobbies.js +++ b/server/src/lobbies.js @@ -138,7 +138,7 @@ function UserJoinLobby(lobbyuid, useruid, callback) if (!Lobbies[lobbyuid]) return false; if (!Registrar.GetUserByUID(useruid)) return false; - // check users and change lobby status + // TODO: check users and change lobby status const user = Registrar.GetUserByUID(useruid); Lobbies[lobbyuid].players.push({uid: useruid, name: user.username}); diff --git a/server/src/socketserver.js b/server/src/socketserver.js index 5344df7..d42d0b3 100644 --- a/server/src/socketserver.js +++ b/server/src/socketserver.js @@ -182,7 +182,7 @@ function LobbyJoin(socket, args) return; } - if (!args.lobbyID || args.joinAsSpectator === undefined) + if (!args.lobbyuid || args.joinAsSpectator === undefined) { err.addError(400, 'Bad Request', 'Lobby malformed'); socket.emit('lobby-join-error', err.toError); @@ -206,7 +206,7 @@ function LobbyJoin(socket, args) return; } - const lobby = Game.Lobbies.GetLobbyByUID(args.lobbyID); + const lobby = Game.Lobbies.GetLobbyByUID(args.lobbyuid); if (!lobby) { err.addError(400, 'Bad Request', 'Lobby does not exist');