Added the changes to fix the bug with class name and changed the SVG color to match the buttons

author: Karan Jayachandra <mail@karanjayachandra.com> 2025-11-15 21:59:09 +0100
committer: Karan Jayachandra <mail@karanjayachandra.com> 2025-11-15 21:59:09 +0100
commit: fef09593445dcf3a56ee9074b88bde7b0a9f33f9 (patch)
tree: 530480aedc17f110ca4888402bc697019c1bac51
parent: 4ff9794fa2b545134efe341ad012667c67f70d15 (diff)
6 files changed, 52 insertions, 36 deletions
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;
   }
 }
author	Karan Jayachandra <mail@karanjayachandra.com>	2025-11-15 21:59:09 +0100
committer	Karan Jayachandra <mail@karanjayachandra.com>	2025-11-15 21:59:09 +0100
commit	fef09593445dcf3a56ee9074b88bde7b0a9f33f9 (patch)
tree	530480aedc17f110ca4888402bc697019c1bac51
parent	4ff9794fa2b545134efe341ad012667c67f70d15 (diff)