Simplify wave.html to standalone preview; add SVG export pipeline#2
Open
jdunk4 wants to merge 5 commits into
Open
Simplify wave.html to standalone preview; add SVG export pipeline#2jdunk4 wants to merge 5 commits into
jdunk4 wants to merge 5 commits into
Conversation
Pre-mint task #1 from NFT_MANIFEST.md. Bundles the same maze generation + top-down SVG renderer the in-page wave preview uses into a Node CLI so we can produce the source-of-truth SVG bytes for on-chain (SSTORE2) storage and per-NFT metadata in one shot. - src/mazeSvg.js: extracted pure SVG renderer (renderMazeSVG + hazardForChapter), no DOM / no globals — safe for Node and for the browser preview to share. - scripts/export-maze-svgs.mjs: ESM CLI with --start/--end/--out; defaults to 1..1024 → dist/svgs/{N}.svg. Sets the same standalone EG flags wavePreview uses (S.endlessGlyphs=true, endlessChapterMode=false) before generateMaze so the standalone hazard distribution kicks in. Reports per-50 progress, total bytes, max wave size, and slow-wave timings. - package.json: `npm run export-svgs` script. - .gitignore: ignore dist/ (vite build output + SVG batch). wavePreview.js untouched — its inlined renderer stays as-is for this commit; can migrate to the shared module in a follow-up if we want one source of truth. Smoke-tested 1..5 and 1020..1024: ~11–14 KB per SVG, valid markup, no crashes at the upper bound.
Strip every DOM block the wave-preview path doesn't render: title / sign-in / SSO / mode-cards / armory / HUD / inventory / boss-bar / wave-banner / objective / mobile controls / keyboard-hint cheatsheet / gameover / phone-ring / glyphs-player-modal / matrix rain backdrop. All shared-module DOM queries against these IDs (#title, #loading, #hud-top, #matrix-dive, #initiate-protocol, #hyperdrive-overlay) are already null-guarded in endlessGlyphs.js, so removing the elements is a no-op for the runtime. Keep: importmap, the __WAVE_PREVIEW_MODE flag, #game canvas slot, the wave-engine.js script tag. Inline the minimal CSS the page needs so styles.css's title-screen/HUD rules don't fight the canvas mount. Built clean — index.html bundle unchanged, dist/wave.html drops from ~40 KB to 2.24 KB.
`npm run compress-svgs` reads nft-build/svgs/{N}.svg and writes
nft-build/svgs.deflate/{N}.bin — raw DEFLATE bytes (RFC 1951, no
gzip/zlib wrapper) sized for an on-chain inflate() call inside
GlyphsNFT.sol's tokenURI. Also reports a gzip variant for comparison
since the gzip wrapper is 18B/file × 1024 = 18.4 KB of pure overhead
we don't want to pay on-chain.
Also move the SVG export default from dist/svgs to nft-build/svgs
since `vite build` empties dist/, which wipes the SVGs between an
export run and the contract pipeline. nft-build/ is gitignored
(large generated artifact, regenerated on demand).
Pre-existing bug in the slim wave-engine entry: main.js's updateCamera() was the only place that read S.endlessTopDown and lerped the camera to (0, 92, 12) — the high vantage point that frames the whole maze. wave-engine.js's render loop never ported that logic, so wave.html?wave=N played from the chase camera (CAMERA_OFFSET, low angle) and most of the maze was cropped out of frame. Mirror main.js:updateCamera here. Top-down branch when S.endlessTopDown is true; chase fallback so the camera doesn't strand between waves (victory dissolve resets the flag). +500B in the wave bundle.
Camera fix from b6e489f isn't visibly applying for the user. Add a one-shot console.log on first top-down activation and on first chase fallback so we can tell which branch is firing. Will revert once the underlying issue is found.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
meebit-shooter | 615add1 | Commit Preview URL Branch Preview URL |
May 10 2026, 12:54 AM |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR strips
wave.htmldown to a minimal standalone preview page for Endless Glyphs mazes, removing all game UI chrome (title screen, HUD, overlays, SSO, armory). It also introduces an offline batch export pipeline for generating and compressing the 1024 wave SVGs that will be stored on-chain and surfaced via NFT metadata.Key Changes
wave.html Refactor
<head>with theme color and favicon; single<div id="game">mount point for Three.js canvas<style>block with baseline CSS (black fullscreen, canvas sizing) so the preview works without relying onstyles.cssgame layout rulesNew SVG Export Scripts
scripts/export-maze-svgs.mjs: Generates all 1024 Endless Glyphs wave SVGs offline using the samegenerateMaze()+renderMazeSVG()pipeline as the in-game preview. Outputs self-contained SVG files tonft-build/svgs/. Supports--start,--end,--out, and--quietflags for batch control.scripts/compress-svgs.mjs: DEFLATE-compresses each SVG (RFC 1951 raw format, no gzip wrapper) for on-chain storage via Solidityinflate(). Produces.binfiles innft-build/svgs.deflate/. Also generates gzip variants for comparison. Reports compression ratios and per-wave statistics.New SVG Renderer Module
src/mazeSvg.js: Pure functionrenderMazeSVG(maze, accent)that converts maze data to a self-contained SVG string. Renders walls, mining blocks, chapter-specific hazards (lasers, spikes, springs, arrows, warps), singularities, glyphs, and spawn point. No DOM or globals—safe to run in Node.js. IncludeshazardForChapter()helper documenting the 50-wave color bands and their hazard assignments.wave-engine.js Camera Update
updateCamera(dt)function that switches between top-down (for Endless Glyphs preview) and chase camera (fallback). RespectsS.endlessTopDownflag set byendlessGlyphs.jsto position camera at (0, 92, 12) for full maze visibility.CAMERA_OFFSETfromscene.jsfor consistency.Build Configuration
npm run export-svgsandnpm run compress-svgsscripts topackage.json.gitignoreto excludenft-build/directory (generated artifacts)Implementation Details
mazeGenerator,glyphsSpectrum,mazeSvg, andstate.jsS.endlessGlyphs = trueandS.endlessChapterMode = falsein the export script, matching the gate used inmazeGenerator.jsfor hazard distributionhttps://claude.ai/code/session_01F7dnKPcAUk9EBq7QKC3mz2