site/index.html

@@ -24,7 +24,6 @@
       <li><a href="/gradient-bands/">Gradient Bands</a></li>
       <li><a href="/2lcc/">Two-letter Country Codes</a></li>
       <li><a href="/timestamps/">Timestamp Converter</a></li>
-      <li><a href="/mahjong/">Mahjong Scorecard</a></li>
     </ul>
   </main>
 </body>

site/mahjong/guide.html

@@ -32,92 +32,66 @@
         <tr>
           <td><code>m</code></td>
           <td>Mahjong</td>
-          <td>20</td>
         </tr>
         <tr>
           <td><code>ps</code></td>
           <td>Pung of simples</td>
-          <td>4</td>
         </tr>
         <tr>
           <td><code>pt</code></td>
           <td>Pung of terminals</td>
-          <td>8</td>
         </tr>
         <tr>
           <td><code>ph</code></td>
           <td>Pung of honours</td>
-          <td>8</td>
         </tr>
         <tr>
           <td><code>xps</code></td>
           <td>Exposed pung of simples</td>
-          <td>2</td>
         </tr>
         <tr>
           <td><code>xpt</code></td>
           <td>Exposed pung of terminals</td>
-          <td>4</td>
         </tr>
         <tr>
           <td><code>xph</code></td>
           <td>Exposed pung of honours</td>
-          <td>4</td>
         </tr>
         <tr>
           <td><code>ks</code></td>
           <td>Kong of simples</td>
-          <td>16</td>
         </tr>
         <tr>
           <td><code>kt</code></td>
           <td>Kong of terminals</td>
-          <td>32</td>
         </tr>
         <tr>
           <td><code>kh</code></td>
           <td>Kong of honours</td>
-          <td>32</td>
         </tr>
         <tr>
           <td><code>xks</code></td>
           <td>Exposed kong of simples</td>
-          <td>8</td>
         </tr>
         <tr>
           <td><code>xkt</code></td>
           <td>Exposed kong of terminals</td>
-          <td>16</td>
         </tr>
         <tr>
           <td><code>xkh</code></td>
           <td>Exposed kong of honours</td>
-          <td>16</td>
         </tr>
         <tr>
           <td><code>pd</code></td>
           <td>Pair of dragons</td>
-          <td>2</td>
         </tr>
         <tr>
           <td><code>pw</code></td>
           <td>Pair of winds (either player or prevailing)</td>
-          <td>2</td>
         </tr>
         <tr>
           <td><code>b</code></td>
           <td>Bonus (flower or season)</td>
-          <td>4</td>
-        </tr>
-        <tr>
-          <td><code>p</code></td>
-          <td>Point (used for adjusting scores)</td>
-          <td>1</td>
-        </tr>
-        <tr>
-          <td><code>d</code></td>
-          <td>Penalty (used for adjusting scores)</td>
-          <td>-1</td>
         </tr>
       </tbody>
     </table>

site/mahjong/index.html

@@ -78,21 +78,15 @@
 
     <form data-endround-target="form"></form>
 
+    <p data-endround-target="wind"></p>
+
     <div class="btns">
-      <div>
+      <div></div>
-        <div data-endround-target="wind"></div>
-        <div data-endround-target="prevailing"></div>
-      </div>
       <div>
         <button data-action="click->endround#goBack">Cancel</button>
         <button data-action="click->endround#nextRound">Next Round</button>
       </div>
     </div>
-    <div class="btns">
-      <div></div>
-      <a href="guide.html" target="_blank">Notation Guide</a>
-    </div>
-  </div>
 
   <script src="./main.js" type="module"></script>
 </body>

site/mahjong/main.js

@@ -2,10 +2,13 @@ import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/di
 import { GameState, getGameState, setGameState, calculateScore } from "./models.js";
 
 function emitGameStateEvent(details) {
-    let ev = new CustomEvent("gamestatechanged", { detail: details });
+    // window.setTimeout(() => {
-    window.dispatchEvent(ev);
+        let ev = new CustomEvent("gamestatechanged", { detail: details });
+        window.dispatchEvent(ev);
+    // }, 1);
 }
 
+
 window.Stimulus = Application.start();
 
 Stimulus.register("scorecard", class extends Controller {
@@ -15,6 +18,8 @@ Stimulus.register("scorecard", class extends Controller {
     }
 
     connect() {
+        // this._rebuildTable();
+        // this.element.classList.remove("hidden");
     }
 
     handleGameState(ev) {
@@ -70,8 +75,8 @@ Stimulus.register("scorecard", class extends Controller {
                 let td = document.createElement("td");
                 td.textContent = c.s;
                 if (c.w) {
-                    td.textContent += " 🀄";
                     td.classList.add("winner");
+                    td.textContent += " 🏆";
                 }
                 tr.append(td);
             }
@@ -89,7 +94,7 @@ Stimulus.register("scorecard", class extends Controller {
 
         this.element.querySelector("table.scorecard").replaceWith(tbl);
 
-        this.prevailingTarget.textContent = `Prevailing: ${gameState.prevailing}`;
+        this.prevailingTarget.textContent = `Prevailing: ${gameState.prevaling}`;
     }
 });
 
@@ -97,6 +102,7 @@ Stimulus.register("newgame", class extends Controller {
     static targets = ["playerName"];
 
     connect() {
+        this.element.classList.remove("hidden");
     }
 
     handleGameState(ev) {
@@ -127,9 +133,10 @@ Stimulus.register("newgame", class extends Controller {
 });
 
 Stimulus.register("endround", class extends Controller {
-    static targets = ["form", "input", "wind", "prevailing"];
+    static targets = ["form", "input", "wind"];
 
     connect() {
+        // this.element.classList.remove("hidden");
     }
 
     handleGameState(ev) {
@@ -141,7 +148,6 @@ Stimulus.register("endround", class extends Controller {
             break;
         case "endround":
             this._prepForms();
-            this._updatePreview();
             this.element.classList.remove("hidden");
             break;
         }
@@ -149,10 +155,7 @@ Stimulus.register("endround", class extends Controller {
 
     updatePreview(ev) {
         ev.preventDefault();
-        this._updatePreview();
-    }
 
-    _updatePreview() {
         let scoreExprs = this._readScoreExprs();
         let nextRound = getGameState().determineNextRound(scoreExprs);
 
@@ -160,23 +163,15 @@ Stimulus.register("endround", class extends Controller {
             let previewElem = this.element.querySelector(`.preview[data-player="${i}"]`);
             previewElem.textContent = nextRound.roundScores[i].score;
             if (parseInt(i) === nextRound.roundWinner) {
-                previewElem.classList.add("winner");
+                previewElem.textContent += " 🏆";
-                previewElem.textContent += " 🀄";
-            } else {
-                previewElem.classList.remove("winner");
             }
         }
 
         if (nextRound.windsBump) {
-            this.windTarget.textContent = ` will be East next round`;
+            this.windTarget.textContent = `${getGameState().players[nextRound.nextRoundEast].name} will be East next round`;
         } else {
-            this.windTarget.textContent = ` will remain East next round`;
+            this.windTarget.textContent = `${getGameState().players[nextRound.nextRoundEast].name} will remain East next round`;
         }
-        let nextWindNameElem = document.createElement("strong");
-        nextWindNameElem.textContent = getGameState().players[nextRound.nextRoundEast].name;
-        this.windTarget.prepend(nextWindNameElem);
-
-        this.prevailingTarget.textContent = `Next prevailing: ${nextRound.nextPrevailing}`;
     }
 
     goBack(ev) {
@@ -229,13 +224,4 @@ Stimulus.register("endround", class extends Controller {
         }
         return scoreExprs;
     }
-});
+});
-
-document.addEventListener("DOMContentLoaded", () => {
-    let game = getGameState();
-    if (game !== null) {
-        emitGameStateEvent({mode: "startgame"});
-    } else {
-        emitGameStateEvent({mode: "newgame"});
-    }
-})

site/mahjong/models.js

@@ -7,24 +7,22 @@ const windDistributions = [
 ];
 
 const scoreTokens = {
-    'm': 20,
+    'm': 1,
-    'ps': 4,
+    'ps': 1,
-    'pt': 8,
+    'pt': 1,
-    'ph': 8,
+    'ph': 1,
-    'xps': 2,
+    'xps': 1,
-    'xpt': 4,
+    'xpt': 1,
-    'xph': 4,
+    'xph': 1,
-    'ks': 16,
+    'ks': 1,
-    'kt': 32,
+    'kt': 1,
-    'kh': 32,
+    'kh': 1,
-    'xks': 8,
+    'xks': 1,
-    'xkt': 16,
+    'xkt': 1,
-    'xkh': 16,
+    'xkh': 1,
-    'pd': 2,
+    'pd': 1,
-    'pw': 2,
+    'pw': 1,
-    'b': 4,
+    'b': 1,
-    'p': 1,
-    'd': -1,
 }
 
 function parseTokens(str) {
@@ -69,7 +67,7 @@ export class GameState {
         this.players = players;
         this.rounds = rounds;
         this.bumpWind = 0;
-        this.prevailing = "E";
+        this.prevaling = "E";
     }
 
     static newGame(playerNames) {
@@ -80,21 +78,7 @@ export class GameState {
         }
 
         let rounds = [];
-        let gs = new GameState(players, rounds);
+        return new GameState(players, rounds);
-        gs.save();
-        return gs;
-    }
-
-    static load() {
-        let json = localStorage.getItem('mahjong-scorecard');
-        if (!json) {
-            return null;
-        }
-        let o = JSON.parse(json);
-        let gs = new GameState(o.p, o.r);
-        gs.bumpWind = o.b;
-        gs.prevailing = o.w;
-        return gs;
     }
 
     determineNextRound(playerScoreExprs) {
@@ -108,7 +92,7 @@ export class GameState {
         }
 
         let windsBump = roundWinner !== currentEast;
-        let nextPrevailing = this.prevailing;
+        let nextPrevailing = this.prevaling;
         if (windsBump) {
             nextPrevailing = windDistributions[3][((this.bumpWind + 1) / this.players.length)|0];
         }
@@ -149,24 +133,14 @@ export class GameState {
             this.players[pi].wind = windDistribution[i];
         }
 
-        this.prevailing = nr.nextPrevailing;
+        this.prevaling = nr.nextPrevailing;
         if (nr.windsBump) {
             this.bumpWind++;
         }
-        this.save();
-    }
-
-    save() {
-        localStorage.setItem('mahjong-scorecard', JSON.stringify({
-            p: this.players,
-            r: this.rounds,
-            b: this.bumpWind,
-            w: this.prevailing,
-        }));
     }
 }
 
-let gameState = GameState.load();
+let gameState = new GameState();
 
 export function getGameState() {
     return gameState;

site/mahjong/style.css

@@ -1,7 +1,3 @@
-.container {
-    margin-block-end: 20px;
-}
-
 .hidden {
     display: none;
 }
@@ -22,41 +18,4 @@
     gap: 10px;
     justify-content: space-between;
     align-items: center;
-    margin-block-end: 12px;
-}
-
-@media (max-width: 600px) {
-    .btns {
-        flex-direction: column;
-        gap: 20px;
-    }
-
-    .btns :nth-child(1) {
-        align-self: start;
-    }
-
-    .btns :nth-child(2) {
-        align-self: end;
-    }
-}
-
-.winner {
-    color: #9B2318;
-    font-weight: bold;
-}
-
-
-th {
-    background: #E2E2E2;
-}
-
-@media (prefers-color-scheme: dark) {
-    th {
-        background: #474747;
-    }
-
-    .winner {
-        color: #F06048;
-        font-weight: bold;
-    }
 }