// SP game render bridge (RK.SPGame) — renders the single-player DUNGEON through the render kit // (Tiled / ASCII / Iso / 3D + unlocked packs) instead of the legacy ROT display, so a pack you // bought applies in actual gameplay, not just the tavern. It mounts a renderer in a dedicated host // inside #game-display and hides the legacy ROT canvases while a game is live; the retro splash / // win / lose text screens still use ROT. If anything here is unavailable it returns false and the // caller falls back to the legacy RenderEngine, so the live game can never hard-break. (function (root) { 'use strict'; var RK = root.RK = root.RK || {}; var SP = RK.SPGame = RK.SPGame || {}; SP._renderer = null; SP._mode = null; SP._live = false; function doc() { return root.document; } function gameDisplay() { return doc() && doc().getElementById('game-display'); } // A dedicated, SELF-SIZING child host so the RK canvas doesn't collide with the ROT canvas and // doesn't depend on the ROT canvas for its dimensions (it's an aspect-ratio viewport the camera // transform is clipped to). function rkHost() { var gd = gameDisplay(); if (!gd) return null; var host = doc().getElementById('rk-game-host'); if (!host) { host = doc().createElement('div'); host.id = 'rk-game-host'; // 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. // Pure-black background so the area BEYOND the map edge is the SAME black as an // unexplored ('dark') in-bounds tile — otherwise the shade difference outlines the map. host.style.cssText = 'display:none; position:absolute; inset:0;' + ' overflow:hidden; background:#000; z-index:6; touch-action:none; cursor:grab;'; gd.appendChild(host); } return host; } SP.available = function () { return !!(RK.createRenderer && RK.sceneFromGameState && gameDisplay()); }; SP.mode = function () { if (!SP._mode) { var m = (RK.loadMode && RK.loadMode('tiles')) || 'tiles'; SP._mode = (RK.canUseMode && !RK.canUseMode(m)) ? 'tiles' : m; } return SP._mode; }; SP.setMode = function (mode) { if (RK.canUseMode && !RK.canUseMode(mode)) return false; if (SP._mode !== mode) SP._zoom = null; // let the new projection use its legible default SP._mode = mode; if (RK.saveMode) RK.saveMode(mode); SP._destroyRenderer(); if (SP._live && SP._lastState) SP.render(SP._lastState, SP._lastOpts); return true; }; // Re-mount after a pack switch (same mode, new active pack/assets). SP.refreshPack = function () { SP._destroyRenderer(); if (SP._live && SP._lastState) SP.render(SP._lastState, SP._lastOpts); }; SP._destroyRenderer = function () { if (SP._renderer && SP._renderer.destroy) { try { SP._renderer.destroy(); } catch (_) {} } SP._renderer = null; }; SP._setZoom = function (next) { SP._zoom = Math.max(0.4, Math.min(4, Number(next) || SP._defaultZoom())); var readout = doc() && doc().getElementById('rk-sp-camera-zoom'); if (readout) readout.textContent = Math.round(SP._zoom * 100) + '%'; SP._applyCamera(); }; SP._mountCameraControls = function (host) { if (!host || host._rkCameraControls || !doc()) return; var controls = doc().createElement('div'); controls.id = 'rk-sp-camera-controls'; controls.className = 'rk-camera-controls'; controls.setAttribute('aria-label', 'Dungeon camera controls'); controls.style.cssText = 'position:absolute;right:10px;bottom:10px;z-index:20;display:flex;' + 'align-items:center;gap:4px;padding:4px;background:rgba(4,7,10,.82);border:1px solid rgba(255,255,255,.2);' + 'border-radius:7px;box-shadow:0 4px 18px rgba(0,0,0,.45);font:12px monospace;'; function addButton(label, title, action) { var b = doc().createElement('button'); b.type = 'button'; b.textContent = label; b.title = title; b.setAttribute('aria-label', title); b.style.cssText = 'min-width:30px;height:28px;padding:0 7px;background:#151b22;color:#e5e7eb;' + 'border:1px solid #3b4552;border-radius:4px;cursor:pointer;font:inherit;'; b.addEventListener('click', function (e) { e.stopPropagation(); action(); }); controls.appendChild(b); } addButton('−', 'Zoom out', function () { SP._setZoom(((SP._zoom != null) ? SP._zoom : SP._defaultZoom()) / 1.18); }); var readout = doc().createElement('span'); readout.id = 'rk-sp-camera-zoom'; readout.style.cssText = 'min-width:42px;text-align:center;color:#a7f3d0;'; controls.appendChild(readout); addButton('+', 'Zoom in', function () { SP._setZoom(((SP._zoom != null) ? SP._zoom : SP._defaultZoom()) * 1.18); }); addButton('⌂', 'Reset camera', function () { SP._zoom = null; SP._camX = null; SP._setZoom(SP._defaultZoom()); }); host.appendChild(controls); host._rkCameraControls = controls; readout.textContent = Math.round(((SP._zoom != null) ? SP._zoom : SP._defaultZoom()) * 100) + '%'; }; SP._ensureRenderer = function () { if (SP._renderer) return SP._renderer; var host = rkHost(); if (!host || !RK.createRenderer) return null; var mode = SP.mode(); // 3D needs THREE, lazy-loaded from a CDN. The sync createRenderer() silently returns a Tiled // renderer when THREE isn't loaded yet ("picked 3D, got original"). Kick off the load and // re-mount as real 3D once it's ready; meanwhile we render Tiled so the screen isn't blank. if (mode === '3d' && RK.ensureThree && RK.threeReady && !RK.threeReady()) { if (!SP._threePending) { SP._threePending = true; RK.ensureThree(function (ok) { SP._threePending = false; if (ok && SP._live && SP.mode() === '3d') { SP._destroyRenderer(); if (SP._lastState) SP.render(SP._lastState, SP._lastOpts); } }); } } SP._renderer = RK.createRenderer(mode, host, { cell: 24 }); // The camera owns the canvas transform (centre on the player), so position it absolutely // and let it overflow — do NOT use RK.attachZoom (it fights this transform). if (SP._renderer && SP._renderer.canvas) { var c = SP._renderer.canvas; c.style.position = 'absolute'; c.style.top = '0'; c.style.left = '0'; // Beat the `.rotdis canvas { max-width/height:100%; object-fit:contain }` rules (meant for // the legacy ROT canvas) so the render-kit buffer maps 1:1 to the element and the CAMERA // transform is the SOLE controller of scale/position. WITHOUT the max-height/object-fit // override, a canvas TALLER than the host got object-fit-shrunk and the camera translate — // computed in buffer space — pushed the player far off-screen (iso went fully BLACK; tiled's // shorter canvas usually fit the host so it escaped the bug). c.style.setProperty('max-width', 'none', 'important'); c.style.setProperty('max-height', 'none', 'important'); c.style.setProperty('object-fit', 'fill', 'important'); c.style.setProperty('image-rendering', 'pixelated', 'important'); } if (!host._rkZoomBound) { host._rkZoomBound = true; host.addEventListener('wheel', function (ev) { ev.preventDefault(); // Base the step on the CURRENT effective zoom (mode-aware default if not yet set), // NOT a hardcoded 1.7 — otherwise the first scroll on iso (default 1.0) jumped up to // 1.7 and BOTH directions read as "zoom in". var base = (SP._zoom != null) ? SP._zoom : SP._defaultZoom(); SP._setZoom(base * Math.exp(-ev.deltaY * 0.0015)); }, { passive: false }); host.addEventListener('dblclick', function (ev) { if (ev.target && ev.target.closest && ev.target.closest('.rk-camera-controls')) return; SP._zoom = null; SP._camX = null; SP._setZoom(SP._defaultZoom()); }); var points = {}, pinchDistance = null; host.addEventListener('pointerdown', function (ev) { if (ev.target && ev.target.closest && ev.target.closest('.rk-camera-controls')) return; points[ev.pointerId] = { x: ev.clientX, y: ev.clientY }; try { host.setPointerCapture(ev.pointerId); } catch (_) {} }); host.addEventListener('pointermove', function (ev) { if (!points[ev.pointerId]) return; points[ev.pointerId] = { x: ev.clientX, y: ev.clientY }; var ids = Object.keys(points); if (ids.length < 2) return; var a = points[ids[0]], b = points[ids[1]]; var distance = Math.hypot(a.x - b.x, a.y - b.y); if (pinchDistance) SP._setZoom(((SP._zoom != null) ? SP._zoom : SP._defaultZoom()) * (distance / pinchDistance)); pinchDistance = distance; }); function release(ev) { delete points[ev.pointerId]; pinchDistance = null; } host.addEventListener('pointerup', release); host.addEventListener('pointercancel', release); } SP._mountCameraControls(host); return SP._renderer; }; // Mode-aware default zoom: iso tiles are large (84px) so they want less magnification than the // small tiled/ascii cells (~24px). SP._defaultZoom = function () { if (SP._renderer && SP._renderer.name === 'iso') return 1.0; if (SP._renderer && SP._renderer.name === '3d') return 1.05; return 1.7; }; // Centre the (whole-scene) canvas on the player via a CSS transform, clipped to the host — // renderer-agnostic (works for tiled / iso / 3d, each of which reports its own focusPoint). SP._applyCamera = function () { var r = SP._renderer; var host = doc() && doc().getElementById('rk-game-host'); if (!r || !r.canvas || !host) return; // The 3D renderer fills the host itself (setSize) and its OWN THREE camera follows the // player — so DON'T apply a CSS transform (it would double-transform the WebGL view). if (r.name === '3d') { if (r.setZoom) r.setZoom((SP._zoom != null) ? SP._zoom : SP._defaultZoom()); r.canvas.style.transform = 'none'; r.canvas.style.left = '0'; r.canvas.style.top = '0'; return; } var scale = (SP._zoom != null) ? SP._zoom : SP._defaultZoom(); var fp = r.focusPoint; // ROBUSTNESS: if the renderer hasn't reported a focus this frame — a race at game start, or a // camera tick reading a just-(re)created renderer instance before its first render — derive the // focus straight from the last known player cell (tiled coords). Without this the camera falls // back to a scale-only transform that pins the whole level to the top-left corner. if (!fp && (r.name === 'tiles' || r.name === 'ascii') && SP._lastState && SP._lastState.player && typeof SP._lastState.player.x === 'number') { var _c = r.cell || 24; fp = { x: (SP._lastState.player.x + 0.5) * _c, y: (SP._lastState.player.y + 0.5) * _c }; } r.canvas.style.transformOrigin = '0 0'; if (!fp) { r.canvas.style.transform = 'scale(' + scale + ')'; return; } var w = host.clientWidth || host.offsetWidth || 640, h = host.clientHeight || host.offsetHeight || 400; var tx = w / 2 - fp.x * scale, ty = h / 2 - fp.y * scale; // Smooth follow: glide toward the target so single steps aren't jerky; SNAP on a big jump // (level-change teleport / a stale-then-updated focus) rather than slowly panning the map. if (SP._camX == null || Math.abs(tx - SP._camX) > w || Math.abs(ty - SP._camY) > h) { SP._camX = tx; SP._camY = ty; } else { SP._camX += (tx - SP._camX) * 0.3; SP._camY += (ty - SP._camY) * 0.3; } r.canvas.style.transform = 'translate(' + SP._camX + 'px,' + SP._camY + 'px) scale(' + scale + ')'; }; function toggleLegacy(hide) { var gd = gameDisplay(); if (!gd) return; var kids = gd.children; for (var i = 0; i < kids.length; i++) { if (kids[i].id === 'rk-game-host') continue; kids[i].style.display = hide ? 'none' : ''; } } // Show the render-kit view (hide the ROT splash canvases). Call on game start. SP.show = function () { if (!SP.available()) return false; var host = rkHost(); if (!host) return false; host.style.display = 'block'; toggleLegacy(true); SP._live = true; SP._camX = null; // snap-center on the first frame of a new game SP._startCameraLoop(); return true; }; // Re-apply the camera every frame while live — robust against the renderer resizing its canvas // or a transient focusPoint, which was making the view snap to the corner mid-run. SP._startCameraLoop = function () { if (SP._camRaf != null) return; function tick() { if (!SP._live) { SP._camRaf = null; return; } SP._applyCamera(); SP._camRaf = root.requestAnimationFrame(tick); } SP._camRaf = root.requestAnimationFrame(tick); }; // Back to the ROT view (splash / win / lose). Call on game end. SP.hide = function () { SP._live = false; SP._destroyRenderer(); var host = doc() && doc().getElementById('rk-game-host'); if (host) host.style.display = 'none'; toggleLegacy(false); }; // Build the Scene from the SP client render-state and draw it. Returns true if it rendered // (caller then skips the legacy renderer). Non-destructive on failure. SP.render = function (clientState, opts) { if (!SP._live || !SP.available()) return false; var r = SP._ensureRenderer(); if (!r) return false; opts = opts || {}; SP._lastState = clientState; SP._lastOpts = opts; try { var scene = RK.sceneFromGameState(clientState, { cryptoType: opts.cryptoType, playerAppearance: opts.playerAppearance, isSpectating: opts.isSpectating }); r.render(scene); SP._applyCamera(); return true; } catch (e) { if (root.console) console.warn('SPGame render failed; falling back to legacy:', e && e.message); return false; } }; if (typeof module !== 'undefined' && module.exports) module.exports = SP; })(typeof window !== 'undefined' ? window : this);