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

edit names

Browse Source
This commit is contained in:
AlecM33
2023-08-14 02:50:46 -04:00
parent 905d683ab9
commit a2ed634558
14 changed files with 172 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/modules/front_end_components/Confirmation.js
View File

@@ -1,6 +1,6 @@
import { toast } from './Toast.js';
export const Confirmation = (message, onYes = null, isDOMNode = false) => {
export const Confirmation = (message, onYes = null, isDOMNode = false, confirmButtonText = 'Yes') => {
document.querySelector('#confirmation')?.remove();
document.querySelector('#confirmation-background')?.remove();
@@ -11,7 +11,7 @@ export const Confirmation = (message, onYes = null, isDOMNode = false) => {
? `<div id="confirmation-message"></div>
<div class="confirmation-buttons">
<button id="confirmation-cancel-button" class="app-button cancel">Cancel</button>
<button id="confirmation-yes-button" class="app-button">Yes</button>
<button id="confirmation-yes-button" class="app-button">` + confirmButtonText + `</button>
</div>`
: `<div id="confirmation-message"></div>
<div class="confirmation-buttons-centered">

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

@@ -94,7 +94,7 @@ export const HTMLFragments = {
</div>
<div id='game-people-container'>
<div id="current-moderator" class="moderator">
<div id="current-moderator-name"></div>
<div id="current-moderator-name" class="person-name-element"></div>
<div id="current-moderator-type"></div>
</div>
<label id='players-alive-label'></label>
@@ -128,7 +128,7 @@ export const HTMLFragments = {
</div>
<div id='game-people-container'>
<div id="current-moderator" class="moderator">
<div id="current-moderator-name"></div>
<div id="current-moderator-name" class="person-name-element"></div>
<div id="current-moderator-type"></div>
</div>
<label id='players-alive-label'></label>
@@ -245,7 +245,7 @@ export const HTMLFragments = {
</div>`,
MODERATOR_PLAYER:
`<div>
<div class='game-player-name'></div>
<div class='game-player-name person-name-element'></div>
<div class='game-player-role'></div>
</div>
<div class='player-action-buttons'>
@@ -254,7 +254,7 @@ export const HTMLFragments = {
</div>`,
GAME_PLAYER:
`<div>
<div class='game-player-name'></div>
<div class='game-player-name person-name-element'></div>
<div class='game-player-role'></div>
</div>`,
INITIAL_GAME_DOM:
@@ -265,6 +265,9 @@ export const HTMLFragments = {
<div id='client-name'></div>
<div id='client-user-type'></div>
</div>
<button id="edit-name-button">
<img alt="edit name" src="../../images/pencil.svg"/>
</button>
</div>
<div id='game-state-container'></div>`,
// via https://loading.io/css/
@@ -283,18 +286,10 @@ export const HTMLFragments = {
<div></div>
<div></div>
</div>`,
NAME_CHANGE_MODAL:
`<div id='change-name-modal-background' class='modal-background'></div>
<div tabindex='-1' id='change-name-modal' class='modal'>
<form id='change-name-form'>
<div id='transfer-mod-form-content'>
<label for='player-new-name'>Your name:</label>
<input id='player-new-name' autocomplete='given-name' type='text'/>
</div>
<div class='modal-button-container'>
<input type='submit' id='submit-new-name' value='Set Name'/>
</div>
</form>
NAME_CHANGE_FORM:
`<div id='change-name-form-content'>
<label for='client-new-name'>Your name:</label>
<input maxlength="40" id='client-new-name' autocomplete='off' type='text'/>
</div>`,
ROLE_INFO_MODAL:
`<div id='role-info-modal-background' class='modal-background'></div>
@@ -314,7 +309,7 @@ export const HTMLFragments = {
</div>
<div id='game-people-container'>
<div id="current-moderator" class="moderator">
<div id="current-moderator-name"></div>
<div id="current-moderator-name" class="person-name-element"></div>
<div id="current-moderator-type"></div>
</div>
<label id='players-alive-label'></label>

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

@@ -98,7 +98,7 @@ export class GameCreationStepManager {
this.incrementStep();
this.renderStep('creation-step-container', this.step);
} else {
toast('Name must be between 1 and 30 characters.', 'error', true);
toast('Name must be between 1 and 40 characters.', 'error', true);
}
}
},
@@ -569,8 +569,8 @@ function initializeRemainingEventListeners (deckManager, roleBox) {
}
function processNewCustomRoleSubmission (name, description, team, deckManager, isUpdate, roleBox, option = null) {
if (name.length > 40) {
toast('Your name is too long (max 40 characters).', 'error', true);
if (name.length > 50) {
toast('Your name is too long (max 50 characters).', 'error', true);
return;
}
if (description.length > 500) {
@@ -596,5 +596,5 @@ function hasTimer (hours, minutes) {
}
function validateName (name) {
return typeof name === 'string' && name.length > 0 && name.length <= 30;
return typeof name === 'string' && name.length > 0 && name.length <= 40;
}

1
client/src/modules/game_state/states/Ended.js
View File

@@ -53,6 +53,7 @@ function renderGroupOfPlayers (
for (const player of people) {
const playerEl = document.createElement('div');
playerEl.classList.add('game-player');
playerEl.dataset.pointer = player.id;
playerEl.innerHTML = HTMLFragments.GAME_PLAYER;
playerEl.querySelector('.game-player-name').innerText = player.name;

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

@@ -322,6 +322,7 @@ export class InProgress {
for (const player of people) {
const playerEl = document.createElement('div');
playerEl.classList.add('game-player');
playerEl.dataset.pointer = player.id;
// add a reference to the player's id for each corresponding element in the list
if (moderatorType) {

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

@@ -354,8 +354,9 @@ function getTimeString (gameState) {
function renderLobbyPerson (person, gameState, socket) {
const el = document.createElement('div');
el.dataset.pointer = person.id;
const personNameEl = document.createElement('div');
personNameEl.classList.add('lobby-player-name');
personNameEl.classList.add('lobby-player-name', 'person-name-element');
const personTypeEl = document.createElement('div');
personNameEl.innerText = person.name;
personTypeEl.innerText = person.userType + USER_TYPE_ICONS[person.userType];

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

@@ -100,8 +100,9 @@ export const SharedStateUtil = {
} else {
for (const spectator of spectators) {
const spectatorEl = document.createElement('div');
spectatorEl.dataset.pointer = spectator.id;
spectatorEl.classList.add('spectator');
spectatorEl.innerHTML = '<div class=\'spectator-name\'></div>' +
spectatorEl.innerHTML = '<div class=\'spectator-name person-name-element\'></div>' +
'<div>' + 'spectator' + USER_TYPE_ICONS.spectator + '</div>';
spectatorEl.querySelector('.spectator-name').innerText = spectator.name;
list.appendChild(spectatorEl);
@@ -123,6 +124,7 @@ export const SharedStateUtil = {
},
displayCurrentModerator: (moderator) => {
document.getElementById('current-moderator').dataset.pointer = moderator.id;
document.getElementById('current-moderator-name').innerText = moderator.name;
document.getElementById('current-moderator-type').innerText = moderator.userType + USER_TYPE_ICONS[moderator.userType];
},
@@ -183,9 +185,30 @@ export const SharedStateUtil = {
});
},
displayClientInfo: (name, userType) => {
document.getElementById('client-name').innerText = name;
document.getElementById('client-user-type').innerText = userType;
document.getElementById('client-user-type').innerText += USER_TYPE_ICONS[userType];
displayClientInfo: (gameState, socket) => {
document.getElementById('client-name').innerText = gameState.client.name;
document.getElementById('client-user-type').innerText = gameState.client.userType;
document.getElementById('client-user-type').innerText += USER_TYPE_ICONS[gameState.client.userType];
const nameForm = document.createElement('form');
nameForm.setAttribute('id', 'name-change-form');
nameForm.onsubmit = (e) => {
e.preventDefault();
document.getElementById('confirmation-yes-button').click();
};
nameForm.innerHTML = HTMLFragments.NAME_CHANGE_FORM;
nameForm.querySelector('#client-new-name').value = gameState.client.name;
document.getElementById('edit-name-button').addEventListener('click', () => {
Confirmation(nameForm, () => {
socket.emit(
SOCKET_EVENTS.IN_GAME_MESSAGE,
EVENT_IDS.CHANGE_NAME,
gameState.accessCode,
{ personId: gameState.client.id, newName: document.getElementById('client-new-name').value },
(response) => {
toast(response.message, response.errorFlag === 1 ? 'error' : 'success', true);
}
);
}, true, 'Update');
});
}
};

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

@@ -135,7 +135,7 @@ function processGameState (
});
}
SharedStateUtil.displayClientInfo(currentGameState.client.name, currentGameState.client.userType);
SharedStateUtil.displayClientInfo(currentGameState, socket);
switch (currentGameState.status) {
case STATUS.LOBBY:
@@ -236,6 +236,20 @@ function setClientSocketHandlers (stateBucket, socket) {
);
});
socket.on(EVENT_IDS.CHANGE_NAME, (changedId, newName) => {
const person = stateBucket.currentGameState.people.find(person => person.id === changedId);
if (person) {
person.name = newName;
if (stateBucket.currentGameState.client.id === changedId) {
stateBucket.currentGameState.client.name = newName;
SharedStateUtil.displayClientInfo(stateBucket.currentGameState, socket);
}
document.querySelectorAll('[data-pointer="' + person.id + '"]').forEach((node) => {
node.querySelector('.person-name-element').innerText = newName;
});
}
});
socket.on(EVENT_IDS.END_GAME, (people) => {
stateBucket.currentGameState.people = people;
stateBucket.currentGameState.status = STATUS.ENDED;