diff --git a/render.js b/render.js index 6581704..b055e48 100644 --- a/render.js +++ b/render.js @@ -385,45 +385,53 @@ export function render() { ctx.setTransform(RES, 0, 0, RES, 0, 0); // un-shake: the HUD and overlays stay rock steady if (G.boomFlash > 0) { ctx.fillStyle = `rgba(255,255,255,${Math.min(1, G.boomFlash / 0.08) * 0.85})`; ctx.fillRect(0, 0, W, H); } - // HUD — broadcast scoreboard: two player rows (server ball · name · sets · games · points), - // then a splatter status strip (kills-to-next-point pips + weapon stock). + // HUD — Wimbledon-style scoreboard: bottle-green board with a purple flash down the left, + // cream serif names, a yellow ball on the server, sets/games in divided columns and the + // current game in a purple points cell. Splatter adds a darker status strip below. const splat = G.mode !== 'tennis'; - const sbW = 132, sbH = splat ? 37 : 25; - ctx.fillStyle = 'rgba(10,14,22,0.85)'; ctx.fillRect(6, 6, sbW, sbH); - ctx.strokeStyle = '#42506e'; ctx.strokeRect(6.5, 6.5, sbW - 1, sbH - 1); + const sbX = 6, sbY = 6, sbW = 150, sbH = splat ? 40 : 28, rowsB = splat ? 29 : sbH - 3; + const board = () => { ctx.beginPath(); ctx.roundRect ? ctx.roundRect(sbX, sbY, sbW, sbH, 3) : ctx.rect(sbX, sbY, sbW, sbH); }; + board(); ctx.fillStyle = '#0b3b2a'; ctx.fill(); // Wimbledon green + ctx.save(); board(); ctx.clip(); + ctx.fillStyle = '#4b2e83'; ctx.fillRect(sbX, sbY, 5, sbH); // the purple flash + ctx.fillStyle = 'rgba(255,255,255,0.05)'; ctx.fillRect(sbX, sbY, sbW, 1); // top sheen + if (splat) { ctx.fillStyle = 'rgba(0,0,0,0.28)'; ctx.fillRect(sbX, 29, sbW, sbH - 23); } // status strip well + ctx.restore(); + ctx.strokeStyle = 'rgba(244,239,225,0.1)'; ctx.lineWidth = 1; // column dividers + for (const cx of (splat ? [64, 82, 100] : [82, 100])) { ctx.beginPath(); ctx.moveTo(cx, sbY + 3); ctx.lineTo(cx, rowsB); ctx.stroke(); } + board(); ctx.strokeStyle = 'rgba(244,239,225,0.22)'; ctx.stroke(); // board edge const ptTxt = i => score.pts[0] >= 3 && score.pts[1] >= 3 ? (score.pts[i] === score.pts[1 - i] ? '40' : score.pts[i] > score.pts[1 - i] ? 'AD' : '40') : ['0', '15', '30', '40'][Math.min(score.pts[i], 3)]; ctx.textBaseline = 'middle'; const names = splat ? ['YOU', 'THEM'] : ['YOU', 'CPU']; for (let i = 0; i < 2; i++) { - const rowY = 12 + i * 11, serving = (score.server === 'P') === (i === 0); - ctx.textAlign = 'left'; - if (serving) { ctx.fillStyle = '#f8e048'; ctx.beginPath(); ctx.arc(15, rowY, 2.3, 0, 7); ctx.fill(); } // the server holds the ball - ctx.font = 'bold 9px monospace'; ctx.fillStyle = serving ? '#ffffff' : '#9aa6ba'; - ctx.fillText(names[i], 21, rowY + 0.5); + const rowY = 13 + i * 11, serving = (score.server === 'P') === (i === 0); + ctx.fillStyle = serving ? '#4b2e83' : 'rgba(244,239,225,0.05)'; ctx.fillRect(101, rowY - 5, 51, 10); // points cell (purple for the server) + if (serving) { ctx.fillStyle = '#e8f03a'; ctx.beginPath(); ctx.arc(15, rowY, 2.4, 0, 7); ctx.fill(); ctx.strokeStyle = '#0b3b2a'; ctx.lineWidth = 0.6; ctx.stroke(); } // the ball marks the server + ctx.textAlign = 'left'; ctx.font = 'bold 9px Georgia, "Times New Roman", serif'; + ctx.fillStyle = serving ? '#f6f1e3' : '#9db3a7'; ctx.fillText(names[i], 21, rowY + 0.5); ctx.textAlign = 'center'; - if (splat) { ctx.fillStyle = '#78849a'; ctx.font = 'bold 8px monospace'; ctx.fillText(String(G.sets[i]), 56, rowY + 0.5); } // sets column - ctx.fillStyle = '#c2ccda'; ctx.font = 'bold 9px monospace'; ctx.fillText(String(score.games[i]), 72, rowY + 0.5); // games column - ctx.fillStyle = serving ? 'rgba(248,224,72,0.15)' : 'rgba(255,255,255,0.05)'; ctx.fillRect(84, rowY - 6, 30, 12); // points cell - ctx.fillStyle = serving ? '#f8e048' : '#dfe6f2'; ctx.font = 'bold 9px monospace'; ctx.fillText(ptTxt(i), 99, rowY + 0.5); + if (splat) { ctx.fillStyle = '#8fa79a'; ctx.font = 'bold 8px Georgia, serif'; ctx.fillText(String(G.sets[i]), 73, rowY + 0.5); } // sets + ctx.fillStyle = '#dfe7df'; ctx.font = 'bold 9px Georgia, serif'; ctx.fillText(String(score.games[i]), 91, rowY + 0.5); // games + ctx.fillStyle = serving ? '#f6f1e3' : '#b9cabf'; ctx.font = 'bold 9px Georgia, serif'; ctx.fillText(ptTxt(i), 126, rowY + 0.5); // current game } - if (splat) { // status strip under the two rows - const sy = 34; + if (splat) { // status strip: kills-to-next-point pips + weapon stock + const sy = 35; ctx.textAlign = 'left'; if (TUNE.killPips && TUNE.killsPerPoint > 1) { // "how many zombies to the next point" — empty pips are kills to go - ctx.fillStyle = '#6b768a'; ctx.font = 'bold 6px monospace'; ctx.fillText('NEXT', 12, sy + 0.5); + ctx.fillStyle = '#7f9488'; ctx.font = 'bold 6px Georgia, serif'; ctx.fillText('NEXT', 12, sy + 0.5); for (let k = 0; k < TUNE.killsPerPoint; k++) { - ctx.beginPath(); ctx.arc(35 + k * 7, sy, 2.2, 0, 7); + ctx.beginPath(); ctx.arc(36 + k * 7, sy, 2.2, 0, 7); if (k < G.killCount) { ctx.fillStyle = '#e8f03a'; ctx.fill(); } - else { ctx.strokeStyle = '#54607a'; ctx.lineWidth = 1; ctx.stroke(); } + else { ctx.strokeStyle = '#54756a'; ctx.lineWidth = 1; ctx.stroke(); } } } - const wx = 66; // weapon stock, moved off the player rows so the board reads clean + const wx = 80; // weapon stock for (let b = 0; b < G.bombs; b++) { ctx.fillStyle = '#111'; ctx.beginPath(); ctx.arc(wx + b * 8, sy, 2.6, 0, 7); ctx.fill(); ctx.strokeStyle = '#ff8010'; ctx.lineWidth = 0.75; ctx.stroke(); } for (let b = 0; b < G.triples; b++) { ctx.fillStyle = '#e8f03a'; ctx.beginPath(); ctx.arc(wx + b * 8, sy, 2.6, 0, 7); ctx.fill(); ctx.fillRect(wx + b * 8 - 4, sy - 1, 1.5, 1.5); ctx.fillRect(wx + b * 8 + 3, sy - 1, 1.5, 1.5); } for (let b = 0; b < G.flames; b++) { ctx.fillStyle = '#ff8010'; ctx.beginPath(); ctx.arc(wx + b * 8, sy, 2.6, 0, 7); ctx.fill(); ctx.fillStyle = '#ffe8a0'; ctx.fillRect(wx + b * 8 - 1, sy - 1, 2, 2); } - if (G.mgT > 0) { ctx.fillStyle = '#333'; ctx.fillRect(wx, sy - 2.5, 40, 5); ctx.fillStyle = '#f8e048'; ctx.fillRect(wx, sy - 2.5, 40 * Math.min(1, G.mgT / TUNE.mgPickupLen), 5); } + if (G.mgT > 0) { ctx.fillStyle = '#0a2a1e'; ctx.fillRect(wx, sy - 2.5, 40, 5); ctx.fillStyle = '#e8f03a'; ctx.fillRect(wx, sy - 2.5, 40 * Math.min(1, G.mgT / TUNE.mgPickupLen), 5); } } ctx.textBaseline = 'top'; ctx.textAlign = 'center'; if (G.mode === 'eaten') { // the run summary — permadeath makes this scoreboard the whole game