diff options
| -rw-r--r-- | index.html | 25 | ||||
| -rw-r--r-- | src/game.mjs | 18 | ||||
| -rw-r--r-- | src/guest.mjs | 31 | ||||
| -rw-r--r-- | src/main.js | 25 | ||||
| -rw-r--r-- | src/player.mjs | 9 | ||||
| -rw-r--r-- | src/style.css | 2 | ||||
| -rw-r--r-- | src/timer.js | 88 | ||||
| -rw-r--r-- | src/utils.mjs | 100 |
8 files changed, 157 insertions, 141 deletions
@@ -9,18 +9,14 @@ <section class="section"> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> - <div class="navbar-item"> - <img src="icon.png"> - </div> - <div class="navbar-item"> - Match Up - </div> + <div class="navbar-item"><img src="icon.png"></div> + <div class="navbar-item">Match Up</div> </div> <div class="navbar-end"> <div class="field is-grouped is-grouped-right"> - <button class="button is-medium is-dark" id="timer-dec"><i class="fa-solid fa-minus"></i></button> + <button class="button is-medium is-dark" id="timer-dec" value="-0.5"><i class="fa-solid fa-minus" value="-0.5"></i></button> <input class="input is-medium is-dark" id="timer-display" type="text" readonly></input> - <button class="button is-medium is-dark" id="timer-inc"><i class="fa-solid fa-plus"></i></button> + <button class="button is-medium is-dark" id="timer-inc" value="0.5"><i class="fa-solid fa-plus" value="0.5"></i></button> <button class="button is-medium is-dark" id="timer-start"><i class="fa-solid fa-play"></i></button> <button class="button is-medium is-dark" id="timer-stop"><i class="fa-solid fa-stop"></i></button> </div> @@ -67,7 +63,7 @@ <h1 class="title">Guests</h1> <div id="guest_list" class="button-grid"></div> </section> - <section class="section"> + <section class="section"> <h1 class="title">Player Update</h1> <div id="player-load" class="file is-danger has-name is-boxed"> <label class="file-label"> @@ -85,13 +81,12 @@ </div> </section> <script src="src/main.js" type="module"></script> - <script src="src/timer.js" type="module"></script> </body> <footer class="footer"> - <div class="content has-text-centered"> - <p> - <strong>Match Up</strong> made with ❤️ by <a href="https://karanj.com">Karan</a>. The source code is licensed <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">CC BY-SA 4.0</a>. Logo from <a href="https://www.flaticon.com/free-icons/shuttle-cock" title="shuttle cock icons">Flaticon</a>. - </p> - </div> + <div class="content has-text-centered"> + <p><strong>Match Up</strong> made with ❤️ by <a href="https://karanj.com">Karan</a>.</p> + <p>The source code is licensed <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">CC BY-SA 4.0</a>.</p> + <p>Logo from <a href="https://www.flaticon.com/free-icons/shuttle-cock" title="shuttle cock icons">Flaticon</a>.</p> + </div> </footer> </html>
\ No newline at end of file diff --git a/src/game.mjs b/src/game.mjs index c8931ac..864f255 100644 --- a/src/game.mjs +++ b/src/game.mjs @@ -1,4 +1,4 @@ -import { Notyf } from 'notyf'; +import { Notyf } from "notyf"; import { Manager } from "./utils.mjs"; import { CourtManager } from "./court.mjs"; import { PlayerManager } from "./player.mjs"; @@ -78,6 +78,7 @@ export class GameManager extends Manager { } console.log("Loaded " + this.listData.length + " games."); this.render(); + addGameBehaviour(this); } isConfirmed() { return this.listData[0].status; @@ -122,7 +123,7 @@ export class GameManager extends Manager { propose() { console.log("Proposing new games!"); let possibleMatches = getMatchCount( - this.players.listData, + this.players.listData.concat(this.players.g.listData), this.courts.listData ); console.log("Total possible matches are " + possibleMatches + "."); @@ -152,7 +153,6 @@ export class GameManager extends Manager { for (let i = 0; i < this.listData.length; i++) { this.listData[i].status = true; } - // Need to update the number of games played here this.store(); this.render(); document.getElementById("timer-start").click(); @@ -184,3 +184,15 @@ function getMatchCount(players, courts) { possibleMatches = Math.min(possibleMatches, courts.length); return possibleMatches; } + +function addGameBehaviour(g) { + document.getElementById("propose").addEventListener("click", () => { + g.propose(); + }); + document.getElementById("confirm").addEventListener("click", () => { + g.confirm(); + }); + document.getElementById("reset").addEventListener("click", () => { + g.reset(); + }); +} diff --git a/src/guest.mjs b/src/guest.mjs index ba9e8cc..c82d115 100644 --- a/src/guest.mjs +++ b/src/guest.mjs @@ -1,11 +1,22 @@ import { Manager } from "./utils.mjs"; export class Guest { - constructor(id, name, level, status, totalPlayed) { + maxGuestCount = 12; + categoryCount = 3; + + categories = { + 0: { description: "Beginner", level: 1 }, + 1: { description: "Novice", level: 3 }, + 2: { description: "Intermediate", level: 6 }, + }; + + constructor(id, status, totalPlayed) { this.id = id; this.status = typeof status !== "undefined" ? status : false; - this.name = name; - this.level = typeof level !== "undefined" ? level : 1; + const categoryId = Math.floor(id / (12 / this.categoryCount)); + const guestIdentifier = (id % (12 / this.categoryCount)) + 1; + this.name = this.categories[categoryId].description + " " + guestIdentifier; + this.level = this.categories[categoryId].level; this.totalPlayed = typeof totalPlayed !== "undefined" ? status : 0; } toggle() { @@ -19,7 +30,7 @@ export class Guest { render() { let color = this.status ? "is-success" : "is-danger"; let type = `class="button is-medium ${color}"`; - return `<button id=${"regular_" + this.id} ${type}>${this.name}</button>`; + return `<button id=${"guest_" + this.id} ${type}>${this.name}</button>`; } } @@ -35,21 +46,17 @@ export class GuestManager extends Manager { } for (let i = 0; i < data.length; i++) { let id = Number(data[i].id); - let name = data[i].name; - let level = data[i].level; let status = data[i].status; let totalPlayed = data[i].totalPlayed; - this.listData.push(new Player(id, name, level, status, totalPlayed)); + this.listData.push(new Guest(id, status, totalPlayed)); } console.log("Loaded " + this.listData.length + " players."); this.render(); } generate() { console.log("Generating guest data."); - let maxPlayerCount = 12; - for (let i = 0; i < maxPlayerCount; i++) { - let level = i < 3 ? 1 : ( i < 6 ? 3 : 7); - let p = new Player(i, "Player " + i, level, false, 0); + for (let i = 0; i < new Guest(0, false).maxGuestCount; i++) { + let p = new Guest(i, false, 0); this.listData.push(p); } console.log("Generated data for " + this.listData.length + " guest"); @@ -66,4 +73,4 @@ export class GuestManager extends Manager { }); return players; } -}
\ No newline at end of file +} diff --git a/src/main.js b/src/main.js index 91ac386..0e05e0d 100644 --- a/src/main.js +++ b/src/main.js @@ -1,20 +1,9 @@ -import 'notyf/notyf.min.css' -import 'bulma/css/bulma.css' -import '@fortawesome/fontawesome-free/css/all.css' -import './style.css' - +import "notyf/notyf.min.css"; +import "bulma/css/bulma.css"; +import "@fortawesome/fontawesome-free/css/all.css"; +import "./style.css"; import { GameManager } from "./game.mjs"; +import { Timer } from "./utils.mjs"; -// Court and player handling -let g = new GameManager(); - -// Game handling -document.getElementById("propose").addEventListener("click", () => { - g.propose(); -}); -document.getElementById("confirm").addEventListener("click", () => { - g.confirm(); -}); -document.getElementById("reset").addEventListener("click", () => { - g.reset(); -}); +const t = new Timer(); +const g = new GameManager(); diff --git a/src/player.mjs b/src/player.mjs index adf874d..7ca2a1f 100644 --- a/src/player.mjs +++ b/src/player.mjs @@ -42,7 +42,7 @@ function parseLineToPlayer(data) { } export class PlayerManager extends Manager { - // g = new GuestManager(); + g = new GuestManager(); constructor() { super("regular", []); @@ -108,7 +108,9 @@ export class PlayerManager extends Manager { console.log("Required players are " + count); let factor = Number(document.getElementById("skill").value); console.log("Skill normalized by a factor of " + factor + "."); - const activePlayers = this.active(factor); + let activePlayers = this.active(factor); + const activeGuests = this.g.active(factor); + activePlayers = activePlayers.concat(activeGuests); console.log("Active players are:"); console.log( activePlayers @@ -133,8 +135,7 @@ export class PlayerManager extends Manager { } } -// TODO Add load behaviour to constructor -export function addLoadBehaviour(p) { +function addLoadBehaviour(p) { const f = document.querySelector("#player-load input[type=file]"); f.addEventListener("change", () => { const file = f.files[0]; diff --git a/src/style.css b/src/style.css index 8e3b713..1bd8901 100644 --- a/src/style.css +++ b/src/style.css @@ -9,4 +9,4 @@ } table { font-size: 1.5em; -}
\ No newline at end of file +} diff --git a/src/timer.js b/src/timer.js deleted file mode 100644 index 09189c0..0000000 --- a/src/timer.js +++ /dev/null @@ -1,88 +0,0 @@ -let minsPerRound = Number(sessionStorage.getItem("minsPerRound")) || 12; -let timerRunningFlag = Number(sessionStorage.getItem("timerRunningFlag")) || 0; -let deadline = - Number(sessionStorage.getItem("deadline")) || new Date().getTime(); -let clock = 0; - -function setTimer(m, s) { - let timer = document.getElementById("timer-display"); - m = m < 10 ? "0" + m : m; - s = s < 10 ? "0" + s : s; - timer.value = `${m}:${s}`; -} - -function setSessionData() { - sessionStorage.setItem("deadline", deadline); - sessionStorage.setItem("minsPerRound", minsPerRound); - sessionStorage.setItem("timerRunningFlag", timerRunningFlag); -} - -function resetTimer() { - clearInterval(clock); - let mins = Math.floor(minsPerRound); - let secs = (minsPerRound - mins) * 60; - setTimer(mins, secs); - timerRunningFlag = 0; - setSessionData(); -} - -function updateTimer(milliseconds) { - const m = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60)); - const s = Math.floor((milliseconds % (1000 * 60)) / 1000); - setTimer(m, s); -} - -function refreshTimer() { - const now = new Date().getTime(); - const millisecondsToDeadline = deadline - now; - if (millisecondsToDeadline > 0) { - updateTimer(millisecondsToDeadline); - return; - } - resetTimer(); - const notification = new Notyf({ - duration: 0, - position: { x: "center", y: "top" }, - dismissible: true, - }); - notification.error("Round completed"); -} - -function startTimer(fresh) { - if (fresh) { - let now = new Date().getTime(); - const millisecondsToDeadline = minsPerRound * 60 * 1000; - deadline = now + millisecondsToDeadline; - } - timerRunningFlag = 1; - setSessionData(); - clock = setInterval(refreshTimer, 1000); -} - -window.onload = function () { - if (timerRunningFlag) startTimer(0); - else resetTimer(); - - document.getElementById("timer-start").addEventListener("click", () => { - if (timerRunningFlag != 0) return; - startTimer(1); - }); - - document.getElementById("timer-stop").addEventListener("click", () => { - resetTimer(); - }); - - document.getElementById("timer-inc").addEventListener("click", () => { - if (timerRunningFlag == 0) { - minsPerRound += 0.5; - resetTimer(); - } - }); - - document.getElementById("timer-dec").addEventListener("click", () => { - if (timerRunningFlag == 0 && minsPerRound != 0) { - minsPerRound -= 0.5; - resetTimer(); - } - }); -}; diff --git a/src/utils.mjs b/src/utils.mjs index 06a2519..97d1255 100644 --- a/src/utils.mjs +++ b/src/utils.mjs @@ -1,3 +1,95 @@ +import { Notyf } from "notyf"; + +const milliSecond = 1000; + +export class Timer { + pointer = 0; + + constructor() { + this.mins = Number(sessionStorage.getItem("mins")) || 12; + this.running = Boolean(Number(sessionStorage.getItem("running"))) || false; + this.deadline = + Number(sessionStorage.getItem("deadline")) || new Date().getTime(); + if (this.running) { + this.start(false); + } else { + this.reset(); + } + addTimerBehaviour(this); + } + store() { + sessionStorage.setItem("mins", this.mins); + sessionStorage.setItem("running", Number(this.running)); + sessionStorage.setItem("deadline", this.deadline); + } + set(m, s) { + const timer = document.getElementById("timer-display"); + m = m < 10 ? "0" + m : m; + s = s < 10 ? "0" + s : s; + timer.value = `${m}:${s}`; + } + reset() { + clearInterval(this.pointer); + const mins = Math.floor(this.mins); + const secs = (this.mins - mins) * 60; + this.set(mins, secs); + this.running = false; + this.store(); + } + update(ms) { + const m = Math.floor((ms % (milliSecond * 60 * 60)) / (milliSecond * 60)); + const s = Math.floor((ms % (milliSecond * 60)) / milliSecond); + this.set(m, s); + } + refresh(p) { + const now = new Date().getTime(); + const msToDeadline = p.deadline - now; + if (msToDeadline > 0) { + p.update(msToDeadline); + return; + } + p.reset(); + getNotifier().error("Round completed"); + } + start(fresh) { + if (fresh) { + const now = new Date().getTime(); + const msToDeadline = this.mins * 60 * 1000; + this.deadline = now + msToDeadline; + } + this.running = true; + this.store(); + this.pointer = setInterval(this.refresh, 1000, this); + } + change(value) { + this.mins += value; + if (this.mins < 0.5) { + this.mins = 0.5; + } + this.reset(); + } +} + +function addTimerBehaviour(t) { + document.getElementById("timer-start").addEventListener("click", () => { + if (t.running) return; + t.start(1); + }); + document.getElementById("timer-stop").addEventListener("click", () => { + t.reset(); + }); + document.getElementById("timer-inc").addEventListener("click", () => { + if (!t.running) { + t.change(0.5); + } + }); + document.getElementById("timer-dec").addEventListener("click", () => { + if (!t.running) { + t.change(-0.5); + } + }); +} + export class Manager { constructor(description, listData) { this.description = description; @@ -49,3 +141,11 @@ export function shuffle(array) { } return array; } + +export function getNotifier(seconds) { + return new Notyf({ + duration: seconds * milliSecond, + position: { x: "center", y: "top" }, + dismissible: true, + }); +} |