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

some timer logic

Browse Source
This commit is contained in:
Alec
2021-11-19 01:11:00 -05:00
parent eb4193fb1b
commit 0560dcffa9
24 changed files with 298 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/modules/GameCreationStepManager.js
View File

@@ -485,6 +485,9 @@ function updateCustomRoleOptionsList(deckManager, selectEl) {
}
function addOptionsToList(options, selectEl) {
options.sort((a, b) => {
return a.role.localeCompare(b.role);
});
for (let i = 0; i < options.length; i ++) {
let optionEl = document.createElement("option");
let alignmentClass = customCards[i].team === globals.ALIGNMENT.GOOD ? globals.ALIGNMENT.GOOD : globals.ALIGNMENT.EVIL

15
client/modules/GameStateRenderer.js
View File

@@ -4,6 +4,7 @@ import { toast } from "./Toast.js";
export class GameStateRenderer {
constructor(gameState) {
this.gameState = gameState;
this.cardFlipped = false;
}
renderLobbyPlayers() {
@@ -79,6 +80,20 @@ export class GameStateRenderer {
}
name.setAttribute("title", this.gameState.client.gameRole);
document.querySelector('#role-description').innerText = this.gameState.client.gameRoleDescription;
document.getElementById("role-image").setAttribute(
'src',
'../images/roles/' + this.gameState.client.gameRole.replaceAll(' ', '') + '.png'
);
document.getElementById("game-role-back").addEventListener('click', () => {
document.getElementById("game-role").style.display = 'flex';
document.getElementById("game-role-back").style.display = 'none';
});
document.getElementById("game-role").addEventListener('click', () => {
document.getElementById("game-role-back").style.display = 'flex';
document.getElementById("game-role").style.display = 'none';
});
}
}

8
client/modules/Templates.js
View File

@@ -29,7 +29,7 @@ export const templates = {
"<div id='person-name'></div>" +
"<div id='game-header'>" +
"<div>" +
"<label for='game-timer'>Timer</label>" +
"<label for='game-timer'>Time Remaining</label>" +
"<div id='game-timer'></div>" +
"</div>" +
"<div>" +
@@ -37,9 +37,13 @@ export const templates = {
"<div id='alive-count'></div>" +
"</div>" +
"</div>" +
"<div id='game-role'>" +
"<div id='game-role' style='display:none'>" +
"<h4 id='role-name'></h4>" +
"<img alt='role' id='role-image'/>" +
"<p id='role-description'></p>" +
"</div>" +
"<div id='game-role-back'>" +
"<h4>Click to reveal your role</h4>" +
"<p>(click again to hide)</p>" +
"</div>"
}

56
client/modules/Timer.js
View File

@@ -9,16 +9,18 @@ See: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API
const messageParameters = {
STOP: 'stop',
TOTAL_TIME: 'totalTime',
TICK_INTERVAL: 'tickInterval'
TICK_INTERVAL: 'tickInterval',
HOURS: 'hours',
MINUTES: 'minutes'
};
onmessage = function (e) {
if (typeof e.data === 'object'
&& e.data.hasOwnProperty(messageParameters.TOTAL_TIME)
&& e.data.hasOwnProperty(messageParameters.HOURS)
&& e.data.hasOwnProperty(messageParameters.MINUTES)
&& e.data.hasOwnProperty(messageParameters.TICK_INTERVAL)
) {
const timer = new Singleton(e.data.totalTime, e.data.tickInterval);
const timer = new Singleton(e.data.hours, e.data.minutes, e.data.tickInterval);
timer.startTimer();
}
};
@@ -30,7 +32,10 @@ function stepFn (expected, interval, start, totalTime) {
}
const delta = now - expected;
expected += interval;
postMessage({ timeRemaining: (totalTime - (expected - start)) / 1000 });
postMessage({
timeRemainingInMilliseconds: totalTime - (expected - start),
displayTime: returnHumanReadableTime(totalTime - (expected - start))
});
Singleton.setNewTimeoutReference(setTimeout(() => {
stepFn(expected, interval, start, totalTime);
}, Math.max(0, interval - delta)
@@ -38,16 +43,17 @@ function stepFn (expected, interval, start, totalTime) {
}
class Timer {
constructor (totalTime, tickInterval) {
constructor (hours, minutes, tickInterval) {
this.timeoutId = undefined;
this.totalTime = totalTime;
this.hours = hours;
this.minutes = minutes;
this.tickInterval = tickInterval;
}
startTimer () {
if (!isNaN(this.totalTime) && !isNaN(this.tickInterval)) {
if (!isNaN(this.hours) && !isNaN(this.minutes) && !isNaN(this.tickInterval)) {
const interval = this.tickInterval;
const totalTime = this.totalTime;
const totalTime = convertFromHoursToMilliseconds(this.hours) + convertFromMinutesToMilliseconds(this.minutes);
const start = Date.now();
const expected = Date.now() + this.tickInterval;
if (this.timeoutId) {
@@ -61,19 +67,20 @@ class Timer {
}
class Singleton {
constructor (totalTime, tickInterval) {
constructor (hours, minutes, tickInterval) {
if (!Singleton.instance) {
Singleton.instance = new Timer(totalTime, tickInterval);
Singleton.instance = new Timer(hours, minutes, tickInterval);
} else {
// This allows the same timer to be configured to run for different intervals / at a different granularity.
Singleton.setNewTimerParameters(totalTime, tickInterval);
Singleton.setNewTimerParameters(hours, minutes, tickInterval);
}
return Singleton.instance;
}
static setNewTimerParameters (totalTime, tickInterval) {
static setNewTimerParameters (hours, minutes, tickInterval) {
if (Singleton.instance) {
Singleton.instance.totalTime = totalTime;
Singleton.instance.hours = hours;
Singleton.instance.minutes = minutes;
Singleton.instance.tickInterval = tickInterval;
}
}
@@ -84,3 +91,24 @@ class Singleton {
}
}
}
function convertFromMinutesToMilliseconds(minutes) {
return minutes * 60 * 1000;
}
function convertFromHoursToMilliseconds(hours) {
return hours * 60 * 60 * 1000;
}
function returnHumanReadableTime(milliseconds) {
let seconds = Math.floor((milliseconds / 1000) % 60);
let minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
let hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
return hours + ":" + minutes + ":" + seconds;
}