- commit
- a3f32aeaa2a53755556ca8d7cf98e5b43f6a4f94
- parent
- 65a59464f6dafcb3e4e563b3ff81ea24a4ff4960
- author
- Dami <dami.etoile@gmail.com>
| M | src/ | 37 | ++++++++++++++++++++---------- |
@@ -52,12 +52,6 @@ export function renderProofScene(ctx, state, view = {}) {
5252 object.kind === "object" &&5353 view.game?.properties(object)?.includes("YOU"),5454 );55- const controlledCenter = controlled56- ? {57- x: geometry.x + (controlled.x + 0.5) * geometry.cell,58- y: geometry.y + (controlled.y + 0.5) * geometry.cell,59- }60- : null;6155 ctx.textAlign = "left";6256 ctx.textBaseline = "top";6357 const proofNumber = String(state.proofNumber ?? 1).padStart(2, "0");@@ -70,23 +64,36 @@ export function renderProofScene(ctx, state, view = {}) {
7064 ctx.fillText(proofNumber, 49, 44);7165 ctx.textAlign = "left";7266 const fullProofTitle = String(state.title || "Proof");73- const titleFit = fitSceneTitle(ctx, fullProofTitle, { maxWidth: Math.max(1, width - 82 - Math.max(64, width * 0.16)), maxSize: 22, minSize: 16, maxLines: 2 });67+ const titleX = 82;68+ const counterRight = width - 32;69+ const titleToCounterGap = 16;70+ // Reserve the measured counter width plus the 16px gutter required by the71+ // title rule; a fixed percentage let long titles paint under the digits.72+ ctx.font = '800 40px Recursive, monospace';73+ const counterDigits = Math.max(74+ 2,75+ String(Math.max(0, Number(state.moves) || 0)).length,76+ String(Math.max(0, Number(view.stepRoll?.to) || 0)).length,77+ );78+ const counterWidth = counterDigits * Math.max(20, ctx.measureText('0').width);79+ const titleWidth = Math.max(1, counterRight - counterWidth - titleToCounterGap - titleX);80+ const titleFit = fitSceneTitle(ctx, fullProofTitle, { maxWidth: titleWidth, maxSize: 22, minSize: 16, maxLines: 2 });7481 const titleTop = 30;7582 const sublineTop = titleTop + titleFit.lines.length * titleFit.lineHeight + 3;7683 const hudBottom = sublineTop + 12;7784 const y = Math.max(baseY, hudBottom + 40);7885 ctx.fillStyle = "#F2EEE6";7986 ctx.font = `800 ${titleFit.size}px Recursive, monospace`;80- titleFit.lines.forEach((line, index) => ctx.fillText(line, 82, titleTop + index * titleFit.lineHeight));87+ titleFit.lines.forEach((line, index) => ctx.fillText(line, titleX, titleTop + index * titleFit.lineHeight));8188 ctx.font = "600 10px Recursive, monospace";8289 ctx.fillStyle = "#8E877C";8390 ctx.fillText(8491 `PROOF ${proofNumber} OF ${String(state.proofTotal ?? 9).padStart(2, "0")}`,85- 82,92+ titleX,8693 sublineTop,8794 );8895 ctx.fillStyle = "#F2EEE6";89- drawStepCounter(ctx, state.moves || 0, width - 32, 39, {96+ drawStepCounter(ctx, state.moves || 0, counterRight, 39, {9097 now,9198 reducedMotion: view.reducedMotion,9299 roll: view.stepRoll,@@ -94,7 +101,7 @@ export function renderProofScene(ctx, state, view = {}) {
94101 ctx.textAlign = "right";95102 ctx.font = "600 10px Recursive, monospace";96103 ctx.fillStyle = "#8E877C";97- ctx.fillText("STEPS", width - 32, 70);104+ ctx.fillText("STEPS", counterRight, 70);98105 ctx.textAlign = "left";99106 const geometry = drawBoard(ctx, state, {100107 x,@@ -105,6 +112,12 @@ export function renderProofScene(ctx, state, view = {}) {
105112 glyphs,106113 frame: view.frame,107114 });115+ const controlledCenter = controlled116+ ? {117+ x: geometry.x + (controlled.x + 0.5) * geometry.cell,118+ y: geometry.y + (controlled.y + 0.5) * geometry.cell,119+ }120+ : null;108121 const ledger = drawLedger(109122 ctx,110123 state.rules,@@ -186,7 +199,7 @@ export function renderProofScene(ctx, state, view = {}) {
186199 );187200 return {188201 geometry,189- titleLayout: { ...titleFit, x: 82, y: titleTop, width: Math.max(1, width - 82 - Math.max(64, width * 0.16)), sublineTop, hudBottom, boardTop: geometry.y },202+ titleLayout: { ...titleFit, x: titleX, y: titleTop, width: titleWidth, sublineTop, hudBottom, boardTop: geometry.y },190203 controlledCenter,191204 ariaLabel: `Miau Is True proof: ${fullProofTitle}`,192205 };