Merge branch 'develop' into 'main'

Develop

See merge request KaranJayachandra/match_up!23

5 files changed, 144 insertions, 78 deletions

diff --git a/src/data.js b/src/data.js
index 589b5a3..0b0c9ab 100644
--- a/src/data.js
+++ b/src/data.js
@@ -3,7 +3,7 @@ class Switch {
     this.id = id;
     this.status = typeof status !== "undefined" ? status : false;
     this.description = description;
-    this.name = description + " " + (id + 1);
+    this.name = this.description + " " + (id + 1);
   }
   toggle() {
     this.status = !this.status;
@@ -14,10 +14,9 @@ class Switch {
     console.log(this.name + " is currently " + status);
   }
   render() {
-    let color = this.status ? "is-success" : "is-danger";
-    let type = `class="button is-medium ${color}"`;
+    let color = this.status ? `` : `class="outline secondary"`;
     let id = this.description + "_" + this.id;
-    return `<button id=${id} ${type}>${this.name}</button>`;
+    return `<button id=${id} ${color}>${this.name}</button>`;
   }
 }
 
@@ -27,14 +26,15 @@ export class Court extends Switch {
   }
 }
 
-export class Player extends Switch {
-  constructor(id, status, level, games, name) {
+export class Regular extends Switch {
+  constructor(id, status, level, games, firstName, lastName) {
     super(id, "Regular", status);
     this.level = typeof level !== "undefined" ? level : 1;
     this.games = typeof games !== "undefined" ? games : 0;
-    if (typeof name !== "undefined") {
-      this.name = name;
-    }
+    this.firstName =
+      typeof firstName !== "undefined" ? firstName : this.description;
+    this.lastName = typeof lastName !== "undefined" ? lastName : this.id + 1;
+    this.name = this.firstName + " " + this.lastName;
   }
 }
 
@@ -54,10 +54,16 @@ export class Guest extends Switch {
     this.level = guestCategories[categoryId].level;
     this.games = typeof games !== "undefined" ? games : 0;
     const guestNumber = (id % this.maxCount) + 1;
-    this.name = guestCategories[categoryId].description + " " + guestNumber;
+    this.firstName = guestCategories[categoryId].description;
+    this.lastName = guestNumber;
+    this.name = this.firstName + " " + this.lastName;
   }
 }
 
+function renderPlayerName(player) {
+  return `<strong>${player.firstName}</strong> ${player.lastName}`;
+}
+
 export class Team {
   constructor(playerOne, playerTwo) {
     this.playerOne = playerOne;
@@ -69,9 +75,9 @@ export class Team {
     this.playerTwo.print();
   }
   render() {
-    let p1 = `<td style="width: 23%; text-align: right;">${this.playerOne}</td>`;
-    let p2 = `<td style="width: 23%; text-align: left;">${this.playerTwo}</td>`;
-    return p1 + p2;
+    const p1 = renderPlayerName(this.playerOne);
+    const p2 = renderPlayerName(this.playerTwo);
+    return p1 + `<br/><br/>` + p2;
   }
 }
 
@@ -82,18 +88,24 @@ export class Game extends Switch {
     this.teamTwo = teamTwo;
   }
   print() {
-    let teamOne = this.teamOne.playerOne + " and " + this.teamOne.playerTwo;
-    let teamTwo = this.teamTwo.playerOne + " and " + this.teamTwo.playerTwo;
+    const teamOne =
+      this.teamOne.playerOne.firstName +
+      " and " +
+      this.teamOne.playerTwo.firstName;
+    const teamTwo =
+      this.teamTwo.playerOne.firstName +
+      " and " +
+      this.teamTwo.playerTwo.firstName;
     console.log(
       "Game " + this.id + ": " + teamOne + " is playing against " + teamTwo
     );
   }
   render() {
-    let blockedState = this.teamOne.playerOne === "RESERVED";
-    let type = blockedState ? `class="is-dark"` : ``;
-    let court = `<td style="width: 8%; text-align: center;">${
-      this.id + 1
-    }</td>`;
-    return `<tr ${type}>${court}${this.teamOne.render()}${this.teamTwo.render()}</tr>`;
+    const blockedState = this.teamOne.playerOne.firstName === "RESERVED";
+    const playerState = this.teamOne.render() + "<hr>" + this.teamTwo.render();
+    const type = blockedState ? `<h5>Reserved</p>` : playerState;
+    return `<article>
+      <header>Court ${this.id + 1}</header>${type}
+    </article>`;
   }
 }
diff --git a/src/main.js b/src/main.js
index ec33b18..59f66d0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,19 +1,8 @@
-import "notyf/notyf.min.css";
-import "bulma/css/bulma.css";
-import "@fortawesome/fontawesome-free/css/all.css";
-import "./style.css";
-import { Notyf } from "notyf";
+import "./style.css"
 import { Timer } from "./timer";
-import { Team, Game } from "./data";
+import { Team, Game, Regular } from "./data";
 import { Manager, CourtManager, RegularManager, GuestManager } from "./manage";
 
-export function getNotifier(seconds) {
-  return new Notyf({
-    duration: seconds * milliSecond,
-    position: { x: "center", y: "top" },
-    dismissible: true,
-  });
-}
 
 export class GameManager extends Manager {
   timer = new Timer();
@@ -27,12 +16,17 @@ export class GameManager extends Manager {
     this.render();
     addGameBehaviour(this);
   }
-  createItem(i, description) {
+  createItem(i, description, status) {
     if (typeof description === "undefined") {
       description = "---";
     }
-    let team = new Team(description, description);
-    return new Game(i, true, team, team);
+    if (typeof status === "undefined") {
+      status = true;
+    }
+    let player = new Regular(null, null, null, null, description, "");
+    console.log(player);
+    let team = new Team(player, player);
+    return new Game(i, status, team, team);
   }
   loadItem(data) {
     let id = Number(data.id);
@@ -44,20 +38,20 @@ export class GameManager extends Manager {
   addBehaviour() {
     let confirmedStatus = this.data[0].status;
     let description = confirmedStatus ? "Round " + this.round : "Proposal";
-    document.getElementById("Game_description").innerHTML = description;
+    document.getElementById("Game-description").innerHTML = description;
   }
   addBlockedGames() {
     const inactiveCourts = this.courts.inactive();
     console.log("Total reserved courts are " + inactiveCourts.length + ".");
     for (let court of inactiveCourts) {
-      this.data.push(this.createItem(court.id, "RESERVED"));
+      this.data.push(this.createItem(court.id, "RESERVED", false));
     }
   }
   addInactiveGames(possibleMatches) {
     const activeCourts = this.courts.active();
     const unusedCourts = activeCourts.slice(possibleMatches + 1);
     for (let court of unusedCourts) {
-      this.data.push(this.createItem(court.id));
+      this.data.push(this.createItem(court.id, "---", false));
     }
   }
   addActiveGames(possibleMatches) {
@@ -69,8 +63,8 @@ export class GameManager extends Manager {
       const startIndex = 4 * index;
       const endIndex = startIndex + 4;
       const courtPlayers = selectedPlayers.slice(startIndex, endIndex);
-      const teamOne = new Team(courtPlayers[0].name, courtPlayers[3].name);
-      const teamTwo = new Team(courtPlayers[1].name, courtPlayers[2].name);
+      const teamOne = new Team(courtPlayers[0], courtPlayers[3]);
+      const teamTwo = new Team(courtPlayers[1], courtPlayers[2]);
       const game = new Game(usedCourts[index].id, false, teamOne, teamTwo);
       this.data.push(game);
     }
@@ -98,7 +92,7 @@ export class GameManager extends Manager {
       p.print();
     });
     const shuffledPlayers = shuffle(activePlayers);
-    shuffledPlayers.sort((a, b) => a.totalPlayed - b.totalPlayed);
+    shuffledPlayers.sort((a, b) => a.games - b.games);
     const selectedPlayers = shuffledPlayers.slice(0, count);
     selectedPlayers.sort((a, b) => a.level - b.level);
     console.log("Selected players are:");
@@ -125,7 +119,6 @@ export class GameManager extends Manager {
   confirm() {
     let confirmedStatus = this.data[0].status;
     if (confirmedStatus) {
-      getNotifier().error("Create a proposal first!");
       return;
     }
     console.log("Confirm the proposal for round " + this.round + ".");
@@ -134,7 +127,18 @@ export class GameManager extends Manager {
     for (let i = 0; i < this.data.length; i++) {
       this.data[i].status = true;
     }
-    // Increment the number of games played
+    let selectedPlayers = [];
+    for (let game of this.data) {
+      console.log(game);
+      if ( game.teamOne.playerOne.name !== "RESERVED" ){
+        selectedPlayers.push(game.teamOne.playerOne.name);
+        selectedPlayers.push(game.teamOne.playerTwo.name);
+        selectedPlayers.push(game.teamTwo.playerOne.name);
+        selectedPlayers.push(game.teamTwo.playerTwo.name);
+      }
+    }
+    this.regulars.incrementGames(selectedPlayers);
+    this.guests.incrementGames(selectedPlayers);
     this.store();
     this.render();
     document.getElementById("timer-start").click();
@@ -144,7 +148,7 @@ export class GameManager extends Manager {
     localStorage.removeItem(this.description);
     localStorage.removeItem(this.courts.description);
     localStorage.removeItem(this.guests.description);
-    // Clear the number of games played
+    this.regulars.reset();
     document.getElementById("timer-stop").click();
     window.location.reload();
   }
@@ -164,12 +168,11 @@ function addGameBehaviour(g) {
   });
   document.getElementById("confirm").addEventListener("click", () => {
     g.confirm();
-    getNotifier().success("Round confirmed!");
   });
   document.getElementById("reset").addEventListener("click", () => {
     g.reset();
-    getNotifier().error("Session has been reset!");
   });
 }
 
 const g = new GameManager();
+
diff --git a/src/manage.js b/src/manage.js
index 7449866..10a9896 100644
--- a/src/manage.js
+++ b/src/manage.js
@@ -1,4 +1,11 @@
-import { Court, Guest, Player } from "./data";
+import { Court, Guest, Regular } from "./data";
+import { uniqueNamesGenerator, names, adjectives } from 'unique-names-generator';
+
+const config = {
+  dictionaries: [adjectives, names],
+  style: 'capital',
+  length: 2
+}
 
 export class Manager {
   constructor(description, maxCount) {
@@ -38,7 +45,7 @@ export class Manager {
         return i.render();
       })
       .join("");
-    let elementId = this.data[0].description + "_list";
+    let elementId = this.data[0].description + "-list";
     document.getElementById(elementId).innerHTML = renderedHTML;
     this.addBehaviour();
   }
@@ -49,8 +56,8 @@ export class Manager {
       p.addEventListener("click", () => {
         this.data[idx].toggle();
         this.store();
-        p.classList.toggle("is-success");
-        p.classList.toggle("is-danger");
+        p.classList.toggle("secondary");
+        p.classList.toggle("outline");
       });
     }
   }
@@ -94,8 +101,14 @@ function normalize(data) {
 }
 
 export class GuestManager extends Manager {
-  constructor() {
-    super("Guest", 18);
+  constructor(description, count) {
+    if (typeof description === "undefined") {
+      description = "Guest";
+    }
+    if (typeof count === "undefined") {
+      count = 18;
+    }
+    super(description, count);
   }
   createItem(i) {
     return new Guest(i, randomStatus());
@@ -109,6 +122,15 @@ export class GuestManager extends Manager {
   active() {
     return normalize(super.active());
   }
+  incrementGames(list) {
+    for (let index = 0; index < this.data.length; index++) {
+      if (list.includes(this.data[index].name)) {
+        console.log("Added game count to " + this.data[index].name);
+        this.data[index].games += 1;
+      }
+    }
+    this.store();
+  }
 }
 
 export function randomLevel() {
@@ -116,33 +138,42 @@ export function randomLevel() {
   return Math.floor(Math.random() * maxLevel + 1);
 }
 
-export class RegularManager extends Manager {
+export class RegularManager extends GuestManager {
   constructor() {
     super("Regular", 71);
     addLoadBehaviour(this);
   }
   createItem(i) {
-    return new Player(i, randomStatus(), randomLevel());
+    const name = uniqueNamesGenerator(config);
+    console.log(name);
+    const firstName = name.split("_")[0];
+    const lastName = name.split("_")[1];
+    return new Regular(i, randomStatus(), randomLevel(), 0, firstName, lastName);
   }
   loadItem(data) {
-    let id = Number(data.id);
-    let name = data.name;
-    let level = Number(data.level);
-    let status = Boolean(Number(data.status));
-    let games = Number(data.games);
-    return new Player(id, status, level, games, name);
+    const id = Number(data.id);
+    const level = Number(data.level);
+    const status = Boolean(Number(data.status));
+    const games = Number(data.games);
+    const firstName = data.firstName;
+    const lastName = data.lastName;
+    return new Regular(id, status, level, games, firstName, lastName);
   }
-  active() {
-    return normalize(super.active());
+  reset() {
+    for (let index = 0; index < this.data.length; index++) {
+      this.data[index].games = 0;
+      this.data[index].status = false;
+    }
   }
 }
 
 function parseLineToPlayer(data) {
-  var info = data.split(",");
-  var id = Number(info[0].trim());
-  var name = info[1].trim() + " " + info[2].trim();
-  var level = Number(info[3].trim());
-  return new Player(id, randomStatus(), level, 0, name);
+  const info = data.split(",");
+  const id = Number(info[0].trim());
+  const firstName = info[1].trim();
+  const lastName = info[2].trim();
+  const level = Number(info[3].trim());
+  return new Regular(id, randomStatus(), level, 0, firstName, lastName);
 }
 
 function parseCsv(data) {
@@ -161,8 +192,12 @@ function parseCsv(data) {
   return players;
 }
 
+document.getElementById("button-player-load").addEventListener("click", () => {
+  document.getElementById("player-load").click();
+});
+
 function addLoadBehaviour(p) {
-  const f = document.querySelector("#player-load input[type=file]");
+  const f = document.getElementById("player-load");
   f.addEventListener("change", () => {
     const file = f.files[0];
     let importData;
diff --git a/src/style.css b/src/style.css
index 73550ca..357b043 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,17 +1,26 @@
-.button-grid {
+@import "@picocss/pico";
+@import "notyf/notyf.min.css";
+@import "@fortawesome/fontawesome-free/css/all.css";
+
+.grid-container {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(6, 1fr);
   grid-gap: 15px;
 }
 #timer-display {
   text-align: center;
-  width: fit-content;
+  width: 100px;
 }
-table {
-  font-size: 1.5em;
+#timer {
+  margin: 0;
+}
+@media (min-width: 900px) {
+  #Regular-list button {
+    height: 100px;
+  }
 }
 @media (max-width: 900px) {
-  .button-grid {
+  .grid-container {
     grid-template-columns: repeat(1, 1fr);
   }
-}
\ No newline at end of file
+}
diff --git a/src/timer.js b/src/timer.js
index c00ffdc..9b0a8b9 100644
--- a/src/timer.js
+++ b/src/timer.js
@@ -1,3 +1,5 @@
+import { Notyf } from "notyf";
+
 const milliSecond = 1000;
 
 export class Timer {
@@ -42,7 +44,12 @@ export class Timer {
       return;
     }
     p.reset();
-    getNotifier().error("Round completed");
+    const n = new Notyf({
+      duration: 0,
+      position: { x: "center", y: "top" },
+      dismissible: true,
+    });
+    n.error("Round completed");
   }
   start(fresh) {
     if (fresh) {