Merge branch 'develop' into 'main'

Develop

See merge request KaranJayachandra/match_up!23

1 files changed, 33 insertions, 21 deletions

diff --git a/src/data.js b/src/data.js
index 589b5a3..0b0c9ab 100644
--- a/src/data.js
+++ b/src/data.js
@@ -3,7 +3,7 @@ class Switch {
     this.id = id;
     this.status = typeof status !== "undefined" ? status : false;
     this.description = description;
-    this.name = description + " " + (id + 1);
+    this.name = this.description + " " + (id + 1);
   }
   toggle() {
     this.status = !this.status;
@@ -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 is-medium ${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);
     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,9 +75,9 @@ 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;
+    const p1 = renderPlayerName(this.playerOne);
+    const p2 = renderPlayerName(this.playerTwo);
+    return p1 + `<br/><br/>` + p2;
   }
 }
 
@@ -82,18 +88,24 @@ 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 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>`;
+    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>
+      <header>Court ${this.id + 1}</header>${type}
+    </article>`;
   }
 }