Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

join and display the current lobby to all players

Browse Source
This commit is contained in:
Maier
2019-08-30 17:38:04 -04:00
parent 8b16ab1aaa
commit 095c5ed7aa
6 changed files with 75 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
game.html
View File

@@ -10,7 +10,7 @@
<body>
<div class="app-content">
<div id="lobby-container">
<h2>this is a game</h2>
</div>
</div>
<script type="module" src="/static/game.js"></script>

1
index.html
View File

@@ -24,6 +24,5 @@
<footer id="footer">
<img src="assets/images/vanilla_js.png">
</footer>
<script src="/static/game.js"></script>
</body>
</html>

17
server.js
View File

@@ -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)]);
}
});
});

33
static/game.js
View File

@@ -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 = "<p>" + currentGame.players[key] + "</p>";
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")});
}

9
static/setup.js
View File

@@ -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) {

24
static/styles.css
View File

@@ -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;
}