feat(game): official first-move tile draw + admin step-by-step replay

Decide who moves first by the official rule: each seated player draws one tile, the one closest to "A" leads (a blank beats every letter), ties re-drawing until a single leader remains. Each draw uses honest per-draw crypto/rand entropy (not the deterministic bag seed), so the recorded draw — not a seed — is the only account of the outcome. The leader takes seat 0, so the engine and journal replay are unchanged. The draw is recorded with the game (game_setup_draws, migration 00013) for future tournaments, designed as a discrete "player N draws a tile" step. Friend/AI games draw at creation. Auto-match draws when the game opens, against a synthetic uuid.Nil opponent whose draw rows (NULL account_id) are back-filled to the real opponent on join — so the opener's seat is fixed up front and the existing open-game pre-move is preserved with no reseating. Admin /_gm/games/:id gains the recorded draw list and a simple step-by-step board replay (game.ReplayTimeline + a vanilla-JS stepper): a board with A-O/1-15 headers and highlighted premium squares, placed letters with their tile value as a subscript, rack panels around the board (seat 0 top, 1 bottom, 2 left, 3 right) with the current player highlighted, and a per-move log with the tiles drawn and the bag remainder. Docs: ARCHITECTURE §6/§9, FUNCTIONAL (+_ru), PRERELEASE (FM row), design spec.
2026-06-20 08:47:18 +02:00
parent 76d4610e6f
commit caefc8f579
27 changed files with 1661 additions and 59 deletions
@@ -27,5 +27,87 @@
 </table>
 {{if .HasRobot}}<p><small>Play-to-win is decided once per game from the bag seed; robots play to win in ~{{.RobotTargetPct}}% of games.</small></p>{{end}}
 </section>
+{{if .SetupDraws}}
+<section class="panel"><h2>First-move draw</h2>
+<p class="note">Each player draws a tile; the one closest to &ldquo;A&rdquo; moves first (a blank beats every letter), ties re-drawing until a single leader remains.{{if .FirstMover}} <b>{{.FirstMover}}</b> leads.{{end}}</p>
+<table class="list">
+<thead><tr><th>Round</th><th>Player</th><th>Tile</th><th>Rank</th></tr></thead>
+<tbody>
+{{range .SetupDraws}}
+<tr><td>{{.Round}}</td><td>{{if .AccountID}}<a href="/_gm/users/{{.AccountID}}">{{.Name}}</a>{{else}}{{.Name}}{{end}}</td><td>{{.Letter}}{{if .Blank}} <small>(blank)</small>{{end}}</td><td>{{.Rank}}</td></tr>
+{{end}}
+</tbody>
+</table>
+</section>
+{{end}}
+{{if .HasReplay}}
+<section class="panel"><h2>Replay</h2>
+<div class="replay-stage">
+  <div class="rack-slot rack-top" data-seat="0"></div>
+  <div class="rack-slot rack-left" data-seat="2"></div>
+  <div class="replay-board" id="replay-board"></div>
+  <div class="rack-slot rack-right" data-seat="3"></div>
+  <div class="rack-slot rack-bottom" data-seat="1"></div>
+</div>
+<div class="replay-controls">
+  <button type="button" id="replay-prev">&#9664; prev</button>
+  <span class="replay-pos" id="replay-pos"></span>
+  <button type="button" id="replay-next">next &#9654;</button>
+</div>
+<ol class="replay-log" id="replay-log"></ol>
+<script>
+const REPLAY = {{.ReplayJSON}};
+(function(){
+  if(!REPLAY||!REPLAY.steps){return;}
+  const N=15, COLS="ABCDEFGHIJKLMNO", PREM={tw:"3W",dw:"2W",tl:"3L",dl:"2L"};
+  const boardEl=document.getElementById("replay-board"), logEl=document.getElementById("replay-log");
+  const posEl=document.getElementById("replay-pos"), prevBtn=document.getElementById("replay-prev"), nextBtn=document.getElementById("replay-next");
+  let step=0;
+  function esc(s){const d=document.createElement("div");d.textContent=s==null?"":s;return d.innerHTML;}
+  function tileHTML(t){const sub=(t.v&&t.v>0)?"<sub>"+t.v+"<\/sub>":"";return "<span class=\"tile"+(t.b?" blank":"")+"\">"+esc(t.l)+sub+"<\/span>";}
+  function placedAt(k){const m={};for(let s=1;s<=k;s++){const mv=REPLAY.steps[s]&&REPLAY.steps[s].move;if(mv&&mv.placements){for(const p of mv.placements){m[p.r+","+p.c]=p;}}}return m;}
+  function renderBoard(){
+    const placed=placedAt(step);let h="<div class=\"board-grid\"><div class=\"bh corner\"><\/div>";
+    for(let c=0;c<N;c++){h+="<div class=\"bh\">"+COLS[c]+"<\/div>";}
+    for(let r=0;r<N;r++){h+="<div class=\"bh\">"+(r+1)+"<\/div>";
+      for(let c=0;c<N;c++){const p=placed[r+","+c];
+        if(p){h+="<div class=\"cell filled\">"+tileHTML(p)+"<\/div>";continue;}
+        const prem=REPLAY.premium[r][c], centre=(r===REPLAY.centre[0]&&c===REPLAY.centre[1]);
+        const label=centre?"&#9733;":(prem?PREM[prem]:"");
+        h+="<div class=\"cell "+(prem||"")+(centre?" centre":"")+"\">"+(label?"<span class=\"prem\">"+label+"<\/span>":"")+"<\/div>";}}
+    h+="<\/div>";boardEl.innerHTML=h;
+  }
+  function renderRacks(){
+    const st=REPLAY.steps[step];
+    document.querySelectorAll(".rack-slot").forEach(function(slot){
+      const seat=parseInt(slot.dataset.seat,10), info=REPLAY.seats.find(function(s){return s.seat===seat;}), rack=st.racks[seat];
+      if(!info||!rack){slot.style.display="none";slot.innerHTML="";return;}
+      slot.style.display="";slot.classList.toggle("active",st.toMove===seat);
+      const nm=info.accountId?"<a href=\"/_gm/users/"+info.accountId+"\">"+esc(info.name)+"<\/a>":esc(info.name||("seat "+seat));
+      slot.innerHTML="<div class=\"rack-name\">"+nm+" &middot; "+(st.scores[seat]||0)+"<\/div><div class=\"rack-tiles\">"+rack.map(tileHTML).join("")+"<\/div>";
+    });
+  }
+  function renderLog(){
+    let h="";
+    for(let s=1;s<=step;s++){const st=REPLAY.steps[s], m=st.move;if(!m){continue;}
+      const who=((REPLAY.seats.find(function(x){return x.seat===m.seat;})||{}).name)||("seat "+m.seat);
+      let desc;
+      if(m.action==="play"){desc="played "+((m.words&&m.words.length)?m.words.join(", "):"")+" for "+m.score;}
+      else if(m.action==="exchange"){desc="exchanged "+((m.exchanged&&m.exchanged.length)||0)+" tiles";}
+      else if(m.action==="pass"){desc="passed";}
+      else{desc=m.action;}
+      const drew=(st.drawn&&st.drawn.length)?" &middot; drew "+st.drawn.map(function(t){return t.l;}).join(""):"";
+      h+="<li class=\""+(s===step?"cur":"")+"\">"+esc(who)+" "+esc(desc)+drew+" &middot; bag "+st.bagLen+"<\/li>";}
+    logEl.innerHTML=h||"<li class=\"note\">opening position<\/li>";
+  }
+  function render(){renderBoard();renderRacks();renderLog();posEl.textContent=step+" / "+(REPLAY.steps.length-1);prevBtn.disabled=step<=0;nextBtn.disabled=step>=REPLAY.steps.length-1;}
+  prevBtn.onclick=function(){if(step>0){step--;render();}};
+  nextBtn.onclick=function(){if(step<REPLAY.steps.length-1){step++;render();}};
+  document.addEventListener("keydown",function(e){if(e.key==="ArrowLeft"){prevBtn.click();}else if(e.key==="ArrowRight"){nextBtn.click();}});
+  render();
+})();
+</script>
+</section>
+{{end}}
 {{end}}
 {{- end}}