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

simpler routing, fix socket reconnection bug, expand mod view

Browse Source
This commit is contained in:
Alec
2021-12-03 04:23:15 -05:00
parent 2b09cab5bc
commit 2debf7be35
16 changed files with 237 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/config/globals.js
View File

@@ -1,6 +1,7 @@
export const globals = {
USER_SIGNATURE_LENGTH: 25,
CLOCK_TICK_INTERVAL_MILLIS: 10,
TOAST_DURATION_DEFAULT: 6,
ACCESS_CODE_LENGTH: 6,
PLAYER_ID_COOKIE_KEY: 'play-werewolf-anon-id',
ACCESS_CODE_CHAR_POOL: 'abcdefghijklmnopqrstuvwxyz0123456789',

31
client/modules/GameStateRenderer.js
View File

@@ -1,5 +1,6 @@
import { globals } from "../config/globals.js";
import { toast } from "./Toast.js";
import {templates} from "./Templates.js";
export class GameStateRenderer {
constructor(gameState) {
@@ -87,7 +88,10 @@ export class GameStateRenderer {
}
renderModeratorView() {
let div = document.createElement("div");
div.innerHTML = templates.END_GAME_PROMPT;
document.body.appendChild(div);
renderModeratorPlayers(this.gameState.people);
}
}
@@ -120,3 +124,28 @@ function removeExistingTitle() {
existingTitle.remove();
}
}
function renderModeratorPlayers(people) {
people.sort();
let teamGood = people.filter((person) => person.alignment === globals.ALIGNMENT.GOOD);
let teamEvil = people.filter((person) => person.alignment === globals.ALIGNMENT.EVIL);
renderGroupOfPlayersFromTeam(teamEvil, globals.ALIGNMENT.EVIL);
renderGroupOfPlayersFromTeam(teamGood, globals.ALIGNMENT.GOOD);
document.getElementById("players-alive-label").innerText =
'Players: ' + people.filter((person) => !person.out).length + ' / ' + people.length + ' Alive';
}
function renderGroupOfPlayersFromTeam(players, alignment) {
for (let player of players) {
let container = document.createElement("div");
container.classList.add('moderator-player');
container.innerHTML = templates.MODERATOR_PLAYER;
container.querySelector('.moderator-player-name').innerText = player.name;
let roleElement = container.querySelector('.moderator-player-role')
roleElement.innerText = player.gameRole;
roleElement.classList.add(alignment);
document.getElementById("player-list-moderator-team-" + alignment).appendChild(container);
}
}

32
client/modules/Templates.js
View File

@@ -21,6 +21,10 @@ export const templates = {
"<div id='start-game-prompt'>" +
"<button id='start-game-button'>Start Game</button>" +
"</div>",
END_GAME_PROMPT:
"<div id='end-game-prompt'>" +
"<button id='end-game-button'>End Game</button>" +
"</div>",
GAME:
"<div id='game-header'>" +
"<div>" +
@@ -48,15 +52,29 @@ export const templates = {
"<label for='game-timer'>Time Remaining</label>" +
"<div id='game-timer'></div>" +
"</div>" +
"<div id='play-pause'>" +
"<div id='play-pause'>" + "</div>" +
"</div>" +
"<button class='moderator-player-button make-mod-button'>Transfer Mod Powers \uD83D\uDD00</button>" +
"</div>" +
"<div>" +
"<label id='players-alive-label'></label>" +
"<div id='player-list-moderator'>" +
"<div class='evil-players'>" +
"<label class='evil'>Team Evil</label>" +
"<div id='player-list-moderator-team-evil'></div>" +
"</div>" +
"<div class='good-players'>" +
"<label class='good'>Team Good</label>" +
"<div id='player-list-moderator-team-good'></div>" +
"</div>" +
"</div>" +
"</div>",
MODERATOR_PLAYER:
"<div>" +
"<label for='alive-count'>Players Left</label>" +
"<div id='alive-count'></div>" +
"<div class='moderator-player-name'></div>" +
"<div class='moderator-player-role'></div>" +
"</div>" +
"</div>" +
"<div id='player-list-moderator'></div>" +
"<button id='end-game-button'>End Game</button>"
"<div>" +
"<button class='moderator-player-button kill-player-button'>Kill \u2694</button>" +
"</div>"
}

8
client/modules/Timer.js
View File

@@ -34,11 +34,11 @@ function stepFn (expected, interval, start, totalTime) {
}
const delta = now - expected;
expected += interval;
let displayTime = (totalTime - (expected - start)) < 60000
? returnHumanReadableTime(totalTime - (expected - start), true)
: returnHumanReadableTime(totalTime - (expected - start));
let displayTime = (totalTime - (now - start)) < 60000
? returnHumanReadableTime(totalTime - (now - start), true)
: returnHumanReadableTime(totalTime - (now - start));
postMessage({
timeRemainingInMilliseconds: totalTime - (expected - start),
timeRemainingInMilliseconds: totalTime - (now - start),
displayTime: displayTime
});
Singleton.setNewTimeoutReference(setTimeout(() => {

22
client/modules/Toast.js
View File

@@ -1,34 +1,40 @@
export const toast = (message, type, positionAtTop = true, dispelAutomatically=true) => {
import {globals} from "../config/globals.js";
export const toast = (message, type, positionAtTop = true, dispelAutomatically=true, duration=null) => {
if (message && type) {
buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically);
buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration);
}
};
function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically) {
function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration) {
cancelCurrentToast();
let backgroundColor;
const position = positionAtTop ? 'top:3rem;' : 'bottom: 35px;';
let backgroundColor, border;
const position = positionAtTop ? 'top:2rem;' : 'bottom: 35px;';
switch (type) {
case 'warning':
backgroundColor = '#fff5b1';
border = '3px solid #c7c28a';
break;
case 'error':
backgroundColor = '#fdaeb7';
border = '3px solid #c78a8a';
break;
case 'success':
backgroundColor = '#bef5cb';
border = '3px solid #8ac78a;'
break;
}
let durationInSeconds = duration ? duration + 's' : globals.TOAST_DURATION_DEFAULT + 's';
let animation = '';
if (dispelAutomatically) {
animation = 'animation:fade-in-slide-down-then-exit 6s ease normal forwards';
animation = 'animation:fade-in-slide-down-then-exit ' + durationInSeconds + ' ease normal forwards';
} else {
animation = 'animation:fade-in-slide-down 6s ease normal forwards';
animation = 'animation:fade-in-slide-down ' + durationInSeconds + ' ease normal forwards';
}
const messageEl = document.createElement("div");
messageEl.setAttribute("id", "current-info-message");
messageEl.setAttribute("style", 'background-color:' + backgroundColor + ';' + position + animation);
messageEl.setAttribute("style", 'background-color:' + backgroundColor + ';' + 'border:' + border + ';' + position + animation);
messageEl.setAttribute("class", 'info-message');
messageEl.innerText = message;
document.body.prepend(messageEl);

36
client/scripts/game.js
View File

@@ -6,14 +6,17 @@ import {cancelCurrentToast, toast} from "../modules/Toast.js";
import {GameTimerManager} from "../modules/GameTimerManager.js";
export const game = () => {
let timerWorker = new Worker('../modules/Timer.js');
let timerWorker;
const socket = io('/in-game');
socket.on('disconnect', () => {
timerWorker.terminate();
if (timerWorker) {
timerWorker.terminate();
}
toast('Disconnected. Attempting reconnect...', 'error', true, false);
});
socket.on('connect', () => {
socket.emit(globals.COMMANDS.GET_ENVIRONMENT, function(returnedEnvironment) {
timerWorker = new Worker('../modules/Timer.js');
prepareGamePage(returnedEnvironment, socket, timerWorker);
});
})
@@ -26,9 +29,9 @@ function prepareGamePage(environment, socket, timerWorker) {
if (/^[a-zA-Z0-9]+$/.test(accessCode) && accessCode.length === globals.ACCESS_CODE_LENGTH) {
socket.emit(globals.COMMANDS.FETCH_GAME_STATE, accessCode, userId, function (gameState) {
if (gameState === null) {
window.location = '/not-found'
window.location = '/not-found?reason=' + encodeURIComponent('game-not-found');
} else {
toast('You are connected.', 'success', true);
toast('You are connected.', 'success', true, true, 3);
console.log(gameState);
userId = gameState.client.id;
UserUtility.setAnonymousUserId(userId, environment);
@@ -43,7 +46,7 @@ function prepareGamePage(environment, socket, timerWorker) {
}
});
} else {
window.location = '/not-found';
window.location = '/not-found?reason=' + encodeURIComponent('invalid-access-code');
}
}
@@ -64,16 +67,25 @@ function processGameState (gameState, userId, socket, gameStateRenderer) {
}
break;
case globals.STATUS.IN_PROGRESS:
document.querySelector("#start-game-prompt")?.remove();
gameStateRenderer.gameState = gameState;
gameStateRenderer.renderGameHeader();
if (gameState.client.userType === globals.USER_TYPES.PLAYER || gameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR) {
document.getElementById("game-state-container").innerHTML = templates.GAME;
gameStateRenderer.renderPlayerRole();
} else if (gameState.client.userType === globals.USER_TYPES.MODERATOR) {
document.getElementById("game-state-container").innerHTML = templates.MODERATOR_GAME_VIEW;
gameStateRenderer.renderModeratorView();
switch (gameState.client.userType) {
case globals.USER_TYPES.PLAYER:
document.getElementById("game-state-container").innerHTML = templates.GAME;
gameStateRenderer.renderPlayerRole();
break;
case globals.USER_TYPES.MODERATOR:
document.querySelector("#start-game-prompt")?.remove();
document.getElementById("game-state-container").innerHTML = templates.MODERATOR_GAME_VIEW;
gameStateRenderer.renderModeratorView();
break;
case globals.USER_TYPES.TEMPORARY_MODERATOR:
document.querySelector("#start-game-prompt")?.remove();
break;
default:
break;
}
socket.emit(globals.COMMANDS.GET_TIME_REMAINING, gameState.accessCode);
break;
default:

100
client/styles/game.css
View File

@@ -134,8 +134,9 @@ h1 {
}
#game-timer {
padding: 1px;
background-color: #3c3c3c;
padding: 10px;
margin-top: 5px;
background-color: #262626;
color: whitesmoke;
border-radius: 3px;
font-size: 35px;
@@ -228,7 +229,7 @@ label[for='moderator'] {
font-size: 30px;
}
#start-game-prompt {
#start-game-prompt, #end-game-prompt {
display: flex;
align-items: center;
justify-content: center;
@@ -252,10 +253,9 @@ label[for='moderator'] {
background-color: #333243;
}
#start-game-button {
#start-game-button, #end-game-button {
font-family: 'signika-negative', sans-serif !important;
padding: 10px;
background-color: #1c8a36;
border-radius: 3px;
color: whitesmoke;
font-size: 30px;
@@ -265,14 +265,28 @@ label[for='moderator'] {
text-shadow: 0 3px 4px rgb(0 0 0 / 85%);
}
#start-game-button {
background-color: #1c8a36;
}
#end-game-button {
background-color: #8a1c1c;
}
#start-game-button:hover {
background-color: #326243;
border: 2px solid #1c8a36;
}
#end-game-button:hover {
background-color: #623232;
border: 2px solid #8a1c1c;
}
#play-pause {
display: flex;
align-items: center;
margin-left: 1em;
}
#play-pause img {
@@ -301,6 +315,7 @@ label[for='moderator'] {
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
}
.timer-container-moderator {
@@ -308,6 +323,81 @@ label[for='moderator'] {
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-bottom: 1em;
}
.moderator-player {
border-left: 2px solid gray;
display: flex;
color: #d7d7d7;
background-color: black;
align-items: center;
padding: 0 5px;
justify-content: space-between;
margin: 0.5em 0;
}
.moderator-player-name {
width: 10em;
overflow: hidden;
white-space: nowrap;
font-weight: bold;
font-size: 18px;
text-overflow: ellipsis;
}
.kill-player-button, .make-mod-button {
font-family: 'signika-negative', sans-serif !important;
padding: 5px;
border-radius: 3px;
color: whitesmoke;
font-size: 16px;
cursor: pointer;
border: 2px solid transparent;
transition: background-color, border 0.3s ease-out;
text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
margin: 5px 0 5px 25px;
min-width: 6em;
}
.make-mod-button {
background-color: #3f5256;
font-size: 18px;
padding: 10px;
}
.good-players {
background-color: #1c1a36;
}
.evil-players {
background-color: #361a1a;
}
.kill-player-button {
background-color: #3f5256;
}
#player-list-moderator > div {
padding: 2px 10px;
border-radius: 3px;
margin-bottom: 1em;
}
#players-alive-label {
display: block;
margin-bottom: 10px;
font-size: 25px;
}
@media(max-width: 685px) {
#end-game-button {
font-size: 25px;
}
#end-game-prompt {
height: 85px;
}
}
@keyframes pulse {

20
client/views/create.html
View File

@@ -13,16 +13,16 @@
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="../styles/GLOBAL.css">
<link rel="stylesheet" href="../styles/create.css">
<link rel="stylesheet" href="../styles/modal.css">
<link rel="stylesheet" href="../styles/third_party/dropdown.min.css">
<link rel="stylesheet" href="../styles/third_party/transition.min.css">
<link rel="stylesheet" href="../styles/third_party/search.min.css">
<script src="../modules/third_party/jQuery/jquery-3.6.0.min.js"></script>
<script src="../modules/third_party/semantic-ui/transition.min.js"></script>
<script src="../modules/third_party/semantic-ui/dropdown.min.js"></script>
<script src="../modules/third_party/semantic-ui/search.min.js"></script>
<link rel="stylesheet" href="./styles/GLOBAL.css">
<link rel="stylesheet" href="./styles/create.css">
<link rel="stylesheet" href="./styles/modal.css">
<link rel="stylesheet" href="./styles/third_party/dropdown.min.css">
<link rel="stylesheet" href="./styles/third_party/transition.min.css">
<link rel="stylesheet" href="./styles/third_party/search.min.css">
<script src="./modules/third_party/jQuery/jquery-3.6.0.min.js"></script>
<script src="./modules/third_party/semantic-ui/transition.min.js"></script>
<script src="./modules/third_party/semantic-ui/dropdown.min.js"></script>
<script src="./modules/third_party/semantic-ui/search.min.js"></script>
</head>
<body>
<div id="navbar">

6
client/views/home.html
View File

@@ -16,8 +16,8 @@
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="../styles/GLOBAL.css">
<link rel="stylesheet" href="../styles/home.css">
<link rel="stylesheet" href="./styles/GLOBAL.css">
<link rel="stylesheet" href="./styles/home.css">
</head>
<body>
<img src="../images/logo_cropped.gif"/>
@@ -36,7 +36,7 @@
</form>
</div>
<script type="module">
import { home } from "../scripts/home.js";
import { home } from "./scripts/home.js";
home();
</script>
<script src="/socket.io/socket.io.js"></script>