From 7cec8794b6616d294b6a0e8aab3b9d8b1dcdb6db Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <mail@karanjayachandra.com>
Date: Sat, 15 Nov 2025 19:12:25 +0100
Subject: Added the change to Pico CSS

---
 src/main.js | 25 ++++++++-----------------
 1 file changed, 8 insertions(+), 17 deletions(-)

(limited to 'src/main.js')

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!");
   });
 }
 
-- 
cgit v1.3.1


From 4ff9794fa2b545134efe341ad012667c67f70d15 Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <mail@karanjayachandra.com>
Date: Sat, 15 Nov 2025 20:09:51 +0100
Subject: Added the changes to include the game counting

---
 index.html    | 12 ++++++------
 src/data.js   | 32 +++++++++++++++++++-------------
 src/main.js   | 28 ++++++++++++++++++++++------
 src/manage.js |  8 +++++---
 src/style.css |  4 +++-
 5 files changed, 55 insertions(+), 29 deletions(-)

(limited to 'src/main.js')

diff --git a/index.html b/index.html
index 0b0e641..7a47a8d 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
         <ul><li><img src="icon.svg"></li></ul>
         <ul>
           <li>
-            <fieldset role="group">
+            <fieldset id="timer" role="group">
               <button id="timer-dec"><i class="fa-solid fa-minus"></i></button>
               <input id="timer-display" type="text" readonly></input>
               <button id="timer-inc"><i class="fa-solid fa-plus"></i></button>
@@ -24,8 +24,8 @@
     </header>
     <main class="container">
       <section>
-        <h1 class="title" id="Game_description"></h1>
-        <div id="Game_list" class="grid-container"></div>
+        <h1 class="title" id="Game-description"></h1>
+        <div id="Game-list" class="grid-container"></div>
       </section>
       <section>
         <fieldset role="group">
@@ -44,21 +44,21 @@
           <h2>Courts</h2>
           <p>Reserve courts for training or competition.</p>
         </hgroup>
-        <div id="Court_list" class="grid-container"></div>
+        <div id="Court-list" class="grid-container"></div>
       </section>
       <section>
         <hgroup>
           <h2>Regulars</h2>
           <p>Check in and check out club members.</p>
         </hgroup>
-        <div id="Regular_list" class="grid-container"></div>
+        <div id="Regular-list" class="grid-container"></div>
       </section>
       <section>
         <hgroup>
           <h2>Guests</h2>
           <p>Add guests to the pool.</p>
         </hgroup>
-        <div id="Guest_list" class="grid-container"></div>
+        <div id="Guest-list" class="grid-container"></div>
       </section>
       <section>
         <hgroup>
diff --git a/src/data.js b/src/data.js
index 6abad81..3e133ee 100644
--- a/src/data.js
+++ b/src/data.js
@@ -1,9 +1,9 @@
 class Switch {
-  constructor(id, description, status) {
+  constructor(id, status) {
     this.id = id;
     this.status = typeof status !== "undefined" ? status : false;
-    this.description = description;
-    this.name = description + " " + (id + 1);
+    this.description = this.constructor.name;
+    this.name = this.description + " " + (id + 1);
   }
   toggle() {
     this.status = !this.status;
@@ -22,18 +22,18 @@ class Switch {
 
 export class Court extends Switch {
   constructor(id, status) {
-    super(id, "Court", status);
+    super(id, status);
   }
 }
 
 export class Regular extends Switch {
   constructor(id, status, level, games, firstName, lastName) {
-    super(id, "Regular", status);
-    console.log(this.constructor.name);
+    super(id, status);
     this.level = typeof level !== "undefined" ? level : 1;
     this.games = typeof games !== "undefined" ? games : 0;
-    this.firstName = typeof firstName !== "undefined" ? firstName : this.description;
-    this.lastName = typeof lastName !== "undefined" ? lastName : ( this.id + 1 );
+    this.firstName =
+      typeof firstName !== "undefined" ? firstName : this.description;
+    this.lastName = typeof lastName !== "undefined" ? lastName : this.id + 1;
     this.name = this.firstName + " " + this.lastName;
   }
 }
@@ -49,7 +49,7 @@ export class Guest extends Switch {
   categoryCount = 3;
 
   constructor(id, status, games) {
-    super(id, "Guest", status);
+    super(id, status);
     const categoryId = Math.floor(id / this.maxCount) || 0;
     this.level = guestCategories[categoryId].level;
     this.games = typeof games !== "undefined" ? games : 0;
@@ -83,20 +83,26 @@ export class Team {
 
 export class Game extends Switch {
   constructor(id, status, teamOne, teamTwo) {
-    super(id, "Game", status);
+    super(id, status);
     this.teamOne = teamOne;
     this.teamTwo = teamTwo;
   }
   print() {
-    const teamOne = this.teamOne.playerOne.firstName + " and " + this.teamOne.playerTwo.firstName;
-    const teamTwo = this.teamTwo.playerOne.firstName + " and " + this.teamTwo.playerTwo.firstName;
+    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() {
     const blockedState = this.teamOne.playerOne.firstName === "RESERVED";
-    const playerState = this.teamOne.render() + "<hr>"+ this.teamTwo.render();
+    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>
diff --git a/src/main.js b/src/main.js
index 6d8f35b..3732e51 100644
--- a/src/main.js
+++ b/src/main.js
@@ -19,14 +19,17 @@ export class GameManager extends Manager {
     this.render();
     addGameBehaviour(this);
   }
-  createItem(i, description) {
+  createItem(i, description, status) {
     if (typeof description === "undefined") {
       description = "---";
     }
+    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, true, team, team);
+    return new Game(i, status, team, team);
   }
   loadItem(data) {
     let id = Number(data.id);
@@ -37,21 +40,22 @@ 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) {
@@ -92,7 +96,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:");
@@ -128,6 +132,18 @@ export class GameManager extends Manager {
       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();
diff --git a/src/manage.js b/src/manage.js
index f8fe220..6ed58bd 100644
--- a/src/manage.js
+++ b/src/manage.js
@@ -38,7 +38,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();
   }
@@ -111,12 +111,14 @@ export class GuestManager extends Manager {
   active() {
     return normalize(super.active());
   }
-  update(list) {
+  incrementGames(list) {
     for (let index = 0; index < this.data.length; index++ ){
-      if (this.data[index].name in list) {
+      if (list.includes(this.data[index].name)) {
+        console.log("Added game count to " + this.data[index].name);
         this.data[index].games += 1;
       }
     }
+    this.store();
   }
 }
 
diff --git a/src/style.css b/src/style.css
index 197597b..d6ea4de 100644
--- a/src/style.css
+++ b/src/style.css
@@ -7,7 +7,9 @@
   text-align: center;
   width: 100px;
 }
-
+#timer {
+  margin: 0;
+}
 @media (min-width: 900px) {
   #Regular_list button {
     height: 100px;
-- 
cgit v1.3.1


From fef09593445dcf3a56ee9074b88bde7b0a9f33f9 Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <mail@karanjayachandra.com>
Date: Sat, 15 Nov 2025 21:59:09 +0100
Subject: Added the changes to fix the bug with class name and changed the SVG
 color to match the buttons

---
 index.html      | 44 +++++++++++++++++++++++++-------------------
 public/icon.svg |  4 ++--
 src/data.js     | 12 ++++++------
 src/main.js     |  6 ++----
 src/manage.js   | 16 ++++++++++++----
 src/style.css   |  6 +++++-
 6 files changed, 52 insertions(+), 36 deletions(-)

(limited to 'src/main.js')

diff --git a/index.html b/index.html
index 7a47a8d..b99eb3f 100644
--- a/index.html
+++ b/index.html
@@ -1,22 +1,26 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="light">
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Match Up!</title>
+    <meta name="keywords" content="Badminton, Matchmaking, Open">
+    <meta name="author" content="Karan Jayachandra">
+    <meta name="description" content="Matchup is a free utility that helps you create matches for Badminton from a pool a players. The tool is completely open source and private as all data is store locally on your machine.">
+    <meta http-equiv="Cache-control" content="public">
   </head>
   <body>
     <header class="container">
       <nav>
-        <ul><li><img src="icon.svg"></li></ul>
+        <ul><li><img src="icon.svg" alt="Matchup"></li></ul>
         <ul>
           <li>
             <fieldset id="timer" role="group">
-              <button id="timer-dec"><i class="fa-solid fa-minus"></i></button>
-              <input id="timer-display" type="text" readonly></input>
-              <button id="timer-inc"><i class="fa-solid fa-plus"></i></button>
-              <button id="timer-start"><i class="fa-solid fa-play"></i></button>
-              <button id="timer-stop"><i class="fa-solid fa-stop"></i></button>
+              <button id="timer-dec" title="Timer decrement"><i class="fa-solid fa-minus"></i></button>
+              <input id="timer-display" title="Time display" type="text" readonly></input>
+              <button id="timer-inc" title="Timer increment"><i class="fa-solid fa-plus"></i></button>
+              <button id="timer-start" title="Timer start"><i class="fa-solid fa-play"></i></button>
+              <button id="timer-stop" title="Timer stop"><i class="fa-solid fa-stop"></i></button>
             </fieldset>
           </li>
         </ul>
@@ -28,16 +32,16 @@
         <div id="Game-list" class="grid-container"></div>
       </section>
       <section>
-        <fieldset role="group">
+        <select id="skill" aria-label="State">
+          <option value="10">All Levels</option>
+          <option value="5">2 Levels</option>
+          <option value="3">3 Levels</option>
+          <option value="1">Skill Based</option>
+        </select>
+        <div class="grid">
           <button id="propose">Propose</button>
-          <select name="skill" id="skill">
-            <option value="10">All Levels</option>
-            <option value="5">2 Levels</option>
-            <option value="3">3 Levels</option>
-            <option value="1">Skill Based</option>
-          </select>
           <button id="confirm">Confirm</button>
-        </fieldset>
+        </div>
       </section>
       <section>
         <hgroup>
@@ -65,13 +69,15 @@
           <h2>Admin</h2>
           <p>Changes here are permanent and cannot be reverted.</p>
         </hgroup>
-        <button id="reset">Reset Session</button>
-        <input type="file" id="player-load" accept=".csv"/>
+        <div id="admin" class="grid">
+          <button id="reset">Reset Session</button>
+          <button id='button-player-load'>Upload Database</button>
+        </div>
+        <input type="file" id="player-load" accept=".csv" placeholder="Player database" hidden/>
       </div>
-      
     </main>
     <footer class="container" style="text-align: center;">
-      <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.svgrepo.com">SVG Repo</a>.
+      <strong>Matchup</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.svgrepo.com">SVG Repo</a>.
     </footer>
   </body>
   <script src="src/main.js" type="module"></script>
diff --git a/public/icon.svg b/public/icon.svg
index 6f796c9..79fc328 100644
--- a/public/icon.svg
+++ b/public/icon.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2754 0.944403C11.3453 0.744005 10.2222 0.970412 9.13178 2.0608C8.33219 2.86038 7.9983 3.67642 7.95466 4.41945C7.21168 4.46315 6.39574 4.79705 5.59623 5.59656C4.7968 6.39598 4.46289 7.21185 4.41914 7.95476C3.67615 7.99845 2.86019 8.33235 2.06067 9.13187C0.970292 10.2223 0.743884 11.3454 0.94428 12.2755C1.21143 13.5155 2.36155 14.0955 2.99091 14.3815L13.0368 18.9479C13.7958 19.2928 14.6891 19.1308 15.2786 18.5413L18.5412 15.2788C19.1307 14.6892 19.2927 13.7959 18.9478 13.0369L14.3815 2.99103C14.0954 2.36167 13.5154 1.21155 12.2754 0.944403ZM11.3631 2.92663C11.5577 2.86548 11.7198 2.87057 11.8542 2.89954C11.9267 2.91516 12.0234 2.96174 12.154 3.11733C12.2925 3.28248 12.4237 3.51715 12.5607 3.81864L17.127 13.8645L17.0038 13.9877L10.2365 5.28681C10.1076 5.15387 10.0151 4.97688 9.97358 4.79696C9.92398 4.58201 9.88826 4.13274 10.546 3.47501C10.8869 3.13412 11.1654 2.98872 11.3631 2.92663ZM5.2867 10.2368L13.9875 17.0041L13.8644 17.1271L3.81852 12.5608C3.51702 12.4238 3.28236 12.2926 3.11721 12.1541C2.96162 12.0235 2.91504 11.9268 2.89942 11.8543C2.87045 11.7198 2.86535 11.5578 2.92651 11.3632C2.9886 11.1655 3.134 10.887 3.47489 10.5461C4.13262 9.88835 4.58189 9.92407 4.79683 9.97368C4.97795 10.0155 5.15478 10.1048 5.2867 10.2368ZM15.413 15.5788L6.6399 8.75532C6.58371 8.68236 6.4812 8.51974 6.43804 8.33271C6.38844 8.11777 6.35271 7.6685 7.01045 7.01077C7.66818 6.35304 8.11744 6.38876 8.33238 6.43837C8.51988 6.48163 8.68289 6.58461 8.75554 6.64065L15.5786 15.4132L15.413 15.5788Z" fill="#0F0F0F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7878 19.4464C15.2924 19.9419 15.1623 20.7967 15.6981 21.4206C16.0694 21.853 16.8569 22.653 17.9452 23.0047C18.5098 23.1873 19.1614 23.2505 19.8583 23.0724C20.5523 22.8951 21.2237 22.4958 21.8597 21.8598C22.4957 21.2238 22.895 20.5523 23.0724 19.8583C23.2504 19.1614 23.1872 18.5099 23.0047 17.9452C22.6529 16.857 21.8529 16.0694 21.4206 15.6982C20.7966 15.1624 19.9418 15.2924 19.4464 15.7879L15.7878 19.4464ZM18.5603 21.1017C18.1893 20.9818 17.848 20.7386 17.5743 20.4883L20.4882 17.5744C20.7385 17.8481 20.9817 18.1894 21.1016 18.5603C21.1853 18.8192 21.2062 19.0832 21.1346 19.3632C21.0623 19.6461 20.8783 20.0128 20.4455 20.4456C20.0127 20.8784 19.646 21.0624 19.3631 21.1347C19.0832 21.2062 18.8192 21.1854 18.5603 21.1017Z" fill="#0F0F0F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2754 0.944403C11.3453 0.744005 10.2222 0.970412 9.13178 2.0608C8.33219 2.86038 7.9983 3.67642 7.95466 4.41945C7.21168 4.46315 6.39574 4.79705 5.59623 5.59656C4.7968 6.39598 4.46289 7.21185 4.41914 7.95476C3.67615 7.99845 2.86019 8.33235 2.06067 9.13187C0.970292 10.2223 0.743884 11.3454 0.94428 12.2755C1.21143 13.5155 2.36155 14.0955 2.99091 14.3815L13.0368 18.9479C13.7958 19.2928 14.6891 19.1308 15.2786 18.5413L18.5412 15.2788C19.1307 14.6892 19.2927 13.7959 18.9478 13.0369L14.3815 2.99103C14.0954 2.36167 13.5154 1.21155 12.2754 0.944403ZM11.3631 2.92663C11.5577 2.86548 11.7198 2.87057 11.8542 2.89954C11.9267 2.91516 12.0234 2.96174 12.154 3.11733C12.2925 3.28248 12.4237 3.51715 12.5607 3.81864L17.127 13.8645L17.0038 13.9877L10.2365 5.28681C10.1076 5.15387 10.0151 4.97688 9.97358 4.79696C9.92398 4.58201 9.88826 4.13274 10.546 3.47501C10.8869 3.13412 11.1654 2.98872 11.3631 2.92663ZM5.2867 10.2368L13.9875 17.0041L13.8644 17.1271L3.81852 12.5608C3.51702 12.4238 3.28236 12.2926 3.11721 12.1541C2.96162 12.0235 2.91504 11.9268 2.89942 11.8543C2.87045 11.7198 2.86535 11.5578 2.92651 11.3632C2.9886 11.1655 3.134 10.887 3.47489 10.5461C4.13262 9.88835 4.58189 9.92407 4.79683 9.97368C4.97795 10.0155 5.15478 10.1048 5.2867 10.2368ZM15.413 15.5788L6.6399 8.75532C6.58371 8.68236 6.4812 8.51974 6.43804 8.33271C6.38844 8.11777 6.35271 7.6685 7.01045 7.01077C7.66818 6.35304 8.11744 6.38876 8.33238 6.43837C8.51988 6.48163 8.68289 6.58461 8.75554 6.64065L15.5786 15.4132L15.413 15.5788Z" fill="#0172ad"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7878 19.4464C15.2924 19.9419 15.1623 20.7967 15.6981 21.4206C16.0694 21.853 16.8569 22.653 17.9452 23.0047C18.5098 23.1873 19.1614 23.2505 19.8583 23.0724C20.5523 22.8951 21.2237 22.4958 21.8597 21.8598C22.4957 21.2238 22.895 20.5523 23.0724 19.8583C23.2504 19.1614 23.1872 18.5099 23.0047 17.9452C22.6529 16.857 21.8529 16.0694 21.4206 15.6982C20.7966 15.1624 19.9418 15.2924 19.4464 15.7879L15.7878 19.4464ZM18.5603 21.1017C18.1893 20.9818 17.848 20.7386 17.5743 20.4883L20.4882 17.5744C20.7385 17.8481 20.9817 18.1894 21.1016 18.5603C21.1853 18.8192 21.2062 19.0832 21.1346 19.3632C21.0623 19.6461 20.8783 20.0128 20.4455 20.4456C20.0127 20.8784 19.646 21.0624 19.3631 21.1347C19.0832 21.2062 18.8192 21.1854 18.5603 21.1017Z" fill="#0172ad"/>
 </svg>
\ No newline at end of file
diff --git a/src/data.js b/src/data.js
index 3e133ee..f1cf7c9 100644
--- a/src/data.js
+++ b/src/data.js
@@ -1,8 +1,8 @@
 class Switch {
-  constructor(id, status) {
+  constructor(id, description, status) {
     this.id = id;
     this.status = typeof status !== "undefined" ? status : false;
-    this.description = this.constructor.name;
+    this.description = description;
     this.name = this.description + " " + (id + 1);
   }
   toggle() {
@@ -22,13 +22,13 @@ class Switch {
 
 export class Court extends Switch {
   constructor(id, status) {
-    super(id, status);
+    super(id, "Court", status);
   }
 }
 
 export class Regular extends Switch {
   constructor(id, status, level, games, firstName, lastName) {
-    super(id, status);
+    super(id, "Regular", status);
     this.level = typeof level !== "undefined" ? level : 1;
     this.games = typeof games !== "undefined" ? games : 0;
     this.firstName =
@@ -49,7 +49,7 @@ export class Guest extends Switch {
   categoryCount = 3;
 
   constructor(id, status, games) {
-    super(id, status);
+    super(id, "Guest", status);
     const categoryId = Math.floor(id / this.maxCount) || 0;
     this.level = guestCategories[categoryId].level;
     this.games = typeof games !== "undefined" ? games : 0;
@@ -83,7 +83,7 @@ export class Team {
 
 export class Game extends Switch {
   constructor(id, status, teamOne, teamTwo) {
-    super(id, status);
+    super(id, "Game", status);
     this.teamOne = teamOne;
     this.teamTwo = teamTwo;
   }
diff --git a/src/main.js b/src/main.js
index 3732e51..654300a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,4 @@
-import "@picocss/pico";
-import "notyf/notyf.min.css";
-import "@fortawesome/fontawesome-free/css/all.css";
-import "./style.css";
+import "./style.css"
 import { Timer } from "./timer";
 import { Team, Game, Regular } from "./data";
 import { Manager, CourtManager, RegularManager, GuestManager } from "./manage";
@@ -180,3 +177,4 @@ function addGameBehaviour(g) {
 }
 
 const g = new GameManager();
+
diff --git a/src/manage.js b/src/manage.js
index 6ed58bd..83a9b4c 100644
--- a/src/manage.js
+++ b/src/manage.js
@@ -95,8 +95,12 @@ function normalize(data) {
 
 export class GuestManager extends Manager {
   constructor(description, count) {
-    if ( typeof description === "undefined" ) { description = "Guest"; };
-    if ( typeof count === "undefined" ) { count = 18; };
+    if (typeof description === "undefined") {
+      description = "Guest";
+    }
+    if (typeof count === "undefined") {
+      count = 18;
+    }
     super(description, count);
   }
   createItem(i) {
@@ -112,7 +116,7 @@ export class GuestManager extends Manager {
     return normalize(super.active());
   }
   incrementGames(list) {
-    for (let index = 0; index < this.data.length; index++ ){
+    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;
@@ -145,7 +149,7 @@ export class RegularManager extends GuestManager {
     return new Regular(id, status, level, games, firstName, lastName);
   }
   reset() {
-    for (let index = 0; index < this.data.length; index++ ){
+    for (let index = 0; index < this.data.length; index++) {
       this.data[index].games = 0;
       this.data[index].status = false;
     }
@@ -177,6 +181,10 @@ function parseCsv(data) {
   return players;
 }
 
+document.getElementById("button-player-load").addEventListener("click", () => {
+  document.getElementById("player-load").click();
+});
+
 function addLoadBehaviour(p) {
   const f = document.getElementById("player-load");
   f.addEventListener("change", () => {
diff --git a/src/style.css b/src/style.css
index d6ea4de..357b043 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,7 @@
+@import "@picocss/pico";
+@import "notyf/notyf.min.css";
+@import "@fortawesome/fontawesome-free/css/all.css";
+
 .grid-container {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
@@ -11,7 +15,7 @@
   margin: 0;
 }
 @media (min-width: 900px) {
-  #Regular_list button {
+  #Regular-list button {
     height: 100px;
   }
 }
-- 
cgit v1.3.1


From 2e323bf7c20cc59a8d2017517b14d615344c5863 Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <mail@karanjayachandra.com>
Date: Sun, 16 Nov 2025 16:17:36 +0100
Subject: Changed the README

---
 README.md       | 89 ++++++++++++++++++++++++---------------------------------
 assets/docs.png |  3 ++
 src/main.js     |  2 --
 3 files changed, 40 insertions(+), 54 deletions(-)
 create mode 100644 assets/docs.png

(limited to 'src/main.js')

diff --git a/README.md b/README.md
index 98e58f4..98662c4 100644
--- a/README.md
+++ b/README.md
@@ -1,79 +1,64 @@
 # Match Up
 
-Match Up! is a flask web application to create pairings of players from a pool and assign to a limited number of slots.
+Match Up! is a web application to create pairings of players from a pool and assign to a limited number of slots. It is [live](https://mu.karanj.com)!
 
 Here it is in action:
 
-![Game Page](https://gitlab.com/KaranJayachandra/match_up/-/raw/main/docs/game_screen.png?ref_type=heads)
-
-![Player Page](https://gitlab.com/KaranJayachandra/match_up/-/raw/main/docs/player_screen.png?ref_type=heads)
+![Game Page](https://gitlab.com/KaranJayachandra/match_up/-/raw/main/assets/docs.png?ref_type=heads)
 
 Some features of this application are:
 
-- Propose pairings to create a round
+- Activate and deactivate named players, guests and courts
+- Propose pairings to each court from a set of players
+  - Considers player levels (optionally mingle players)
+  - Prioritize players that haven't played as many games
 - Timer to limit the time for each round
-- Create pairings based on player level
-- Prioritize players with fewer played games
-- Blocking spaces that aren't available any more
-- Blocking players that aren't available any more
-- Regular and guest players
 
 What this application ***IS***:
 
-- Simple: Easy to modify, extend and use
+- Open: The source code is available for modifications and extension
+- Private: All player data is stored in your browser via local storage
 
 What this application ***IS NOT***:
 
-- Secure: This was designed to be used locally on a machine
-- Performant: It was designed for use by a single admin user
+- Secure: The data is available for anyone to observe via the browser console
+- Performant: Works with a small number of named players (<3 MB)
 
-## How to install
+## Usage
 
-With [python](https://realpython.com/installing-python/) installed, run the following command preferably in a seperate virtual environment.
+- Select or deselect the courts available
+- Check in and check out the regular players
+- Optionally add guests to the game
+  - Beginner: Level 1
+  - Novice: Level 3
+  - Intermediate: Level 6
+- Choose how the pools should be created
+  - All levels (Disregard levels)
+  - 2 Levels (Players split into two categories)
+  - 3 Levels (Players split into three categories)
+  - Skill based (Consider all levels)
+- Request a proposal and confirm to start a round
+- Repeat as many times as needed
+- Reset the session at the bottom of the page
+- You can update the list of players by providing a CSV file. The format is show below:
 
-### Using pip
+|id|first_name|last_name|level|
+|---|---|---|---|
+|104|John|Doe|4|
+|104|Jane|Doe|9|
 
-```bash
-pip install git+https://gitlab.com/KaranJayachandra/match_up.git
-```
+Levels are defined between 1 to 10.
 
-### How to complile from source
+## Compilation
 
-Please install [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [python](https://realpython.com/installing-python/) on your machine before proceeding further. Once installed, open the terminal to a folder of your choosing and run the following commands to setup the application.
+Please install [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [node](https://nodejs.org/en) on your machine before proceeding further.
+
+Once installed, open the terminal to a folder of your choosing and run the following commands to setup the application.
 
 ```bash
 git clone https://gitlab.com/KaranJayachandra/match_up.git
 cd match_up
-python -m venv .venv
-.venv/Scripts/activate
-pip install .
-```
-
-To run the application, just run:
-
-```bash
-match_up
-```
-
-The application should be running now in 'localhost', just navigate there using a browser. Use the `--help` option to get an explanation of the application.
-
-## Startup Automation
-
-Create a powershell script with the following content in the folder with the code.
-
-```bash
-.venv/Scripts/activate
-pythonw match_up
+npm install
 ```
 
-Create a task using Task Scheduler to run this script on start up.
-
-## Architectural Design Record
-
-This part of the README focuses on the motivation of why this application was built and contains background information. Please read on in case you want to know more about the technological choices made.
-
-This is a simple application build using [flask](https://flask.palletsprojects.com/en/3.0.x/), [htmx](https://htmx.org/) and [Bulma](https://bulma.io/). Flask acts as the backend that generates HTML responses using the wonderful [Jinja](https://jinja.palletsprojects.com/en/3.1.x/) templating language. Interactivity of the application is done using HTMX using simple GET and POST methods to the backend. The application is styled using the Bulma with its easy to used CSS classes.
-
-- Python was choose to prioritize delivery speed not for performance. More over, the sheer number of Python programmers allows for the application to be easily maintained by others.
-- Flask was choosed as it more than enough for the features that I needed instead of Django. The application is to run locally on a laptop and doesn't really need to have complicated features.
-- Due to a lack of frontend developers, the simplest UI stack was choosen. HTMX requires no need of JavaScript and was a natural choice. The website needed some basic styling and after looking at a few CSS frameworks, Bulma provided most of the styling. A toasting library, "Notyf" was also used for simple notifications to be sent via some custom javascript code for a simple timer.
+To run a development server run `npm run dev` or run `npm run build` to create a optimized bundle of static content. I choose to serve this content via GitLab pages but you could choose to do so in any other server.
diff --git a/assets/docs.png b/assets/docs.png
new file mode 100644
index 0000000..a285f5d
--- /dev/null
+++ b/assets/docs.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:15e4f5d832d0589d5054bcbfa61e011143051c20ed6150501ff98f2935d5e436
+size 332802
diff --git a/src/main.js b/src/main.js
index 654300a..59f66d0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -37,7 +37,6 @@ 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;
   }
@@ -128,7 +127,6 @@ 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);
-- 
cgit v1.3.1