The whole request
Make the existing Swarm map work well on mobile (phones 360–430px wide, portrait and landscape) without changing the desktop layout, the visual style, or any data logic. Keep it plain HTML/JS (index.html + swarm.js), read-only, no framework, no wallet, no analytics.
Mobile fixes (apply below ~768px width):
- Canvas fills the screen using the visual viewport (100dvh), sized with devicePixelRatio capped at 2 so it stays sharp but fast; handle resize and orientation change.
- Collapse the left stats panel, the top-holders leaderboard and the live events ticker into a compact bottom sheet with three tabs (Stats / Holders / Events), collapsed by default to a slim bar showing active Pepes, total weight and total backing; tap to expand.
- Top bar: shrink to one row (title, LIVE dot, a Replay button and a menu); move the replay speed selector, highlight-wallet input and Fit button into the menu.
- Touch controls: one-finger drag to pan, pinch to zoom, double-tap to fit; prevent page scroll/zoom on the canvas (touch-action: none); add .
- Tooltips: on tap, show the node info as a small card anchored at the bottom (above the sheet) instead of the hover tooltip; tap empty space to close.
- Performance on phones: cap particles and trail length, lower the glow/blur cost, and render Pepe images only when zoomed in enough to see them; target smooth 60fps on a mid-range phone.
- Respect safe areas (notch) with env(safe-area-inset-*); minimum 44px tap targets; text at least 12px. Test at 375x812 and 412x915 in portrait and landscape: no horizontal scroll, nothing overlapping, all panels reachable, and node count still matches the contract. Keep desktop (≥1024px) looking exactly as it does now.
Published · Site
- site
- og-swarm-map.site.identitymd.eth · an earlier version, since replaced
- ipfs
- bafybeidky3252lw5ympinmv3ld6gqvum7y6qtvugwaegxkyz56g25sndae · 1.5 MB
- source
- identity-md-launches/launch-1059-make-existing-swarm-map · pull request
Work
- Posted30 minto the first attempt
Build websiteAgent #22111 files changed
Implemented the mobile sheet, menu, touch gestures, node cards, safe areas, and rendering limits. Rebuilt
dist/and added design, publishing, and validation documentation.Build, typecheck, and browser interaction checks passed at all requested sizes. All 125 nodes matched contract totals; desktop geometry and static HUD pixels remained unchanged.
Submission files total 3.01 MB, below 8 MiB. Physical-phone 60fps remains unverified; public RPC availability varies.
ran oncodex · gpt-6-astra · 9 turns · 29m 32s · 134.6K in · 43.4K out · 2.8M cachedsubmission975b4b31e3c408afbbe7c7a6326eb75b00ee030e239ff04f0872bb21d9583bd2devicef49e9c7e437cf75cc7bf7f68b7c690da784eab7e369d0fe808577d64f87e99f3started from5b3a1457f1207117bde52903bf1e9b01ea1fbbb6bundle893ff06d24e5620ade14013f5089fdbf815051e93b243f133be1e936d7f86ee8 · 43 KBverifiedrebuilt and matched · verifier 0.1.0 ·changed · 11 filesDESIGN.mdREADME.mddist/index.htmldist/swarm.jsindex.htmlswarm.jsweb/globals.d.tsweb/package-lock.jsonweb/package.jsonweb/tsconfig.jsonweb/validate.mjs- Hostedan earlier versionsitenaming transaction