diff --git a/game.html b/game.html index b60db2f..26822ef 100644 --- a/game.html +++ b/game.html @@ -10,7 +10,7 @@
-

this is a game

+
diff --git a/index.html b/index.html index f646f4b..2755edb 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,5 @@ - diff --git a/server.js b/server.js index 0c0609d..9028ce2 100644 --- a/server.js +++ b/server.js @@ -34,17 +34,24 @@ server.listen(5000, function() { // Add the WebSocket handlers io.on('connection', function(socket) { - socket.on('newGame', function(game) { + socket.on('newGame', function(game, onSucess) { activeGames[game.accessCode] = game; + onSucess(); }); socket.on('joinGame', function(playerInfo) { activeGames[Object.keys(activeGames).find((key) => key === playerInfo.code)].players[socket.id] = playerInfo.name; - console.log("Player " + playerInfo.name + " has joined the game"); }); socket.on('requestState', function(data) { - console.log(data); - console.log(activeGames[Object.keys(activeGames).find((key) => key === data.code)]); - socket.emit('state', activeGames[Object.keys(activeGames).find((key) => key === data.code)]); + if(Object.keys(socket.rooms).includes(data.code) === false) { + console.log("new socket"); + socket.join(data.code, function() { + console.log("request for state"); + io.to(data.code).emit('state', activeGames[Object.keys(activeGames).find((key) => key === data.code)]); + }); + } else { + console.log("old socket"); + io.to(data.code).emit('state', activeGames[Object.keys(activeGames).find((key) => key === data.code)]); + } }); }); diff --git a/static/game.js b/static/game.js index 670a666..a1295ed 100644 --- a/static/game.js +++ b/static/game.js @@ -1,10 +1,41 @@ const socket = io(); var currentGame = null + +// respond to the game state received from the server socket.on('state', function(game) { currentGame = game; - console.log(currentGame); + console.log(game); + buildGameBasedOnState(); }); +function buildGameBasedOnState() { + switch(currentGame.state) { + case "lobby": + renderLobby(); + } +} + +function renderLobby() { + if (document.getElementsByClassName("lobby-player").length === 0) { + let header = document.createElement("h2"); + header.setAttribute("class", "app-header"); + header.innerText = "Lobby"; + document.getElementById("lobby-container").appendChild(header); + } + let i = 1; + for (let key in currentGame.players) { + if(!document.getElementById("player-" + i)) { + const playerContainer = document.createElement("div"); + playerContainer.setAttribute("class", "lobby-player"); + playerContainer.setAttribute("id", "player-" + i) + playerContainer.innerHTML = "

" + currentGame.players[key] + "

"; + document.getElementById("lobby-container").appendChild(playerContainer); + } + i ++; + } +} + +// request the current state of the game from the server window.onload = function() { socket.emit('requestState', {code: sessionStorage.getItem("code")}); } diff --git a/static/setup.js b/static/setup.js index 4427b11..1121f7d 100644 --- a/static/setup.js +++ b/static/setup.js @@ -91,9 +91,12 @@ function createGame() { document.getElementById("time").value, { [socket.id]: document.getElementById("name").value } ); - socket.emit('newGame', game); - sessionStorage.setItem('code', code); - window.location.replace('/' + code); + socket.emit('newGame', game, function(data) { + console.log(data); + socket.emit('joinGame', { code: code, name: document.getElementById("name").value}); + sessionStorage.setItem('code', code); + window.location.replace('/' + code); + }); } function getRandomInt(max) { diff --git a/static/styles.css b/static/styles.css index b8355cc..1dd51ff 100644 --- a/static/styles.css +++ b/static/styles.css @@ -196,3 +196,27 @@ label { display: flex; flex-direction: column; } + + +/* lobby */ + +#lobby-container { + padding: 1em; + max-width: 26em; + margin: 0 auto; +} + +.lobby-player { + color: #7d0b0b; + border-radius: 3px; + font-size: 1.2em; + background-color: rgba(0, 0, 0, .1); + padding: 0.5em; + margin: 0.5em 0; + text-align: left; + box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3); +} + +.lobby-player p { + margin: 0; +}