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

confirmation module, tutorial updates

Browse Source
This commit is contained in:
AlecM33
2022-12-07 13:04:32 -05:00
parent 07e5202134
commit 07d452b2d2
16 changed files with 240 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
client/src/modules/front_end_components/Confirmation.js Normal file
View File

@@ -0,0 +1,63 @@
import { toast } from './Toast.js';
export const Confirmation = (message, onYes) => {
document.querySelector('#confirmation')?.remove();
document.querySelector('#confirmation-background')?.remove();
let confirmation = document.createElement('div');
confirmation.setAttribute('id', 'confirmation');
confirmation.innerHTML =
`<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>
</div>`;
confirmation.querySelector('#confirmation-message').innerText = message;
let background = document.createElement('div');
background.setAttribute('id', 'confirmation-background');
const cancelHandler = () => {
confirmation.remove();
background.remove();
confirmation = null;
background = null;
};
const confirmHandler = () => {
const button = confirmation.querySelector('#confirmation-yes-button');
button.classList.add('disabled');
button.innerText = '...';
button.removeEventListener('click', confirmHandler);
new Promise((resolve, reject) => {
try {
resolve(onYes());
} catch (e) {
reject(e);
}
}).then((res) => {
if (res && typeof res === 'string') {
toast(res, 'success', true, true, 'medium', false);
}
confirmation.remove();
background.remove();
confirmation = null;
background = null;
}).catch((e) => {
if (typeof e === 'string') {
toast(e, 'error', true, true, 'medium', false);
}
button.addEventListener('click', confirmHandler);
button.classList.remove('disabled');
button.innerText = 'Yes';
});
};
confirmation.querySelector('#confirmation-cancel-button').addEventListener('click', cancelHandler);
confirmation.querySelector('#confirmation-yes-button').addEventListener('click', confirmHandler);
background.addEventListener('click', cancelHandler);
document.body.appendChild(background);
document.body.appendChild(confirmation);
};

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

@@ -63,8 +63,8 @@ export const HTMLFragments = {
<p id='role-description'></p>
</div>
<div id='game-role-back'>
<h4>Double-tap here to show your role</h4>
<p>(Double-tap here again to hide)</p>
<h4>Double-click here to show your role</h4>
<p>(Double-click here again to hide)</p>
</div>
<div id='game-people-container'>
<label id='players-alive-label'></label>
@@ -141,8 +141,8 @@ export const HTMLFragments = {
<p id='role-description'></p>
</div>
<div id='game-role-back'>
<h4>Double-tap here to show your role</h4>
<p>(Double-tap here again to hide)</p>
<h4>Double-click here to show your role</h4>
<p>(Double-click here again to hide)</p>
</div>
<div id='game-people-container'>
<label id='players-alive-label'></label>

2
client/src/modules/front_end_components/Navbar.js
View File

@@ -43,7 +43,7 @@ function getNavbarLinks (page = null, device) {
'<a class="' + linkClass + '" href="/">Home</a>' +
'<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="mailto:play.werewolf.contact@gmail.com?Subject=Werewolf App" target="_top">Feedback</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>';
}

7
client/src/modules/game_creation/DeckStateManager.js
View File

@@ -134,6 +134,7 @@ export class DeckStateManager {
document.getElementById('deck-list').appendChild(placeholder);
};
// TODO: refactor
updateDeckStatus = () => {
document.getElementById('deck-count').innerText = this.getDeckSize() + ' Players';
if (this.deck.length > 0) {
@@ -186,10 +187,14 @@ export class DeckStateManager {
const infoHandler = (e) => {
if (e.type === 'click' || e.code === 'Enter') {
const alignmentEl = document.getElementById('custom-role-info-modal-alignment');
const nameEl = document.getElementById('custom-role-info-modal-name');
alignmentEl.classList.remove(globals.ALIGNMENT.GOOD);
alignmentEl.classList.remove(globals.ALIGNMENT.EVIL);
nameEl.classList.remove(globals.ALIGNMENT.GOOD);
nameEl.classList.remove(globals.ALIGNMENT.EVIL);
e.preventDefault();
document.getElementById('custom-role-info-modal-name').innerText = sortedDeck[i].role;
nameEl.innerText = sortedDeck[i].role;
nameEl.classList.add(sortedDeck[i].team);
alignmentEl.classList.add(sortedDeck[i].team);
document.getElementById('custom-role-info-modal-description').innerText = sortedDeck[i].description;
alignmentEl.innerText = sortedDeck[i].team;

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

@@ -3,6 +3,7 @@ import { globals } from '../../config/globals.js';
import { defaultRoles } from '../../config/defaultRoles.js';
import { toast } from '../front_end_components/Toast.js';
import { ModalManager } from '../front_end_components/ModalManager.js';
import { Confirmation } from '../front_end_components/Confirmation.js';
export class RoleBox {
constructor (container, deckManager) {
@@ -218,13 +219,13 @@ export class RoleBox {
if (remove) {
const removeHandler = (e) => {
if (e.type === 'click' || e.code === 'Enter') {
if (confirm("Delete the role '" + name + "'?")) {
Confirmation("Delete the role '" + name + "'?", () => {
e.preventDefault();
this.removeFromCustomRoles(name);
if (this.category === 'custom') {
this.displayCustomRoles(document.getElementById('role-select'));
}
}
});
}
};
role.querySelector('.role-remove').addEventListener('click', removeHandler);
@@ -234,8 +235,11 @@ export class RoleBox {
const infoHandler = (e) => {
if (e.type === 'click' || e.code === 'Enter') {
const alignmentEl = document.getElementById('custom-role-info-modal-alignment');
const nameEl = document.getElementById('custom-role-info-modal-name');
alignmentEl.classList.remove(globals.ALIGNMENT.GOOD);
alignmentEl.classList.remove(globals.ALIGNMENT.EVIL);
nameEl.classList.remove(globals.ALIGNMENT.GOOD);
nameEl.classList.remove(globals.ALIGNMENT.EVIL);
e.preventDefault();
let role;
if (isCustom) {
@@ -243,7 +247,8 @@ export class RoleBox {
} else {
role = this.getDefaultRole(name);
}
document.getElementById('custom-role-info-modal-name').innerText = name;
nameEl.innerText = name;
nameEl.classList.add(role.team);
alignmentEl.classList.add(role.team);
document.getElementById('custom-role-info-modal-description').innerText = role.description;
alignmentEl.innerText = role.team;

29
client/src/modules/game_state/GameStateRenderer.js
View File

@@ -6,6 +6,7 @@ import { XHRUtility } from '../utility/XHRUtility.js';
import { UserUtility } from '../utility/UserUtility.js';
// QRCode module via: https://github.com/soldair/node-qrcode
import { QRCode } from '../third_party/qrcode.js';
import { Confirmation } from '../front_end_components/Confirmation.js';
export class GameStateRenderer {
constructor (stateBucket, socket) {
@@ -16,9 +17,9 @@ export class GameStateRenderer {
this.transferModHandlers = {};
this.startGameHandler = (e) => { // TODO: prevent multiple emissions of this event (recommend converting to XHR)
e.preventDefault();
if (confirm('Start the game and deal roles?')) {
Confirmation('Start game and deal roles?', () => {
socket.emit(globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.START_GAME, stateBucket.currentGameState.accessCode);
}
});
};
this.restartGameHandler = (e) => {
e.preventDefault();
@@ -356,9 +357,9 @@ export class GameStateRenderer {
}
} else if (!player.out && moderatorType) {
killPlayerHandlers[player.id] = () => {
if (confirm('KILL ' + player.name + '?')) {
Confirmation('Kill \'' + player.name + '\'?', () => {
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]);
}
@@ -371,9 +372,9 @@ export class GameStateRenderer {
}
} else if (!player.revealed && moderatorType) {
revealRoleHandlers[player.id] = () => {
if (confirm('REVEAL ' + player.name + '?')) {
Confirmation('Reveal \'' + player.name + '\'?', () => {
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]);
}
@@ -398,13 +399,19 @@ function renderPotentialMods (gameState, group, transferModHandlers, socket) {
container.innerText = member.name;
transferModHandlers[member.id] = (e) => {
if (e.type === 'click' || e.code === 'Enter') {
if (confirm('Transfer moderator powers to ' + member.name + '?')) {
ModalManager.dispelModal('transfer-mod-modal', 'transfer-mod-modal-background');
Confirmation('Transfer moderator powers to \'' + member.name + '\'?', () => {
const transferPrompt = document.getElementById('transfer-mod-prompt');
if (transferPrompt !== null) {
transferPrompt.innerHTML = '';
}
socket.emit(globals.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.TRANSFER_MODERATOR, gameState.accessCode, { personId: member.id });
}
socket.emit(
globals.SOCKET_EVENTS.IN_GAME_MESSAGE,
globals.EVENT_IDS.TRANSFER_MODERATOR,
gameState.accessCode,
{ personId: member.id }
);
});
}
};
@@ -532,13 +539,13 @@ function createEndGamePromptComponent (socket, stateBucket) {
div.innerHTML = HTMLFragments.END_GAME_PROMPT;
div.querySelector('#end-game-button').addEventListener('click', (e) => {
e.preventDefault();
if (confirm('End the game?')) {
Confirmation('End the game?', () => {
socket.emit(
globals.SOCKET_EVENTS.IN_GAME_MESSAGE,
globals.EVENT_IDS.END_GAME,
stateBucket.currentGameState.accessCode
);
}
});
});
document.getElementById('game-content').appendChild(div);
}