From c0c4897f2ef9eb9ae444bc05407c3cdf420c3461 Mon Sep 17 00:00:00 2001 From: Karan Jayachandra Date: Sat, 15 Nov 2025 15:48:50 +0100 Subject: Trying cards instead of a table --- index.html | 59 ++++++++++++++++++++++++----------------------------------- src/data.js | 29 ++++++++++++++++++++--------- src/style.css | 15 ++++++++------- 3 files changed, 52 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index b839ede..5c31576 100644 --- a/index.html +++ b/index.html @@ -6,40 +6,33 @@ Match Up! -
+
-
+

- - - - - - - - - -
CourtTeam 1Team 2
+
-
- -
+
+ +
- +

Courts

-
+

Reserve courts for training or competition.

+

Regulars

-
+

Check in and check out club members.

+

Guests

-
+

Add guests to the pool.

+

Admin

Changes here are permanent and cannot be reverted.

- -
-
-
+
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 ``; } @@ -69,9 +69,15 @@ export class Team { this.playerTwo.print(); } render() { - let p1 = `${this.playerOne}`; - let p2 = `${this.playerTwo}`; - return p1 + p2; + + return `
+
+
+

${this.playerOne}

+

${this.playerTwo}

+
+
+
`; } } @@ -90,10 +96,15 @@ export class Game extends Switch { } render() { let blockedState = this.teamOne.playerOne === "RESERVED"; - let type = blockedState ? `class="is-dark"` : ``; - let court = `${ - this.id + 1 - }`; - return `${court}${this.teamOne.render()}${this.teamTwo.render()}`; + let placeHolder = `

Reserved

` + let type = blockedState ? placeHolder : this.teamOne.render() + this.teamTwo.render(); + return `
+
+

Court ${this.id + 1}

+
+
+ ${type} +
+
`; } } diff --git a/src/style.css b/src/style.css index 73550ca..cb46ed5 100644 --- a/src/style.css +++ b/src/style.css @@ -1,17 +1,18 @@ -.button-grid { +.grid-container { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(6, 1fr); grid-gap: 15px; } +.card { + height: 100%; +} #timer-display { text-align: center; - width: fit-content; -} -table { - font-size: 1.5em; + width: 100px; } + @media (max-width: 900px) { - .button-grid { + .grid-container { grid-template-columns: repeat(1, 1fr); } } \ No newline at end of file -- cgit v1.3.1