From c0c4897f2ef9eb9ae444bc05407c3cdf420c3461 Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <mail@karanjayachandra.com>
Date: Sat, 15 Nov 2025 15:48:50 +0100
Subject: Trying cards instead of a table

---
 src/data.js | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

(limited to 'src/data.js')

diff --git a/src/data.js b/src/data.js
index 589b5a3..1d4576d 100644
--- a/src/data.js
+++ b/src/data.js
@@ -15,7 +15,7 @@ class Switch {
   }
   render() {
     let color = this.status ? "is-success" : "is-danger";
-    let type = `class="button is-medium ${color}"`;
+    let type = `class="button ${color}"`;
     let id = this.description + "_" + this.id;
     return `<button id=${id} ${type}>${this.name}</button>`;
   }
@@ -69,9 +69,15 @@ 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;
+
+    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>`;
   }
 }
 
@@ -90,10 +96,15 @@ export class Game extends Switch {
   }
   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>`;
+    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>`;
   }
 }
-- 
cgit v1.3.1