Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2026-01-01 00:46:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

join purposefully as spectator, various improvements

Browse Source
This commit is contained in:
AlecM33
2022-12-29 15:38:40 -05:00
parent 63b1157c7d
commit e0dffe17b6
22 changed files with 221 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
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) => {
export const Confirmation = (message, onYes = null, innerHTML = false) => {
document.querySelector('#confirmation')?.remove();
document.querySelector('#confirmation-background')?.remove();
@@ -17,7 +17,11 @@ export const Confirmation = (message, onYes = null) => {
<button id="confirmation-yes-button" class="app-button">OK</button>
</div>`;
confirmation.querySelector('#confirmation-message').innerText = message;
if (innerHTML) {
confirmation.querySelector('#confirmation-message').innerHTML = message;
} else {
confirmation.querySelector('#confirmation-message').innerText = message;
}
let background = document.createElement('div');
background.setAttribute('id', 'confirmation-background');

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

@@ -69,6 +69,7 @@ export const HTMLFragments = {
</div>
<div id='game-people-container'>
<label id='players-alive-label'></label>
<div id="spectator-count"></div>
<div id='game-player-list'></div>
</div>`,
SPECTATOR_GAME_VIEW:
@@ -83,6 +84,7 @@ export const HTMLFragments = {
</div>
<div id='game-people-container'>
<label id='players-alive-label'></label>
<div id="spectator-count"></div>
<div id='game-player-list'></div>
</div>`,
TRANSFER_MOD_MODAL:
@@ -147,6 +149,7 @@ export const HTMLFragments = {
</div>
<div id='game-people-container'>
<label id='players-alive-label'></label>
<div id="spectator-count"></div>
<div id='game-player-list'></div>
</div>
</div>`,

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

@@ -44,8 +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">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>';
'<a class="' + linkClass + ' "href="https://github.com/alecm33/Werewolf" target="_top">Github</a>';
}
function attachHamburgerListener () {

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

@@ -153,9 +153,12 @@ export class GameCreationStepManager {
}
}).catch((e) => {
restoreButton();
toast(e.content, 'error', true, true, 'medium');
if (e.status === 429) {
toast('You\'ve sent this request too many times.', 'error', true, true, 'medium');
} else if (e.status === 413) {
toast('Your request is too large.', 'error', true, true);
} else {
toast(e.content, 'error', true, true, 'medium');
}
});
}

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

@@ -56,6 +56,19 @@ export class InProgress {
document.querySelector('#timer-container-moderator')?.remove();
document.querySelector('label[for="game-timer"]')?.remove();
}
const spectatorCount = this.container.querySelector('#spectator-count');
if (spectatorCount) {
spectatorCount?.addEventListener('click', () => {
Confirmation(SharedStateUtil.buildSpectatorList(this.stateBucket.currentGameState.spectators), null, true);
});
SharedStateUtil.setNumberOfSpectators(
this.stateBucket.currentGameState.spectators.length,
spectatorCount
);
}
}
renderPlayerView (isKilled = false) {
@@ -142,6 +155,7 @@ export class InProgress {
const killedPerson = this.stateBucket.currentGameState.people.find((person) => person.id === id);
if (killedPerson) {
killedPerson.out = true;
killedPerson.userType = globals.USER_TYPES.KILLED_PLAYER;
if (this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.MODERATOR) {
toast(killedPerson.name + ' killed.', 'success', true, true, 'medium');
this.renderPlayersWithRoleAndAlignmentInfo(this.stateBucket.currentGameState.status === globals.STATUS.ENDED);
@@ -459,7 +473,9 @@ function renderPotentialMods (gameState, group, transferModHandlers, socket) {
container.classList.add('potential-moderator');
container.setAttribute('tabindex', '0');
container.dataset.pointer = member.id;
container.innerText = member.name;
container.innerHTML =
'<div class=\'potential-mod-name\'>' + member.name + '</div>' +
'<div>' + member.userType + ' ' + globals.USER_TYPE_ICONS[member.userType] + ' </div>';
transferModHandlers[member.id] = (e) => {
if (e.type === 'click' || e.code === 'Enter') {
ModalManager.dispelModal('transfer-mod-modal', 'transfer-mod-modal-background');

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

@@ -3,6 +3,7 @@ import { toast } from '../../front_end_components/Toast.js';
import { globals } from '../../../config/globals.js';
import { HTMLFragments } from '../../front_end_components/HTMLFragments.js';
import { Confirmation } from '../../front_end_components/Confirmation.js';
import { SharedStateUtil } from './shared/SharedStateUtil.js';
export class Lobby {
constructor (containerId, stateBucket, socket) {
@@ -46,10 +47,14 @@ export class Lobby {
const playerCount = this.container.querySelector('#game-player-count');
playerCount.innerText = this.stateBucket.currentGameState.gameSize + ' Players';
setNumberOfSpectators(
this.container.querySelector('#spectator-count').addEventListener('click', () => {
Confirmation(SharedStateUtil.buildSpectatorList(this.stateBucket.currentGameState.spectators), null, true);
});
SharedStateUtil.setNumberOfSpectators(
this.stateBucket.currentGameState.spectators.length,
this.container.querySelector('#spectator-count')
)
);
const gameCode = this.container.querySelector('#game-code');
gameCode.innerHTML = 'Or enter this code on the homepage: <span>' +
@@ -96,7 +101,7 @@ export class Lobby {
this.socket.on(globals.EVENT_IDS.NEW_SPECTATOR, (spectator) => {
this.stateBucket.currentGameState.spectators.push(spectator);
setNumberOfSpectators(
SharedStateUtil.setNumberOfSpectators(
this.stateBucket.currentGameState.spectators.length,
document.getElementById('spectator-count')
);
@@ -136,12 +141,6 @@ export class Lobby {
}
}
function setNumberOfSpectators(number, el) {
el.innerText = '+ ' + (number === 1
? number + ' Spectator'
: number + ' Spectators');
}
function enableOrDisableStartButton (gameState, buttonContainer, handler) {
if (gameState.isFull) {
buttonContainer.querySelector('#start-game-button').addEventListener('click', handler);
@@ -189,6 +188,7 @@ function getTimeString (gameState) {
function renderLobbyPerson (name, userType) {
const el = document.createElement('div');
const personNameEl = document.createElement('div');
personNameEl.classList.add('lobby-player-name');
const personTypeEl = document.createElement('div');
personNameEl.innerText = name;
personTypeEl.innerText = userType + globals.USER_TYPE_ICONS[userType];

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

@@ -130,6 +130,27 @@ export const SharedStateUtil = {
} else {
window.location = '/not-found?reason=' + encodeURIComponent('invalid-access-code');
}
},
buildSpectatorList (spectators) {
if (spectators.length === 0) {
return '<div>Nobody currently spectating.</div>';
}
let html = '';
for (const spectator of spectators) {
html += `<div class='spectator'>
<div class='spectator-name'>` + spectator.name + '</div>' +
'<div>' + 'spectator' + globals.USER_TYPE_ICONS.spectator + `</div>
</div>`;
}
return html;
},
setNumberOfSpectators: (number, el) => {
el.innerText = '+ ' + (number === 1
? number + ' Spectator'
: number + ' Spectators');
}
};