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

Merge pull request #3 from AlecM33/develop

Browse Source 
tracking of players accross session using id in storage, create game …
This commit is contained in:
Alec Maier
2019-08-30 20:38:04 -04:00
committed by GitHub
parent 385c5d4e79 f873540171
commit 65729d5650
6 changed files with 92 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
game.html
View File

@@ -9,9 +9,8 @@
</head>
<body>
<div class="app-content">
<div id="lobby-container">
</div>
<div id="lobby-container"></div>
<div id="launch-btn"></div>
</div>
<script type="module" src="/static/game.js"></script>
</body>

2
server.js
View File

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

26
static/game.js
View File

@@ -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 = "<div>" +
"<span id='join-count'>" + Object.keys(currentGame.players).length + "</span>" +
"<span id='deck-size'>/" + currentGame.size + " Players</span>" +
"</div>" +
"<br>" +
"<div id='game-code'>Access Code: " + currentGame.accessCode + "</div>";
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 = "<p>" + currentGame.players[key] + "</p>";
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 = "<p>" + currentGame.players[key].name + "</p>";
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 = "<button class='app-btn'>Start Game</button>"
: document.getElementById("launch-btn").innerHTML = "<button class='app-btn disabled'>Start Game</button>"
}
}
// request the current state of the game from the server

21
static/join.js
View File

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

26
static/setup.js
View File

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

26
static/styles.css
View File

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