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

first draft restarting of games

Browse Source
This commit is contained in:
AlecM33
2022-05-08 22:44:25 -04:00
parent 6ce5cbe59d
commit 04aa708f34
8 changed files with 170 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/modules/GameStateRenderer.js
View File

@@ -2,6 +2,8 @@ import { globals } from '../config/globals.js';
import { toast } from './Toast.js';
import { HTMLFragments } from './HTMLFragments.js';
import { ModalManager } from './ModalManager.js';
import {XHRUtility} from "./XHRUtility";
import {UserUtility} from "./UserUtility";
export class GameStateRenderer {
constructor (stateBucket, socket) {
@@ -256,7 +258,33 @@ export class GameStateRenderer {
}
}
renderEndOfGame () {
renderEndOfGame (gameState) {
if (
gameState.client.userType === globals.USER_TYPES.MODERATOR
|| gameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
) {
let div = document.createElement('div');
div.innerHTML = HTMLFragments.RESTART_GAME_BUTTON;
div.querySelector('#restart-game').addEventListener('click', () => {
XHRUtility.xhr(
'/api/games/' + gameState.accessCode + '/restart',
'PATCH',
null,
JSON.stringify({
playerName: gameState.client.name,
accessCode: gameState.accessCode,
sessionCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.LOCAL),
localCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.PRODUCTION)
})
)
.then((res) => {
}).catch((res) => {
});
})
document.getElementById('end-of-game-buttons').appendChild(div);
}
this.renderPlayersWithNoRoleInformationUnlessRevealed();
}
}

1
client/src/modules/GameTimerManager.js
View File

@@ -135,6 +135,7 @@ export class GameTimerManager {
const playBtn = document.createElement('img');
playBtn.setAttribute('src', '../images/play-button.svg');
playBtn.addEventListener('click', this.playListener);
document.querySelector('#play-pause-placeholder')?.remove();
document.getElementById('play-pause').appendChild(playBtn);
}

28
client/src/modules/HTMLFragments.js
View File

@@ -95,7 +95,9 @@ export const HTMLFragments = {
<label for='game-timer'>Time Remaining</label>
<div id='game-timer'></div>
</div>
<div id='play-pause'> </div>
<div id='play-pause'>
<div id="play-pause-placeholder"></div>
</div>
</div>
<button id='mod-transfer-button' class='moderator-player-button make-mod-button'>Transfer Mod Powers \uD83D\uDD00</button>
<div>
@@ -216,21 +218,27 @@ export const HTMLFragments = {
</div>
</div>`,
END_OF_GAME_VIEW:
`<h2>The moderator has ended the game. Roles are revealed.</h2>
<div id='end-of-game-header'>
<div>
<button id='role-info-button' class='app-button'>View Role Info <img src='/images/info.svg'/></button>
</div>
<div>
<a href='/'>
<button class='app-button'>Go Home \uD83C\uDFE0</button>
</a>
`<div id='end-of-game-header'>
<h2>The moderator has ended the game. Roles are revealed.</h2>
<div id="end-of-game-buttons">
<div>
<button id='role-info-button' class='app-button'>View Role Info <img src='/images/info.svg'/></button>
</div>
<div>
<a href='/'>
<button class='app-button'>Go Home \uD83C\uDFE0</button>
</a>
</div>
</div>
</div>
<div id='game-people-container'>
<label id='players-alive-label'></label>
<div id='game-player-list'></div>
</div>`,
RESTART_GAME_BUTTON:
`<div>
<button id='restart-game' class='app-button'>Run it back 🔄</button>
</div>`,
CREATE_GAME_DECK:
`<div id='deck-container'>
<div>

41
client/src/scripts/game.js
View File

@@ -59,7 +59,7 @@ function syncWithGame (stateBucket, gameTimerManager, gameStateRenderer, timerWo
document.querySelector('.spinner-background')?.remove();
document.getElementById('game-content').innerHTML = HTMLFragments.INITIAL_GAME_DOM;
toast('You are connected.', 'success', true, true, 'short');
processGameState(stateBucket.currentGameState, cookie, socket, gameStateRenderer, gameTimerManager, timerWorker);
processGameState(stateBucket.currentGameState, cookie, socket, gameStateRenderer, gameTimerManager, timerWorker, true, true);
}
});
} else {
@@ -67,7 +67,28 @@ function syncWithGame (stateBucket, gameTimerManager, gameStateRenderer, timerWo
}
}
function processGameState (currentGameState, userId, socket, gameStateRenderer, gameTimerManager, timerWorker, refreshPrompt = true) {
function processGameState (
currentGameState,
userId,
socket,
gameStateRenderer,
gameTimerManager,
timerWorker,
refreshPrompt = true,
animateContainer= false
) {
const containerAnimation = document.getElementById('game-state-container').animate(
[
{ opacity: '0', transform: 'translateY(10px)' },
{ opacity: '1', transform: 'translateY(0px)' }
], {
duration: 500,
easing: 'ease-in-out',
fill: 'both'
});
if (animateContainer) {
containerAnimation.play();
}
displayClientInfo(currentGameState.client.name, currentGameState.client.userType);
if (refreshPrompt) {
removeStartGameFunctionalityIfPresent(gameStateRenderer);
@@ -126,8 +147,7 @@ function processGameState (currentGameState, userId, socket, gameStateRenderer,
case globals.STATUS.ENDED: {
const container = document.getElementById('game-state-container');
container.innerHTML = HTMLFragments.END_OF_GAME_VIEW;
container.classList.add('vertical-flex');
gameStateRenderer.renderEndOfGame();
gameStateRenderer.renderEndOfGame(currentGameState);
break;
}
default:
@@ -190,7 +210,9 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW
socket,
gameStateRenderer,
gameTimerManager,
timerWorker
timerWorker,
true,
true
);
}
);
@@ -209,7 +231,9 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW
socket,
gameStateRenderer,
gameTimerManager,
timerWorker
timerWorker,
true,
true
);
}
);
@@ -280,6 +304,7 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW
gameStateRenderer,
gameTimerManager,
timerWorker,
false,
false
);
});
@@ -293,7 +318,9 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW
socket,
gameStateRenderer,
gameTimerManager,
timerWorker
timerWorker,
true,
true
);
});
}

20
client/src/styles/game.css
View File

@@ -47,14 +47,28 @@
display: flex;
width: 95%;
margin: 1em auto 100px auto;
animation: fade-in-slide-up 2s;
}
#game-state-container h2 {
margin: 1em 0;
text-align: center;
margin: 0.5em 0;
max-width: 17em;
}
#restart-game {
background-color: #0078D7;
min-width: 10em;
}
#play-pause-placeholder {
width: 60px;
height: 60px;
}
#restart-game:hover {
border-color: whitesmoke;
}
#lobby-header {
margin-bottom: 1em;
max-width: 95%;
@@ -84,6 +98,7 @@ h1 {
#end-of-game-header {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: 0 !important;
align-items: center;
@@ -91,6 +106,7 @@ h1 {
#end-of-game-header button {
margin: 0.5em;
min-width: 10em;
}
.potential-moderator {
display: flex;

23
server/api/GamesAPI.js
View File

@@ -89,6 +89,29 @@ router.patch('/:code/players', function (req, res) {
}
});
router.patch('/:code/restart', function (req, res) {
if (
req.body === null
|| !validateAccessCode(req.body.accessCode)
|| !validateName(req.body.playerName)
|| !validateCookie(req.body.localCookie)
|| !validateCookie(req.body.sessionCookie)
) {
res.status(400).send();
} else {
const game = gameManager.activeGameRunner.activeGames[req.body.accessCode];
if (game) {
gameManager.restartGame(game, gameManager.namespace).then((data) => {
res.status(200).send();
}).catch((code) => {
res.status(code).send();
});
} else {
res.status(404).send();
}
}
});
router.get('/environment', function (req, res) {
res.status(200).send(gameManager.environment);
});

3
server/model/Game.js
View File

@@ -1,11 +1,12 @@
class Game {
constructor (accessCode, status, people, deck, hasTimer, moderator, timerParams = null) {
constructor (accessCode, status, people, deck, hasTimer, moderator, hasDedicatedModerator, timerParams = null) {
this.accessCode = accessCode;
this.status = status;
this.moderator = moderator;
this.people = people;
this.deck = deck;
this.hasTimer = hasTimer;
this.hasDedicatedModerator = hasDedicatedModerator;
this.timerParams = timerParams;
this.isFull = false;
this.timeRemaining = null;

52
server/modules/GameManager.js
View File

@@ -187,6 +187,7 @@ class GameManager {
gameParams.deck,
gameParams.hasTimer,
moderator,
gameParams.hasDedicatedModerator,
gameParams.timerParams
);
this.activeGameRunner.activeGames[newAccessCode].createTime = new Date().toJSON();
@@ -308,6 +309,36 @@ class GameManager {
}
};
restartGame = async (game, namespace) => {
if (this.activeGameRunner.timerThreads[game.accessCode]) {
this.logger.info('KILLING STALE TIMER PROCESS FOR ' + accessCode);
this.activeGameRunner.timerThreads[game.accessCode].kill();
delete this.activeGameRunner.timerThreads[game.accessCode];
}
game.status = globals.STATUS.IN_PROGRESS;
let cards = []; // this will contain copies of each card equal to the quantity.
for (const card of game.deck) {
for (let i = 0; i < card.quantity; i ++) {
cards.push(card);
}
}
for (let i = 0; i < game.people.length; i ++) {
console.log(game.people[i].name);
console.log(cards[i].role);
if (game.people[i].out) {
game.people[i].out = false;
}
game.people[i].gameRole = cards[i].role;
game.people[i].gameRoleDescription = cards[i].description;
game.people[i].alignment = cards[i].team;
}
if (game.hasTimer) {
game.timerParams.paused = true;
this.activeGameRunner.runGame(game, namespace);
}
namespace.in(game.accessCode).emit(globals.CLIENT_COMMANDS.START_GAME);
}
handleRequestForGameState = async (namespace, logger, gameRunner, accessCode, personCookie, ackFn, clientSocket) => {
const game = gameRunner.activeGames[accessCode];
if (game) {
@@ -379,7 +410,7 @@ function initializePeopleForGame (uniqueCards, moderator) {
}
}
cards = shuffleArray(cards); // The deck should probably be shuffled, ey?.
cards = shuffle(cards); // The deck should probably be shuffled, ey?.
let j = 0;
if (moderator.userType === globals.USER_TYPES.TEMPORARY_MODERATOR) { // temporary moderators should be dealt in.
@@ -410,13 +441,20 @@ function initializePeopleForGame (uniqueCards, moderator) {
return people;
}
function shuffleArray (array) {
for (let i = 0; i < array.length; i ++) {
const randIndex = Math.floor(Math.random() * i);
const temp = array[i];
array[i] = array[randIndex];
array[randIndex] = temp;
/*
-- To shuffle an array a of n elements (indices 0..n-1):
for i from n−1 downto 1 do
j ← random integer such that 0 ≤ j ≤ i
exchange a[j] and a[i]
*/
function shuffle(array) {
for (let i = array.length - 1; i > 0; i --) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[j];
array[j] = array[i];
array[i] = temp;
}
return array;
}