From e9650f98431155bc032679ee037adf245d00356b Mon Sep 17 00:00:00 2001 From: jwinterm Date: Sun, 12 Jul 2026 21:08:16 -0400 Subject: [PATCH] fix(render): reliable SP camera fill, clean wall torches, subtler wait juice MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Camera: mount the render-kit host with inset:0 (fill #game-display) instead of min(100%,78vh)+translate(-50%) centering. #game-display is grid-bounded (container is 100vh/overflow-hidden), so filling it gives the camera reliable clientWidth/Height every frame — fixes the intermittent "player stranded in a top band, black below" off-centering. Torches (in-game): drop the pack torch SPRITE composite — several sheets place it off-center/ rotated, reading as misaligned. Keep wall base + procedural RK.fx flame: a clean wall-mounted torch that looks right in every pack. Wait animations: shrink the juice bursts (18-24 -> 6-7 particles, spread 1.8-2.4 -> 0.6-0.7) and remove the red death/caught bursts, so a grab/escape reads as a tight glint on the hero instead of an explosion spraying onto the wall torches. --- html/js/display/waitingScreenAnimator.js | 21 ++++++++------------- html/js/render/spGameRenderer.js | 11 +++++------ html/js/render/tileRenderer.js | 12 +++++------- 3 files changed, 18 insertions(+), 26 deletions(-) diff --git a/html/js/display/waitingScreenAnimator.js b/html/js/display/waitingScreenAnimator.js index d505630..5286d2b 100644 --- a/html/js/display/waitingScreenAnimator.js +++ b/html/js/display/waitingScreenAnimator.js @@ -274,10 +274,10 @@ var WaitingScreenAnimator = { this.updateAnimation(); const anim = this._waitingAnimation; - // JUICE: burst on the beats — treasure grabbed (treasureX flips to -1), escape, or caught. + // JUICE: a SUBTLE, tight sparkle when the hero breaks for the exit with the loot. No red + // "caught" burst — keep it a small glint, not an explosion near the torches. if (this._epicPhase !== anim.phase) { - if (anim.phase === 'escape') this._burst(anim.playerX, anim.playerY, 'rgba(255,220,90,0.95)', 18, screenWidth, screenHeight, 1.8); - else if (anim.phase === 'caught') this._burst(anim.monsterX, anim.playerY, 'rgba(255,70,70,0.95)', 22, screenWidth, screenHeight, 2.2); + if (anim.phase === 'escape') this._burst(anim.playerX, anim.playerY, 'rgba(255,220,90,0.9)', 6, screenWidth, screenHeight, 0.7); this._epicPhase = anim.phase; } @@ -497,19 +497,14 @@ var WaitingScreenAnimator = { // Update animation state this.updatePaymentAnimation(); - // JUICE: fire a one-shot particle burst on each dramatic beat (grab / escape / death). + // JUICE: a SUBTLE, tight one-shot sparkle on the treasure grab / clean escape. Kept small and + // low-spread so it reads as a glint on the hero, not an explosion — and never sprays onto the + // wall torches. No red "death" burst (the animation's own red shockwave already covers that). if (this._payPhase !== anim.phase) { - if (anim.phase === 'grab') this._burst(anim.treasureX, anim.treasureY, 'rgba(255,220,90,0.95)', 18, screenWidth, screenHeight, 1.8); - else if (anim.phase === 'escaped') this._burst(anim.playerX, anim.playerY, 'rgba(130,255,150,0.95)', 22, screenWidth, screenHeight, 2.2); + if (anim.phase === 'grab') this._burst(anim.treasureX, anim.treasureY, 'rgba(255,220,90,0.9)', 6, screenWidth, screenHeight, 0.6); + else if (anim.phase === 'escaped') this._burst(anim.playerX, anim.playerY, 'rgba(130,255,150,0.9)', 7, screenWidth, screenHeight, 0.7); this._payPhase = anim.phase; } - const _pGone = (anim.playerX === -1); - if (_pGone && !this._payDeathBurst) { - this._burst(anim.deathX || anim.treasureX, anim.deathY || centerY, 'rgba(255,70,70,0.95)', 24, screenWidth, screenHeight, 2.4); - this._payDeathBurst = true; - } else if (!_pGone) { - this._payDeathBurst = false; - } // 💎💎💎 MEGA TREASURE - BIG pulsating with intense golden glow if (!anim.hasTreasure && anim.treasureX >= roomStartX && anim.treasureX <= roomEndX) { diff --git a/html/js/render/spGameRenderer.js b/html/js/render/spGameRenderer.js index 0b54b61..6754224 100644 --- a/html/js/render/spGameRenderer.js +++ b/html/js/render/spGameRenderer.js @@ -26,12 +26,11 @@ if (!host) { host = doc().createElement('div'); host.id = 'rk-game-host'; - // A bounded viewport CENTERED in #game-display (which is position:relative). Absolute - // positioning dodges the flex centering + sibling ROT/FX canvases; capping the height - // (vs filling the very-tall #game-display) keeps the player-centered camera on-screen - // instead of low. - host.style.cssText = 'display:none; position:absolute; top:50%; left:50%;' + - ' width:min(100%, 1000px); height:min(100%, 78vh); transform:translate(-50%,-50%);' + + // FILL #game-display exactly (inset:0). #game-display is a definite, grid-bounded height + // (the .container is height:100vh; overflow:hidden), so filling it gives the camera + // reliable clientWidth/clientHeight every frame. The earlier `min(78vh)` + translate(-50%) + // centering could resolve to a wrong/transient size, stranding the view in a top band. + host.style.cssText = 'display:none; position:absolute; inset:0;' + ' overflow:hidden; background:#0a0c0f; z-index:6; touch-action:none; cursor:grab;'; gd.appendChild(host); } diff --git a/html/js/render/tileRenderer.js b/html/js/render/tileRenderer.js index 3d4b266..d4bf716 100644 --- a/html/js/render/tileRenderer.js +++ b/html/js/render/tileRenderer.js @@ -117,13 +117,11 @@ ctx.fillStyle = bdef.color || def.color; ctx.fillRect(px, py, cell, cell); } - // Fire fixtures (torch/hearth) carry a sprite — draw the sconce/torch tile over - // its base so it reads as a mounted FIXTURE, not a bare procedural flame; RK.fx - // then animates the flame + glow on top. Hazards (lava/poison/spikes) have no sprite. - if (def.fx === 'fire' && useAtlas) { - var fco = pickVariant(tmap[kind], x, y); - if (fco) atlas.draw(ctx, fco[0], fco[1], px, py, cell); - } + // Fire fixtures draw ONLY their base (wall for a dungeon torch) here; RK.fx + // paints the animated flame + warm glow centered on the cell in the flicker + // loop. We deliberately skip the pack's torch SPRITE — several sheets place it + // off-center / rotated, which read as misaligned; the procedural flame on a wall + // base is a clean wall-mounted torch that looks right in every pack. applyCellLight(ctx, scene, x, y, px, py, cell); continue; }