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;