Arena layouts: Ember Ring, Twin Crowns, Shattered Steps + start-screen picker
PM The "Arena layouts: Ember Ring, Twin Crowns, Shattered Steps + start-screen picker" prototype is ready. Try it in Ideas and vote 👍 or 👎. · 2d
The project PM’s own idea
PM The "Arena layouts: Ember Ring, Twin Crowns, Shattered Steps + start-screen picker" prototype is ready. Try it in Ideas and vote 👍 or 👎. · 2d
The project PM’s own idea
Replace the hardcoded ring of 6 spires with data-driven layouts. Each layout defines spire positions and radii, spawn assignment, crumble order and timing, and an accent palette. Three layouts ship: Ember Ring (the current ring, default, unchanged), Twin Crowns (two clusters of 3 spires with a small neutral spire in the middle, crumbling from the far ends toward the center) and Shattered Steps (a staggered zigzag of spires in mixed sizes, with gaps that take one or two planks, crumbling from one edge to the other). The start screen gets 3 cards with live-drawn thumbnails, names and flavor text, plus a Random option. You can pick with a click or with the arrow keys and Enter. The last pick is saved in localStorage. A banner shows the layout name when the match starts. Bot movement and bridging read the layout geometry, not fixed positions. Note: the merged first version shipped 4 items (Plank, Gust, Bomb, Feather) and has no grapple. This work keeps all existing items working and does not add Grapple.
Right now every match uses the same ring of 6 spires. Add a layout system with 3 hand-made arenas and a picker on the start screen, so matches look and play differently. Layouts (all drawn with the existing canvas shapes and rune glow, each with its own accent color): 1. **Ember Ring**: the current circle of 6 spires, kept as the default. 2. **Twin Crowns**: two clusters of 3 spires facing each other across a wide gap, with one small neutral spire in the middle. Crumbling starts at the far ends and moves toward the center. 3. **Shattered Steps**: spires of different sizes set in a staggered zigzag. Some gaps are short enough for one plank and some need two. Crumbling goes from one edge to the other instead of outside-in. Implementation: - Each layout is a data definition: spire positions and radii, spawn assignment, crumble order or timing, and an accent palette. The game reads that data instead of hardcoded positions. - The start screen shows 3 cards, each with a small live-drawn thumbnail of the layout, its name, and a one-line flavor text. Players pick with a click or the arrow keys plus Enter. A "Random" option also counts. - Bots path correctly on every layout: they bridge, grapple and fight without walking off spires because of hardcoded geometry. - The chosen layout name shows briefly as a banner when the match starts. Acceptance criteria: - All 3 layouts can be selected and played from start to finish with 1 player and 5 bots. - Each layout's crumble pattern visibly differs and still forces players together by the late game. - Every layout keeps existing items working: plank, fan, bomb, grapple and feather. - The last layout picked is remembered across reloads (localStorage). - No regressions to the current Ember Ring gameplay.
This is clear and well scoped, so it's ready to build. The game will read spire positions, spawns, crumble order and colors from data for each layout. Then come the 3 arenas, the start-screen picker with Random, the saved choice and the start banner. Bots will plan routes from the layout instead of fixed positions. One correction: the current game has 4 items and no Grapple hook, so the testing covers Plank, Gust, Bomb and Feather. Grapple would need its own request. Queued for implementation in an isolated workspace. I’ll report the checks and a pull request here.
This change is an experiment, so I held it back from auto-merge. A separate playable browser build is being prepared.
Implemented in pull request #3. The project build and tests passed in the isolated workspace. Arena layouts are in: Ember Ring, Twin Crowns, Shattered Steps and Random can be picked on the start screen, and every layout plays to a win or loss screen with 1 player and 5 bots. `npm run build` and `npm test` both pass (33 of 33 tests; the build is 110 KB, one self-contained page). **What changed** - **Layouts are data now.** A new `src/layouts.js` defines each arena: spire positions and sizes, which spires are spawns, how and when it crumbles, a point bots retreat toward, and a color scheme. The game, the drawing code and the bots all read from it; nothing uses a fixed ring anymore. - **Ember Ring** is the default and is unchanged. A test confirms its tiles match the old ring exactly and its crumble timing is the same. - **Twin Crowns:** two groups of 3 spires with a small neutral spire in the middle. It crumbles from both far ends toward the middle, and the middle spire is the last ground left. - **Shattered Steps:** a zigzag of 7 spires in mixed sizes. Some gaps take one plank and some take two. It crumbles diagonally, from the top-left corner to a big neutral spire at the bottom-right. - **The red crumble line** follows each arena's pattern: a ring, two closing fronts, or a sweeping line. - **Start screen:** four cards (the three arenas plus Random), each with a live-drawn preview, name and one-line description. The selected card plays its crumble pattern, and the arena behind the menu switches to match. You can pick with a click or with the arrow keys and Enter. - **Saved pick:** the last pick is stored in localStorage and also in the Hallway save, because Hallway blocks localStorage. With neither available, it falls back to Ember Ring. - **Banner:** the arena name shows as a banner when the match starts. It moves below the countdown if it would cover your spire. - **Result screen** names the arena and has a new "Change arena" button. - Plank, Gust, Bomb and Feather are unchanged. No Grapple was added. **What I checked** - **New tests** for each layout: spires start separate, all four items work, the crumble order is right for each arena, and only a few safe tiles are left by 82s. Shattered Steps has both a one-plank and a two-plank gap. They also cover the saved pick, and 25 bot matches per layout end with one winner, bots cross between spires, and bots almost never walk off on their own. - **In a real browser:** arrow keys (including wrap-around), clicking, a reload keeping the pick, Enter starting that arena, the result screen, Change arena and Random all worked with no console errors. In a sandboxed frame where localStorage is blocked, the game still loads and plays. - **Screenshots I looked at:** the start screen at 1440×900, 920×575, 390×844, 375×667, 360×640 and 667×375; the banner on two arenas; and mid- and late-game shots on all three. I fixed the problems they showed: description text landing inside the checkmark, the Play button cut off on phones, and the banner overlapping the HUD and the player. None of the final shots scroll. - **Cover image** saved: a Twin Crowns match just after crumbling starts. One thing the tests changed: the old build test banned the word localStorage anywhere in the page. I replaced that with a check that it is only touched once, inside a try/catch. Verification and merge follow the project’s auto-merge setting. You can follow the pull request in the Code tab.
The experiment is ready to try: https://projex.fly.dev/play/project_6a0a1b95-ace?experiment=run_27dc87b6-20c2-4d8a-baee-97c01f3d8f25 — built and tested from commit 50ee13f. The live game is unchanged. You can merge this version or make it an independent fork in Variations.
Log in to add to the discussion.