Merge pull request #50 from chesslablab/issue/445-Display-the-usernam…

…es-below-the-timers-when-playing-online Issue/445 display the usernames below the timers when playing online
chesslablab · Sep 5, 2024 · c606a9f · c606a9f
2 parents 1233995 + 7a05a8e
commit c606a9f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 14 deletions.
diff --git a/examples/timer_table.js b/examples/timer_table.js
@@ -22,8 +22,14 @@ const timerTable = new TimerTable(
   document.querySelector('#timerTable tbody'),
   {
     turn: 'w',
-    w: 300,
-    b: 300
+    seconds: {
+      w: 300,
+      b: 300
+    },
+    username: {
+      w: 'Alice',
+      b: 'Bob'
+    }
   }
 );
 

diff --git a/src/TimerTable.js b/src/TimerTable.js
@@ -15,12 +15,12 @@ export class TimerTable extends AbstractComponent {
 
   count() {
     if (this.props.turn === Pgn.symbol.WHITE) {
-      if (this.props.w > 0) {
-        this.props.w -= 1;
+      if (this.props.seconds.w > 0) {
+        this.props.seconds.w -= 1;
       }
     } else {
-      if (this.props.b > 0) {
-        this.props.b -= 1;
+      if (this.props.seconds.b > 0) {
+        this.props.seconds.b -= 1;
       }
     }
 
@@ -29,17 +29,32 @@ export class TimerTable extends AbstractComponent {
 
   mount() {
     this._el.replaceChildren();
-    const tr = document.createElement('tr');
-    const wTd = document.createElement('td');
-    const wText = document.createTextNode(this._convert(this.props.w));
-    const bTd = document.createElement('td');
-    const bText = document.createTextNode(this._convert(this.props.b));
+
+    let tr;
+    let wTd;
+    let bTd;
+
+    if (this.props.username.w && this.props.username.b) {
+      tr = document.createElement('tr');
+      wTd = document.createElement('td');
+      bTd = document.createElement('td');
+      tr.classList.add('h6');
+      wTd.classList.add('text-end');
+      wTd.appendChild(document.createTextNode(this.props.username.w));
+      bTd.appendChild(document.createTextNode(this.props.username.b));
+      tr.appendChild(wTd);
+      tr.appendChild(bTd);
+      this._el.appendChild(tr);
+    }
+
+    tr = document.createElement('tr');
+    wTd = document.createElement('td');
+    bTd = document.createElement('td');
     wTd.classList.add('text-end');
-    wTd.appendChild(wText);
-    bTd.appendChild(bText);
+    wTd.appendChild(document.createTextNode(this._convert(this.props.seconds.w)));
+    bTd.appendChild(document.createTextNode(this._convert(this.props.seconds.b)));
     tr.appendChild(wTd);
     tr.appendChild(bTd);
-
     this._el.appendChild(tr);
   }
 }