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

Stable animation, pause when window not focused

Browse Source
This commit is contained in:
Maier
2020-01-08 11:17:35 -05:00
parent 37dbade6a4
commit 051ba932fe
2 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
server.js
View File

@@ -172,7 +172,7 @@ io.on('connection', function(socket) {
game.killedPlayer = player.name;
game.lastKilled = player.id;
game.killedRole = player.card.role;
game.message = player.name + ", a " + player.card.role + " was killed!"
game.message = player.name + ", a " + player.card.role + ", was killed!"
const winCheck = teamWon(game);
if (winCheck === "wolf") {
game.winningTeam = "wolf";

30
static/game.js
View File

@@ -12,14 +12,21 @@ let lastKilled = null;
// respond to the game state received from the server
socket.on('state', function(game) {
currentGame = game;
if (game.killedPlayer && game.killedRole && game.lastKilled !== lastKilled) { // a new player has been killed
lastKilled = game.lastKilled;
playKilledAnimation();
document.getElementById("message-box").innerText = game.message;
}
buildGameBasedOnState();
});
window.onblur = function() { // pause animations if the window is not in focus
this.document.querySelector("#overlay").style.animationPlayState = 'paused';
this.document.querySelector("#killed-role").style.animationPlayState = 'paused';
this.document.querySelector("#killed-name").style.animationPlayState = 'paused';
}
window.onfocus = function() { // play animations when window is focused
this.document.querySelector("#overlay").style.animationPlayState = 'running';
this.document.querySelector("#killed-role").style.animationPlayState = 'running';
this.document.querySelector("#killed-name").style.animationPlayState = 'running';
}
function buildGameBasedOnState() {
switch(currentGame.state) {
case "lobby":
@@ -38,8 +45,7 @@ function buildGameBasedOnState() {
function hideAfterExit(e) {
e.target.style.display = 'none'
e.target.removeEventListener('animationend', triggerExitAnimation);
e.target.removeEventListener('animationend', hideAfterExit);
e.target.classList.remove(e.target.exitClass);
}
function triggerExitAnimation(e) {
@@ -48,14 +54,14 @@ function triggerExitAnimation(e) {
e.target.offsetWidth;
e.target.classList.add(e.target.exitClass);
window.setTimeout(()=>{
e.target.addEventListener('animationend', hideAfterExit);
e.target.addEventListener('animationend', hideAfterExit, {"capture": true, "once": true});
},0);
}
function triggerEntranceAnimation(selector, entranceClass, exitClass, image) {
let transitionEl = document.querySelector(selector);
transitionEl.style.display = 'block';
transitionEl.addEventListener('animationend', triggerExitAnimation);
transitionEl.addEventListener('animationend', triggerExitAnimation, {"capture": true, "once": true});
transitionEl.classList.remove(entranceClass);
transitionEl.entranceClass = entranceClass;
transitionEl.exitClass = exitClass;
@@ -118,6 +124,12 @@ function renderEndSplash() {
}
function renderGame() {
if (currentGame.killedRole && currentGame.lastKilled !== lastKilled) { // a new player has been killed
lastKilled = currentGame.lastKilled;
document.getElementById("killed-name").innerText = currentGame.killedPlayer + " was a " + currentGame.killedRole + "!";
playKilledAnimation();
document.getElementById("message-box").innerText = currentGame.message;
}
const player = currentGame.players.find((player) => player.id === sessionStorage.getItem("id"));
// render the header