From 3dc01fbb930a4eacf416a9cc7911d90da75e6c33 Mon Sep 17 00:00:00 2001 From: Karan Jayachandra Date: Sun, 9 Nov 2025 15:57:07 +0100 Subject: Moved a lot of the functionality --- assets/icon.ipe | 461 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ court.mjs | 2 +- game.mjs | 47 ++++++ icon.svg | 15 ++ index.css | 4 + index.html | 79 +++++++--- index.js | 32 ++-- player.mjs | 2 +- timer.js | 91 +++++++++++ utils.mjs | 13 ++ 10 files changed, 709 insertions(+), 37 deletions(-) create mode 100644 assets/icon.ipe create mode 100644 game.mjs create mode 100644 icon.svg create mode 100644 timer.js create mode 100644 utils.mjs diff --git a/assets/icon.ipe b/assets/icon.ipe new file mode 100644 index 0000000..d23d37f --- /dev/null +++ b/assets/icon.ipe @@ -0,0 +1,461 @@ + + + + + + + +0 0 m +-1 0.333 l +-1 -0.333 l +h + + + + +0 0 m +-1 0.333 l +-1 -0.333 l +h + + + + +0 0 m +-1 0.333 l +-0.8 0 l +-1 -0.333 l +h + + + + +0 0 m +-1 0.333 l +-0.8 0 l +-1 -0.333 l +h + + + + +0.6 0 0 0.6 0 0 e +0.4 0 0 0.4 0 0 e + + + + +0.6 0 0 0.6 0 0 e + + + + + +0.5 0 0 0.5 0 0 e + + +0.6 0 0 0.6 0 0 e +0.4 0 0 0.4 0 0 e + + + + + +-0.6 -0.6 m +0.6 -0.6 l +0.6 0.6 l +-0.6 0.6 l +h +-0.4 -0.4 m +0.4 -0.4 l +0.4 0.4 l +-0.4 0.4 l +h + + + + +-0.6 -0.6 m +0.6 -0.6 l +0.6 0.6 l +-0.6 0.6 l +h + + + + + +-0.5 -0.5 m +0.5 -0.5 l +0.5 0.5 l +-0.5 0.5 l +h + + +-0.6 -0.6 m +0.6 -0.6 l +0.6 0.6 l +-0.6 0.6 l +h +-0.4 -0.4 m +0.4 -0.4 l +0.4 0.4 l +-0.4 0.4 l +h + + + + + + +-0.43 -0.57 m +0.57 0.43 l +0.43 0.57 l +-0.57 -0.43 l +h + + +-0.43 0.57 m +0.57 -0.43 l +0.43 -0.57 l +-0.57 0.43 l +h + + + + + +0 0 m +-1 0.333 l +-1 -0.333 l +h + + + + +0 0 m +-1 0.333 l +-0.8 0 l +-1 -0.333 l +h + + + + +0 0 m +-1 0.333 l +-0.8 0 l +-1 -0.333 l +h + + + + +-1 0.333 m +0 0 l +-1 -0.333 l + + + + +0 0 m +-1 0.333 l +-1 -0.333 l +h +-1 0 m +-2 0.333 l +-2 -0.333 l +h + + + + +0 0 m +-1 0.333 l +-1 -0.333 l +h +-1 0 m +-2 0.333 l +-2 -0.333 l +h + + + + +0.5 0 m +-0.5 0.333 l +-0.5 -0.333 l +h + + + + +0.5 0 m +-0.5 0.333 l +-0.5 -0.333 l +h + + + + +0.5 0 m +-0.5 0.333 l +-0.3 0 l +-0.5 -0.333 l +h + + + + +0.5 0 m +-0.5 0.333 l +-0.3 0 l +-0.5 -0.333 l +h + + + + +1 0 m +0 0.333 l +0 -0.333 l +h +0 0 m +-1 0.333 l +-1 -0.333 l +h + + + + +1 0 m +0 0.333 l +0 -0.333 l +h +0 0 m +-1 0.333 l +-1 -0.333 l +h + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h + + +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h + + +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h + + +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h + + +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h + + +92 620 m +4 0 0 -4 96 620 100 620 a +100 616 l +92 616 l +h + + +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h + + +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h + + +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h + + +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h + + +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h + + +92 620 m +4 0 0 -4 96 620 100 620 a +100 616 l +92 616 l +h + + + diff --git a/court.mjs b/court.mjs index 31f277f..b2cd9de 100644 --- a/court.mjs +++ b/court.mjs @@ -13,7 +13,7 @@ export class Court { console.log(this.name + " is currently " + status); } render() { - let type = this.status ? "" : 'class="outline secondary"'; + let type = this.status ? `class="button is-success"` : 'class="button is-dark"'; return ``; } } diff --git a/game.mjs b/game.mjs new file mode 100644 index 0000000..7b5d4c9 --- /dev/null +++ b/game.mjs @@ -0,0 +1,47 @@ +class Team { + constructor(player_1, player_2) { + this.player_1 = player_1; + this.player_2 = player_2; + } + print() { + console.log(this.player_1 + " and " + this.player_2); + } + render() { + return `${this.player_1}${this.player_2}`; + } +} + +class Game { + constructor(court, team_1, team_2) { + this.court_id = court.id; + this.court_status = court.status; + this.team_1 = team_1; + this.team_2 = team_2; + } + print() { + let team_1 = this.team_1.player_1 + " and " + this.team_1.player_2; + let team_2 = this.team_2.player_1 + " and " + this.team_2.player_2; + console.log(team_1 + " is playing against " + team_2); + } + render() { + let type = this.team_1.player_1 === "RESERVED" ? `class="is-danger is-light"` : ``; + return `${this.court_id + 1}${this.team_1.render()}${this.team_2.render()}`; + } +} + +export class Round { + constructor(number, courts) { + this.number = number; + this.courts = courts; + } + render() { + let output = `

Round ${this.number}

`; + let team = new Team("---", "---"); + for (const court of this.courts ) { + let game = new Game(court, team, team); + output += game.render() + } + output += "

Court	Team 1		Team 2

"; + return output; + } +} \ No newline at end of file diff --git a/icon.svg b/icon.svg new file mode 100644 index 0000000..d2700a4 --- /dev/null +++ b/icon.svg @@ -0,0 +1,15 @@ + + diff --git a/index.css b/index.css index 50a97c3..4e559cf 100644 --- a/index.css +++ b/index.css @@ -7,4 +7,8 @@ .button-grid button { padding: 10px; text-align: center; +} +#timer-display{ + text-align: center; + width: fit-content; } \ No newline at end of file diff --git a/index.html b/index.html index 8bc2191..e85e6f9 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,69 @@ - + Match Up! - + + + -

- -

Courts

Match Up!

+ + + + + +

Regulars

- +

Games

Controls

+ + +

Courts

Regulars

Player Update

+ + + + + + + Update players... + + No file selected... + +

+ + + \ No newline at end of file diff --git a/index.js b/index.js index 5d34c96..98236a4 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,7 @@ +import { Round } from "./game.mjs"; import { generateCourts } from "./court.mjs"; import { generatePlayers } from "./player.mjs"; +import { addToggleBehaviour } from "./utils.mjs"; // Court handling let courts = generateCourts(); @@ -8,17 +10,21 @@ addToggleBehaviour(courts, "court_"); // Regulars handling let regulars = generatePlayers(); addToggleBehaviour(regulars, "regular_"); - -function addToggleBehaviour(list, description) { - let renderedHTML = list.map((i) => {return i.render();}).join(''); - let listId = description + 'list'; - document.getElementById(listId).innerHTML = renderedHTML; - for (let index = 0; index < list.length; ++index) { - const p = document.getElementById(description + index); - p.addEventListener("click", () => { - list[index].toggle(); - p.classList.toggle('secondary'); - p.classList.toggle('outline'); - }); +const fileInput = document.querySelector("#file-js input[type=file]"); + if (fileInput !== null) { + fileInput.onchange = () => { + if (fileInput.files.length > 0) { + const fileName = document.querySelector("#file-js .file-name"); + fileName.textContent = fileInput.files[0].name; + console.log(fileInput.files[0]); + } } -} \ No newline at end of file +}; + +// Game handling +let games = new Round(0, courts); +let renderedHTML = games.render(); +document.getElementById("game_list").innerHTML = renderedHTML; +document.getElementById("propose").addEventListener("click", () => { + console.log("Propose new games!"); +}) \ No newline at end of file diff --git a/player.mjs b/player.mjs index d75e659..2982df0 100644 --- a/player.mjs +++ b/player.mjs @@ -14,7 +14,7 @@ export class Player { console.log(this.name + " has a level of " + this.level + " and is currently " + status); } render() { - let type = this.status ? "" : 'class="outline secondary"'; + let type = this.status ? `class="button is-success"` : 'class="button is-danger"'; return ``; } } diff --git a/timer.js b/timer.js new file mode 100644 index 0000000..25d4610 --- /dev/null +++ b/timer.js @@ -0,0 +1,91 @@ +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); + setTimer(minsPerRound, 0); + 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: 30 * 1000, + position: {x: 'center', y: 'top'}, + types: [{ + type: 'success', + background: 'indianred', + duration: 1000 * 1000, + dismissible: true + }] + }); + notification.success("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 += 1; + resetTimer(); + } + }); + + document.getElementById("timer-dec").addEventListener('click', ()=> { + if (timerRunningFlag == 0 && minsPerRound != 0) { + minsPerRound -= 1; + resetTimer(); + } + }); +} \ No newline at end of file diff --git a/utils.mjs b/utils.mjs new file mode 100644 index 0000000..e639916 --- /dev/null +++ b/utils.mjs @@ -0,0 +1,13 @@ +export function addToggleBehaviour(list, description) { + let renderedHTML = list.map((i) => {return i.render();}).join(''); + let listId = description + 'list'; + document.getElementById(listId).innerHTML = renderedHTML; + for (let index = 0; index < list.length; ++index) { + const p = document.getElementById(description + index); + p.addEventListener("click", () => { + list[index].toggle(); + p.classList.toggle('is-success'); + p.classList.toggle('is-danger'); + }); + } +} \ No newline at end of file -- cgit v1.3.1