Added the end game

site/mahjong/index.html

@@ -43,10 +43,12 @@
         </tr>
       </tbody>
     </table>
-    <div>
-      <button data-action="click->scorecard#endRound">End Round</button>
-      <button>End Game</button>
+    <div class="btns">
       <div data-scorecard-target="prevailing">Prevailing: E</div>
+      <div>
+        <button data-action="click->scorecard#endGame">End Game</button>
+        <button data-action="click->scorecard#endRound">End Round</button>
+      </div>
     </div>
   </div>
   <div id="player-entry" class="hidden" data-controller="newgame"
@@ -63,7 +65,12 @@
     <label for="player-5">Player 5</label>
     <input type="text" data-newgame-target="playerName">
 
-    <button data-action="click->newgame#startGame">Start Game</button>
+    <div class="btns">
+      <div></div>
+      <div>
+        <button data-action="click->newgame#startGame">Start Game</button>
+      </div>
+    </div>
   </div>
   <div id="end-round" class="hidden" data-controller="endround"
        data-action="gamestatechanged@window->endround#handleGameState">
@@ -73,8 +80,13 @@
 
     <p data-endround-target="wind"></p>
 
-    <button data-action="click->endround#nextRound">Next Round</button>
-  </div>
+    <div class="btns">
+      <div></div>
+      <div>
+        <button data-action="click->endround#goBack">Cancel</button>
+        <button data-action="click->endround#nextRound">Next Round</button>
+      </div>
+    </div>
 
   <script src="./main.js" type="module"></script>
 </body>

site/mahjong/main.js

@@ -24,6 +24,7 @@ Stimulus.register("scorecard", class extends Controller {
 
     handleGameState(ev) {
         switch (ev.detail.mode) {
+        case "newgame":
         case "endround":
             this.element.classList.add("hidden");
             break;
@@ -37,10 +38,19 @@ Stimulus.register("scorecard", class extends Controller {
 
     endRound(ev) {
         ev.preventDefault();
-        console.log("end round");
         emitGameStateEvent({mode: "endround"});
     }
 
+    endGame(ev) {
+        ev.preventDefault();
+
+        if (!confirm("Are you sure you want to end the game?")) {
+            return;
+        }
+
+        emitGameStateEvent({mode: "newgame"});
+    }
+
     _rebuildTable() {
         let gameState = getGameState();
 
@@ -102,6 +112,9 @@ Stimulus.register("newgame", class extends Controller {
         case "nextround":
             this.element.classList.add("hidden");
             break;
+        case "newgame":
+            this.element.classList.remove("hidden");
+            break;
         }
     }
 
@@ -130,6 +143,7 @@ Stimulus.register("endround", class extends Controller {
         switch (ev.detail.mode) {
         case "startgame":
         case "nextround":
+        case "newgame":
             this.element.classList.add("hidden");
             break;
         case "endround":
@@ -160,6 +174,10 @@ Stimulus.register("endround", class extends Controller {
         }
     }
 
+    goBack(ev) {
+        emitGameStateEvent({mode: "startgame"});
+    }
+
     nextRound(ev) {
         ev.preventDefault();
 

site/mahjong/models.js

@@ -108,7 +108,6 @@ export class GameState {
 
     playerTotals() {
         let scores = this.players.map(p => 0);
-
         for (let i = 0; i < this.rounds.length; i++) {
             for (let j = 0; j < this.rounds[i].length; j++) {
                 scores[j] += this.rounds[i][j].s;

site/mahjong/style.css

@@ -11,4 +11,11 @@
     gap: 15px;
     grid-template-columns: 2fr 1fr;
     align-items: baseline;
+}
+
+.btns {
+    display: flex;
+    gap: 10px;
+    justify-content: space-between;
+    align-items: center;
 }