2025-12-20 11:10:19 +00:00
|
|
|
<!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>
|
2025-12-20 11:32:30 +00:00
|
|
|
<div class="btns">
|
2025-12-20 11:10:19 +00:00
|
|
|
<div data-scorecard-target="prevailing">Prevailing: E</div>
|
2025-12-20 11:32:30 +00:00
|
|
|
<div>
|
|
|
|
|
<button data-action="click->scorecard#endGame">End Game</button>
|
|
|
|
|
<button data-action="click->scorecard#endRound">End Round</button>
|
|
|
|
|
</div>
|
2025-12-20 11:10:19 +00:00
|
|
|
</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">
|
|
|
|
|
|
2025-12-20 11:32:30 +00:00
|
|
|
<div class="btns">
|
|
|
|
|
<div></div>
|
|
|
|
|
<div>
|
|
|
|
|
<button data-action="click->newgame#startGame">Start Game</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-20 11:10:19 +00:00
|
|
|
</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>
|
|
|
|
|
|
2025-12-20 11:32:30 +00:00
|
|
|
<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>
|
2025-12-20 11:10:19 +00:00
|
|
|
|
|
|
|
|
<script src="./main.js" type="module"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
