Skip to content

Commit

Permalink
Merge pull request #174 from AlecM33/edit-timer
Browse files Browse the repository at this point in the history 
Edit timer
  • Loading branch information
@AlecM33
AlecM33 committed Aug 16, 2023
2 parents 92a48bd + 54d16ff commit be68f16
Show file tree
Hide file tree
Showing 13 changed files with 285 additions and 119 deletions.
4 changes: 2 additions & 2 deletions client/src/config/defaultRoles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ export const defaultRoles = [
{
role: 'Doctor',
team: 'good',
description: `Each night, choose a player to protect from the Werewolves. This can be yourself. If the Werewolves
target this person, they still survive to the following day.`
description: 'Each night, choose a player to protect from the Werewolves. This can be yourself. If the Werewolves ' +
'target this person, they still survive to the following day.'
},
{
role: 'Parity Hunter',
Expand Down
4 changes: 4 additions & 0 deletions client/src/config/globals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export const PRIMITIVES = {
MAX_CUSTOM_ROLE_DESCRIPTION_LENGTH: 1000,
TOAST_DURATION_DEFAULT: 6,
ACCESS_CODE_LENGTH: 4,
MAX_MINUTES: 59,
MAX_HOURS: 5,
PLAYER_ID_COOKIE_KEY: 'play-werewolf-anon-id'
};

Expand Down Expand Up @@ -75,6 +77,7 @@ export const EVENT_IDS = {
ASSIGN_DEDICATED_MOD: 'assignDedicatedMod',
KICK_PERSON: 'kickPerson',
UPDATE_GAME_ROLES: 'updateGameRoles',
UPDATE_GAME_TIMER: 'updateGameTimer',
LEAVE_ROOM: 'leaveRoom'
};

Expand All @@ -93,6 +96,7 @@ export const LOBBY_EVENTS = function () {
EVENT_IDS.ADD_SPECTATOR,
EVENT_IDS.KICK_PERSON,
EVENT_IDS.UPDATE_GAME_ROLES,
EVENT_IDS.UPDATE_GAME_TIMER,
EVENT_IDS.LEAVE_ROOM
];
};
Expand Down
8 changes: 7 additions & 1 deletion client/src/modules/front_end_components/HTMLFragments.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const HTMLFragments = {
<div id='game-parameters'>
<div>
<img alt='clock' src='/images/clock.svg'/>
<div id='game-time'></div>
<div id='timer-parameters'></div>
</div>
<div>
<img alt='person' src='/images/person.svg'/>
Expand Down Expand Up @@ -46,6 +46,7 @@ export const HTMLFragments = {
</div>`,
START_GAME_PROMPT:
`<button id='edit-roles-button'>Edit Roles</button>
<button id='edit-timer-button'>Edit Timer</button>
<button id='start-game-button'>Start Game</button>`,
LEAVE_GAME_PROMPT:
'<button id=\'leave-game-button\'>Leave Room</button>',
Expand All @@ -58,6 +59,11 @@ export const HTMLFragments = {
<button class="app-button" id="save-role-changes-button">
<p>Save</p><img src="../images/save-svgrepo-com.svg" alt='save'>
</button>`,
TIMER_EDIT_BUTTONS:
`<button class="app-button cancel" id="cancel-timer-changes-button">Cancel</button>
<button class="app-button" id="save-timer-changes-button">
<p>Save</p><img src="../images/save-svgrepo-com.svg" alt='save'>
</button>`,
PLAYER_GAME_VIEW:
`<div id='game-header'>
<div>
Expand Down
124 changes: 68 additions & 56 deletions client/src/modules/game_creation/GameCreationStepManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,10 @@ export class GameCreationStepManager {
if (e.type === 'click' || e.code === 'Enter') {
let hours = parseInt(document.getElementById('game-hours').value);
let minutes = parseInt(document.getElementById('game-minutes').value);
hours = isNaN(hours) ? null : hours;
minutes = isNaN(minutes) ? null : minutes;
if ((hours === null && minutes === null)
|| (hours === null && minutes > 0 && minutes < 60)
|| (minutes === null && hours > 0 && hours < 6)
|| (hours === 0 && minutes > 0 && minutes < 60)
|| (minutes === 0 && hours > 0 && hours < 6)
|| (hours > 0 && hours < 6 && minutes >= 0 && minutes < 60)
) {
if (hasTimer(hours, minutes)) {
hours = this.standardizeNumberInput(hours);
minutes = this.standardizeNumberInput(minutes);
if (this.timerIsValid(hours, minutes)) {
if (this.hasTimer(hours, minutes)) {
this.currentGame.hasTimer = true;
this.currentGame.timerParams = {
hours: hours,
Expand All @@ -77,11 +71,7 @@ export class GameCreationStepManager {
this.incrementStep();
this.renderStep('creation-step-container', this.step);
} else {
if (hours === 0 && minutes === 0) {
toast('You must enter a non-zero amount of time.', 'error', true);
} else {
toast('Invalid timer options. Hours can be a max of 5, Minutes a max of 59.', 'error', true);
}
toast('Invalid timer options. Hours can be a max of 5, Minutes a max of 59.', 'error', true);
}
}
},
Expand Down Expand Up @@ -149,7 +139,7 @@ export class GameCreationStepManager {
restoreButton();
break;
case 400:
toast('Your game has invalid parameters..', 'error', true, true);
toast('Your game has invalid parameters.', 'error', true, true);
restoreButton();
break;
case 201:
Expand Down Expand Up @@ -198,7 +188,7 @@ export class GameCreationStepManager {
showButtons(true, true, this.steps[step].forwardHandler, this.steps[step].backHandler);
break;
case 3:
renderTimerStep(containerId, step, this.currentGame, this.steps);
this.renderTimerStep(containerId, step, this.currentGame, this.steps);
showButtons(true, true, this.steps[step].forwardHandler, this.steps[step].backHandler);
break;
case 4:
Expand Down Expand Up @@ -297,6 +287,67 @@ export class GameCreationStepManager {

initializeRemainingEventListeners(this.deckManager, this.roleBox);
};

renderTimerStep (containerId, stepNumber, game, steps) {
const div = document.createElement('div');
div.setAttribute('id', 'step-' + stepNumber);
div.classList.add('step');

const timeContainer = document.createElement('div');
timeContainer.setAttribute('id', 'game-time');

const hoursDiv = document.createElement('div');
const hoursLabel = document.createElement('label');
hoursLabel.setAttribute('for', 'game-hours');
hoursLabel.innerText = 'Hours';
const hours = document.createElement('input');
hours.addEventListener('keyup', steps[stepNumber].forwardHandler);
setAttributes(hours, { type: 'number', id: 'game-hours', name: 'game-hours', min: '0', max: '5', value: game.timerParams?.hours });

const minutesDiv = document.createElement('div');
const minsLabel = document.createElement('label');
minsLabel.setAttribute('for', 'game-minutes');
minsLabel.innerText = 'Minutes';
const minutes = document.createElement('input');
minutes.addEventListener('keyup', steps[stepNumber].forwardHandler);
setAttributes(minutes, { type: 'number', id: 'game-minutes', name: 'game-minutes', min: '1', max: '60', value: game.timerParams?.minutes });

hoursDiv.appendChild(hoursLabel);
hoursDiv.appendChild(hours);
minutesDiv.appendChild(minsLabel);
minutesDiv.appendChild(minutes);
timeContainer.appendChild(hoursDiv);
timeContainer.appendChild(minutesDiv);
div.appendChild(timeContainer);

document.getElementById(containerId).appendChild(div);
}

timerIsValid (hours, minutes) {
let valid = true;

if (hours === null && minutes === null) {
return valid;
}

if (hours !== null) {
valid = hours > 0 && hours <= PRIMITIVES.MAX_HOURS;
}

if (minutes !== null) {
valid = minutes > 0 && minutes <= PRIMITIVES.MAX_MINUTES;
}

return valid;
}

hasTimer (hours, minutes) {
return hours !== null || minutes !== null;
}

standardizeNumberInput (input) {
return (isNaN(input) || input === 0) ? null : input;
}
}

function renderNameStep (containerId, step, game, steps) {
Expand Down Expand Up @@ -358,41 +409,6 @@ function renderModerationTypeStep (game, containerId, stepNumber) {
document.getElementById(containerId).appendChild(stepContainer);
}

function renderTimerStep (containerId, stepNumber, game, steps) {
const div = document.createElement('div');
div.setAttribute('id', 'step-' + stepNumber);
div.classList.add('step');

const timeContainer = document.createElement('div');
timeContainer.setAttribute('id', 'game-time');

const hoursDiv = document.createElement('div');
const hoursLabel = document.createElement('label');
hoursLabel.setAttribute('for', 'game-hours');
hoursLabel.innerText = 'Hours';
const hours = document.createElement('input');
hours.addEventListener('keyup', steps[stepNumber].forwardHandler);
setAttributes(hours, { type: 'number', id: 'game-hours', name: 'game-hours', min: '0', max: '5', value: game.timerParams?.hours });

const minutesDiv = document.createElement('div');
const minsLabel = document.createElement('label');
minsLabel.setAttribute('for', 'game-minutes');
minsLabel.innerText = 'Minutes';
const minutes = document.createElement('input');
minutes.addEventListener('keyup', steps[stepNumber].forwardHandler);
setAttributes(minutes, { type: 'number', id: 'game-minutes', name: 'game-minutes', min: '1', max: '60', value: game.timerParams?.minutes });

hoursDiv.appendChild(hoursLabel);
hoursDiv.appendChild(hours);
minutesDiv.appendChild(minsLabel);
minutesDiv.appendChild(minutes);
timeContainer.appendChild(hoursDiv);
timeContainer.appendChild(minutesDiv);
div.appendChild(timeContainer);

document.getElementById(containerId).appendChild(div);
}

function renderReviewAndCreateStep (containerId, stepNumber, game, deckManager) {
const div = document.createElement('div');
div.setAttribute('id', 'step-' + stepNumber);
Expand Down Expand Up @@ -591,10 +607,6 @@ function processNewCustomRoleSubmission (name, description, team, deckManager, i
}
}

function hasTimer (hours, minutes) {
return hours !== null || minutes !== null;
}

function validateName (name) {
return typeof name === 'string' && name.length > 0 && name.length <= PRIMITIVES.MAX_PERSON_NAME_LENGTH;
}
13 changes: 13 additions & 0 deletions client/src/modules/game_creation/RoleBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ++) {
Expand All @@ -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;
Expand Down
Loading

0 comments on commit be68f16

Please sign in to comment.