Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-30 09:47:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

built out rest of functionality; add placeholder when there are no custom roles

Browse Source
This commit is contained in:
AlecM33
2023-08-16 13:43:22 -04:00
parent 25fb043292
commit 1d22aebbb9
10 changed files with 117 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/modules/game_creation/GameCreationStepManager.js
View File

@@ -54,7 +54,7 @@ export class GameCreationStepManager {
let hours = parseInt(document.getElementById('game-hours').value);
let minutes = parseInt(document.getElementById('game-minutes').value);
hours = this.standardizeNumberInput(hours);
minutes = this.standardizeNumberInput(minutes)
minutes = this.standardizeNumberInput(minutes);
if (this.timerIsValid(hours, minutes)) {
if (this.hasTimer(hours, minutes)) {
this.currentGame.hasTimer = true;
@@ -323,7 +323,7 @@ export class GameCreationStepManager {
document.getElementById(containerId).appendChild(div);
}
timerIsValid(hours, minutes) {
timerIsValid (hours, minutes) {
let valid = true;
if (hours === null && minutes === null) {
@@ -338,15 +338,14 @@ export class GameCreationStepManager {
valid = minutes <= PRIMITIVES.MAX_MINUTES;
}
return valid;
}
hasTimer(hours, minutes) {
hasTimer (hours, minutes) {
return hours !== null || minutes !== null;
}
standardizeNumberInput(input) {
standardizeNumberInput (input) {
return (isNaN(input) || input === 0) ? null : input;
}
}

13
client/src/modules/game_creation/RoleBox.js
View File

@@ -166,6 +166,7 @@ export class RoleBox {
};
displayDefaultRoles = (selectEl) => {
document.querySelector('#custom-role-placeholder')?.remove();
document.querySelectorAll('#role-select .default-role, #role-select .custom-role').forEach(e => e.remove());
this.categoryTransition.play();
for (let i = 0; i < this.defaultRoles.length; i ++) {
@@ -184,9 +185,21 @@ export class RoleBox {
this.addRoleEventListeners(selectEl, true, true, false, false, false);
};
displayCustomRolePlaceHolder = () => {
const placeholder = document.createElement('div');
placeholder.setAttribute('id', 'custom-role-placeholder');
placeholder.innerText = 'Create a role with the button below.';
document.getElementById('role-select').appendChild(placeholder);
};
displayCustomRoles = (selectEl) => {
document.querySelector('#custom-role-placeholder')?.remove();
document.querySelectorAll('#role-select .default-role, #role-select .custom-role').forEach(e => e.remove());
this.categoryTransition.play();
if (this.customRoles.length === 0) {
this.displayCustomRolePlaceHolder();
return;
}
this.customRoles.sort((a, b) => {
if (a.team !== b.team) {
return a.team === ALIGNMENT.GOOD ? -1 : 1;

33
client/src/modules/game_state/states/Lobby.js
View File

@@ -1,5 +1,5 @@
import { QRCode } from '../../third_party/qrcode.js';
import {cancelCurrentToast, toast} from '../../front_end_components/Toast.js';
import { toast } from '../../front_end_components/Toast.js';
import { EVENT_IDS, PRIMITIVES, SOCKET_EVENTS, USER_TYPE_ICONS, USER_TYPES } from '../../../config/globals.js';
import { HTMLFragments } from '../../front_end_components/HTMLFragments.js';
import { Confirmation } from '../../front_end_components/Confirmation.js';
@@ -70,16 +70,22 @@ export class Lobby {
document.getElementById('game-content').style.display = 'none';
document.body.appendChild(timerEditContainer);
document.body.appendChild(timerEditContainerBackground);
this.gameCreationStepManager
.renderTimerStep(this.stateBucket.currentGameState, '2', this.stateBucket.currentGameState, this.gameCreationStepManager.steps);
const timerEditPrompt = document.createElement('div');
timerEditPrompt.setAttribute('id', 'timer-edit-prompt');
timerEditPrompt.innerHTML = HTMLFragments.TIMER_EDIT_BUTTONS;
this.gameCreationStepManager.steps['3'].forwardHandler = (e) => {
e.preventDefault();
if (e.type === 'click' || e.code === 'Enter') {
timerEditPrompt.querySelector('#save-timer-changes-button')?.click();
}
};
this.gameCreationStepManager
.renderTimerStep('mid-game-timer-editor', '3', this.stateBucket.currentGameState, this.gameCreationStepManager.steps);
timerEditPrompt.querySelector('#save-timer-changes-button').addEventListener('click', () => {
let hours = parseInt(document.getElementById('game-hours').value);
let minutes = parseInt(document.getElementById('game-minutes').value);
hours = this.gameCreationStepManager.standardizeNumberInput(hours);
minutes = this.gameCreationStepManager.standardizeNumberInput(minutes)
minutes = this.gameCreationStepManager.standardizeNumberInput(minutes);
if (this.gameCreationStepManager.timerIsValid(hours, minutes)) {
let hasTimer, timerParams;
if (this.gameCreationStepManager.hasTimer(hours, minutes)) {
@@ -116,7 +122,7 @@ export class Lobby {
});
timerEditContainer.appendChild(timerEditPrompt);
}
};
this.editRolesHandler = (e) => {
e.preventDefault();
@@ -194,11 +200,17 @@ export class Lobby {
'Participants (' + inLobbyCount + '/' + this.stateBucket.currentGameState.gameSize + ' Players)';
}
populateHeader () {
setTimer () {
const timeString = getTimeString(this.stateBucket.currentGameState);
const time = this.container.querySelector('#game-time');
time.innerText = timeString;
return timeString;
}
populateHeader () {
const timeString = this.setTimer();
const link = this.setLink(timeString);
this.setPlayerCount();
@@ -293,6 +305,13 @@ export class Lobby {
this.setPlayerCount();
});
this.socket.on(EVENT_IDS.UPDATE_GAME_TIMER, (hasTimer, timerParams) => {
this.stateBucket.currentGameState.hasTimer = hasTimer;
this.stateBucket.currentGameState.timerParams = timerParams;
const timeString = this.setTimer();
this.setLink(timeString);
});
this.socket.on(EVENT_IDS.LEAVE_ROOM, (leftId, gameIsStartable) => {
if (leftId === this.stateBucket.currentGameState.client.id) {
window.location = '/?message=' + encodeURIComponent('You left the room.');
@@ -335,6 +354,7 @@ export class Lobby {
if (existingPrompt) {
enableStartButton(existingPrompt, this.startGameHandler);
document.getElementById('edit-roles-button').addEventListener('click', this.editRolesHandler);
document.getElementById('edit-timer-button').addEventListener('click', this.editTimerHandler);
} else {
const newPrompt = document.createElement('div');
newPrompt.setAttribute('id', 'start-game-prompt');
@@ -343,6 +363,7 @@ export class Lobby {
document.body.appendChild(newPrompt);
enableStartButton(newPrompt, this.startGameHandler);
document.getElementById('edit-roles-button').addEventListener('click', this.editRolesHandler);
document.getElementById('edit-timer-button').addEventListener('click', this.editTimerHandler);
}
}

5
client/src/modules/page_handlers/gameHandler.js
View File

@@ -221,7 +221,10 @@ function setClientSocketHandlers (stateBucket, socket) {
socket.on(EVENT_IDS.START_GAME, () => { fetchGameStateHandler(startGameStateAckFn); });
socket.on(EVENT_IDS.RESTART_GAME, () => { fetchGameStateHandler(restartGameStateAckFn); });
socket.on(EVENT_IDS.RESTART_GAME, () => {
document.querySelector('#game-control-prompt')?.remove();
fetchGameStateHandler(restartGameStateAckFn);
});
socket.on(EVENT_IDS.SYNC_GAME_STATE, () => {
socket.emit(