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

part 4 of redis effort

Browse Source
This commit is contained in:
AlecM33
2023-01-14 00:18:35 -05:00
parent a90d99ef0b
commit 148cfb63db
14 changed files with 324 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/config/globals.js
View File

@@ -54,6 +54,7 @@ export const globals = {
UPDATE_SPECTATORS: 'updateSpectators',
RESTART_GAME: 'restartGame',
ASSIGN_DEDICATED_MOD: 'assignDedicatedMod'
},
USER_TYPES: {
MODERATOR: 'moderator',

70
client/src/modules/front_end_components/HTMLFragments.js
View File

@@ -52,7 +52,22 @@ export const HTMLFragments = {
`<div id='game-header'>
<div>
<label for='game-timer'>Time Remaining</label>
<div id='game-timer'></div>
<div id='game-timer'>
<div class="lds-spinner lds-spinner-clock">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div>
<button id='role-info-button' class='app-button'>Roles in This Game <img src='/images/info.svg'/></button>
@@ -76,7 +91,22 @@ export const HTMLFragments = {
`<div id='game-header'>
<div>
<label for='game-timer'>Time Remaining</label>
<div id='game-timer'></div>
<div id='game-timer'>
<div class="lds-spinner lds-spinner-clock">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div>
<button id='role-info-button' class='app-button'>Roles in This Game <img src='/images/info.svg'/></button>
@@ -101,7 +131,22 @@ export const HTMLFragments = {
<div id='timer-container-moderator'>
<div>
<label for='game-timer'>Time Remaining</label>
<div id='game-timer'></div>
<div id='game-timer'>
<div class="lds-spinner lds-spinner-clock">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div id='play-pause'>
<div id="play-pause-placeholder"></div>
@@ -131,7 +176,22 @@ export const HTMLFragments = {
<div id='timer-container-moderator'>
<div>
<label for='game-timer'>Time Remaining</label>
<div id='game-timer'></div>
<div id='game-timer'>
<div class="lds-spinner lds-spinner-clock">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div id='play-pause'> </div>
</div>
@@ -180,7 +240,7 @@ export const HTMLFragments = {
<div id='game-state-container'></div>`,
// via https://loading.io/css/
SPINNER:
`<div class="lds-spinner">
`<div class="lds-spinner lds-spinner-clock">
<div></div>
<div></div>
<div></div>

6
client/src/modules/game_state/states/InProgress.js
View File

@@ -51,6 +51,12 @@ export class InProgress {
globals.EVENT_IDS.GET_TIME_REMAINING,
this.stateBucket.currentGameState.accessCode
);
setTimeout(() => {
if (this.socket.hasListeners(globals.EVENT_IDS.GET_TIME_REMAINING)) {
document.getElementById('game-timer').innerText = 'could not retrieve';
document.getElementById('game-timer').classList.add('timer-error');
}
}, 15000);
} else {
document.querySelector('#game-timer')?.remove();
document.querySelector('#timer-container-moderator')?.remove();

25
client/src/modules/game_state/states/shared/SharedStateUtil.js
View File

@@ -118,20 +118,21 @@ export const SharedStateUtil = {
const accessCode = splitUrl[1];
if (/^[a-zA-Z0-9]+$/.test(accessCode) && accessCode.length === globals.ACCESS_CODE_LENGTH) {
socket.emit(globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.FETCH_GAME_STATE, accessCode, { personId: cookie }, function (gameState) {
if (gameState === null) {
window.location = '/not-found?reason=' + encodeURIComponent('game-not-found');
} else {
stateBucket.currentGameState = gameState;
document.querySelector('.spinner-container')?.remove();
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, true, true);
}
// if (gameState === null) {
// window.location = '/not-found?reason=' + encodeURIComponent('game-not-found');
// } else {
stateBucket.currentGameState = gameState;
document.querySelector('.spinner-container')?.remove();
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, true, true);
// }
});
} else {
window.location = '/not-found?reason=' + encodeURIComponent('invalid-access-code');
}
// else {
// window.location = '/not-found?reason=' + encodeURIComponent('invalid-access-code');
// }
},
buildSpectatorList (people) {

20
client/src/modules/timer/GameTimerManager.js
View File

@@ -123,17 +123,15 @@ export class GameTimerManager {
});
}
if (!socket.hasListeners(globals.COMMANDS.GET_TIME_REMAINING)) {
socket.on(globals.COMMANDS.GET_TIME_REMAINING, (timeRemaining, paused) => {
if (paused) {
this.displayPausedTime(timeRemaining);
} else if (timeRemaining === 0) {
this.displayExpiredTime();
} else {
this.resumeGameTimer(timeRemaining, globals.CLOCK_TICK_INTERVAL_MILLIS, null, timerWorker);
}
});
}
socket.once(globals.COMMANDS.GET_TIME_REMAINING, (timeRemaining, paused) => {
if (paused) {
this.displayPausedTime(timeRemaining);
} else if (timeRemaining === 0) {
this.displayExpiredTime();
} else {
this.resumeGameTimer(timeRemaining, globals.CLOCK_TICK_INTERVAL_MILLIS, null, timerWorker);
}
});
if (!socket.hasListeners(globals.COMMANDS.END_TIMER)) {
socket.on(globals.COMMANDS.END_TIMER, () => {

7
client/src/styles/GLOBAL.css
View File

@@ -710,6 +710,13 @@ input {
display: inline-block;
width: 80px;
}
.lds-spinner-clock {
position: absolute;
transform: scale(0.3);
top: -23px;
}
.lds-spinner div {
transform-origin: 40px 40px;
animation: lds-spinner 1.2s linear infinite;

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

@@ -348,12 +348,18 @@ h1 {
font-size: 35px;
text-shadow: 0 3px 4px rgb(0 0 0 / 85%);
border: 1px solid #747474;
min-width: 5em;
width: 204px;
display: flex;
justify-content: center;
align-items: center;
height: 43px;
margin-bottom: 0.5em;
margin-bottom: 15px;
position: relative;
}
.timer-error {
color: #c51212 !important;
font-size: 20px !important;
}
#game-timer.low {
@@ -861,6 +867,7 @@ canvas {
padding: 5px;
font-size: 30px;
height: 30px;
width: 167px;
}
#role-info-button, #mod-transfer-button {