diff --git a/playground/playground.css b/playground/playground.css index 6d7740d6..8229ff5d 100644 --- a/playground/playground.css +++ b/playground/playground.css @@ -317,7 +317,7 @@ body[data-theme='dark'] .collapsible summary { text-align: center; } #drawing { - flex: 1 1 auto; + flex: 1 1 0; overflow: auto; transition: background-color 0.3s; background-color: inherit; @@ -331,7 +331,7 @@ body[data-theme='dark'] .collapsible summary { #drawing > svg { flex-shrink: 0; max-width: 100%; - width: auto; + width: 100%; height: auto; } .game-info { @@ -515,7 +515,7 @@ body[data-theme='dark'] input[type="radio"] { } #drawing { width: 100%; - flex: 1 1 auto; + flex: 1 1 0; min-height: 0; align-items: flex-start; justify-content: flex-start; diff --git a/playground/playground.js b/playground/playground.js index fcd6f472..2f724da1 100644 --- a/playground/playground.js +++ b/playground/playground.js @@ -128,18 +128,15 @@ function clearInterimRenderCache() { } function applyInterimPartialRender(gamename, maskedPartial, renderOpts) { - const preview = createEngineFromCommitted(gamename); + const preview = createEngineForView(gamename, renderOpts.perspective); if (!preview) { return; } preview.move(maskedPartial, { partial: true }); // Partial moves mutate live board/hands but do not push stack; re-loading from // serialize() would drop in-progress placement (e.g. Thricewise compound @coords). - let render = preview.render(renderOpts); - if (Array.isArray(render)) { - render = render[render.length - 1]; - } - window.localStorage.setItem("interim", JSON.stringify(render)); + const render = preview.render(renderOpts); + window.localStorage.setItem("interim", JSON.stringify(Array.isArray(render) ? render : [render])); window.localStorage.setItem( simStorage.interimPerspective, String(renderOpts.perspective ?? ""), @@ -1522,7 +1519,7 @@ function formatSingleStashItemContent(item, glyphRenderOptions) { svgid: glyphSvgId, }; const glyphSvg = renderPlaygroundStashGlyph(item.glyph, localGlyphOpts); - content += `${item.count} × ${glyphSvg}`; + content += `${item.count} × ${glyphSvg}`; if (item.movePart) { content += ` (${item.movePart})`; } @@ -2211,17 +2208,27 @@ function renderGame(...args) { displayOptionsContainer.style.display = 'block'; } - let data = null; + let interim = null; try { - data = JSON.parse(window.localStorage.getItem("interim")); + interim = JSON.parse(window.localStorage.getItem("interim")); } catch { - data = null; + interim = null; } const currentPerspective = String(getRenderPerspective(game, gamename)); const interimPerspective = window.localStorage.getItem(simStorage.interimPerspective); - if (data !== null && interimPerspective !== currentPerspective) { + if (interim !== null && interimPerspective !== currentPerspective) { clearInterimRenderCache(); - data = null; + interim = null; + } + // A move in progress pages through its own frames; paging reuses the cached ones. + let data = null; + if (interim !== null) { + if (skipFrameRefresh && currentRenderFrames && currentRenderFrames.length > 0) { + data = currentRenderFrames[currentRenderFrameIndex]; + } else { + cacheRenderFrames(interim); + data = activeRenderFrame(interim); + } } let renderOpts = playgroundRenderOpts(game, gamename);