Added the history and working version for games

6 files changed, 176 insertions, 121 deletions

diff --git a/court.mjs b/court.mjs
index 3a8e551..aa5bf29 100644
--- a/court.mjs
+++ b/court.mjs
@@ -39,6 +39,7 @@ export class CourtManager extends Manager {
     }
     console.log("Loaded " + this.listData.length + " courts.");
     this.render();
+    this.addToggleBehaviour();
   }
   generate() {
     console.log("Generating court data.");
@@ -48,5 +49,6 @@ export class CourtManager extends Manager {
     console.log("Generated data for " + this.listData.length + " courts");
     this.store();
     this.render();
+    this.addToggleBehaviour();
   }
 }
diff --git a/game.mjs b/game.mjs
index bc5de34..d5000c3 100644
--- a/game.mjs
+++ b/game.mjs
@@ -1,4 +1,5 @@
-import { getMatchCount, shuffle } from "./utils.mjs";
+import { CourtManager } from "./court.mjs";
+import { getMatchCount, shuffle, Manager } from "./utils.mjs";
 
 class Team {
   constructor(playerOne, playerTwo) {
@@ -13,9 +14,9 @@ class Team {
   }
 }
 
-export class Game {
-  constructor(court, team_1, team_2) {
-    this.courtId = court.id;
+class Game {
+  constructor(courtId, team_1, team_2) {
+    this.courtId = courtId;
     this.team_1 = team_1;
     this.team_2 = team_2;
   }
@@ -27,91 +28,146 @@ export class Game {
   render() {
     let type =
       this.team_1.playerOne === "RESERVED" ? `class="is-danger is-dark"` : ``;
-    // type = this.team_1.playerOne === "---" ? `class="is-warning is-dark"` : ``;
     return `<tr ${type}><td align="center" style="width: 8%;">${
       this.courtId + 1
     }</td>${this.team_1.render()}${this.team_2.render()}</tr>`;
   }
 }
 
-export function generateDummyGames(courts, description) {
+function generateDummyGames(courts, description) {
   let team = new Team(description, description);
   let games = [];
   for (const court of courts) {
-    let game = new Game(court, team, team);
+    let game = new Game(court.id, team, team);
     games.push(game);
   }
   return games;
 }
 
-export class Round {
-  constructor(games, number) {
-    this.games = games;
-    this.description =
-      typeof number === "undefined" ? "Proposal" : "Round " + number;
+export class GameManager extends Manager {
+  constructor() {
+    super("game", []);
+    this.round = Number(localStorage.getItem("round")) || 0;
+    this.courts = new CourtManager();
+    console.log("Loading game data.");
+    let data = JSON.parse(localStorage.getItem(this.description));
+    if (data === null || data.length === 0) {
+      console.log("Game data unavailable: " + data);
+      this.generate();
+      return;
+    }
+    for (let i = 0; i < data.length; i++) {
+      let courtId = Number(data[i].courtId);
+      let teamOne = new Team(
+        data[i].team_1.playerOne,
+        data[i].team_1.playerTwo
+      );
+      let teamTwo = new Team(
+        data[i].team_2.playerOne,
+        data[i].team_2.playerTwo
+      );
+      this.listData.push(new Game(courtId, teamOne, teamTwo));
+    }
+    console.log("Loaded " + this.listData.length + " games.");
+    this.render();
+    this.addDescription();
   }
-  render() {
-    let output = `<table class="table is-fullwidth"><thead><th colspan='5'>${this.description}</th><tr><th align="center">Court</th><th align="center" colspan='2'>Team 1</th><th colspan='2' align="center">Team 2</th></tr></thead>`;
-    for (const game of this.games) {
-      output += game.render();
+  generate() {
+    console.log("Generating the dummy round.");
+    this.listData = generateDummyGames(this.courts.listData, "---");
+    console.log("Loaded " + this.listData.length + " dummy round.");
+    this.store();
+    this.render();
+    this.addDescription();
+  }
+  addDescription() {
+    let description = this.proposed ? "Proposal" : "Round " + this.round;
+    document.getElementById("game_description").innerHTML = description;
+  }
+  propose(players) {
+    console.log("Proposing new games!");
+    let possibleMatches = getMatchCount(players, this.courts.listData);
+    let requiredPlayers = possibleMatches * 4;
+    console.log("Required players are " + requiredPlayers);
+    const activeCourts = this.courts.listData.filter(function (c) {
+      return c.status;
+    });
+    const inactiveCourts = this.courts.listData.filter(function (c) {
+      return !c.status;
+    });
+    const activePlayers = players.filter(function (p) {
+      return p.status;
+    });
+    console.log("Total reserved courts are " + inactiveCourts.length + ".");
+    console.log("Total possible matches are " + possibleMatches + ".");
+    console.log("Active players are:");
+    console.log(
+      activePlayers
+        .map((i) => {
+          return i.name;
+        })
+        .join(",")
+    );
+    const shuffledPlayers = shuffle(activePlayers);
+    shuffledPlayers.sort((a, b) => a.totalPlayed - b.totalPlayed);
+    const selectedPlayers = shuffledPlayers.slice(0, requiredPlayers);
+    selectedPlayers.sort((a, b) => a.level - b.level);
+    console.log("Selected players are:");
+    console.log(
+      selectedPlayers
+        .map((i) => {
+          return i.name;
+        })
+        .join(",")
+    );
+    console.log("The matches are:");
+    this.listData = generateDummyGames(
+      activeCourts.slice(possibleMatches + 1),
+      "---"
+    );
+    this.listData = this.listData.concat(
+      generateDummyGames(inactiveCourts, "RESERVED")
+    );
+    for (let index = 0; index < possibleMatches; index++) {
+      const startIndex = 4 * index;
+      const endIndex = startIndex + 4;
+      const courtPlayers = selectedPlayers.slice(startIndex, endIndex);
+      const team_1 = new Team(courtPlayers[0].name, courtPlayers[3].name);
+      const team_2 = new Team(courtPlayers[1].name, courtPlayers[2].name);
+      const game = new Game(activeCourts[index].id, team_1, team_2);
+      game.print();
+      this.listData.push(game);
     }
-    output += "</table>";
-    return output;
+    this.listData.sort((a, b) => a.courtId - b.courtId);
+    this.proposed = true;
+    this.render();
+    this.addDescription();
   }
-}
-
-export function proposeGames(players, courts) {
-  console.log("Proposing new games!");
-  let possibleMatches = getMatchCount(players, courts);
-  let requiredPlayers = possibleMatches * 4;
-  console.log("Required players are " + requiredPlayers);
-  const activeCourts = courts.filter(function (c) {
-    return c.status;
-  });
-  const inactiveCourts = courts.filter(function (c) {
-    return !c.status;
-  });
-  const activePlayers = players.filter(function (p) {
-    return p.status;
-  });
-  console.log("Total reserved courts are " + inactiveCourts.length + ".");
-  console.log("Total possible matches are " + possibleMatches + ".");
-  console.log("Active players are:");
-  console.log(
-    activePlayers
-      .map((i) => {
-        return i.name;
-      })
-      .join(",")
-  );
-  const shuffledPlayers = shuffle(activePlayers);
-  shuffledPlayers.sort((a, b) => a.totalPlayed - b.totalPlayed);
-  const selectedPlayers = shuffledPlayers.slice(0, requiredPlayers);
-  selectedPlayers.sort((a, b) => a.level - b.level);
-  console.log("Selected players are:");
-  console.log(
-    selectedPlayers
-      .map((i) => {
-        return i.name;
-      })
-      .join(",")
-  );
-  console.log("The matches are:");
-  let games = generateDummyGames(
-    activeCourts.slice(possibleMatches + 1),
-    "---"
-  );
-  games = games.concat(generateDummyGames(inactiveCourts, "RESERVED"));
-  for (let index = 0; index < possibleMatches; index++) {
-    const startIndex = 4 * index;
-    const endIndex = startIndex + 4;
-    const courtPlayers = selectedPlayers.slice(startIndex, endIndex);
-    const team_1 = new Team(courtPlayers[0].name, courtPlayers[3].name);
-    const team_2 = new Team(courtPlayers[1].name, courtPlayers[2].name);
-    const game = new Game(activeCourts[index], team_1, team_2);
-    game.print();
-    games.push(game);
+  confirm() {
+    this.proposed = false;
+    this.round += 1;
+    localStorage.setItem("round", this.round);
+    // Need to update the number of games played here
+    this.store();
+    this.addDescription();
+    document.getElementById("timer-start").click();
+    const notification = new Notyf({
+      duration: 30 * 1000,
+      position: { x: "center", y: "top" },
+      types: [
+        {
+          type: "success",
+          background: "green",
+          duration: 1000 * 1000,
+          dismissible: true,
+        },
+      ],
+    });
+    notification.success("Round confirmed!");
+  }
+  reset() {
+    localStorage.clear("round");
+    localStorage.clear("round");
+    window.location.reload();
   }
-  games.sort((a, b) => a.courtId - b.courtId);
-  return games;
 }
diff --git a/index.html b/index.html
index 57602df..f243f54 100644
--- a/index.html
+++ b/index.html
@@ -20,8 +20,18 @@
       </nav>
       <div class="container">
         <section class="section">
-          <h2 class="title">Games</h1>
-          <div id="game_list"></div>
+          <h2 class="title">Games</h2>
+          <table class="table is-fullwidth">
+            <thead>
+              <tr><th colspan="5"><div id="game_description"></div></th></tr>
+              <tr>
+                <th>Court</th>
+                <th colspan='2'>Team 1</th>
+                <th colspan='2'>Team 2</th>
+              </tr>
+            </thead>
+            <tbody id="game_list"></tbody>
+          </table>
         </section>
         <section class="section">
           <div class="field is-grouped is-grouped-centered">
@@ -35,6 +45,7 @@
               </select>
             </div>
             <button class="button is-medium is-dark" id="confirm">Confirm</button>
+            <button class="button is-medium is-danger" id="reset">Reset</button>
           </div>
           <div class="field">
               <div class="field is-grouped is-grouped-centered">
@@ -47,15 +58,15 @@
             </div>
         </section>
         <section class="section">
-          <h2 class="title">Courts</h1>
+          <h2 class="title">Courts</h2>
           <div id="court_list" class="button-grid"></div>
         </section>
         <section class="section">
-          <h2 class="title">Regulars</h1>
+          <h2 class="title">Regulars</h2>
           <div id="regular_list" class="button-grid"></div>
         </section>
         <section class="section">  
-          <h2 class="title">Player Update</h3>
+          <h2 class="title">Player Update</h2>
           <div id="player-load" class="file is-danger has-name is-boxed">
             <label class="file-label">
               <input class="file-input" type="file" name="players" accept=".csv"/>
diff --git a/index.js b/index.js
index 35f564e..9f13cd8 100644
--- a/index.js
+++ b/index.js
@@ -1,48 +1,23 @@
-import { CourtManager } from "./court.mjs";
+import { GameManager } from "./game.mjs";
 import { PlayerManager, addLoadBehaviour } from "./player.mjs";
-import { Round, generateDummyGames, proposeGames } from "./game.mjs";
 
 // Court and player handling
-let c = new CourtManager();
+let g = new GameManager();
 let p = new PlayerManager();
 addLoadBehaviour(p);
 
 // Game handling
-let proposal;
-let session = []; // Persist this in local storage with 1 day limit
-if (session.length === 0) {
-  session.push(new Round(generateDummyGames(c.listData, "---"), 0));
-}
-document.getElementById("game_list").innerHTML = session.at(-1).render();
 document.getElementById("propose").addEventListener("click", () => {
-  let normalize = Number(document.getElementById("skill").value);
-  console.log(normalize);
-  let players = p.listData.map(function (p) {
-    p.skill = Math.ceil(p.skill / normalize);
-    return p;
-  });
-  proposal = proposeGames(players, c.listData);
-  document.getElementById("game_list").innerHTML = new Round(proposal).render();
+  let factor = Number(document.getElementById("skill").value);
+  let players = p.normalize(factor);
+  console.log(players);
+  g.propose(players);
 });
 document.getElementById("confirm").addEventListener("click", () => {
-  console.log(
-    "Confirm the proposal on screen for round " + session.length + "."
-  );
-  session.push(new Round(proposal, session.length));
-  // Need to update the number of games played here
-  document.getElementById("game_list").innerHTML = session.at(-1).render();
-  document.getElementById("timer-start").click();
-  const notification = new Notyf({
-    duration: 30 * 1000,
-    position: { x: "center", y: "top" },
-    types: [
-      {
-        type: "success",
-        background: "green",
-        duration: 1000 * 1000,
-        dismissible: true,
-      },
-    ],
-  });
-  notification.success("Round confirmed!");
+  console.log("Confirm the proposal for round " + g.round + ".");
+  g.confirm();
+});
+document.getElementById("reset").addEventListener("click", () => {
+  console.log("Resetting the session!");
+  g.reset();
 });
diff --git a/player.mjs b/player.mjs
index 1614c89..d97ff42 100644
--- a/player.mjs
+++ b/player.mjs
@@ -58,15 +58,16 @@ export class PlayerManager extends Manager {
       return;
     }
     for (let i = 0; i < data.length; i++) {
-      var id = Number(data[i].id);
-      var name = data[i].name;
-      var level = data[i].level;
-      var status = data[i].status;
-      var totalPlayed = data[i].totalPlayed;
+      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));
     }
     console.log("Loaded " + this.listData.length + " players.");
     this.render();
+    this.addToggleBehaviour();
   }
   generate() {
     console.log("Generating player data.");
@@ -78,6 +79,7 @@ export class PlayerManager extends Manager {
     console.log("Generated data for " + this.listData.length + " players");
     this.store();
     this.render();
+    this.addToggleBehaviour();
   }
   import(data) {
     var lines = data.split("\n");
@@ -95,6 +97,15 @@ export class PlayerManager extends Manager {
     this.listData = players;
     this.store();
     this.render();
+    this.addToggleBehaviour();
+  }
+  normalize(factor) {
+    console.log("Normalize skill by a factor of " + factor + ".");
+    let players = this.listData.map(function (p) {
+      p.skill = Math.ceil(p.skill / factor);
+      return p;
+    });
+    return players;
   }
 }
 
diff --git a/utils.mjs b/utils.mjs
index b21539e..b8e5222 100644
--- a/utils.mjs
+++ b/utils.mjs
@@ -16,7 +16,6 @@ export class Manager {
       .join("");
     let elementId = this.description + "_list";
     document.getElementById(elementId).innerHTML = renderedHTML;
-    this.addToggleBehaviour();
   }
   addToggleBehaviour() {
     for (let idx = 0; idx < this.listData.length; ++idx) {
@@ -39,6 +38,7 @@ export function getMatchCount(regulars, courts) {
   console.log(
     "There are a total of " + activeCourts.length + " courts available."
   );
+  console.log(regulars);
   const activePlayers = regulars.filter(function (p) {
     return p.status;
   });