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