trictrac/doc/design/snapshots/2026-06-06-7b036e3ee1a8d3d686a664d74717fd23df1d3169.html

153 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" dir="ltr"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trictrac</title>
<script type="module">
import init, * as bindings from '/trictrac-web-c7672202da206f14.js';
const wasm = await init({ module_or_path: '/trictrac-web-c7672202da206f14_bg.wasm' });
window.wasmBindings = bindings;
dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
</script>
<link rel="stylesheet" href="2026-06-06-7b036e3ee1a8d3d686a664d74717fd23df1d3169_files/style-b42680e382d603c7.css" integrity="sha384-0Di+VNUy8Xhior3g9YQWh6WtGrBhfzSmghM7zeTqt4F7x2cSXhxthbLvv7adbdug">
<link rel="modulepreload" href="http://localhost:9091/trictrac-web-c7672202da206f14.js" crossorigin="anonymous" integrity="sha384-awWy8B5/LwgL4+cFZ0VqCf7tniESNUXZtaP1ZzkZLqlq3Y2C9DdVVN40NG8QMTjq"><link rel="preload" href="http://localhost:9091/trictrac-web-c7672202da206f14_bg.wasm" crossorigin="anonymous" integrity="sha384-2i0vWx95TdKrKZrVQI0gKHvUsy/j1hXl/axNOp1T61t/h/8fPiTkL/+2i3Du9muH" as="fetch" type="application/wasm"></head>
<body><script>"use strict";
(function () {
const address = 'localhost:9091';
const base = '/';
let protocol = '';
protocol =
protocol
? protocol
: window.location.protocol === 'https:'
? 'wss'
: 'ws';
const url = protocol + '://' + address + base + '.well-known/trunk/ws';
class Overlay {
constructor() {
// create an overlay
this._overlay = document.createElement("div");
const style = this._overlay.style;
style.height = "100vh";
style.width = "100vw";
style.position = "fixed";
style.top = "0";
style.left = "0";
style.backgroundColor = "rgba(222, 222, 222, 0.5)";
style.fontFamily = "sans-serif";
// not sure that's the right approach
style.zIndex = "1000000";
style.backdropFilter = "blur(1rem)";
const container = document.createElement("div");
// center it
container.style.position = "absolute";
container.style.top = "30%";
container.style.left = "15%";
container.style.maxWidth = "85%";
this._title = document.createElement("div");
this._title.innerText = "Build failure";
this._title.style.paddingBottom = "2rem";
this._title.style.fontSize = "2.5rem";
this._message = document.createElement("div");
this._message.style.whiteSpace = "pre-wrap";
const icon= document.createElement("div");
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="#dc3545" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>';
this._title.prepend(icon);
container.append(this._title, this._message);
this._overlay.append(container);
this._inject();
window.setInterval(() => {
this._inject();
}, 250);
}
set reason(reason) {
this._message.textContent = reason;
}
_inject() {
if (!this._overlay.isConnected) {
// prepend it
document.body?.prepend(this._overlay);
}
}
}
class Client {
constructor(url) {
this.url = url;
this.poll_interval = 5000;
this._overlay = null;
}
start() {
const ws = new WebSocket(this.url);
ws.onmessage = (ev) => {
const msg = JSON.parse(ev.data);
switch (msg.type) {
case "reload":
this.reload();
break;
case "buildFailure":
this.buildFailure(msg.data)
break;
}
};
ws.onclose = () => this.onclose();
}
onclose() {
window.setTimeout(
() => {
// when we successfully reconnect, we'll force a
// reload (since we presumably lost connection to
// trunk due to it being killed, so it will have
// rebuilt on restart)
const ws = new WebSocket(this.url);
ws.onopen = () => window.location.reload();
ws.onclose = () => this.onclose();
},
this.poll_interval);
}
reload() {
window.location.reload();
}
buildFailure({reason}) {
// also log the console
console.error("Build failed:", reason);
console.debug("Overlay", this._overlay);
if (!this._overlay) {
this._overlay = new Overlay();
}
this._overlay.reason = reason;
}
}
new Client(url).start();
})()
</script>
<button class="game-hamburger" aria-label="Menu"><span class="hb-bar hb-top"></span><span class="hb-bar hb-mid"></span><span class="hb-bar hb-bot"></span></button><div class="game-sidebar"><div class="game-sidebar-header"><span class="game-sidebar-brand">Trictrac</span><div class="lang-switcher"><button class="lang-active">EN</button><button>FR</button></div></div><div class="game-sidebar-section"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M304 70.1C313.1 61.9 326.9 61.9 336 70.1L568 278.1C577.9 286.9 578.7 302.1 569.8 312C560.9 321.9 545.8 322.7 535.9 313.8L527.9 306.6L527.9 511.9C527.9 547.2 499.2 575.9 463.9 575.9L175.9 575.9C140.6 575.9 111.9 547.2 111.9 511.9L111.9 306.6L103.9 313.8C94 322.6 78.9 321.8 70 312C61.1 302.2 62 287 71.8 278.1L304 70.1zM320 120.2L160 263.7L160 512C160 520.8 167.2 528 176 528L224 528L224 424C224 384.2 256.2 352 296 352L344 352C383.8 352 416 384.2 416 424L416 528L464 528C472.8 528 480 520.8 480 512L480 263.7L320 120.3zM272 528L368 528L368 424C368 410.7 357.3 400 344 400L296 400C282.7 400 272 410.7 272 424L272 528z"><!----></path></svg><a href="http://localhost:9091/" aria-current="page" class="game-sidebar-link">New game</a></div><div class="game-sidebar-section"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M416 160L480 160C497.7 160 512 174.3 512 192L512 448C512 465.7 497.7 480 480 480L416 480C398.3 480 384 494.3 384 512C384 529.7 398.3 544 416 544L480 544C533 544 576 501 576 448L576 192C576 139 533 96 480 96L416 96C398.3 96 384 110.3 384 128C384 145.7 398.3 160 416 160zM406.6 342.6C419.1 330.1 419.1 309.8 406.6 297.3L278.6 169.3C266.1 156.8 245.8 156.8 233.3 169.3C220.8 181.8 220.8 202.1 233.3 214.6L306.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L306.7 352L233.3 425.4C220.8 437.9 220.8 458.2 233.3 470.7C245.8 483.2 266.1 483.2 278.6 470.7L406.6 342.7z"><!----></path></svg><a href="http://localhost:9091/account" class="game-sidebar-link">Sign in</a></div><div class="sidebar-footer"><div class="game-sidebar-section"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M257.1 96C238.4 96 220.9 105.4 210.5 120.9L184.5 160L128 160C92.7 160 64 188.7 64 224L64 480C64 515.3 92.7 544 128 544L512 544C547.3 544 576 515.3 576 480L576 224C576 188.7 547.3 160 512 160L455.5 160L429.5 120.9C419.1 105.4 401.6 96 382.9 96L257.1 96zM250.4 147.6C251.9 145.4 254.4 144 257.1 144L382.8 144C385.5 144 388 145.3 389.5 147.6L422.7 197.4C427.2 204.1 434.6 208.1 442.7 208.1L512 208.1C520.8 208.1 528 215.3 528 224.1L528 480.1C528 488.9 520.8 496.1 512 496.1L128 496C119.2 496 112 488.8 112 480L112 224C112 215.2 119.2 208 128 208L197.3 208C205.3 208 212.8 204 217.3 197.3L250.5 147.5zM320 448C381.9 448 432 397.9 432 336C432 274.1 381.9 224 320 224C258.1 224 208 274.1 208 336C208 397.9 258.1 448 320 448zM256 336C256 300.7 284.7 272 320 272C355.3 272 384 300.7 384 336C384 371.3 355.3 400 320 400C284.7 400 256 371.3 256 336z"><!----></path></svg><a class="game-sidebar-link">Take snapshot</a></div><div class="game-sidebar-section"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M534.6 182.6C547.1 170.1 547.1 149.8 534.6 137.3L470.6 73.3C461.4 64.1 447.7 61.4 435.7 66.4C423.7 71.4 416 83.1 416 96L416 128L256 128C150 128 64 214 64 320C64 337.7 78.3 352 96 352C113.7 352 128 337.7 128 320C128 249.3 185.3 192 256 192L416 192L416 224C416 236.9 423.8 248.6 435.8 253.6C447.8 258.6 461.5 255.8 470.7 246.7L534.7 182.7zM105.4 457.4C92.9 469.9 92.9 490.2 105.4 502.7L169.4 566.7C178.6 575.9 192.3 578.6 204.3 573.6C216.3 568.6 224 556.9 224 544L224 512L384 512C490 512 576 426 576 320C576 302.3 561.7 288 544 288C526.3 288 512 302.3 512 320C512 390.7 454.7 448 384 448L224 448L224 416C224 403.1 216.2 391.4 204.2 386.4C192.2 381.4 178.5 384.2 169.3 393.3L105.3 457.3z"><!----></path></svg><a class="game-sidebar-link">Replay snapshot</a></div><div><div class="site-nav-infolinks"><a href="http://localhost:9091/page/about">About</a><span>-</span><a href="http://localhost:9091/page/legal">Legal notices</a></div></div><div><span class="site-nav-version">v0.2.15</span></div></div></div><div style="z-index: 300; display: none;" class="ceremony-overlay"><div style="min-width:340px;max-width:480px;width:90vw" class="ceremony-box"><h2 style="font-size:1.3rem">Replay snapshot</h2><p style="margin:0;text-align:center" class="game-sub-prompt">Paste a snapshot JSON to start a bot game from that position.</p><textarea style="width:100%;min-height:120px;background:rgba(0,0,0,0.25);border:1px solid rgba(200,164,72,0.35);border-radius:4px;color:var(--ui-parchment);font-family:var(--font-ui);font-size:0.75rem;padding:0.5rem;resize:vertical;box-sizing:border-box" placeholder="{ &quot;board&quot;: [...], ... }"></textarea><!----><div style="display:flex;gap:0.75rem;justify-content:center"><button class="btn btn-secondary">Cancel</button><button class="btn btn-primary">Start</button></div></div></div><!----><main><div style="display:flex;justify-content:center;align-items:flex-start;padding-top:5vh" class="portal-main"><div class="login-card"><div class="login-card-header"><div class="login-board-stripe"></div></div><div class="login-card-body"><h1 class="login-title">Trictrac</h1><p class="login-subtitle"><em>Une interprétation numérique</em></p><div class="login-ornament"></div><!----><div class="login-actions"><button class="login-btn login-btn-secondary"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M352 64C352 46.3 337.7 32 320 32C302.3 32 288 46.3 288 64L288 128L192 128C139 128 96 171 96 224L96 448C96 501 139 544 192 544L448 544C501 544 544 501 544 448L544 224C544 171 501 128 448 128L352 128L352 64zM160 432C160 418.7 170.7 408 184 408L216 408C229.3 408 240 418.7 240 432C240 445.3 229.3 456 216 456L184 456C170.7 456 160 445.3 160 432zM280 432C280 418.7 290.7 408 304 408L336 408C349.3 408 360 418.7 360 432C360 445.3 349.3 456 336 456L304 456C290.7 456 280 445.3 280 432zM400 432C400 418.7 410.7 408 424 408L456 408C469.3 408 480 418.7 480 432C480 445.3 469.3 456 456 456L424 456C410.7 456 400 445.3 400 432zM224 240C250.5 240 272 261.5 272 288C272 314.5 250.5 336 224 336C197.5 336 176 314.5 176 288C176 261.5 197.5 240 224 240zM368 288C368 261.5 389.5 240 416 240C442.5 240 464 261.5 464 288C464 314.5 442.5 336 416 336C389.5 336 368 314.5 368 288zM64 288C64 270.3 49.7 256 32 256C14.3 256 0 270.3 0 288L0 384C0 401.7 14.3 416 32 416C49.7 416 64 401.7 64 384L64 288zM608 256C590.3 256 576 270.3 576 288L576 384C576 401.7 590.3 416 608 416C625.7 416 640 401.7 640 384L640 288C640 270.3 625.7 256 608 256z"><!----></path></svg>Play vs Bot</button><button class="login-btn login-btn-primary"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M598.1 139.4C608.8 131.6 611.2 116.6 603.4 105.9C595.6 95.2 580.6 92.8 569.9 100.6L495.4 154.8L485.5 148.2C465.8 135 442.6 128 418.9 128L359.7 128L359.3 128L215.7 128C189 128 163.2 136.9 142.3 153.1L70.1 100.6C59.4 92.8 44.4 95.2 36.6 105.9C28.8 116.6 31.2 131.6 41.9 139.4L129.9 203.4C139.5 210.3 152.6 209.3 161 201L164.9 197.1C178.4 183.6 196.7 176 215.8 176L262.1 176L170.4 267.7C154.8 283.3 154.8 308.6 170.4 324.3L171.2 325.1C218 372 294 372 340.9 325.1L368 298L465.8 395.8C481.4 411.4 481.4 436.7 465.8 452.4L456 462.2L425 431.2C415.6 421.8 400.4 421.8 391.1 431.2C381.8 440.6 381.7 455.8 391.1 465.1L419.1 493.1C401.6 503.5 381.9 509.8 361.5 511.6L313 463C303.6 453.6 288.4 453.6 279.1 463C269.8 472.4 269.7 487.6 279.1 496.9L294.1 511.9L290.3 511.9C254.2 511.9 219.6 497.6 194.1 472.1L65 343C55.6 333.6 40.4 333.6 31.1 343C21.8 352.4 21.7 367.6 31.1 376.9L160.2 506.1C194.7 540.6 241.5 560 290.3 560L342.1 560L343.1 561L344.1 560L349.8 560C398.6 560 445.4 540.6 479.9 506.1L499.8 486.2C501 485 502.1 483.9 503.2 482.7C503.9 482.2 504.5 481.6 505.1 481L609 377C618.4 367.6 618.4 352.4 609 343.1C599.6 333.8 584.4 333.7 575.1 343.1L521.3 396.9C517.1 384.1 510 372 499.8 361.8L385 247C375.6 237.6 360.4 237.6 351.1 247L307 291.1C280.5 317.6 238.5 319.1 210.3 295.7L309 197C322.4 183.6 340.6 176 359.6 175.9L368.1 175.9L368.3 175.9L419.1 175.9C433.3 175.9 447.2 180.1 459 188L482.7 204C491.1 209.6 502 209.3 510.1 203.4L598.1 139.4z"><!----></path></svg>Create Room</button></div></div></div><!----></div></main><div class="game-overlay"><div class="game-container"><!----><div class="v07-strip"><div class="v07-player v07-player-left"><div class="v07-active-zone active"><div class="v07-avatar v07-avatar-me"></div><div class="score-row-name"><span class="player-name">Anonymous</span><span class="you-tag"> (you)</span></div><!----><div class="peg-track"><div class="peg-hole"><!----></div><div class="peg-hole"><!----></div><div class="peg-hole"><!----></div><div class="peg-hole"><!----></div><div class="peg-hole"><!----></div><div class="peg-hole"><!----></div><div class="peg-hole"><!----></div><div class="peg-hole"><!----></div><div class="peg-hole"><!----></div><div class="peg-hole"><!----></div><div class="peg-hole"><!----></div><div class="peg-hole"><!----></div><!----></div><div class="pts-counter-wrap"><div class="pts-counter-row"><span class="pts-counter">6</span><span class="pts-max">/12</span></div></div><!----></div></div><div class="v07-strip-center"><span class="v07-title">Trictrac</span></div><div class="v07-player v07-player-right"><div class="v07-active-zone"><div class="pts-counter-wrap"><div class="pts-counter-row"><span class="pts-counter">6</span><span class="pts-max">/12</span></div></div><div class="peg-track"><div class="peg-hole peg-opp filled"><!----></div><div class="peg-hole peg-opp"><!----></div><div class="peg-hole peg-opp"><!----></div><div class="peg-hole peg-opp"><!----></div><div class="peg-hole peg-opp"><!----></div><div class="peg-hole peg-opp"><!----></div><div class="peg-hole peg-opp"><!----></div><div class="peg-hole peg-opp"><!----></div><div class="peg-hole peg-opp"><!----></div><div class="peg-hole peg-opp"><!----></div><div class="peg-hole peg-opp"><!----></div><div class="peg-hole peg-opp"><!----></div><!----></div><!----><div class="score-row-name"><span class="player-name">Bot</span></div><div class="v07-avatar v07-avatar-opp"></div></div></div></div><div class="v07-body"><div class="board-wrapper"><div class="zone-labels-row"><div class="zone-label zone-label-quarter"></div><div class="zone-label zone-label-bar"></div><div class="zone-label zone-label-quarter">jan de retour</div></div><div class="board"><div class="board-row top-row"><div class="board-quarter"><div class="field zone-opponent corner" id="field-13"><span class="field-num">13</span><!----><div class="checker-stack"><div class="checker black"></div><div class="checker black"></div><!----></div></div><div class="field zone-opponent" id="field-14"><span class="field-num">14</span><div class="hit-ripple hit-ripple-top"><!----></div><div class="checker-stack"><div class="checker black"></div><!----></div></div><div class="field zone-opponent" id="field-15"><span class="field-num">15</span><!----><!----></div><div class="field zone-opponent" id="field-16"><span class="field-num">16</span><!----><!----></div><div class="field zone-opponent" id="field-17"><span class="field-num">17</span><!----><!----></div><div class="field zone-opponent" id="field-18"><span class="field-num">18</span><!----><div class="checker-stack"><div class="checker black"></div><div class="checker black"></div><!----></div></div><!----></div><div class="board-bar"><div class="bar-die-slot"><svg class="die-face" width="48" height="48" viewBox="0 0 48 48"><rect x="1.5" y="1.5" width="45" height="45" rx="7" ry="7"><!----></rect><circle cx="35" cy="13" r="4.5"><!----></circle><circle cx="24" cy="24" r="4.5"><!----></circle><circle cx="13" cy="35" r="4.5"><!----></circle><!----></svg></div></div><div class="board-quarter"><div class="field zone-retour point-no-bredouille" id="field-19"><span class="field-num">19</span><!----><div class="checker-stack"><div class="checker black"></div><div class="checker black"></div><!----></div></div><div class="field zone-retour point-no-bredouille" id="field-20"><span class="field-num">20</span><!----><!----></div><div class="field zone-retour point-no-bredouille" id="field-21"><span class="field-num">21</span><!----><!----></div><div class="field zone-retour point-no-bredouille" id="field-22"><span class="field-num">22</span><!----><!----></div><div class="field zone-retour point-no-bredouille" id="field-23"><span class="field-num">23</span><!----><!----></div><div class="field zone-retour point-no-bredouille" id="field-24"><span class="field-num">24</span><!----><div class="checker-stack"><div class="checker black"></div><div class="checker black"></div><div class="checker black"></div><div class="checker black">8</div><!----></div></div><!----></div></div><div class="board-center-bar"></div><div class="board-row bot-row"><div class="board-quarter"><div class="field zone-grand corner" id="field-12" title="Coin de repos — must enter and leave with 2 checkers"><span class="field-num">12</span><!----><!----></div><div class="field zone-grand clickable" id="field-11"><span class="field-num">11</span><!----><div class="checker-stack"><div class="checker white"></div><div class="checker white"></div><!----></div></div><div class="field zone-grand clickable" id="field-10"><span class="field-num">10</span><!----><div class="checker-stack"><div class="checker white"></div><!----></div></div><div class="field zone-grand" id="field-9"><span class="field-num">9</span><!----><!----></div><div class="field zone-grand clickable" id="field-8"><span class="field-num">8</span><!----><div class="checker-stack"><div class="checker white"></div><!----></div></div><div class="field zone-grand" id="field-7"><span class="field-num">7</span><!----><!----></div><!----></div><div class="board-bar"><div class="bar-die-slot"><svg class="die-face" width="48" height="48" viewBox="0 0 48 48"><rect x="1.5" y="1.5" width="45" height="45" rx="7" ry="7"><!----></rect><circle cx="13" cy="13" r="4.5"><!----></circle><circle cx="35" cy="13" r="4.5"><!----></circle><circle cx="24" cy="24" r="4.5"><!----></circle><circle cx="13" cy="35" r="4.5"><!----></circle><circle cx="35" cy="35" r="4.5"><!----></circle><!----></svg></div></div><div class="board-quarter"><div class="field zone-petit point-no-bredouille" id="field-6"><span class="field-num">6</span><!----><!----></div><div class="field zone-petit point-no-bredouille" id="field-5"><span class="field-num">5</span><!----><!----></div><div class="field zone-petit point-no-bredouille" id="field-4"><span class="field-num">4</span><!----><!----></div><div class="field zone-petit point-no-bredouille" id="field-3"><span class="field-num">3</span><!----><!----></div><div class="field zone-petit point-no-bredouille" id="field-2"><span class="field-num">2</span><!----><!----></div><div class="field zone-petit point-no-bredouille clickable" id="field-1"><span class="field-num">1</span><!----><div class="checker-stack"><div class="checker white">11</div><div class="checker white"></div><div class="checker white"></div><div class="checker white"></div><!----></div></div><!----></div></div><svg style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible" width="824" height="388"><!----></svg><!----></div><div class="zone-labels-row"><div class="zone-label zone-label-quarter">grand jan</div><div class="zone-label zone-label-bar"></div><div class="zone-label zone-label-quarter">petit jan</div></div></div><div class="v07-controls"><div class="v07-ctrl-dice"><div class="v07-ctrl-dice-row"><svg class="die-face" width="48" height="48" viewBox="0 0 48 48"><rect x="1.5" y="1.5" width="45" height="45" rx="7" ry="7"><!----></rect><circle cx="35" cy="13" r="4.5"><!----></circle><circle cx="24" cy="24" r="4.5"><!----></circle><circle cx="13" cy="35" r="4.5"><!----></circle><!----></svg><svg class="die-face" width="48" height="48" viewBox="0 0 48 48"><rect x="1.5" y="1.5" width="45" height="45" rx="7" ry="7"><!----></rect><circle cx="13" cy="13" r="4.5"><!----></circle><circle cx="35" cy="13" r="4.5"><!----></circle><circle cx="24" cy="24" r="4.5"><!----></circle><circle cx="13" cy="35" r="4.5"><!----></circle><circle cx="35" cy="35" r="4.5"><!----></circle><!----></svg></div><label class="free-mode-toggle"><input type="checkbox" checked="checked">Free play mode<span class="free-mode-help" title="Select any checker and try to find a valid move yourself. If your move breaks a rule, you'll see an explanation.">?</span></label></div><div class="v07-ctrl-status"><div class="game-status">Move a checker (1 of 2)</div><p class="game-sub-prompt">Click a highlighted field to move a checker</p><div class="free-mode-error"><span class="free-mode-error-msg">Cannot play in a quarter the opponent can still fill</span><button class="btn btn-secondary">Try again</button></div><div class="board-actions"><!----><!----><!----><!----></div></div></div></div><div class="v07-scoring-row"><div class="scoring-panels-container"><div class="scoring-panel-wrapper"><button class="scoring-expand-btn" title="Show scoring details">+</button><div class="scoring-panel"><div class="scoring-panel-head"><div class="scoring-total">+2 pts</div><button class="scoring-collapse-btn" title="Minimise"></button></div><div class="scoring-jan-row"><span class="jan-label">True hit (big jan)</span><span class="jan-tag">simple</span><span class="jan-tag">×1</span><span class="jan-pts">+2</span></div><!----><!----><!----></div></div><!----></div></div><!----><!----></div></div><script><!----></script></body></html>