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

more refactoring

Browse Source
This commit is contained in:
AlecM33
2022-07-17 12:45:38 -04:00
parent 130718d1c5
commit b644fe0960
16 changed files with 327 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,6 +42,21 @@ export const globals = {
PLAYER_LEFT: 'playerLeft',
NEW_SPECTATOR: 'newSpectator'
},
SOCKET_EVENTS: {
IN_GAME_MESSAGE: 'inGameMessage'
},
EVENT_IDS: {
FETCH_GAME_STATE: 'fetchGameState',
START_GAME: 'startGame',
PAUSE_TIMER: 'pauseTimer',
RESUME_TIMER: 'resumeTimer',
GET_TIME_REMAINING: 'getTimeRemaining',
KILL_PLAYER: 'killPlayer',
REVEAL_PLAYER: 'revealPlayer',
TRANSFER_MODERATOR: 'transferModerator',
CHANGE_NAME: 'changeName',
END_GAME: 'endGame'
},
USER_TYPES: {
MODERATOR: 'moderator',
PLAYER: 'player',

BIN
client/src/images/tutorial/moderation-option.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
client/src/images/tutorial/transfer-mod.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 775 KiB

After

Width:  |  Height:  |  Size: 927 KiB

2
client/src/modules/GameCreationStepManager.js
View File

@@ -305,7 +305,7 @@ function renderModerationTypeStep (game, containerId, stepNumber) {
stepContainer.innerHTML =
"<div tabindex=\"0\" id='moderation-dedicated'>I will be the <strong>dedicated mod.</strong> Don't deal me a card.</div>" +
"<div tabindex=\"0\" id='moderation-self'>The <strong>first person out</strong> will mod. Deal me into the game.</div>";
"<div tabindex=\"0\" id='moderation-self'>I will be the <strong>temporary mod</strong>. Deal me into the game.</div>";
const dedicatedOption = stepContainer.querySelector('#moderation-dedicated');
if (game.hasDedicatedModerator) {

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

@@ -17,7 +17,7 @@ export class GameStateRenderer {
this.startGameHandler = (e) => { // TODO: prevent multiple emissions of this event (recommend converting to XHR)
e.preventDefault();
if (confirm('Start the game and deal roles?')) {
socket.emit(globals.COMMANDS.START_GAME, this.stateBucket.currentGameState.accessCode);
socket.emit(globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.START_GAME, stateBucket.currentGameState.accessCode);
}
};
this.restartGameHandler = (e) => {
@@ -110,7 +110,6 @@ export class GameStateRenderer {
QRCode.toCanvas(document.getElementById('canvas'), link, { scale: 2 }, function (error) {
if (error) console.error(error);
console.log('success!');
});
const linkCopyHandler = (e) => {
@@ -358,7 +357,7 @@ export class GameStateRenderer {
} else if (!player.out && moderatorType) {
killPlayerHandlers[player.id] = () => {
if (confirm('KILL ' + player.name + '?')) {
socket.emit(globals.COMMANDS.KILL_PLAYER, accessCode, player.id);
socket.emit(globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.KILL_PLAYER, accessCode, { personId: player.id });
}
};
playerEl.querySelector('.kill-player-button').addEventListener('click', killPlayerHandlers[player.id]);
@@ -373,7 +372,7 @@ export class GameStateRenderer {
} else if (!player.revealed && moderatorType) {
revealRoleHandlers[player.id] = () => {
if (confirm('REVEAL ' + player.name + '?')) {
socket.emit(globals.COMMANDS.REVEAL_PLAYER, accessCode, player.id);
socket.emit(globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.REVEAL_PLAYER, accessCode, { personId: player.id });
}
};
playerEl.querySelector('.reveal-role-button').addEventListener('click', revealRoleHandlers[player.id]);
@@ -404,7 +403,7 @@ function renderPotentialMods (gameState, group, transferModHandlers, socket) {
if (transferPrompt !== null) {
transferPrompt.innerHTML = '';
}
socket.emit(globals.COMMANDS.TRANSFER_MODERATOR, gameState.accessCode, member.id);
socket.emit(globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.TRANSFER_MODERATOR, gameState.accessCode, { personId: member.id });
}
}
};
@@ -535,7 +534,8 @@ function createEndGamePromptComponent (socket, stateBucket) {
e.preventDefault();
if (confirm('End the game?')) {
socket.emit(
globals.COMMANDS.END_GAME,
globals.SOCKET_EVENTS.IN_GAME_MESSAGE,
globals.EVENT_IDS.END_GAME,
stateBucket.currentGameState.accessCode
);
}

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

@@ -4,10 +4,10 @@ export class GameTimerManager {
constructor (stateBucket, socket) {
this.stateBucket = stateBucket;
this.playListener = () => {
socket.emit(globals.COMMANDS.RESUME_TIMER, this.stateBucket.currentGameState.accessCode);
socket.emit(globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.RESUME_TIMER, this.stateBucket.currentGameState.accessCode);
};
this.pauseListener = () => {
socket.emit(globals.COMMANDS.PAUSE_TIMER, this.stateBucket.currentGameState.accessCode);
socket.emit(globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.PAUSE_TIMER, this.stateBucket.currentGameState.accessCode);
};
}

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

@@ -44,6 +44,7 @@ function getNavbarLinks (page = null, device) {
'<a class="' + linkClass + '" href="/create">Create</a>' +
'<a class="' + linkClass + '" href="/how-to-use">How to Use</a>' +
'<a class="' + linkClass + ' "href="mailto:play.werewolf.contact@gmail.com?Subject=Werewolf App" target="_top">Contact</a>' +
'<a class="' + linkClass + ' "href="https://github.com/alecm33/Werewolf" target="_top">Github</a>' +
'<a class="' + linkClass + '" href="https://www.buymeacoffee.com/alecm33">Support the App</a>';
}

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

@@ -50,7 +50,7 @@ function syncWithGame (stateBucket, gameTimerManager, gameStateRenderer, timerWo
const splitUrl = window.location.href.split('/game/');
const accessCode = splitUrl[1];
if (/^[a-zA-Z0-9]+$/.test(accessCode) && accessCode.length === globals.ACCESS_CODE_LENGTH) {
socket.emit(globals.COMMANDS.FETCH_GAME_STATE, accessCode, cookie, function (gameState) {
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 {
@@ -138,7 +138,7 @@ function processGameState (
break;
}
if (currentGameState.timerParams) {
socket.emit(globals.COMMANDS.GET_TIME_REMAINING, currentGameState.accessCode);
socket.emit(globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.GET_TIME_REMAINING, currentGameState.accessCode);
} else {
document.querySelector('#game-timer')?.remove();
document.querySelector('#timer-container-moderator')?.remove();
@@ -198,9 +198,10 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW
socket.on(globals.EVENTS.START_GAME, () => {
socket.emit(
globals.COMMANDS.FETCH_GAME_STATE,
globals.SOCKET_EVENTS.IN_GAME_MESSAGE,
globals.EVENT_IDS.FETCH_GAME_STATE,
stateBucket.currentGameState.accessCode,
stateBucket.currentGameState.client.cookie,
{ personId: stateBucket.currentGameState.client.cookie },
function (gameState) {
stateBucket.currentGameState = gameState;
processGameState(
@@ -219,9 +220,10 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW
socket.on(globals.EVENTS.SYNC_GAME_STATE, () => {
socket.emit(
globals.COMMANDS.FETCH_GAME_STATE,
globals.SOCKET_EVENTS.IN_GAME_MESSAGE,
globals.EVENT_IDS.FETCH_GAME_STATE,
stateBucket.currentGameState.accessCode,
stateBucket.currentGameState.client.cookie,
{ personId: stateBucket.currentGameState.client.cookie },
function (gameState) {
stateBucket.currentGameState = gameState;
processGameState(

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

@@ -74,7 +74,7 @@ textarea {
}
.toast-bottom {
bottom: 90px;
bottom: 140px;
}
.toast-success {
@@ -309,6 +309,10 @@ button {
#how-to-use-container h1 {
color: #4b6bfa;
font-family: signika-negative, sans-serif;
background-color: #1e1b26;
width: fit-content;
padding: 0 5px;
border-radius: 3px;
}
input {
@@ -355,8 +359,8 @@ input {
color: #d7d7d7;
display: flex;
flex-direction: column;
margin: 0 auto;
width: 95%;
margin: 1em auto 0 auto;
width: 90%;
max-width: 64em;
line-height: 1.5;
}
@@ -782,7 +786,7 @@ input {
@media(min-width: 551px) {
.how-to-use-header {
font-size: 40px;
font-size: 35px;
}
#how-to-use-container h3 {
font-size: 25px;