First cut of Mahjong scorecard
This commit is contained in:
parent
e74906e0c4
commit
e020f2a4b6
100
site/mahjong/guide.html
Normal file
100
site/mahjong/guide.html
Normal file
|
|
@ -0,0 +1,100 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Clocks - Tools</title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
|
||||||
|
>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body class="container">
|
||||||
|
<header>
|
||||||
|
<hgroup>
|
||||||
|
<h1>Mahjong Score Card</h1>
|
||||||
|
<p>Score entry guide</p>
|
||||||
|
</hgroup>
|
||||||
|
</header>
|
||||||
|
<div>
|
||||||
|
<p>Use the following notation to enter player scores.</p>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Notation</th>
|
||||||
|
<th>Meaning</th>
|
||||||
|
<th>Score</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>m</code></td>
|
||||||
|
<td>Mahjong</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>ps</code></td>
|
||||||
|
<td>Pung of simples</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>pt</code></td>
|
||||||
|
<td>Pung of terminals</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>ph</code></td>
|
||||||
|
<td>Pung of honours</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>xps</code></td>
|
||||||
|
<td>Exposed pung of simples</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>xpt</code></td>
|
||||||
|
<td>Exposed pung of terminals</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>xph</code></td>
|
||||||
|
<td>Exposed pung of honours</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>ks</code></td>
|
||||||
|
<td>Kong of simples</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>kt</code></td>
|
||||||
|
<td>Kong of terminals</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>kh</code></td>
|
||||||
|
<td>Kong of honours</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>xks</code></td>
|
||||||
|
<td>Exposed kong of simples</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>xkt</code></td>
|
||||||
|
<td>Exposed kong of terminals</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>xkh</code></td>
|
||||||
|
<td>Exposed kong of honours</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>pd</code></td>
|
||||||
|
<td>Pair of dragons</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>pw</code></td>
|
||||||
|
<td>Pair of winds (either player or prevailing)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>b</code></td>
|
||||||
|
<td>Bonus (flower or season)</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
81
site/mahjong/index.html
Normal file
81
site/mahjong/index.html
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Mahjong Score Card - Tools</title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
|
||||||
|
>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body class="container">
|
||||||
|
<header>
|
||||||
|
<hgroup>
|
||||||
|
<h1>Mahjong Score Card</h1>
|
||||||
|
</hgroup>
|
||||||
|
</header>
|
||||||
|
<div id="main-app" class="hidden"
|
||||||
|
data-controller="scorecard"
|
||||||
|
data-action="gamestatechanged@window->scorecard#handleGameState">
|
||||||
|
<table class="scorecard">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>AB (E)</th>
|
||||||
|
<th>CD (S)</th>
|
||||||
|
<th>EF (W)</th>
|
||||||
|
<th>GH (N)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>20 🏆</td>
|
||||||
|
<td>15</td>
|
||||||
|
<td>12</td>
|
||||||
|
<td>13</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>20 🏆</td>
|
||||||
|
<td>15</td>
|
||||||
|
<td>12</td>
|
||||||
|
<td>13</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div>
|
||||||
|
<button data-action="click->scorecard#endRound">End Round</button>
|
||||||
|
<button>End Game</button>
|
||||||
|
<div data-scorecard-target="prevailing">Prevailing: E</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="player-entry" class="hidden" data-controller="newgame"
|
||||||
|
data-action="gamestatechanged@window->newgame#handleGameState">
|
||||||
|
<h3>New Game</h3>
|
||||||
|
<label for="player-1">Player 1 (East)</label>
|
||||||
|
<input type="text" data-newgame-target="playerName">
|
||||||
|
<label for="player-2">Player 2</label>
|
||||||
|
<input type="text" data-newgame-target="playerName">
|
||||||
|
<label for="player-3">Player 3</label>
|
||||||
|
<input type="text" data-newgame-target="playerName">
|
||||||
|
<label for="player-4">Player 4</label>
|
||||||
|
<input type="text" data-newgame-target="playerName">
|
||||||
|
<label for="player-5">Player 5</label>
|
||||||
|
<input type="text" data-newgame-target="playerName">
|
||||||
|
|
||||||
|
<button data-action="click->newgame#startGame">Start Game</button>
|
||||||
|
</div>
|
||||||
|
<div id="end-round" class="hidden" data-controller="endround"
|
||||||
|
data-action="gamestatechanged@window->endround#handleGameState">
|
||||||
|
<h3>End Round</h3>
|
||||||
|
|
||||||
|
<form data-endround-target="form"></form>
|
||||||
|
|
||||||
|
<p data-endround-target="wind"></p>
|
||||||
|
|
||||||
|
<button data-action="click->endround#nextRound">Next Round</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./main.js" type="module"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
209
site/mahjong/main.js
Normal file
209
site/mahjong/main.js
Normal file
|
|
@ -0,0 +1,209 @@
|
||||||
|
import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
|
||||||
|
import { GameState, getGameState, setGameState, calculateScore } from "./models.js";
|
||||||
|
|
||||||
|
function emitGameStateEvent(details) {
|
||||||
|
// window.setTimeout(() => {
|
||||||
|
let ev = new CustomEvent("gamestatechanged", { detail: details });
|
||||||
|
window.dispatchEvent(ev);
|
||||||
|
// }, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.Stimulus = Application.start();
|
||||||
|
|
||||||
|
Stimulus.register("scorecard", class extends Controller {
|
||||||
|
static targets = ["prevailing"];
|
||||||
|
|
||||||
|
initialize() {
|
||||||
|
}
|
||||||
|
|
||||||
|
connect() {
|
||||||
|
// this._rebuildTable();
|
||||||
|
// this.element.classList.remove("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
handleGameState(ev) {
|
||||||
|
switch (ev.detail.mode) {
|
||||||
|
case "endround":
|
||||||
|
this.element.classList.add("hidden");
|
||||||
|
break;
|
||||||
|
case "startgame":
|
||||||
|
case "nextround":
|
||||||
|
this._rebuildTable();
|
||||||
|
this.element.classList.remove("hidden");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
endRound(ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
console.log("end round");
|
||||||
|
emitGameStateEvent({mode: "endround"});
|
||||||
|
}
|
||||||
|
|
||||||
|
_rebuildTable() {
|
||||||
|
let gameState = getGameState();
|
||||||
|
|
||||||
|
let tbl = document.createElement("table");
|
||||||
|
tbl.classList.add("scorecard");
|
||||||
|
|
||||||
|
let thead = document.createElement("thead");
|
||||||
|
let thr = document.createElement("tr");
|
||||||
|
let headRows = gameState.players.map(player => {
|
||||||
|
let th = document.createElement("th");
|
||||||
|
th.textContent = player.name + " (" + player.wind + ")";
|
||||||
|
return th;
|
||||||
|
});
|
||||||
|
thr.append(...headRows);
|
||||||
|
thead.append(thr);
|
||||||
|
tbl.append(thead);
|
||||||
|
|
||||||
|
let tbody = document.createElement("tbody");
|
||||||
|
for (let r of gameState.rounds) {
|
||||||
|
let tr = document.createElement("tr");
|
||||||
|
for (let c of r) {
|
||||||
|
let td = document.createElement("td");
|
||||||
|
td.textContent = c.s;
|
||||||
|
if (c.w) {
|
||||||
|
td.classList.add("winner");
|
||||||
|
td.textContent += " 🏆";
|
||||||
|
}
|
||||||
|
tr.append(td);
|
||||||
|
}
|
||||||
|
tbody.append(tr);
|
||||||
|
}
|
||||||
|
tbl.append(tbody);
|
||||||
|
|
||||||
|
let tfoot = document.createElement("tfoot");
|
||||||
|
for (let t of gameState.playerTotals()) {
|
||||||
|
let td = document.createElement("td");
|
||||||
|
td.textContent = t;
|
||||||
|
tfoot.append(td);
|
||||||
|
}
|
||||||
|
tbl.append(tfoot);
|
||||||
|
|
||||||
|
this.element.querySelector("table.scorecard").replaceWith(tbl);
|
||||||
|
|
||||||
|
this.prevailingTarget.textContent = `Prevailing: ${gameState.prevaling}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Stimulus.register("newgame", class extends Controller {
|
||||||
|
static targets = ["playerName"];
|
||||||
|
|
||||||
|
connect() {
|
||||||
|
this.element.classList.remove("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
handleGameState(ev) {
|
||||||
|
switch (ev.detail.mode) {
|
||||||
|
case "startgame":
|
||||||
|
case "endround":
|
||||||
|
case "nextround":
|
||||||
|
this.element.classList.add("hidden");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
startGame() {
|
||||||
|
let players = [];
|
||||||
|
this.playerNameTargets.forEach(el => {
|
||||||
|
if (el.value != "") {
|
||||||
|
players.push(el.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
setGameState(GameState.newGame(players));
|
||||||
|
this.element.classList.add("hidden");
|
||||||
|
emitGameStateEvent({mode: "startgame"});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Stimulus.register("endround", class extends Controller {
|
||||||
|
static targets = ["form", "input", "wind"];
|
||||||
|
|
||||||
|
connect() {
|
||||||
|
// this.element.classList.remove("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
handleGameState(ev) {
|
||||||
|
switch (ev.detail.mode) {
|
||||||
|
case "startgame":
|
||||||
|
case "nextround":
|
||||||
|
this.element.classList.add("hidden");
|
||||||
|
break;
|
||||||
|
case "endround":
|
||||||
|
this._prepForms();
|
||||||
|
this.element.classList.remove("hidden");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updatePreview(ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
|
||||||
|
let scoreExprs = this._readScoreExprs();
|
||||||
|
let nextRound = getGameState().determineNextRound(scoreExprs);
|
||||||
|
|
||||||
|
for (let i in nextRound.roundScores) {
|
||||||
|
let previewElem = this.element.querySelector(`.preview[data-player="${i}"]`);
|
||||||
|
previewElem.textContent = nextRound.roundScores[i].score;
|
||||||
|
if (parseInt(i) === nextRound.roundWinner) {
|
||||||
|
previewElem.textContent += " 🏆";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (nextRound.windsBump) {
|
||||||
|
this.windTarget.textContent = `${getGameState().players[nextRound.nextRoundEast].name} will be East next round`;
|
||||||
|
} else {
|
||||||
|
this.windTarget.textContent = `${getGameState().players[nextRound.nextRoundEast].name} will remain East next round`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nextRound(ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
|
||||||
|
let scoreExprs = this._readScoreExprs();
|
||||||
|
getGameState().startNextRound(scoreExprs);
|
||||||
|
|
||||||
|
emitGameStateEvent({mode: "nextround"});
|
||||||
|
}
|
||||||
|
|
||||||
|
_prepForms() {
|
||||||
|
let newFormElems = getGameState().players.map((player, i) => {
|
||||||
|
let outerDiv = document.createElement("div");
|
||||||
|
|
||||||
|
let label = document.createElement("label");
|
||||||
|
label.textContent = player.name + " (" + player.wind + ")";
|
||||||
|
label.setAttribute("for", `player-${i}`);
|
||||||
|
|
||||||
|
let div = document.createElement("div");
|
||||||
|
div.classList.add("score-input-group");
|
||||||
|
|
||||||
|
let input = document.createElement("input");
|
||||||
|
input.name = `player-${i}`;
|
||||||
|
input.dataset["endroundTarget"] = "input";
|
||||||
|
input.dataset["action"] = "keyup->endround#updatePreview";
|
||||||
|
input.dataset["player"] = i;
|
||||||
|
|
||||||
|
let preview = document.createElement("div");
|
||||||
|
preview.classList.add("preview");
|
||||||
|
preview.textContent = "0";
|
||||||
|
preview.dataset["player"] = i;
|
||||||
|
|
||||||
|
div.append(input, preview);
|
||||||
|
outerDiv.append(label, div);
|
||||||
|
return outerDiv;
|
||||||
|
});
|
||||||
|
this.formTarget.replaceChildren(...newFormElems);
|
||||||
|
}
|
||||||
|
|
||||||
|
_readScoreExprs() {
|
||||||
|
let scoreExprs = [];
|
||||||
|
for (let playerIndex in getGameState().players) {
|
||||||
|
let thisScoreExpr = this.formTarget.querySelector(`input[data-player="${playerIndex}"]`).value;
|
||||||
|
scoreExprs.push(thisScoreExpr);
|
||||||
|
}
|
||||||
|
return scoreExprs;
|
||||||
|
}
|
||||||
|
});
|
||||||
152
site/mahjong/models.js
Normal file
152
site/mahjong/models.js
Normal file
|
|
@ -0,0 +1,152 @@
|
||||||
|
const windDistributions = [
|
||||||
|
["E"],
|
||||||
|
["E", "W"],
|
||||||
|
["E", "S", "N"],
|
||||||
|
["E", "S", "W", "N"],
|
||||||
|
["E", "S", "W", "N", "X"],
|
||||||
|
];
|
||||||
|
|
||||||
|
const scoreTokens = {
|
||||||
|
'm': 1,
|
||||||
|
'ps': 1,
|
||||||
|
'pt': 1,
|
||||||
|
'ph': 1,
|
||||||
|
'xps': 1,
|
||||||
|
'xpt': 1,
|
||||||
|
'xph': 1,
|
||||||
|
'ks': 1,
|
||||||
|
'kt': 1,
|
||||||
|
'kh': 1,
|
||||||
|
'xks': 1,
|
||||||
|
'xkt': 1,
|
||||||
|
'xkh': 1,
|
||||||
|
'pd': 1,
|
||||||
|
'pw': 1,
|
||||||
|
'b': 1,
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseTokens(str) {
|
||||||
|
// Split on whitespace and filter out empty strings
|
||||||
|
const tokens = str.split(/\s+/).filter(token => token.length > 0);
|
||||||
|
|
||||||
|
const pattern = /^([0-9]*)([a-z]+)$/;
|
||||||
|
const result = [];
|
||||||
|
|
||||||
|
for (const token of tokens) {
|
||||||
|
const match = token.match(pattern);
|
||||||
|
if (match) {
|
||||||
|
result.push({
|
||||||
|
number: match[1] ? parseInt(match[1], 10) : null,
|
||||||
|
letters: match[2]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function calculateScore(str) {
|
||||||
|
const tokens = parseTokens(str);
|
||||||
|
let o = {score: 0, winner: false};
|
||||||
|
|
||||||
|
for (const token of tokens) {
|
||||||
|
if (!(token.letters in scoreTokens)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
o.score += scoreTokens[token.letters] * (token.number || 1);
|
||||||
|
if (token.letters === 'm') {
|
||||||
|
o.winner = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return o;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export class GameState {
|
||||||
|
constructor(players, rounds) {
|
||||||
|
this.players = players;
|
||||||
|
this.rounds = rounds;
|
||||||
|
this.bumpWind = 0;
|
||||||
|
this.prevaling = "E";
|
||||||
|
}
|
||||||
|
|
||||||
|
static newGame(playerNames) {
|
||||||
|
let players = playerNames.map(name => { return { name: name } });
|
||||||
|
let windDistribution = windDistributions[players.length - 1];
|
||||||
|
for (let i = 0; i < players.length; i++) {
|
||||||
|
players[i].wind = windDistribution[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
let rounds = [];
|
||||||
|
return new GameState(players, rounds);
|
||||||
|
}
|
||||||
|
|
||||||
|
determineNextRound(playerScoreExprs) {
|
||||||
|
let roundScores = playerScoreExprs.map(calculateScore);
|
||||||
|
let roundWinner = roundScores.findIndex(rs => rs.winner);
|
||||||
|
|
||||||
|
let currentEast = this.players.findIndex(p => p.wind === 'E');
|
||||||
|
let nextRoundEast = currentEast;
|
||||||
|
if (roundWinner !== currentEast) {
|
||||||
|
nextRoundEast = (currentEast + 1) % this.players.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
let windsBump = roundWinner !== currentEast;
|
||||||
|
let nextPrevailing = this.prevaling;
|
||||||
|
if (windsBump) {
|
||||||
|
nextPrevailing = windDistributions[3][((this.bumpWind + 1) / this.players.length)|0];
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
roundScores: roundScores,
|
||||||
|
roundWinner: roundWinner,
|
||||||
|
nextRoundEast: nextRoundEast,
|
||||||
|
windsBump: roundWinner !== currentEast,
|
||||||
|
nextPrevailing: nextPrevailing,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return scores;
|
||||||
|
}
|
||||||
|
|
||||||
|
startNextRound(playerScoreExprs) {
|
||||||
|
let nr = this.determineNextRound(playerScoreExprs);
|
||||||
|
|
||||||
|
this.rounds.push(nr.roundScores.map((s, i) => {
|
||||||
|
if (i === nr.roundWinner) {
|
||||||
|
return { s: s.score, w: true };
|
||||||
|
}
|
||||||
|
return { s: s.score };
|
||||||
|
}));
|
||||||
|
|
||||||
|
let windDistribution = windDistributions[this.players.length - 1];
|
||||||
|
for (let i = 0; i < this.players.length; i++) {
|
||||||
|
let pi = (nr.nextRoundEast + i) % this.players.length;
|
||||||
|
this.players[pi].wind = windDistribution[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
this.prevaling = nr.nextPrevailing;
|
||||||
|
if (nr.windsBump) {
|
||||||
|
this.bumpWind++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let gameState = new GameState();
|
||||||
|
|
||||||
|
export function getGameState() {
|
||||||
|
return gameState;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setGameState(gs) {
|
||||||
|
gameState = gs;
|
||||||
|
}
|
||||||
14
site/mahjong/style.css
Normal file
14
site/mahjong/style.css
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-table {
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-input-group {
|
||||||
|
display: grid;
|
||||||
|
gap: 15px;
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue