diff options
Diffstat (limited to 'src/data.js')
| -rw-r--r-- | src/data.js | 29 |
1 files changed, 20 insertions, 9 deletions
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>`; } } |