wuwi/splatter-tennis
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Earn the praise, and give the quiet face a shadow too

Browse Source 
PERFECT fired on almost every serve, and it was not a threshold that had drifted
— it was the wrong test entirely. pullFrac CLAMPS at pullFull, so pullQuality is
exactly 1.0 for any pull of 130 px or more, and 130 px is an ordinary comfortable
thumb drag. "quality > 0.999" therefore meant "you pulled far enough", which is
not an achievement and is why it read as noise.

So hitServe takes `perfect` as its own argument now. The toss ritual keeps
earning it the honest way, on the 45 ms perfectMs window. The slingshot earns it
by STOPPING in a band at the top of the draw (pullFull..pullFull*perfectBand,
130-166 px) — a target you can miss, rather than a ceiling you cannot. The pull
already clicks when it crosses the splatter threshold; it clicks brighter when it
enters the band and goes silent when you pull past, so the window is learnable by
feel instead of being invisible skill.

And the word rotates: PERFECT, TEXTBOOK, IMMACULATE, OH LOVELY, UNPLAYABLE, SHOT
OF THE DAY. Cycled rather than random — the same word twice running is what makes
one read as a stuck HUD element rather than as praise. The umpire has still never
acknowledged the massacre, so a clean shot gets the line it would get at Wimbledon.

Also: the card band grew 72 -> 80 px, because the second sub line ended 4 px off
the bottom edge and looked like it had fallen out. And the quiet face floats as
much as the loud one does, so it gets the same 1 px shadow — the control hints,
the gesture-demo labels, the card subs, the modal body and prompt, the death
summary lines. The scoreboard and the rack keep theirs off: both already sit on
dark panels, and a shadow under 6 px type on a flat fill only smears it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Opus 5 committed 2026-08-03 22:21:56 +02:00
1 parent 55c0f75c37
commit 9c7ee42bfa
6 files changed
+69 -29
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

render.js
+22 -18
View File
@@ -40,7 +40,9 @@ const B = sz => `400 ${sz}px Bangers, Silkscreen, monospace`;
const hexA = (h, a) => `rgba(${parseInt(h.slice(1, 3), 16)},${parseInt(h.slice(3, 5), 16)},${parseInt(h.slice(5, 7), 16)},${a})`;
// Free-floating text has no panel behind it, so it has to carry its own contrast: over the crowd,
// over sunlit clay, over blood. A 1px drop shadow does it and a box would cover the artwork.
// (RESUMING IN hand-rolled exactly this; now everything that floats shares it.)
// (RESUMING IN hand-rolled exactly this; now everything that floats shares it — the loud face AND
// the quiet one. The two exceptions are the SCOREBOARD and the RACK: both already sit on their own
// dark panels, and a 1px shadow under 6-8px type on a flat dark fill only smears it.)
function shadowText(txt, x, y, fill) {
ctx.fillStyle = 'rgba(0,0,0,0.62)';
ctx.fillText(txt, x + 1, y + 1);
@@ -1016,14 +1018,16 @@ function drawRack() {
// the centered milestone 'block': a real pause, front and center. Shared by the sudden-death duel
// and the SET announcement so both read as the same interruption. Assumes textAlign is already set.
function drawCard(title, sub1, sub2, color) {
ctx.fillStyle = 'rgba(10,6,8,0.66)'; ctx.fillRect(0, H / 2 - 42, W, 72);
// 80 tall, not 72: the second sub line ends at H/2+26 and the band used to stop at +30, so it sat
// all but touching the edge. The band now clears it by 10 px, the same air it has at the top.
ctx.fillStyle = 'rgba(10,6,8,0.66)'; ctx.fillRect(0, H / 2 - 44, W, 80);
ctx.textAlign = 'center';
// the title SHOUTS (Bangers, twice the old size); the subs stay Silkscreen, because they are the
// detail you read second and a whole card in the loud face is just noise
ctx.font = B(30); shadowText(title, W / 2, H / 2 - 34, color);
ctx.fillStyle = UI.cream; ctx.font = F(8);
if (sub1) ctx.fillText(sub1, W / 2, H / 2 + 4);
if (sub2) ctx.fillText(sub2, W / 2, H / 2 + 18);
ctx.font = F(8);
if (sub1) shadowText(sub1, W / 2, H / 2 + 4, UI.cream);
if (sub2) shadowText(sub2, W / 2, H / 2 + 18, UI.cream);
}
// Sit in the serve stance doing nothing and the gesture demonstrates itself: a ghost thumb slides
@@ -1062,12 +1066,12 @@ function demoSwipe(dx, dy, label) {
ctx.lineTo(hx - dx * s * 0.7 - dy * s, hy - dy * s * 0.7 - dx * s);
ctx.fill();
// ...and say it in words. The mime alone was too abstract to read as an instruction.
ctx.fillStyle = UI.warm; ctx.font = F(8);
ctx.font = F(8);
ctx.textAlign = 'center'; ctx.textBaseline = 'top';
// The label sits under the TRACK, not under the arrowhead — following the arrow sideways would
// carry it off the edge of the screen, and clearing the full travel below a horizontal stroke
// left it floating in the middle of an empty apron with nothing to attach itself to.
ctx.fillText(label, ax, ay + (dy ? travel + 24 : 18));
shadowText(label, ax, ay + (dy ? travel + 24 : 18), UI.warm);
// the ghost thumb
ctx.globalAlpha = gone ? 0 : 0.9;
ctx.fillStyle = UI.cream;
@@ -1133,13 +1137,13 @@ function drawModal(m) {
ctx.restore();
}
ctx.fillText(m.title, W / 2 + headX, y + 8); y += 26;
ctx.font = F(8, 0); ctx.fillStyle = UI.cream;
body.forEach((l, i) => { ctx.fillText(l, W / 2 + dx(i + 1, -1), y + 6); y += 13; });
ctx.font = F(8, 0);
body.forEach((l, i) => { shadowText(l, W / 2 + dx(i + 1, -1), y + 6, UI.cream); y += 13; });
// the prompt only exists once everything has landed — offering the tap mid-flight would be a lie,
// dismissModal swallows it until then
if (t >= 1 && Math.floor(G.idleT * 2) % 2) { // the prompt blinks so it never reads as part of the copy
ctx.font = F(8); ctx.fillStyle = UI.warm;
ctx.fillText(IS_TOUCH ? 'TAP TO CONTINUE' : 'PRESS ANY KEY', W / 2, Math.round(H / 2 + blockH / 2 + 22));
ctx.font = F(8);
shadowText(IS_TOUCH ? 'TAP TO CONTINUE' : 'PRESS ANY KEY', W / 2, Math.round(H / 2 + blockH / 2 + 22), UI.warm);
}
ctx.textBaseline = 'top';
}
@@ -1513,18 +1517,18 @@ export function render() {
// and at 30 it ran edge to edge on a 270px-wide portrait canvas.
ctx.font = B(26);
shadowText('GAME, SET, MASSACRE.', W / 2, H / 2 - 44, UI.bad);
ctx.fillStyle = UI.cream; ctx.font = F(9);
ctx.fillText('SURVIVED ' + G.runGames + ' GAMES · ' + G.sets[0] + ' SETS', W / 2, H / 2 - 14);
ctx.font = F(9);
shadowText('SURVIVED ' + G.runGames + ' GAMES · ' + G.sets[0] + ' SETS', W / 2, H / 2 - 14, UI.cream);
if (G.newBest) { // a fresh record crows; otherwise show the mark to beat
const pulse = 0.55 + 0.45 * Math.abs(Math.sin(G.eatenT * 4));
ctx.font = B(20);
shadowText('★ NEW BEST ★', W / 2, H / 2 + 2, hexA(UI.warm, pulse));
} else if (G.best && G.best.games > 0) {
ctx.fillStyle = UI.dim; ctx.font = F(8);
ctx.fillText('BEST ' + G.best.games + ' GAMES · ' + G.best.sets + ' SETS', W / 2, H / 2 + 4);
ctx.font = F(8);
shadowText('BEST ' + G.best.games + ' GAMES · ' + G.best.sets + ' SETS', W / 2, H / 2 + 4, UI.dim);
}
// gated well past the animation so a panic tap can't skip it (main.js gates the restart the same)
if (G.eatenT > EATEN_RESTART) { ctx.fillStyle = UI.warm; ctx.font = F(8); ctx.fillText(IS_TOUCH ? 'TAP TO PLAY AGAIN' : 'PRESS ANY KEY TO PLAY AGAIN', W / 2, H / 2 + 32); }
if (G.eatenT > EATEN_RESTART) { ctx.font = F(8); shadowText(IS_TOUCH ? 'TAP TO PLAY AGAIN' : 'PRESS ANY KEY TO PLAY AGAIN', W / 2, H / 2 + 32, UI.warm); }
ctx.restore();
}
// Timed freezes swallow every input until they run out, which reads as the game having hung
@@ -1547,7 +1551,7 @@ export function render() {
shadowText(txt, W / 2, y, hexA(UI.warm, 0.92));
}
if (G.phase === 'pretoss' && score.server === 'P' && G.mode !== 'eaten' && !G.horde && !(G.mgT > 0) && !G.aim && waitT <= 0.5) { // while pulling, the draw meter owns this slot
ctx.fillStyle = UI.warm; ctx.font = F(8);
ctx.font = F(8);
const touch = IS_TOUCH, switchHint = touch ? 'TAP THE RACK TO SWITCH' : '1-0 TO SWITCH';
const selW = WEAPONS[slotId(G.weapon)], sel = selW ? selW.label : 'PLAIN';
// "is the selected weapon one you UNLOAD rather than serve" — it used to be `G.weapon === 4`,
@@ -1567,7 +1571,7 @@ export function render() {
: touch ? 'PULL DOWN TO AIM · RELEASE TO FIRE' : 'DRAG DOWN TO AIM · SPACE SERVES')
: G.serveNum === 2 ? (touch ? 'SECOND SERVE — TAP' : 'SECOND SERVE — SPACE')
: (touch ? 'TAP TO TOSS, TAP TO SERVE' : 'SPACE TO TOSS, SPACE TO SERVE');
if (txt) ctx.fillText(txt, W / 2, METER_Y()); // same slot the draw meter uses
if (txt) shadowText(txt, W / 2, METER_Y(), UI.warm); // same slot the draw meter uses
if (demo) drawPullHint(); // show the gesture instead of only naming it
}
// The free-floating register: no panel, one fixed slot, shouted. PERFECT, GAME N, DOUBLE KILL,