Monorepo for Aesthetic.Computer
aesthetic.computer
disk: simplify HUD hitbox to match label buffer + quiet debug overlay
Replace the ad-hoc width/height calculation (visible text width + descender
padding, right padding, clamped y, x=0 start) with a direct mapping to the
rendered HUD label buffer. The hitbox now sits at finalX/finalY with width
and height from hudAnimationState.labelWidth/labelHeight (with existing
fallbacks), which is how the overlay is actually drawn — so the hitbox and
the visible area stay aligned as the HUD animates.
Also tidy the debug overlay:
- Make it opt-in (globalThis.debugHudHitbox) instead of default-on.
- Swap the magenta fill for a blinking green double outline that doesn't
obscure piece content while inspecting.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+19
-36
+19
-36
system/public/aesthetic.computer/lib/disk.mjs
+19
-36
system/public/aesthetic.computer/lib/disk.mjs
···
14597
14597
// Update button position to match label position (with slide offset)
14598
14598
const finalX = currentHUDOffset.x + hudAnimationState.slideOffset.x - currentHUDLeftPad;
14599
14599
const finalY = currentHUDOffset.y + hudAnimationState.slideOffset.y;
14600
-
// Hit region matches the visible text width (not the padded buffer or full screen)
14601
-
// and extends up to y=0 so taps at the top edge still register as corner-label taps.
14602
-
const textOnlyHeight = Math.max(
14600
+
// Match hitbox to full rendered HUD label buffer (including scrub reveal areas).
14601
+
const hitboxWidth = Math.max(
14603
14602
1,
14604
-
Math.round(
14605
-
currentHUDTextHeight ||
14606
-
currentHUDTextBoxHeight ||
14607
-
measuredTextHeight ||
14608
-
hudBlockHeight ||
14609
-
1,
14610
-
),
14603
+
Math.round(hudAnimationState.labelWidth || bufferW || currentHUDLabelMeasuredWidth || 1),
14611
14604
);
14612
-
const visualTextWidth = Math.max(
14605
+
const hitboxHeight = Math.max(
14613
14606
1,
14614
-
Math.round(
14615
-
currentHUDTextBoxWidth ||
14616
-
longestVisibleLineWidth ||
14617
-
hudBlockWidth ||
14618
-
1,
14619
-
),
14607
+
Math.round(hudAnimationState.labelHeight || bufferH || currentHUDTextHeight || currentHUDTextBoxHeight || h || 1),
14620
14608
);
14621
-
const descenderPad = Math.max(2, Math.round(hudBlockHeight * 0.2));
14622
-
const finalYClamped = Math.max(0, Math.round(finalY));
14623
-
// Flush with the left edge of the screen; extend right past the text with a
14624
-
// small padding so the tap area isn't uncomfortably tight.
14625
-
const textStartX = currentHUDOffset.x + hudAnimationState.slideOffset.x;
14626
-
const rightPad = Math.max(6, Math.round(hudBlockWidth * 1.5));
14627
-
currentHUDButton.box.x = 0;
14628
-
currentHUDButton.box.y = 0;
14629
-
currentHUDButton.box.w = Math.max(
14630
-
1,
14631
-
Math.round(Math.max(0, textStartX) + visualTextWidth + rightPad),
14632
-
);
14633
-
currentHUDButton.box.h = Math.max(1, finalYClamped + textOnlyHeight + descenderPad);
14609
+
currentHUDButton.box.x = finalX;
14610
+
currentHUDButton.box.y = finalY;
14611
+
currentHUDButton.box.w = hitboxWidth;
14612
+
currentHUDButton.box.h = Math.max(1, Math.round(hitboxHeight));
14634
14613
14635
14614
// Mark HUD button to bypass the global HUD active check (it checks itself)
14636
14615
currentHUDButton.noEdgeDetection = true;
···
15215
15194
};
15216
15195
15217
15196
// DEBUG: Add hitbox visualization overlay
15218
-
// TEMP: default-on fill visualization to inspect tap area height. Toggle off via `toggleHudHitboxDebug()`.
15219
-
if (globalThis.debugHudHitbox !== false && currentHUDButton) {
15197
+
if (globalThis.debugHudHitbox && currentHUDButton) {
15220
15198
const hitboxWidth = currentHUDButton.box.w;
15221
15199
const hitboxHeight = currentHUDButton.box.h;
15200
+
const blinkFrame = Number($api.paintCount || 0n);
15201
+
const blinkOn = (blinkFrame % 30) < 15;
15202
+
const outerAlpha = blinkOn ? 200 : 80;
15203
+
const innerAlpha = blinkOn ? 120 : 40;
15222
15204
15223
15205
const hitboxOverlay = $api.painting(hitboxWidth, hitboxHeight, ($) => {
15224
15206
$.unpan();
15225
15207
$.unmask(); // Ensure hitbox overlay renders without piece mask
15226
-
// Solid translucent magenta fill so the tap area is clearly visible
15227
-
$.ink(255, 0, 180, 90).box(0, 0, hitboxWidth, hitboxHeight);
15228
-
// Bright outline on top for precise edge inspection
15229
-
$.ink(0, 255, 0, 220).box(0, 0, hitboxWidth, hitboxHeight, "outline");
15208
+
// Draw a blinking green border to show the hitbox
15209
+
$.ink(0, 255, 0, outerAlpha).box(0, 0, hitboxWidth, hitboxHeight, "outline");
15210
+
if (hitboxWidth > 2 && hitboxHeight > 2) {
15211
+
$.ink(0, 255, 0, innerAlpha).box(1, 1, hitboxWidth - 2, hitboxHeight - 2, "outline");
15212
+
}
15230
15213
});
15231
15214
15232
15215
sendData.hitboxDebug = {