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/data.js | 58 +++++++++++++++++++++++++++-------------------------------
 1 file changed, 27 insertions(+), 31 deletions(-)

(limited to 'src/data.js')

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>`;
   }
 }
-- 
cgit v1.3.1