Build Game Worlds
One Level at a Time

Add a level editor to this side-scrolling platformer game. Note: Do not modify the game’s existing core mechanics (movement, jumping, collision, physics, etc.) — only add the editor features on top of them. Top Toolbar 1. Play/Edit toggle button: A green Play button enters play mode; in play mode, an Edit button returns to edit mode 2. Three editing tools (mutually exclusive selection): Place (place tiles/entities), Erase (erase), Pan (drag canvas) a. Auto-switch rule: Clicking any entity or terrain in the asset panel automatically switches to the Place tool b. Tile auto-computation rule: If the game has logic that auto-computes tile left-cap/middle/right-cap edge sprites, preserve it — do not expose every individual tile variant in the asset panel 3. Save to Game button: Serializes all current level data to JSON and opens a modal displaying copyable JSON text 4. Export Levels button: Exports the current level or all levels as JSON and opens a modal displaying copyable JSON text 5. Import Levels button: Opens a modal with a paste area; after pasting JSON, appends the levels to the level list Level Tab Bar 6. Multi-level tabs: a. Single-click a tab: Switch to that level b. Double-click a tab: Rename (opens an input dialog) c. × delete button: Opens a confirmation dialog; upon confirmation, deletes the level; after deletion, auto-switches to the next level; if the last level was deleted, switches to the previous one; disables the delete button when only one level remains d. New level button: Creates a blank level pre-populated with a full row of ground tiles at the bottom + Player Start on the left + Goal Flag on the right; auto-switches to the new level after creation 7. Tabs are drag-sortable; sort order affects editing order, play order, and export order Event Isolation and Layout Rules 8. The editor UI layer must stop event propagation to the canvas layer (to prevent accidental edits), but internal UI interactions such as button clicks and tab switches must work normally 9. The editor UI layer must not obscure the canvas’s editable area; in edit mode, the canvas automatically shrinks into the bottom-right remaining area: a. Left side: reserve space for the asset panel b. Top: reserve space for the toolbar and level tab bar 10. Camera reset rules: a. When switching from Play → Edit mode: First complete the canvas shrink layout, then reset the camera to the bottom-left corner based on the actual viewport dimensions after shrinking b. When switching level tabs: Reset the camera to the bottom-left corner c. The following actions do NOT trigger camera reset: switching tools, switching assets in the asset panel, place/erase operations, Pan canvas dragging Left Asset Panel 11. Auto-extract game assets: Scan all placeable assets already in the game and auto-categorize them: a. Terrain: All blocks and platforms that form the level structure b. Entities: All interactive game objects (enemies, NPCs, collectibles, mechanisms, traps, goal markers, etc.) c. Decoration (optional): Background objects and purely visual elements that do not affect gameplay d. If the game already has auto-edge-tiling or autotile logic, keep those internal variants in the runtime logic — do not expose them to the editor user 12. Special asset markers: a. Player Start: Player spawn point (only one per level) b. Goal: Level completion target / endpoint (only one per level) 13. Panel display: Each asset shows a thumbnail icon and name; clicking selects it for the Place tool; supports scrolling Canvas Operations 14. Left-click to place a tile/entity; click and hold to drag for continuous drawing 15. Coordinate conversion must correctly handle canvas offset and UI reserved space 16. Each cell can only hold one asset; occupied cells display a red × indicator and must be cleared with the Erase tool 17. Pan tool: Drag to pan the canvas without triggering any edit operations 18. In any tool mode, WASD or arrow keys can also move the canvas Play Mode 19. When entering Play mode, restore the canvas to its original full-screen size, clearing all edit-mode shrinking and offsets 20. Hide all editor UI; display a centered Edit button at the top, along with the level name and Previous Level / Next Level buttons 21. Reaching the Goal Flag triggers a completion overlay (level name, coin count, score) and a Next Level button; after the last level, show an “All Levels Complete” screen 22. The level list is read-only and not editable during play Data Persistence 23. In edit mode, level data is saved to localStorage in real time and persists across page refreshes 24. On new devices or after clearing cache, automatically load publishedLevels.json as the default levels 25. The JSON data format is defined by the AI; ensure data fields are consistent across the entire game Other 26. Render layer separation: Canvas for graphics, DOM for UI. All interactive DOM nodes must be created once at initialization and reused — destroying and recreating DOM nodes in the game loop is forbidden. When updating UI state, only modify properties of existing nodes such as textContent / className / disabled / style.display.