Added the guests section functionality

8 files changed, 157 insertions, 141 deletions

diff --git a/index.html b/index.html
index b2501a5..1117176 100644
--- a/index.html
+++ b/index.html
@@ -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,
+  });
+}