Added the change to Pico CSS

5 files changed, 80 insertions, 70 deletions

diff --git a/src/data.js b/src/data.js
index 1d4576d..6abad81 100644
--- a/src/data.js
+++ b/src/data.js
@@ -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 ${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);
+    console.log(this.constructor.name);
     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,15 +75,9 @@ export class Team {
     this.playerTwo.print();
   }
   render() {
-
-    return `<div class="card">
-      <div class="card-content">
-        <div class="content">
-          <p class="subtitle is-6" style="word-wrap: break-word;">${this.playerOne}</p>
-          <p class="subtitle is-6" style="word-wrap: break-word;">${this.playerTwo}</p>
-        </div>
-        </div>
-      </div>`;
+    const p1 = renderPlayerName(this.playerOne);
+    const p2 = renderPlayerName(this.playerTwo);
+    return p1 + `<br/><br/>` + p2;
   }
 }
 
@@ -88,23 +88,19 @@ 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 placeHolder = `<p class="title is-3">Reserved</p>`
-    let type = blockedState ? placeHolder : this.teamOne.render() + this.teamTwo.render();
-    return `<div class="card">
-      <header class="card-header">
-        <p class="card-header-title">Court ${this.id + 1}</p>
-      </header>
-      <div class="card-content">
-        ${type}
-      </div>
-    </div>`;
+    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>
+      <h4>Court ${this.id + 1}</h4><hr>
+      ${type}
+    </article>`;
   }
 }
diff --git a/src/main.js b/src/main.js
index ec33b18..6d8f35b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,19 +1,11 @@
+import "@picocss/pico";
 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 { 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();
@@ -31,7 +23,9 @@ export class GameManager extends Manager {
     if (typeof description === "undefined") {
       description = "---";
     }
-    let team = new Team(description, description);
+    let player = new Regular(null, null, null, null, description, "");
+    console.log(player);
+    let team = new Team(player, player);
     return new Game(i, true, team, team);
   }
   loadItem(data) {
@@ -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);
     }
@@ -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 + ".");
@@ -144,7 +137,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,11 +157,9 @@ 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!");
   });
 }
 
diff --git a/src/manage.js b/src/manage.js
index 7449866..f8fe220 100644
--- a/src/manage.js
+++ b/src/manage.js
@@ -1,4 +1,4 @@
-import { Court, Guest, Player } from "./data";
+import { Court, Guest, Regular } from "./data";
 
 export class Manager {
   constructor(description, maxCount) {
@@ -49,8 +49,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 +94,10 @@ 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 +111,13 @@ export class GuestManager extends Manager {
   active() {
     return normalize(super.active());
   }
+  update(list) {
+    for (let index = 0; index < this.data.length; index++ ){
+      if (this.data[index].name in list) {
+        this.data[index].games += 1;
+      }
+    }
+  }
 }
 
 export function randomLevel() {
@@ -116,33 +125,38 @@ 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());
+    return new Regular(i, randomStatus(), randomLevel());
   }
   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);
+    let firstName = data.firstName;
+    let 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) {
@@ -162,7 +176,7 @@ function parseCsv(data) {
 }
 
 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 cb46ed5..197597b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,16 +3,18 @@
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 15px;
 }
-.card {
-  height: 100%;
-}
 #timer-display {
   text-align: center;
   width: 100px;
 }
 
+@media (min-width: 900px) {
+  #Regular_list button {
+    height: 100px;
+  }
+}
 @media (max-width: 900px) {
   .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) {