feat: add winner detection to webapp

zabackary · Feb 3, 2024 · 8fde12a · 8fde12a
1 parent 03f55c3
commit 8fde12a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 9 deletions.
diff --git a/www/index.html b/www/index.html
@@ -61,6 +61,10 @@ <h1>
         </div>
       </button>
       <div class="popup connecting-container">Connecting...</div>
+      <div class="popup winner-container">
+        <p><span id="winner"></span> won by time.</p>
+        <a class="button" href="">New game</a>
+      </div>
       <div class="popup picker-container">
         <div class="connect-container">
           <button id="connect-button" class="text-button">
@@ -76,6 +80,7 @@ <h1>
               <a
                 href="https://github.com/zabackary/open-chess-clock"
                 target="_blank"
+                class="link"
                 >GitHub repository</a
               >. Plug in the chess clock and click the button to get started.
             </p>

diff --git a/www/src/clock.ts b/www/src/clock.ts
@@ -11,15 +11,21 @@ export default class Clock {
   p1TimeInitial = 0;
   p2TimeInitial = 0;
 
+  loser: Player | null = null;
+
   readonly = false;
 
   get p1Time() {
     if (this.p1TimeStartDate === null) {
       return this.p1TimeStart;
     }
-    return (
-      this.p1TimeStart - (new Date().getTime() - this.p1TimeStartDate.getTime())
-    );
+    let time =
+      this.p1TimeStart -
+      (new Date().getTime() - this.p1TimeStartDate.getTime());
+    if (time <= 0) {
+      time = 0;
+    }
+    return time;
   }
 
   set p1Time(newTime) {
@@ -31,9 +37,13 @@ export default class Clock {
     if (this.p2TimeStartDate === null) {
       return this.p2TimeStart;
     }
-    return (
-      this.p2TimeStart - (new Date().getTime() - this.p2TimeStartDate.getTime())
-    );
+    let time =
+      this.p2TimeStart -
+      (new Date().getTime() - this.p2TimeStartDate.getTime());
+    if (time <= 0) {
+      time = 0;
+    }
+    return time;
   }
 
   set p2Time(newTime) {
@@ -53,6 +63,15 @@ export default class Clock {
     this.p2TimeStartDate = null;
   }
 
+  checkForLoser(): Player | null {
+    if (this.p1Time === 0) {
+      this.loser = "p1";
+    } else if (this.p2Time === 0) {
+      this.loser = "p2";
+    }
+    return this.loser;
+  }
+
   startPlayer(player: Player, time: number | null = null) {
     if (player === "p1") {
       if (this.p1TimeStartDate === null) {

diff --git a/www/src/runtime.ts b/www/src/runtime.ts
@@ -15,6 +15,7 @@ const READONLY_RESUME_HINT =
   "Press a side to resume. Pressing START will start a new game";
 const SWITCH_HINT = "Press your side to switch the clock";
 
+const winner = expectEl(document.querySelector("#winner"));
 const counterContainer = expectEl(document.querySelector(".counter-container"));
 const p1Counter = expectEl(document.querySelector(".p1.counter"));
 const p1TimeElements = [
@@ -46,7 +47,7 @@ export function runtime(clock: Clock) {
     controls.classList.remove("hidden");
   }
   let hasStarted = false;
-  setInterval(() => {
+  const updateInterval = setInterval(() => {
     if (clock instanceof SerialClock) {
       status.textContent = clock.connected
         ? READONLY_STATUS
@@ -106,6 +107,12 @@ export function runtime(clock: Clock) {
         pauseButton.setAttribute("disabled", "");
       }
     }
+    if (!clock.readonly) clock.checkForLoser();
+    if (clock.loser !== null) {
+      clearInterval(updateInterval);
+      winner.textContent = clock.loser === "p1" ? "Player 2" : "Player 1";
+      counterContainer.classList.add("show-winner");
+    }
   });
   pauseButton.addEventListener("click", () => {
     clock.pause();

diff --git a/www/src/serialclock.ts b/www/src/serialclock.ts
@@ -28,6 +28,16 @@ export default class SerialClock extends Clock {
         this.updateTimes(args[0], args[1]);
         break;
       }
+      case "p1Finish": {
+        this.loser = "p1";
+        this.p1Time = 0;
+        break;
+      }
+      case "p2Finish": {
+        this.loser = "p2";
+        this.p2Time = 0;
+        break;
+      }
       case "pause": {
         this.pause();
         break;

diff --git a/www/src/style.css b/www/src/style.css
@@ -77,6 +77,7 @@ button.icon-button {
   outline-offset: 0.25em;
   transition: 300ms;
   margin-right: 0.5em;
+  text-decoration: none;
   &.icon-button {
     width: 2.5em;
     height: 2.5em;
@@ -108,7 +109,6 @@ button.icon-button {
   }
 }
 
-a,
 .link {
   color: var(--system-accent);
   text-decoration: underline;
@@ -230,12 +230,18 @@ a,
   .connecting-container {
     font-size: 2em;
   }
+  .winner-container p {
+    font-size: 2em;
+  }
   &.show-picker .picker-container {
     display: flex;
   }
   &.show-connecting .connecting-container {
     display: flex;
   }
+  &.show-winner .winner-container {
+    display: flex;
+  }
   .counter {
     border: 2px solid var(--counter-accent);
     background-color: var(--counter-fill);
@@ -313,7 +319,8 @@ a,
     }
   }
   &.show-picker .counter,
-  &.show-connecting .counter {
+  &.show-connecting .counter,
+  &.show-winner .counter {
     opacity: 0.5;
   }
 }