diff --git a/game.html b/game.html index 26822ef..3cda2fd 100644 --- a/game.html +++ b/game.html @@ -9,9 +9,8 @@
-
- -
+
+
diff --git a/server.js b/server.js index 9028ce2..753d5a3 100644 --- a/server.js +++ b/server.js @@ -39,7 +39,7 @@ io.on('connection', function(socket) { onSucess(); }); socket.on('joinGame', function(playerInfo) { - activeGames[Object.keys(activeGames).find((key) => key === playerInfo.code)].players[socket.id] = playerInfo.name; + activeGames[Object.keys(activeGames).find((key) => key === playerInfo.code)].players[socket.id] = {name: playerInfo.name, id: playerInfo.id}; }); socket.on('requestState', function(data) { if(Object.keys(socket.rooms).includes(data.code) === false) { diff --git a/static/game.js b/static/game.js index a1295ed..7952dd4 100644 --- a/static/game.js +++ b/static/game.js @@ -1,5 +1,5 @@ const socket = io(); -var currentGame = null +var currentGame = null; // respond to the game state received from the server socket.on('state', function(game) { @@ -21,18 +21,36 @@ function renderLobby() { header.setAttribute("class", "app-header"); header.innerText = "Lobby"; document.getElementById("lobby-container").appendChild(header); + let subHeader = document.createElement("div"); + subHeader.setAttribute("id", "lobby-subheader"); + subHeader.innerHTML = "
" + + "" + Object.keys(currentGame.players).length + "" + + "/" + currentGame.size + " Players" + + "
" + + "
" + + "
Access Code: " + currentGame.accessCode + "
"; + document.getElementById("lobby-container").appendChild(subHeader); } 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] + "

"; + currentGame.players[key].id === sessionStorage.getItem("id") ? + playerContainer.setAttribute("class", "lobby-player highlighted") + : playerContainer.setAttribute("class", "lobby-player"); + playerContainer.setAttribute("id", "player-" + i); + playerContainer.innerHTML = "

" + currentGame.players[key].name + "

"; document.getElementById("lobby-container").appendChild(playerContainer); + document.getElementById("join-count").innerText = Object.keys(currentGame.players).length.toString(); } i ++; } + // display the launch button if the player is the host + if (sessionStorage.getItem("host")) { + Object.keys(currentGame.players).length === currentGame.size ? + document.getElementById("launch-btn").innerHTML = "" + : document.getElementById("launch-btn").innerHTML = "" + } } // request the current state of the game from the server diff --git a/static/join.js b/static/join.js index 461b66d..4e0c970 100644 --- a/static/join.js +++ b/static/join.js @@ -1,8 +1,23 @@ const socket = io(); document.getElementById("join-btn").addEventListener("click", function() { - sessionStorage.setItem("code", document.getElementById("code").value) - const playerInfo = {name: document.getElementById("name").value, code: document.getElementById("code").value}; + sessionStorage.setItem("code", document.getElementById("code").value); + let playerId = generateID(); + sessionStorage.setItem("id", playerId); + const playerInfo = {name: document.getElementById("name").value, id: playerId, code: document.getElementById("code").value}; socket.emit('joinGame', playerInfo); window.location.replace('/' + document.getElementById("code").value); -}) +}); + +function generateID() { + let code = ""; + let charPool = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; + for (let i = 0; i < 10; i++) { + code += charPool[getRandomInt(61)] + } + return code; +} + +function getRandomInt(max) { + return Math.floor(Math.random() * Math.floor(max)); +} diff --git a/static/setup.js b/static/setup.js index 1121f7d..7199843 100644 --- a/static/setup.js +++ b/static/setup.js @@ -77,28 +77,48 @@ function resetCardQuantities() { } function createGame() { + // generate 6 digit access code let code = ""; let charPool = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; for (let i = 0; i < 6; i++) { code += charPool[getRandomInt(61)] } console.log(code); - let id = socket.id + + // generate unique player Id for session + let id = generateID(); + sessionStorage.setItem("id", id); + + // player who creates the game is the host + sessionStorage.setItem("host", true); + + // send a new game to the server, and then join it + const playerInfo = {name: document.getElementById("name").value, code: code, id: id}; const game = new Game( code, gameSize, deck, document.getElementById("time").value, - { [socket.id]: document.getElementById("name").value } + { [socket.id]: playerInfo} ); socket.emit('newGame', game, function(data) { console.log(data); - socket.emit('joinGame', { code: code, name: document.getElementById("name").value}); + socket.emit('joinGame', playerInfo); sessionStorage.setItem('code', code); window.location.replace('/' + code); }); } +function generateID() { + let code = ""; + let charPool = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; + for (let i = 0; i < 10; i++) { + code += charPool[getRandomInt(61)] + } + return code; +} + + function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } diff --git a/static/styles.css b/static/styles.css index 1dd51ff..8b31cc8 100644 --- a/static/styles.css +++ b/static/styles.css @@ -217,6 +217,32 @@ label { box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3); } +.highlighted { + border: 2px solid #7d0b0b; +} + +.disabled { + opacity: 0.7; + color: gray; + background-color: white; + border: 1px solid gray; + pointer-events: none; + +} + +#lobby-subheader { + text-align: left; + margin-bottom: 2em; +} + +#join-count, #deck-size { + font-size: 1.5em; +} + .lobby-player p { margin: 0; } + +#launch-btn { + margin-top: 2em; +}