@almadar/std 16.153.0 → 16.154.0

package/behaviors/lolo/ui/game/organisms/ui-battle-board.lolo

@@ -1,6 +1,105 @@
 app ui-battle-board "1.0.0"
 "RPG-tactics battle: thin organism composing the std-tactics-board-2d frame + std-score + std-xp (kills grant xp; level-ups heal the party via a HEAL intent). Isometric shape-character theme supplied via config."
 ;; @capabilities "turn-based combat, RPG gameplay, strategy gameplay"
+
+;; ============================================================================
+;; PERSONA + USER STORIES
+;;
+;; Read these before changing anything here, and walk them end to end after.
+;; One persona: the PLAYER, commanding a four-unit party on a 16x16 isometric
+;; grid against four enemies. Status is against the CURRENT file.
+;;
+;; HOW THE GAME WORKS (the loop): select a unit -> move it (green cells) ->
+;; click it again to arm attack (red cells = adjacent enemies) -> click an
+;; adjacent enemy to strike for 3 -> End Turn -> every living enemy strikes
+;; adjacent players for 1 or steps 1 cell toward the nearest player -> repeat
+;; until one side is wiped. Kills score 10 and grant 25 xp; every 100 xp
+;; (+50 per level) levels up and heals the whole party +2.
+;; ============================================================================
+;;
+;; PLAYER — "I command my party and wipe the enemy before they wipe me."
+;;
+;;   1. I open the board and see the whole battlefield framed on screen —
+;;      terrain under every cell, my party at the south, the enemy at the
+;;      north, and the HUD showing Result/Phase/Turn/Score/XP/Lvl.
+;;        WORKS. PlayerIntent renders a game-shell with one canvas, fit: true
+;;        (fills the viewport, camera centered on the tile grid's midpoint),
+;;        projection "isometric". 16x16 all-grass tiles paint from the
+;;        assetManifest; HUD stats come from extraStats (XP, Lvl) appended to
+;;        the frame's Result/Phase/Turn/Score. Zoom is wheel/pinch, clamped
+;;        [0.05, 10] upstream in @almadar/ui useCamera; minimap on.
+;;   2. Every unit on the board is a visible character sprite with a name
+;;      label and a health bar I can read at a glance.
+;;        WORKS. draw-sprite-layer paints each unit's modelUrl anchored
+;;        "ground"; two draw-shape-layers paint the black backing + green
+;;        health fraction above it; a draw-text-layer paints the name.
+;;        Broken assets would show a magenta fallback square + a
+;;        almadar:ui:draw-sprite warn (upstream DrawSprite contract).
+;;   3. I click one of MY units and the cells it can reach light up.
+;;        WORKS. UNIT_CLICK (team "player") sets selectedUnitId, uiPhase
+;;        "selection", and validMoves = passable, unoccupied tiles within
+;;        movementRange 2 (manhattan), painted translucent green.
+;;   4. I click a lit cell and the unit moves there.
+;;        WORKS. TILE_CLICK (in bounds, within range) emits MOVE; the
+;;        grid-tactics authority re-validates (bounds/passable/unoccupied)
+;;        and writes the new position. Selection resets to "observation".
+;;   5. I click my selected unit again and adjacent enemies I can strike
+;;        light up red.
+;;        WORKS. Second UNIT_CLICK on the same id enters uiPhase "action"
+;;        and computes attackTargets = living enemies at manhattan distance
+;;        <= 1, painted translucent red.
+;;   6. I click a red-lit enemy and it takes a hit — I see the damage
+;;      number, its health bar shrinks.
+;;        WORKS. UNIT_CLICK (enemy, action phase, adjacent) emits ATTACK;
+;;        the authority subtracts attackDamage 3 and emits BURST, which
+;;        fx-particles spawns as a floating "-3" at the target (ttl 3,
+;;        decayed by FxDecay). The health-bar layer re-derives from
+;;        health/maxHealth on the shared frame.
+;;   7. I change my mind mid-selection and back out cleanly.
+;;        WORKS. The HUD's Cancel button emits CANCEL, clearing selection,
+;;        highlights, and phase (guarded on a selection existing).
+;;   8. I end my turn and the enemy takes theirs — they close in and fight
+;;      back.
+;;        WORKS. END_TURN (guarded on result "none") bumps turn and emits
+;;        AI_TURN; the authority damages every player adjacent to a living
+;;        enemy for 1, then steps each unengaged enemy 1 cell toward the
+;;        nearest living player (clamped in-bounds, passable, unoccupied).
+;;   9. When I kill an enemy I am rewarded — score ticks up, xp ticks up.
+;;        WORKS. Every authority mutation emits UNITS_CHANGED with live
+;;        survivor counts; ScoreKeeper awards (baseline - enemiesAlive) x 10,
+;;        XpKeeper the same x 25. Both are headless atoms on the shared frame.
+;;  10. When my xp crosses the threshold the party levels up and heals.
+;;        WORKS. XpKeeper at xp >= xpToNext (100, +50/level) bumps level,
+;;        raises the threshold, and emits HEAL { team: "player", amount: 2 },
+;;        which the authority applies (capped at maxHealth).
+;;  11. When the last enemy falls, I win and the game tells me.
+;;        WORKS. RoundLogic derives result from UNITS_CHANGED: enemiesAlive 0
+;;        -> "victory" (playersAlive 0 -> "defeat") and emits GAME_END; the
+;;        HUD's Result stat shows it and END_TURN is guarded shut.
+;;
+;; ASSET INVENTORY (all Kenney, served from almadar-kflow-assets.web.app)
+;;
+;;   Terrain   kenney-isometric-tiles-base/terrain/landscapeTiles_sheet
+;;             grass = landscapeTiles_000.png (all 256 cells), stone =
+;;             landscapeTiles_001.png (manifest-only, no stone tiles seeded).
+;;   Units     ui-battle-board/kenney-shape-characters/units/spritesheet_default
+;;             (board-local copy; the _shared sheet was a corrupt 49x49 file
+;;             whose atlas expects 577x577 — repaired there too)
+;;             party:  p1 Guardian  blue_body_square.png   10hp (3,12)
+;;                     p2 Scrapper  red_body_rhombus.png    8hp (2,11)
+;;                     p3 Worker    yellow_body_squircle.png 6hp (4,13)
+;;                     p4 Mender    green_body_circle.png   7hp (2,13)
+;;             enemy:  e1/e2 Guardian 10hp (12,3),(13,4)
+;;                     e3/e4 Scrapper  8hp (11,2),(13,2)
+;;   Features  ui-battle-board/kenney-cartography-pack/ui/spritesheet_default
+;;             gold_mine = mine.png at (13,1), portal = gate.png at (1,14)
+;;             (decorative; drawn from config.features).
+;;   Effects   _shared/kenney-explosion-pack/effects/spritesheet_pixelExplosion
+;;             explosion = pixelExplosion07.png (manifest effects entry).
+;;   UI chrome _shared/kenney-ui-adventure-pack/ui/uipack_rpg_sheet
+;;             panel_beige.png = game-shell background + HUD panel.
+;; ============================================================================
+
 orbital BattleBoardOrbital {
   uses Frame from "std/behaviors/std-tactics-board-2d"
   uses Score from "std/behaviors/std-score"
@@ -70,7 +169,7 @@ orbital BattleBoardOrbital {
 
   entity GameState [runtime, shared] {
     id : string!
-    units : [Unit] = [ { id: "p1", position: { x: 3, y: 12 }, x: 3, y: 12, z: 0, team: "player", health: 10, maxHealth: 10, unitType: "guardian", name: "Guardian", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "blue_body_square.png", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "p2", position: { x: 2, y: 11 }, x: 2, y: 11, z: 0, team: "player", health: 8, maxHealth: 8, unitType: "scrapper", name: "Scrapper", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "red_body_rhombus.png", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } }, { id: "p3", position: { x: 4, y: 13 }, x: 4, y: 13, z: 0, team: "player", health: 6, maxHealth: 6, unitType: "worker", name: "Worker", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "yellow_body_squircle.png", role: "npc", category: "worker", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "worker", thumbnailUrl: "" } }, { id: "p4", position: { x: 2, y: 13 }, x: 2, y: 13, z: 0, team: "player", health: 7, maxHealth: 7, unitType: "mender", name: "Mender", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "green_body_circle.png", role: "npc", category: "mender", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "mender", thumbnailUrl: "" } }, { id: "e1", position: { x: 12, y: 3 }, x: 12, y: 3, z: 0, team: "enemy", health: 10, maxHealth: 10, unitType: "guardian", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "blue_body_square.png", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "e2", position: { x: 13, y: 4 }, x: 13, y: 4, z: 0, team: "enemy", health: 10, maxHealth: 10, unitType: "guardian", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "blue_body_square.png", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "e3", position: { x: 11, y: 2 }, x: 11, y: 2, z: 0, team: "enemy", health: 8, maxHealth: 8, unitType: "scrapper", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "red_body_rhombus.png", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } }, { id: "e4", position: { x: 13, y: 2 }, x: 13, y: 2, z: 0, team: "enemy", health: 8, maxHealth: 8, unitType: "scrapper", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "red_body_rhombus.png", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } } ]
+    units : [Unit] = [ { id: "p1", position: { x: 3, y: 12 }, x: 3, y: 12, z: 0, team: "player", health: 10, maxHealth: 10, unitType: "guardian", name: "Guardian", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/guardian.svg", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "p2", position: { x: 2, y: 11 }, x: 2, y: 11, z: 0, team: "player", health: 8, maxHealth: 8, unitType: "scrapper", name: "Scrapper", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/scrapper.svg", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } }, { id: "p3", position: { x: 4, y: 13 }, x: 4, y: 13, z: 0, team: "player", health: 6, maxHealth: 6, unitType: "worker", name: "Worker", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/worker.svg", role: "npc", category: "worker", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "worker", thumbnailUrl: "" } }, { id: "p4", position: { x: 2, y: 13 }, x: 2, y: 13, z: 0, team: "player", health: 7, maxHealth: 7, unitType: "mender", name: "Mender", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/mender.svg", role: "npc", category: "mender", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "mender", thumbnailUrl: "" } }, { id: "e1", position: { x: 12, y: 3 }, x: 12, y: 3, z: 0, team: "enemy", health: 10, maxHealth: 10, unitType: "guardian", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/guardian.svg", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "e2", position: { x: 13, y: 4 }, x: 13, y: 4, z: 0, team: "enemy", health: 10, maxHealth: 10, unitType: "guardian", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/guardian.svg", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "e3", position: { x: 11, y: 2 }, x: 11, y: 2, z: 0, team: "enemy", health: 8, maxHealth: 8, unitType: "scrapper", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/scrapper.svg", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } }, { id: "e4", position: { x: 13, y: 2 }, x: 13, y: 2, z: 0, team: "enemy", health: 8, maxHealth: 8, unitType: "scrapper", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/scrapper.svg", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } } ]
     fx : [Fx] = []
     tiles : [Tile] = [ { id: "t-0-0", x: 0, y: 0, terrain: "grass", passable: true }, { id: "t-1-0", x: 1, y: 0, terrain: "grass", passable: true }, { id: "t-2-0", x: 2, y: 0, terrain: "grass", passable: true }, { id: "t-3-0", x: 3, y: 0, terrain: "grass", passable: true }, { id: "t-4-0", x: 4, y: 0, terrain: "grass", passable: true }, { id: "t-5-0", x: 5, y: 0, terrain: "grass", passable: true }, { id: "t-6-0", x: 6, y: 0, terrain: "grass", passable: true }, { id: "t-7-0", x: 7, y: 0, terrain: "grass", passable: true }, { id: "t-8-0", x: 8, y: 0, terrain: "grass", passable: true }, { id: "t-9-0", x: 9, y: 0, terrain: "grass", passable: true }, { id: "t-10-0", x: 10, y: 0, terrain: "grass", passable: true }, { id: "t-11-0", x: 11, y: 0, terrain: "grass", passable: true }, { id: "t-12-0", x: 12, y: 0, terrain: "grass", passable: true }, { id: "t-13-0", x: 13, y: 0, terrain: "grass", passable: true }, { id: "t-14-0", x: 14, y: 0, terrain: "grass", passable: true }, { id: "t-15-0", x: 15, y: 0, terrain: "grass", passable: true }, { id: "t-0-1", x: 0, y: 1, terrain: "grass", passable: true }, { id: "t-1-1", x: 1, y: 1, terrain: "grass", passable: true }, { id: "t-2-1", x: 2, y: 1, terrain: "grass", passable: true }, { id: "t-3-1", x: 3, y: 1, terrain: "grass", passable: true }, { id: "t-4-1", x: 4, y: 1, terrain: "grass", passable: true }, { id: "t-5-1", x: 5, y: 1, terrain: "grass", passable: true }, { id: "t-6-1", x: 6, y: 1, terrain: "grass", passable: true }, { id: "t-7-1", x: 7, y: 1, terrain: "grass", passable: true }, { id: "t-8-1", x: 8, y: 1, terrain: "grass", passable: true }, { id: "t-9-1", x: 9, y: 1, terrain: "grass", passable: true }, { id: "t-10-1", x: 10, y: 1, terrain: "grass", passable: true }, { id: "t-11-1", x: 11, y: 1, terrain: "grass", passable: true }, { id: "t-12-1", x: 12, y: 1, terrain: "grass", passable: true }, { id: "t-13-1", x: 13, y: 1, terrain: "grass", passable: true }, { id: "t-14-1", x: 14, y: 1, terrain: "grass", passable: true }, { id: "t-15-1", x: 15, y: 1, terrain: "grass", passable: true }, { id: "t-0-2", x: 0, y: 2, terrain: "grass", passable: true }, { id: "t-1-2", x: 1, y: 2, terrain: "grass", passable: true }, { id: "t-2-2", x: 2, y: 2, terrain: "grass", passable: true }, { id: "t-3-2", x: 3, y: 2, terrain: "grass", passable: true }, { id: "t-4-2", x: 4, y: 2, terrain: "grass", passable: true }, { id: "t-5-2", x: 5, y: 2, terrain: "grass", passable: true }, { id: "t-6-2", x: 6, y: 2, terrain: "grass", passable: true }, { id: "t-7-2", x: 7, y: 2, terrain: "grass", passable: true }, { id: "t-8-2", x: 8, y: 2, terrain: "grass", passable: true }, { id: "t-9-2", x: 9, y: 2, terrain: "grass", passable: true }, { id: "t-10-2", x: 10, y: 2, terrain: "grass", passable: true }, { id: "t-11-2", x: 11, y: 2, terrain: "grass", passable: true }, { id: "t-12-2", x: 12, y: 2, terrain: "grass", passable: true }, { id: "t-13-2", x: 13, y: 2, terrain: "grass", passable: true }, { id: "t-14-2", x: 14, y: 2, terrain: "grass", passable: true }, { id: "t-15-2", x: 15, y: 2, terrain: "grass", passable: true }, { id: "t-0-3", x: 0, y: 3, terrain: "grass", passable: true }, { id: "t-1-3", x: 1, y: 3, terrain: "grass", passable: true }, { id: "t-2-3", x: 2, y: 3, terrain: "grass", passable: true }, { id: "t-3-3", x: 3, y: 3, terrain: "grass", passable: true }, { id: "t-4-3", x: 4, y: 3, terrain: "grass", passable: true }, { id: "t-5-3", x: 5, y: 3, terrain: "grass", passable: true }, { id: "t-6-3", x: 6, y: 3, terrain: "grass", passable: true }, { id: "t-7-3", x: 7, y: 3, terrain: "grass", passable: true }, { id: "t-8-3", x: 8, y: 3, terrain: "grass", passable: true }, { id: "t-9-3", x: 9, y: 3, terrain: "grass", passable: true }, { id: "t-10-3", x: 10, y: 3, terrain: "grass", passable: true }, { id: "t-11-3", x: 11, y: 3, terrain: "grass", passable: true }, { id: "t-12-3", x: 12, y: 3, terrain: "grass", passable: true }, { id: "t-13-3", x: 13, y: 3, terrain: "grass", passable: true }, { id: "t-14-3", x: 14, y: 3, terrain: "grass", passable: true }, { id: "t-15-3", x: 15, y: 3, terrain: "grass", passable: true }, { id: "t-0-4", x: 0, y: 4, terrain: "grass", passable: true }, { id: "t-1-4", x: 1, y: 4, terrain: "grass", passable: true }, { id: "t-2-4", x: 2, y: 4, terrain: "grass", passable: true }, { id: "t-3-4", x: 3, y: 4, terrain: "grass", passable: true }, { id: "t-4-4", x: 4, y: 4, terrain: "grass", passable: true }, { id: "t-5-4", x: 5, y: 4, terrain: "grass", passable: true }, { id: "t-6-4", x: 6, y: 4, terrain: "grass", passable: true }, { id: "t-7-4", x: 7, y: 4, terrain: "grass", passable: true }, { id: "t-8-4", x: 8, y: 4, terrain: "grass", passable: true }, { id: "t-9-4", x: 9, y: 4, terrain: "grass", passable: true }, { id: "t-10-4", x: 10, y: 4, terrain: "grass", passable: true }, { id: "t-11-4", x: 11, y: 4, terrain: "grass", passable: true }, { id: "t-12-4", x: 12, y: 4, terrain: "grass", passable: true }, { id: "t-13-4", x: 13, y: 4, terrain: "grass", passable: true }, { id: "t-14-4", x: 14, y: 4, terrain: "grass", passable: true }, { id: "t-15-4", x: 15, y: 4, terrain: "grass", passable: true }, { id: "t-0-5", x: 0, y: 5, terrain: "grass", passable: true }, { id: "t-1-5", x: 1, y: 5, terrain: "grass", passable: true }, { id: "t-2-5", x: 2, y: 5, terrain: "grass", passable: true }, { id: "t-3-5", x: 3, y: 5, terrain: "grass", passable: true }, { id: "t-4-5", x: 4, y: 5, terrain: "grass", passable: true }, { id: "t-5-5", x: 5, y: 5, terrain: "grass", passable: true }, { id: "t-6-5", x: 6, y: 5, terrain: "grass", passable: true }, { id: "t-7-5", x: 7, y: 5, terrain: "grass", passable: true }, { id: "t-8-5", x: 8, y: 5, terrain: "grass", passable: true }, { id: "t-9-5", x: 9, y: 5, terrain: "grass", passable: true }, { id: "t-10-5", x: 10, y: 5, terrain: "grass", passable: true }, { id: "t-11-5", x: 11, y: 5, terrain: "grass", passable: true }, { id: "t-12-5", x: 12, y: 5, terrain: "grass", passable: true }, { id: "t-13-5", x: 13, y: 5, terrain: "grass", passable: true }, { id: "t-14-5", x: 14, y: 5, terrain: "grass", passable: true }, { id: "t-15-5", x: 15, y: 5, terrain: "grass", passable: true }, { id: "t-0-6", x: 0, y: 6, terrain: "grass", passable: true }, { id: "t-1-6", x: 1, y: 6, terrain: "grass", passable: true }, { id: "t-2-6", x: 2, y: 6, terrain: "grass", passable: true }, { id: "t-3-6", x: 3, y: 6, terrain: "grass", passable: true }, { id: "t-4-6", x: 4, y: 6, terrain: "grass", passable: true }, { id: "t-5-6", x: 5, y: 6, terrain: "grass", passable: true }, { id: "t-6-6", x: 6, y: 6, terrain: "grass", passable: true }, { id: "t-7-6", x: 7, y: 6, terrain: "grass", passable: true }, { id: "t-8-6", x: 8, y: 6, terrain: "grass", passable: true }, { id: "t-9-6", x: 9, y: 6, terrain: "grass", passable: true }, { id: "t-10-6", x: 10, y: 6, terrain: "grass", passable: true }, { id: "t-11-6", x: 11, y: 6, terrain: "grass", passable: true }, { id: "t-12-6", x: 12, y: 6, terrain: "grass", passable: true }, { id: "t-13-6", x: 13, y: 6, terrain: "grass", passable: true }, { id: "t-14-6", x: 14, y: 6, terrain: "grass", passable: true }, { id: "t-15-6", x: 15, y: 6, terrain: "grass", passable: true }, { id: "t-0-7", x: 0, y: 7, terrain: "grass", passable: true }, { id: "t-1-7", x: 1, y: 7, terrain: "grass", passable: true }, { id: "t-2-7", x: 2, y: 7, terrain: "grass", passable: true }, { id: "t-3-7", x: 3, y: 7, terrain: "grass", passable: true }, { id: "t-4-7", x: 4, y: 7, terrain: "grass", passable: true }, { id: "t-5-7", x: 5, y: 7, terrain: "grass", passable: true }, { id: "t-6-7", x: 6, y: 7, terrain: "grass", passable: true }, { id: "t-7-7", x: 7, y: 7, terrain: "grass", passable: true }, { id: "t-8-7", x: 8, y: 7, terrain: "grass", passable: true }, { id: "t-9-7", x: 9, y: 7, terrain: "grass", passable: true }, { id: "t-10-7", x: 10, y: 7, terrain: "grass", passable: true }, { id: "t-11-7", x: 11, y: 7, terrain: "grass", passable: true }, { id: "t-12-7", x: 12, y: 7, terrain: "grass", passable: true }, { id: "t-13-7", x: 13, y: 7, terrain: "grass", passable: true }, { id: "t-14-7", x: 14, y: 7, terrain: "grass", passable: true }, { id: "t-15-7", x: 15, y: 7, terrain: "grass", passable: true }, { id: "t-0-8", x: 0, y: 8, terrain: "grass", passable: true }, { id: "t-1-8", x: 1, y: 8, terrain: "grass", passable: true }, { id: "t-2-8", x: 2, y: 8, terrain: "grass", passable: true }, { id: "t-3-8", x: 3, y: 8, terrain: "grass", passable: true }, { id: "t-4-8", x: 4, y: 8, terrain: "grass", passable: true }, { id: "t-5-8", x: 5, y: 8, terrain: "grass", passable: true }, { id: "t-6-8", x: 6, y: 8, terrain: "grass", passable: true }, { id: "t-7-8", x: 7, y: 8, terrain: "grass", passable: true }, { id: "t-8-8", x: 8, y: 8, terrain: "grass", passable: true }, { id: "t-9-8", x: 9, y: 8, terrain: "grass", passable: true }, { id: "t-10-8", x: 10, y: 8, terrain: "grass", passable: true }, { id: "t-11-8", x: 11, y: 8, terrain: "grass", passable: true }, { id: "t-12-8", x: 12, y: 8, terrain: "grass", passable: true }, { id: "t-13-8", x: 13, y: 8, terrain: "grass", passable: true }, { id: "t-14-8", x: 14, y: 8, terrain: "grass", passable: true }, { id: "t-15-8", x: 15, y: 8, terrain: "grass", passable: true }, { id: "t-0-9", x: 0, y: 9, terrain: "grass", passable: true }, { id: "t-1-9", x: 1, y: 9, terrain: "grass", passable: true }, { id: "t-2-9", x: 2, y: 9, terrain: "grass", passable: true }, { id: "t-3-9", x: 3, y: 9, terrain: "grass", passable: true }, { id: "t-4-9", x: 4, y: 9, terrain: "grass", passable: true }, { id: "t-5-9", x: 5, y: 9, terrain: "grass", passable: true }, { id: "t-6-9", x: 6, y: 9, terrain: "grass", passable: true }, { id: "t-7-9", x: 7, y: 9, terrain: "grass", passable: true }, { id: "t-8-9", x: 8, y: 9, terrain: "grass", passable: true }, { id: "t-9-9", x: 9, y: 9, terrain: "grass", passable: true }, { id: "t-10-9", x: 10, y: 9, terrain: "grass", passable: true }, { id: "t-11-9", x: 11, y: 9, terrain: "grass", passable: true }, { id: "t-12-9", x: 12, y: 9, terrain: "grass", passable: true }, { id: "t-13-9", x: 13, y: 9, terrain: "grass", passable: true }, { id: "t-14-9", x: 14, y: 9, terrain: "grass", passable: true }, { id: "t-15-9", x: 15, y: 9, terrain: "grass", passable: true }, { id: "t-0-10", x: 0, y: 10, terrain: "grass", passable: true }, { id: "t-1-10", x: 1, y: 10, terrain: "grass", passable: true }, { id: "t-2-10", x: 2, y: 10, terrain: "grass", passable: true }, { id: "t-3-10", x: 3, y: 10, terrain: "grass", passable: true }, { id: "t-4-10", x: 4, y: 10, terrain: "grass", passable: true }, { id: "t-5-10", x: 5, y: 10, terrain: "grass", passable: true }, { id: "t-6-10", x: 6, y: 10, terrain: "grass", passable: true }, { id: "t-7-10", x: 7, y: 10, terrain: "grass", passable: true }, { id: "t-8-10", x: 8, y: 10, terrain: "grass", passable: true }, { id: "t-9-10", x: 9, y: 10, terrain: "grass", passable: true }, { id: "t-10-10", x: 10, y: 10, terrain: "grass", passable: true }, { id: "t-11-10", x: 11, y: 10, terrain: "grass", passable: true }, { id: "t-12-10", x: 12, y: 10, terrain: "grass", passable: true }, { id: "t-13-10", x: 13, y: 10, terrain: "grass", passable: true }, { id: "t-14-10", x: 14, y: 10, terrain: "grass", passable: true }, { id: "t-15-10", x: 15, y: 10, terrain: "grass", passable: true }, { id: "t-0-11", x: 0, y: 11, terrain: "grass", passable: true }, { id: "t-1-11", x: 1, y: 11, terrain: "grass", passable: true }, { id: "t-2-11", x: 2, y: 11, terrain: "grass", passable: true }, { id: "t-3-11", x: 3, y: 11, terrain: "grass", passable: true }, { id: "t-4-11", x: 4, y: 11, terrain: "grass", passable: true }, { id: "t-5-11", x: 5, y: 11, terrain: "grass", passable: true }, { id: "t-6-11", x: 6, y: 11, terrain: "grass", passable: true }, { id: "t-7-11", x: 7, y: 11, terrain: "grass", passable: true }, { id: "t-8-11", x: 8, y: 11, terrain: "grass", passable: true }, { id: "t-9-11", x: 9, y: 11, terrain: "grass", passable: true }, { id: "t-10-11", x: 10, y: 11, terrain: "grass", passable: true }, { id: "t-11-11", x: 11, y: 11, terrain: "grass", passable: true }, { id: "t-12-11", x: 12, y: 11, terrain: "grass", passable: true }, { id: "t-13-11", x: 13, y: 11, terrain: "grass", passable: true }, { id: "t-14-11", x: 14, y: 11, terrain: "grass", passable: true }, { id: "t-15-11", x: 15, y: 11, terrain: "grass", passable: true }, { id: "t-0-12", x: 0, y: 12, terrain: "grass", passable: true }, { id: "t-1-12", x: 1, y: 12, terrain: "grass", passable: true }, { id: "t-2-12", x: 2, y: 12, terrain: "grass", passable: true }, { id: "t-3-12", x: 3, y: 12, terrain: "grass", passable: true }, { id: "t-4-12", x: 4, y: 12, terrain: "grass", passable: true }, { id: "t-5-12", x: 5, y: 12, terrain: "grass", passable: true }, { id: "t-6-12", x: 6, y: 12, terrain: "grass", passable: true }, { id: "t-7-12", x: 7, y: 12, terrain: "grass", passable: true }, { id: "t-8-12", x: 8, y: 12, terrain: "grass", passable: true }, { id: "t-9-12", x: 9, y: 12, terrain: "grass", passable: true }, { id: "t-10-12", x: 10, y: 12, terrain: "grass", passable: true }, { id: "t-11-12", x: 11, y: 12, terrain: "grass", passable: true }, { id: "t-12-12", x: 12, y: 12, terrain: "grass", passable: true }, { id: "t-13-12", x: 13, y: 12, terrain: "grass", passable: true }, { id: "t-14-12", x: 14, y: 12, terrain: "grass", passable: true }, { id: "t-15-12", x: 15, y: 12, terrain: "grass", passable: true }, { id: "t-0-13", x: 0, y: 13, terrain: "grass", passable: true }, { id: "t-1-13", x: 1, y: 13, terrain: "grass", passable: true }, { id: "t-2-13", x: 2, y: 13, terrain: "grass", passable: true }, { id: "t-3-13", x: 3, y: 13, terrain: "grass", passable: true }, { id: "t-4-13", x: 4, y: 13, terrain: "grass", passable: true }, { id: "t-5-13", x: 5, y: 13, terrain: "grass", passable: true }, { id: "t-6-13", x: 6, y: 13, terrain: "grass", passable: true }, { id: "t-7-13", x: 7, y: 13, terrain: "grass", passable: true }, { id: "t-8-13", x: 8, y: 13, terrain: "grass", passable: true }, { id: "t-9-13", x: 9, y: 13, terrain: "grass", passable: true }, { id: "t-10-13", x: 10, y: 13, terrain: "grass", passable: true }, { id: "t-11-13", x: 11, y: 13, terrain: "grass", passable: true }, { id: "t-12-13", x: 12, y: 13, terrain: "grass", passable: true }, { id: "t-13-13", x: 13, y: 13, terrain: "grass", passable: true }, { id: "t-14-13", x: 14, y: 13, terrain: "grass", passable: true }, { id: "t-15-13", x: 15, y: 13, terrain: "grass", passable: true }, { id: "t-0-14", x: 0, y: 14, terrain: "grass", passable: true }, { id: "t-1-14", x: 1, y: 14, terrain: "grass", passable: true }, { id: "t-2-14", x: 2, y: 14, terrain: "grass", passable: true }, { id: "t-3-14", x: 3, y: 14, terrain: "grass", passable: true }, { id: "t-4-14", x: 4, y: 14, terrain: "grass", passable: true }, { id: "t-5-14", x: 5, y: 14, terrain: "grass", passable: true }, { id: "t-6-14", x: 6, y: 14, terrain: "grass", passable: true }, { id: "t-7-14", x: 7, y: 14, terrain: "grass", passable: true }, { id: "t-8-14", x: 8, y: 14, terrain: "grass", passable: true }, { id: "t-9-14", x: 9, y: 14, terrain: "grass", passable: true }, { id: "t-10-14", x: 10, y: 14, terrain: "grass", passable: true }, { id: "t-11-14", x: 11, y: 14, terrain: "grass", passable: true }, { id: "t-12-14", x: 12, y: 14, terrain: "grass", passable: true }, { id: "t-13-14", x: 13, y: 14, terrain: "grass", passable: true }, { id: "t-14-14", x: 14, y: 14, terrain: "grass", passable: true }, { id: "t-15-14", x: 15, y: 14, terrain: "grass", passable: true }, { id: "t-0-15", x: 0, y: 15, terrain: "grass", passable: true }, { id: "t-1-15", x: 1, y: 15, terrain: "grass", passable: true }, { id: "t-2-15", x: 2, y: 15, terrain: "grass", passable: true }, { id: "t-3-15", x: 3, y: 15, terrain: "grass", passable: true }, { id: "t-4-15", x: 4, y: 15, terrain: "grass", passable: true }, { id: "t-5-15", x: 5, y: 15, terrain: "grass", passable: true }, { id: "t-6-15", x: 6, y: 15, terrain: "grass", passable: true }, { id: "t-7-15", x: 7, y: 15, terrain: "grass", passable: true }, { id: "t-8-15", x: 8, y: 15, terrain: "grass", passable: true }, { id: "t-9-15", x: 9, y: 15, terrain: "grass", passable: true }, { id: "t-10-15", x: 10, y: 15, terrain: "grass", passable: true }, { id: "t-11-15", x: 11, y: 15, terrain: "grass", passable: true }, { id: "t-12-15", x: 12, y: 15, terrain: "grass", passable: true }, { id: "t-13-15", x: 13, y: 15, terrain: "grass", passable: true }, { id: "t-14-15", x: 14, y: 15, terrain: "grass", passable: true }, { id: "t-15-15", x: 15, y: 15, terrain: "grass", passable: true } ]
     result : string = "none"
@@ -93,7 +192,7 @@ orbital BattleBoardOrbital {
       gridWidth: 16
       gridHeight: 16
       attackDamage: 3
-      units: [ { id: "p1", position: { x: 3, y: 12 }, x: 3, y: 12, z: 0, team: "player", health: 10, maxHealth: 10, unitType: "guardian", name: "Guardian", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "blue_body_square.png", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "p2", position: { x: 2, y: 11 }, x: 2, y: 11, z: 0, team: "player", health: 8, maxHealth: 8, unitType: "scrapper", name: "Scrapper", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "red_body_rhombus.png", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } }, { id: "p3", position: { x: 4, y: 13 }, x: 4, y: 13, z: 0, team: "player", health: 6, maxHealth: 6, unitType: "worker", name: "Worker", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "yellow_body_squircle.png", role: "npc", category: "worker", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "worker", thumbnailUrl: "" } }, { id: "p4", position: { x: 2, y: 13 }, x: 2, y: 13, z: 0, team: "player", health: 7, maxHealth: 7, unitType: "mender", name: "Mender", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "green_body_circle.png", role: "npc", category: "mender", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "mender", thumbnailUrl: "" } }, { id: "e1", position: { x: 12, y: 3 }, x: 12, y: 3, z: 0, team: "enemy", health: 10, maxHealth: 10, unitType: "guardian", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "blue_body_square.png", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "e2", position: { x: 13, y: 4 }, x: 13, y: 4, z: 0, team: "enemy", health: 10, maxHealth: 10, unitType: "guardian", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "blue_body_square.png", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "e3", position: { x: 11, y: 2 }, x: 11, y: 2, z: 0, team: "enemy", health: 8, maxHealth: 8, unitType: "scrapper", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "red_body_rhombus.png", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } }, { id: "e4", position: { x: 13, y: 2 }, x: 13, y: 2, z: 0, team: "enemy", health: 8, maxHealth: 8, unitType: "scrapper", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "red_body_rhombus.png", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } } ]
+      units: [ { id: "p1", position: { x: 3, y: 12 }, x: 3, y: 12, z: 0, team: "player", health: 10, maxHealth: 10, unitType: "guardian", name: "Guardian", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/guardian.svg", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "p2", position: { x: 2, y: 11 }, x: 2, y: 11, z: 0, team: "player", health: 8, maxHealth: 8, unitType: "scrapper", name: "Scrapper", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/scrapper.svg", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } }, { id: "p3", position: { x: 4, y: 13 }, x: 4, y: 13, z: 0, team: "player", health: 6, maxHealth: 6, unitType: "worker", name: "Worker", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/worker.svg", role: "npc", category: "worker", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "worker", thumbnailUrl: "" } }, { id: "p4", position: { x: 2, y: 13 }, x: 2, y: 13, z: 0, team: "player", health: 7, maxHealth: 7, unitType: "mender", name: "Mender", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/mender.svg", role: "npc", category: "mender", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "mender", thumbnailUrl: "" } }, { id: "e1", position: { x: 12, y: 3 }, x: 12, y: 3, z: 0, team: "enemy", health: 10, maxHealth: 10, unitType: "guardian", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/guardian.svg", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "e2", position: { x: 13, y: 4 }, x: 13, y: 4, z: 0, team: "enemy", health: 10, maxHealth: 10, unitType: "guardian", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/guardian.svg", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" } }, { id: "e3", position: { x: 11, y: 2 }, x: 11, y: 2, z: 0, team: "enemy", health: 8, maxHealth: 8, unitType: "scrapper", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/scrapper.svg", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } }, { id: "e4", position: { x: 13, y: 2 }, x: 13, y: 2, z: 0, team: "enemy", health: 8, maxHealth: 8, unitType: "scrapper", name: "Foe", modelUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/scrapper.svg", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" } } ]
       tiles: [ { id: "t-0-0", x: 0, y: 0, terrain: "grass", passable: true }, { id: "t-1-0", x: 1, y: 0, terrain: "grass", passable: true }, { id: "t-2-0", x: 2, y: 0, terrain: "grass", passable: true }, { id: "t-3-0", x: 3, y: 0, terrain: "grass", passable: true }, { id: "t-4-0", x: 4, y: 0, terrain: "grass", passable: true }, { id: "t-5-0", x: 5, y: 0, terrain: "grass", passable: true }, { id: "t-6-0", x: 6, y: 0, terrain: "grass", passable: true }, { id: "t-7-0", x: 7, y: 0, terrain: "grass", passable: true }, { id: "t-8-0", x: 8, y: 0, terrain: "grass", passable: true }, { id: "t-9-0", x: 9, y: 0, terrain: "grass", passable: true }, { id: "t-10-0", x: 10, y: 0, terrain: "grass", passable: true }, { id: "t-11-0", x: 11, y: 0, terrain: "grass", passable: true }, { id: "t-12-0", x: 12, y: 0, terrain: "grass", passable: true }, { id: "t-13-0", x: 13, y: 0, terrain: "grass", passable: true }, { id: "t-14-0", x: 14, y: 0, terrain: "grass", passable: true }, { id: "t-15-0", x: 15, y: 0, terrain: "grass", passable: true }, { id: "t-0-1", x: 0, y: 1, terrain: "grass", passable: true }, { id: "t-1-1", x: 1, y: 1, terrain: "grass", passable: true }, { id: "t-2-1", x: 2, y: 1, terrain: "grass", passable: true }, { id: "t-3-1", x: 3, y: 1, terrain: "grass", passable: true }, { id: "t-4-1", x: 4, y: 1, terrain: "grass", passable: true }, { id: "t-5-1", x: 5, y: 1, terrain: "grass", passable: true }, { id: "t-6-1", x: 6, y: 1, terrain: "grass", passable: true }, { id: "t-7-1", x: 7, y: 1, terrain: "grass", passable: true }, { id: "t-8-1", x: 8, y: 1, terrain: "grass", passable: true }, { id: "t-9-1", x: 9, y: 1, terrain: "grass", passable: true }, { id: "t-10-1", x: 10, y: 1, terrain: "grass", passable: true }, { id: "t-11-1", x: 11, y: 1, terrain: "grass", passable: true }, { id: "t-12-1", x: 12, y: 1, terrain: "grass", passable: true }, { id: "t-13-1", x: 13, y: 1, terrain: "grass", passable: true }, { id: "t-14-1", x: 14, y: 1, terrain: "grass", passable: true }, { id: "t-15-1", x: 15, y: 1, terrain: "grass", passable: true }, { id: "t-0-2", x: 0, y: 2, terrain: "grass", passable: true }, { id: "t-1-2", x: 1, y: 2, terrain: "grass", passable: true }, { id: "t-2-2", x: 2, y: 2, terrain: "grass", passable: true }, { id: "t-3-2", x: 3, y: 2, terrain: "grass", passable: true }, { id: "t-4-2", x: 4, y: 2, terrain: "grass", passable: true }, { id: "t-5-2", x: 5, y: 2, terrain: "grass", passable: true }, { id: "t-6-2", x: 6, y: 2, terrain: "grass", passable: true }, { id: "t-7-2", x: 7, y: 2, terrain: "grass", passable: true }, { id: "t-8-2", x: 8, y: 2, terrain: "grass", passable: true }, { id: "t-9-2", x: 9, y: 2, terrain: "grass", passable: true }, { id: "t-10-2", x: 10, y: 2, terrain: "grass", passable: true }, { id: "t-11-2", x: 11, y: 2, terrain: "grass", passable: true }, { id: "t-12-2", x: 12, y: 2, terrain: "grass", passable: true }, { id: "t-13-2", x: 13, y: 2, terrain: "grass", passable: true }, { id: "t-14-2", x: 14, y: 2, terrain: "grass", passable: true }, { id: "t-15-2", x: 15, y: 2, terrain: "grass", passable: true }, { id: "t-0-3", x: 0, y: 3, terrain: "grass", passable: true }, { id: "t-1-3", x: 1, y: 3, terrain: "grass", passable: true }, { id: "t-2-3", x: 2, y: 3, terrain: "grass", passable: true }, { id: "t-3-3", x: 3, y: 3, terrain: "grass", passable: true }, { id: "t-4-3", x: 4, y: 3, terrain: "grass", passable: true }, { id: "t-5-3", x: 5, y: 3, terrain: "grass", passable: true }, { id: "t-6-3", x: 6, y: 3, terrain: "grass", passable: true }, { id: "t-7-3", x: 7, y: 3, terrain: "grass", passable: true }, { id: "t-8-3", x: 8, y: 3, terrain: "grass", passable: true }, { id: "t-9-3", x: 9, y: 3, terrain: "grass", passable: true }, { id: "t-10-3", x: 10, y: 3, terrain: "grass", passable: true }, { id: "t-11-3", x: 11, y: 3, terrain: "grass", passable: true }, { id: "t-12-3", x: 12, y: 3, terrain: "grass", passable: true }, { id: "t-13-3", x: 13, y: 3, terrain: "grass", passable: true }, { id: "t-14-3", x: 14, y: 3, terrain: "grass", passable: true }, { id: "t-15-3", x: 15, y: 3, terrain: "grass", passable: true }, { id: "t-0-4", x: 0, y: 4, terrain: "grass", passable: true }, { id: "t-1-4", x: 1, y: 4, terrain: "grass", passable: true }, { id: "t-2-4", x: 2, y: 4, terrain: "grass", passable: true }, { id: "t-3-4", x: 3, y: 4, terrain: "grass", passable: true }, { id: "t-4-4", x: 4, y: 4, terrain: "grass", passable: true }, { id: "t-5-4", x: 5, y: 4, terrain: "grass", passable: true }, { id: "t-6-4", x: 6, y: 4, terrain: "grass", passable: true }, { id: "t-7-4", x: 7, y: 4, terrain: "grass", passable: true }, { id: "t-8-4", x: 8, y: 4, terrain: "grass", passable: true }, { id: "t-9-4", x: 9, y: 4, terrain: "grass", passable: true }, { id: "t-10-4", x: 10, y: 4, terrain: "grass", passable: true }, { id: "t-11-4", x: 11, y: 4, terrain: "grass", passable: true }, { id: "t-12-4", x: 12, y: 4, terrain: "grass", passable: true }, { id: "t-13-4", x: 13, y: 4, terrain: "grass", passable: true }, { id: "t-14-4", x: 14, y: 4, terrain: "grass", passable: true }, { id: "t-15-4", x: 15, y: 4, terrain: "grass", passable: true }, { id: "t-0-5", x: 0, y: 5, terrain: "grass", passable: true }, { id: "t-1-5", x: 1, y: 5, terrain: "grass", passable: true }, { id: "t-2-5", x: 2, y: 5, terrain: "grass", passable: true }, { id: "t-3-5", x: 3, y: 5, terrain: "grass", passable: true }, { id: "t-4-5", x: 4, y: 5, terrain: "grass", passable: true }, { id: "t-5-5", x: 5, y: 5, terrain: "grass", passable: true }, { id: "t-6-5", x: 6, y: 5, terrain: "grass", passable: true }, { id: "t-7-5", x: 7, y: 5, terrain: "grass", passable: true }, { id: "t-8-5", x: 8, y: 5, terrain: "grass", passable: true }, { id: "t-9-5", x: 9, y: 5, terrain: "grass", passable: true }, { id: "t-10-5", x: 10, y: 5, terrain: "grass", passable: true }, { id: "t-11-5", x: 11, y: 5, terrain: "grass", passable: true }, { id: "t-12-5", x: 12, y: 5, terrain: "grass", passable: true }, { id: "t-13-5", x: 13, y: 5, terrain: "grass", passable: true }, { id: "t-14-5", x: 14, y: 5, terrain: "grass", passable: true }, { id: "t-15-5", x: 15, y: 5, terrain: "grass", passable: true }, { id: "t-0-6", x: 0, y: 6, terrain: "grass", passable: true }, { id: "t-1-6", x: 1, y: 6, terrain: "grass", passable: true }, { id: "t-2-6", x: 2, y: 6, terrain: "grass", passable: true }, { id: "t-3-6", x: 3, y: 6, terrain: "grass", passable: true }, { id: "t-4-6", x: 4, y: 6, terrain: "grass", passable: true }, { id: "t-5-6", x: 5, y: 6, terrain: "grass", passable: true }, { id: "t-6-6", x: 6, y: 6, terrain: "grass", passable: true }, { id: "t-7-6", x: 7, y: 6, terrain: "grass", passable: true }, { id: "t-8-6", x: 8, y: 6, terrain: "grass", passable: true }, { id: "t-9-6", x: 9, y: 6, terrain: "grass", passable: true }, { id: "t-10-6", x: 10, y: 6, terrain: "grass", passable: true }, { id: "t-11-6", x: 11, y: 6, terrain: "grass", passable: true }, { id: "t-12-6", x: 12, y: 6, terrain: "grass", passable: true }, { id: "t-13-6", x: 13, y: 6, terrain: "grass", passable: true }, { id: "t-14-6", x: 14, y: 6, terrain: "grass", passable: true }, { id: "t-15-6", x: 15, y: 6, terrain: "grass", passable: true }, { id: "t-0-7", x: 0, y: 7, terrain: "grass", passable: true }, { id: "t-1-7", x: 1, y: 7, terrain: "grass", passable: true }, { id: "t-2-7", x: 2, y: 7, terrain: "grass", passable: true }, { id: "t-3-7", x: 3, y: 7, terrain: "grass", passable: true }, { id: "t-4-7", x: 4, y: 7, terrain: "grass", passable: true }, { id: "t-5-7", x: 5, y: 7, terrain: "grass", passable: true }, { id: "t-6-7", x: 6, y: 7, terrain: "grass", passable: true }, { id: "t-7-7", x: 7, y: 7, terrain: "grass", passable: true }, { id: "t-8-7", x: 8, y: 7, terrain: "grass", passable: true }, { id: "t-9-7", x: 9, y: 7, terrain: "grass", passable: true }, { id: "t-10-7", x: 10, y: 7, terrain: "grass", passable: true }, { id: "t-11-7", x: 11, y: 7, terrain: "grass", passable: true }, { id: "t-12-7", x: 12, y: 7, terrain: "grass", passable: true }, { id: "t-13-7", x: 13, y: 7, terrain: "grass", passable: true }, { id: "t-14-7", x: 14, y: 7, terrain: "grass", passable: true }, { id: "t-15-7", x: 15, y: 7, terrain: "grass", passable: true }, { id: "t-0-8", x: 0, y: 8, terrain: "grass", passable: true }, { id: "t-1-8", x: 1, y: 8, terrain: "grass", passable: true }, { id: "t-2-8", x: 2, y: 8, terrain: "grass", passable: true }, { id: "t-3-8", x: 3, y: 8, terrain: "grass", passable: true }, { id: "t-4-8", x: 4, y: 8, terrain: "grass", passable: true }, { id: "t-5-8", x: 5, y: 8, terrain: "grass", passable: true }, { id: "t-6-8", x: 6, y: 8, terrain: "grass", passable: true }, { id: "t-7-8", x: 7, y: 8, terrain: "grass", passable: true }, { id: "t-8-8", x: 8, y: 8, terrain: "grass", passable: true }, { id: "t-9-8", x: 9, y: 8, terrain: "grass", passable: true }, { id: "t-10-8", x: 10, y: 8, terrain: "grass", passable: true }, { id: "t-11-8", x: 11, y: 8, terrain: "grass", passable: true }, { id: "t-12-8", x: 12, y: 8, terrain: "grass", passable: true }, { id: "t-13-8", x: 13, y: 8, terrain: "grass", passable: true }, { id: "t-14-8", x: 14, y: 8, terrain: "grass", passable: true }, { id: "t-15-8", x: 15, y: 8, terrain: "grass", passable: true }, { id: "t-0-9", x: 0, y: 9, terrain: "grass", passable: true }, { id: "t-1-9", x: 1, y: 9, terrain: "grass", passable: true }, { id: "t-2-9", x: 2, y: 9, terrain: "grass", passable: true }, { id: "t-3-9", x: 3, y: 9, terrain: "grass", passable: true }, { id: "t-4-9", x: 4, y: 9, terrain: "grass", passable: true }, { id: "t-5-9", x: 5, y: 9, terrain: "grass", passable: true }, { id: "t-6-9", x: 6, y: 9, terrain: "grass", passable: true }, { id: "t-7-9", x: 7, y: 9, terrain: "grass", passable: true }, { id: "t-8-9", x: 8, y: 9, terrain: "grass", passable: true }, { id: "t-9-9", x: 9, y: 9, terrain: "grass", passable: true }, { id: "t-10-9", x: 10, y: 9, terrain: "grass", passable: true }, { id: "t-11-9", x: 11, y: 9, terrain: "grass", passable: true }, { id: "t-12-9", x: 12, y: 9, terrain: "grass", passable: true }, { id: "t-13-9", x: 13, y: 9, terrain: "grass", passable: true }, { id: "t-14-9", x: 14, y: 9, terrain: "grass", passable: true }, { id: "t-15-9", x: 15, y: 9, terrain: "grass", passable: true }, { id: "t-0-10", x: 0, y: 10, terrain: "grass", passable: true }, { id: "t-1-10", x: 1, y: 10, terrain: "grass", passable: true }, { id: "t-2-10", x: 2, y: 10, terrain: "grass", passable: true }, { id: "t-3-10", x: 3, y: 10, terrain: "grass", passable: true }, { id: "t-4-10", x: 4, y: 10, terrain: "grass", passable: true }, { id: "t-5-10", x: 5, y: 10, terrain: "grass", passable: true }, { id: "t-6-10", x: 6, y: 10, terrain: "grass", passable: true }, { id: "t-7-10", x: 7, y: 10, terrain: "grass", passable: true }, { id: "t-8-10", x: 8, y: 10, terrain: "grass", passable: true }, { id: "t-9-10", x: 9, y: 10, terrain: "grass", passable: true }, { id: "t-10-10", x: 10, y: 10, terrain: "grass", passable: true }, { id: "t-11-10", x: 11, y: 10, terrain: "grass", passable: true }, { id: "t-12-10", x: 12, y: 10, terrain: "grass", passable: true }, { id: "t-13-10", x: 13, y: 10, terrain: "grass", passable: true }, { id: "t-14-10", x: 14, y: 10, terrain: "grass", passable: true }, { id: "t-15-10", x: 15, y: 10, terrain: "grass", passable: true }, { id: "t-0-11", x: 0, y: 11, terrain: "grass", passable: true }, { id: "t-1-11", x: 1, y: 11, terrain: "grass", passable: true }, { id: "t-2-11", x: 2, y: 11, terrain: "grass", passable: true }, { id: "t-3-11", x: 3, y: 11, terrain: "grass", passable: true }, { id: "t-4-11", x: 4, y: 11, terrain: "grass", passable: true }, { id: "t-5-11", x: 5, y: 11, terrain: "grass", passable: true }, { id: "t-6-11", x: 6, y: 11, terrain: "grass", passable: true }, { id: "t-7-11", x: 7, y: 11, terrain: "grass", passable: true }, { id: "t-8-11", x: 8, y: 11, terrain: "grass", passable: true }, { id: "t-9-11", x: 9, y: 11, terrain: "grass", passable: true }, { id: "t-10-11", x: 10, y: 11, terrain: "grass", passable: true }, { id: "t-11-11", x: 11, y: 11, terrain: "grass", passable: true }, { id: "t-12-11", x: 12, y: 11, terrain: "grass", passable: true }, { id: "t-13-11", x: 13, y: 11, terrain: "grass", passable: true }, { id: "t-14-11", x: 14, y: 11, terrain: "grass", passable: true }, { id: "t-15-11", x: 15, y: 11, terrain: "grass", passable: true }, { id: "t-0-12", x: 0, y: 12, terrain: "grass", passable: true }, { id: "t-1-12", x: 1, y: 12, terrain: "grass", passable: true }, { id: "t-2-12", x: 2, y: 12, terrain: "grass", passable: true }, { id: "t-3-12", x: 3, y: 12, terrain: "grass", passable: true }, { id: "t-4-12", x: 4, y: 12, terrain: "grass", passable: true }, { id: "t-5-12", x: 5, y: 12, terrain: "grass", passable: true }, { id: "t-6-12", x: 6, y: 12, terrain: "grass", passable: true }, { id: "t-7-12", x: 7, y: 12, terrain: "grass", passable: true }, { id: "t-8-12", x: 8, y: 12, terrain: "grass", passable: true }, { id: "t-9-12", x: 9, y: 12, terrain: "grass", passable: true }, { id: "t-10-12", x: 10, y: 12, terrain: "grass", passable: true }, { id: "t-11-12", x: 11, y: 12, terrain: "grass", passable: true }, { id: "t-12-12", x: 12, y: 12, terrain: "grass", passable: true }, { id: "t-13-12", x: 13, y: 12, terrain: "grass", passable: true }, { id: "t-14-12", x: 14, y: 12, terrain: "grass", passable: true }, { id: "t-15-12", x: 15, y: 12, terrain: "grass", passable: true }, { id: "t-0-13", x: 0, y: 13, terrain: "grass", passable: true }, { id: "t-1-13", x: 1, y: 13, terrain: "grass", passable: true }, { id: "t-2-13", x: 2, y: 13, terrain: "grass", passable: true }, { id: "t-3-13", x: 3, y: 13, terrain: "grass", passable: true }, { id: "t-4-13", x: 4, y: 13, terrain: "grass", passable: true }, { id: "t-5-13", x: 5, y: 13, terrain: "grass", passable: true }, { id: "t-6-13", x: 6, y: 13, terrain: "grass", passable: true }, { id: "t-7-13", x: 7, y: 13, terrain: "grass", passable: true }, { id: "t-8-13", x: 8, y: 13, terrain: "grass", passable: true }, { id: "t-9-13", x: 9, y: 13, terrain: "grass", passable: true }, { id: "t-10-13", x: 10, y: 13, terrain: "grass", passable: true }, { id: "t-11-13", x: 11, y: 13, terrain: "grass", passable: true }, { id: "t-12-13", x: 12, y: 13, terrain: "grass", passable: true }, { id: "t-13-13", x: 13, y: 13, terrain: "grass", passable: true }, { id: "t-14-13", x: 14, y: 13, terrain: "grass", passable: true }, { id: "t-15-13", x: 15, y: 13, terrain: "grass", passable: true }, { id: "t-0-14", x: 0, y: 14, terrain: "grass", passable: true }, { id: "t-1-14", x: 1, y: 14, terrain: "grass", passable: true }, { id: "t-2-14", x: 2, y: 14, terrain: "grass", passable: true }, { id: "t-3-14", x: 3, y: 14, terrain: "grass", passable: true }, { id: "t-4-14", x: 4, y: 14, terrain: "grass", passable: true }, { id: "t-5-14", x: 5, y: 14, terrain: "grass", passable: true }, { id: "t-6-14", x: 6, y: 14, terrain: "grass", passable: true }, { id: "t-7-14", x: 7, y: 14, terrain: "grass", passable: true }, { id: "t-8-14", x: 8, y: 14, terrain: "grass", passable: true }, { id: "t-9-14", x: 9, y: 14, terrain: "grass", passable: true }, { id: "t-10-14", x: 10, y: 14, terrain: "grass", passable: true }, { id: "t-11-14", x: 11, y: 14, terrain: "grass", passable: true }, { id: "t-12-14", x: 12, y: 14, terrain: "grass", passable: true }, { id: "t-13-14", x: 13, y: 14, terrain: "grass", passable: true }, { id: "t-14-14", x: 14, y: 14, terrain: "grass", passable: true }, { id: "t-15-14", x: 15, y: 14, terrain: "grass", passable: true }, { id: "t-0-15", x: 0, y: 15, terrain: "grass", passable: true }, { id: "t-1-15", x: 1, y: 15, terrain: "grass", passable: true }, { id: "t-2-15", x: 2, y: 15, terrain: "grass", passable: true }, { id: "t-3-15", x: 3, y: 15, terrain: "grass", passable: true }, { id: "t-4-15", x: 4, y: 15, terrain: "grass", passable: true }, { id: "t-5-15", x: 5, y: 15, terrain: "grass", passable: true }, { id: "t-6-15", x: 6, y: 15, terrain: "grass", passable: true }, { id: "t-7-15", x: 7, y: 15, terrain: "grass", passable: true }, { id: "t-8-15", x: 8, y: 15, terrain: "grass", passable: true }, { id: "t-9-15", x: 9, y: 15, terrain: "grass", passable: true }, { id: "t-10-15", x: 10, y: 15, terrain: "grass", passable: true }, { id: "t-11-15", x: 11, y: 15, terrain: "grass", passable: true }, { id: "t-12-15", x: 12, y: 15, terrain: "grass", passable: true }, { id: "t-13-15", x: 13, y: 15, terrain: "grass", passable: true }, { id: "t-14-15", x: 14, y: 15, terrain: "grass", passable: true }, { id: "t-15-15", x: 15, y: 15, terrain: "grass", passable: true } ]
     }
   }
@@ -114,6 +213,10 @@ orbital BattleBoardOrbital {
     config { running: true, xpPerKill: 25, startXp: 0, baseXpToNext: 100, xpToNextIncrement: 50, levelUpHeal: 2, healTeam: "player", initialEnemies: 4 }
   }
 
+  trait AnimClock = Frame.traits.AnimClock -> GameState {
+    config { frames: [] }
+  }
+
   trait Player = Frame.traits.PlayerIntent -> GameState {
     config {
       gridWidth: 16
@@ -122,13 +225,13 @@ orbital BattleBoardOrbital {
       projection: "isometric"
       showMinimap: true
       scale: 1
-      backgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-adventure-pack/ui/uipack_rpg_sheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-adventure-pack/ui/uipack_rpg_sheet.json", sprite: "panel_beige.png", role: "ui", category: "ui", animations: [], style: "adventure", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
-      hudBackgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-adventure-pack/ui/uipack_rpg_sheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-adventure-pack/ui/uipack_rpg_sheet.json", sprite: "panel_beige.png", role: "ui", category: "ui", animations: [], style: "adventure", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
+      backgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/ui/panel-frame.svg", role: "ui", category: "ui", animations: [], style: "adventure", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
+      hudBackgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/ui/panel-frame.svg", role: "ui", category: "ui", animations: [], style: "adventure", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
       extraStats: [ { label: "XP", value: @entity.xp }, { label: "Lvl", value: @entity.level } ]
-      features: [ { id: "f1", x: 13, y: 1, type: "gold_mine", assetUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-cartography-pack/ui/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-cartography-pack/ui/spritesheet_default.json", sprite: "mine.png", role: "decoration", category: "gold_mine", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "gold_mine", thumbnailUrl: "" } }, { id: "f2", x: 1, y: 14, type: "portal", assetUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-cartography-pack/ui/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-cartography-pack/ui/spritesheet_default.json", sprite: "gate.png", role: "decoration", category: "portal", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "portal", thumbnailUrl: "" } } ]
-      assetManifest: { terrains: { grass: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-isometric-tiles-base/terrain/landscapeTiles_sheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-isometric-tiles-base/terrain/landscapeTiles_sheet.json", sprite: "landscapeTiles_000.png", role: "tile", category: "grass", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "grass", thumbnailUrl: "" }, stone: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-isometric-tiles-base/terrain/landscapeTiles_sheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-isometric-tiles-base/terrain/landscapeTiles_sheet.json", sprite: "landscapeTiles_001.png", role: "tile", category: "stone", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "stone", thumbnailUrl: "" } }, units: { guardian: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "blue_body_square.png", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" }, scrapper: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "red_body_rhombus.png", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" }, worker: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "yellow_body_squircle.png", role: "npc", category: "worker", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "worker", thumbnailUrl: "" }, mender: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-shape-characters/units/spritesheet_default.json", sprite: "green_body_circle.png", role: "npc", category: "mender", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "mender", thumbnailUrl: "" } }, features: { gold_mine: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-cartography-pack/ui/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-cartography-pack/ui/spritesheet_default.json", sprite: "mine.png", role: "decoration", category: "gold_mine", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "gold_mine", thumbnailUrl: "" }, portal: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-cartography-pack/ui/spritesheet_default.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/kenney-cartography-pack/ui/spritesheet_default.json", sprite: "gate.png", role: "decoration", category: "portal", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "portal", thumbnailUrl: "" } }, effects: { explosion: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-explosion-pack/effects/spritesheet_pixelExplosion.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-explosion-pack/effects/spritesheet_pixelExplosion.json", sprite: "pixelExplosion07.png", role: "effect", category: "explosion", animations: ["static"], style: "", dimension: "2d", aspect: "8:1", name: "explosion", thumbnailUrl: "" } } }
+      features: [ { id: "f1", x: 13, y: 1, type: "gold_mine", assetUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/features/gold_mine.svg", role: "decoration", category: "gold_mine", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "gold_mine", thumbnailUrl: "" } }, { id: "f2", x: 1, y: 14, type: "portal", assetUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/features/portal.svg", role: "decoration", category: "portal", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "portal", thumbnailUrl: "" } } ]
+      assetManifest: { terrains: { grass: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/terrain/grass.svg", role: "tile", category: "grass", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "grass", thumbnailUrl: "" }, stone: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/terrain/stone.svg", role: "tile", category: "stone", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "stone", thumbnailUrl: "" } }, units: { guardian: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/guardian.svg", role: "npc", category: "guardian", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "guardian", thumbnailUrl: "" }, scrapper: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/scrapper.svg", role: "npc", category: "scrapper", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "scrapper", thumbnailUrl: "" }, worker: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/worker.svg", role: "npc", category: "worker", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "worker", thumbnailUrl: "" }, mender: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/units/mender.svg", role: "npc", category: "mender", animations: ["idle","walk","attack","hit","death"], style: "", dimension: "2d", aspect: "1:1", name: "mender", thumbnailUrl: "" } }, features: { gold_mine: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/features/gold_mine.svg", role: "decoration", category: "gold_mine", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "gold_mine", thumbnailUrl: "" }, portal: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/features/portal.svg", role: "decoration", category: "portal", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "portal", thumbnailUrl: "" } }, effects: { explosion: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/effects/explosion.svg", role: "effect", category: "explosion", animations: ["static"], style: "", dimension: "2d", aspect: "8:1", name: "explosion", thumbnailUrl: "" }, hit: { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/effects/hit.svg", role: "effect", category: "hit", animations: ["static"], style: "", dimension: "2d", aspect: "1:1", name: "hit", thumbnailUrl: "" } }, ui: { "panel-frame": { url: "https://almadar-kflow-assets.web.app/shared/ui-battle-board/svg/isometric/ui/panel-frame.svg", role: "ui", category: "ui", animations: [], style: "adventure", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" } } }
     }
   }
 
-  page "/battle-board" as BattleBoardPage -> Authority, FxDecay, RoundLogic, ScoreKeeper, XpKeeper, Player
+  page "/battle-board" as BattleBoardPage -> Authority, FxDecay, RoundLogic, ScoreKeeper, XpKeeper, Player, AnimClock
 }

package/behaviors/lolo/ui/game/organisms/ui-builder-board.lolo

@@ -53,25 +53,6 @@ orbital BuilderBoardOrbital {
   trait BuilderBoardRender -> @rebindable BuilderBoardItem [interaction, instance] {
     initial: playing
 
-    state menu {
-      START -> playing
-        (set @entity.components @config.components)
-        (set @entity.slots (array/map @config.slots (fn s (object/merge @s { options: (array/map @config.components (fn c { slotId: (object/get @s id), componentId: (object/get @c id), label: (object/get @c label), iconUrl: (object/get @c iconUrl) })) }))))
-        (set @entity.title @config.title)
-        (set @entity.description @config.description)
-        (set @entity.hint @config.hint)
-        (set @entity.attempts 0)
-        (set @entity.result "none")
-        (render-ui main {
-          type: game-shell
-          hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Attempts", value: @entity.attempts }, { label: "Status", value: @entity.result } ] }, { type: stack, direction: horizontal, gap: sm, children: [ { type: button, action: CHECK, label: "Check", variant: primary }, { type: button, action: PLAY_AGAIN, label: "Reset", variant: secondary } ] } ] }
-          children: [
-            { type: card, children: [ { type: typography, variant: h4, content: @entity.title }, { type: typography, variant: body, content: @entity.description } ] },
-            { type: card, children: [ { type: data-list, entity: @entity.slots, fields: [], gap: sm, renderItem: (fn s { type: card, children: [ { type: stack, direction: horizontal, gap: sm, justify: between, children: [ { type: typography, variant: label, content: @s.id }, { type: badge, label: @s.placedComponentId } ] }, { type: data-list, entity: @s.options, fields: [], gap: sm, renderItem: (fn opt { type: button, action: PLACE, actionPayload: { slotId: @opt.slotId, componentId: @opt.componentId }, label: @opt.label, iconAsset: @opt.iconUrl, variant: primary }) } ] }) } ] }
-          ]
-        })
-    }
-
     state playing {
       INIT -> playing
         (set @entity.components @config.components)
@@ -125,8 +106,12 @@ orbital BuilderBoardOrbital {
     }
 
     state complete {
-      PLAY_AGAIN -> menu
+      PLAY_AGAIN -> playing
+        (set @entity.components @config.components)
         (set @entity.slots (array/map @config.slots (fn s (object/merge @s { options: (array/map @config.components (fn c { slotId: (object/get @s id), componentId: (object/get @c id), label: (object/get @c label), iconUrl: (object/get @c iconUrl) })) }))))
+        (set @entity.title @config.title)
+        (set @entity.description @config.description)
+        (set @entity.hint @config.hint)
         (set @entity.attempts 0)
         (set @entity.result "none")
         (render-ui main {

package/behaviors/lolo/ui/game/organisms/ui-card-battler-board.lolo

@@ -85,6 +85,7 @@ orbital CardBattlerBoardOrbital {
         (set @entity.hand (array/concat @entity.hand (array/slice @entity.deck 0 @config.drawPerTurn)))
         (set @entity.deck (array/slice @entity.deck @config.drawPerTurn (array/len @entity.deck)))
         (set @entity.result (if (>= @entity.turn @config.turnsToWin) "won" @entity.result))
+        (if (!= @entity.result "none") (emit GAME_END { result: @entity.result }) null)
         (render-ui main {
           type: game-shell
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Mana", value: @entity.mana }, { label: "Turn", value: @entity.turn } ] }, { type: stack, direction: horizontal, gap: sm, children: [ { type: button, action: END_TURN, label: "End Turn", variant: primary }, { type: button, action: PLAY_AGAIN, label: "Play Again", variant: secondary } ] } ] }
@@ -97,6 +98,7 @@ orbital CardBattlerBoardOrbital {
       GAME_END -> gameover when (or (== @entity.result "won") (== @entity.result "lost"))
         (render-ui main {
           type: game-shell
+          overlay: { type: game-menu, title: (if (== @entity.result "won") "VICTORY!" "DEFEAT"), subtitle: (str/concat "Result: " @entity.result), options: [ { id: "again", label: "Play Again", event: "PLAY_AGAIN", variant: "primary" } ] }
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Mana", value: @entity.mana }, { label: "Turn", value: @entity.turn } ] }, { type: stack, direction: horizontal, gap: sm, children: [ { type: button, action: END_TURN, label: "End Turn", variant: primary }, { type: button, action: PLAY_AGAIN, label: "Play Again", variant: secondary } ] } ] }
           children: [
             { type: data-list, entity: @entity.board, fields: [], gap: sm, renderItem: (fn c { type: button, variant: ghost, children: [ { type: atlas-image, asset: { url: "https://almadar-kflow-assets.web.app/shared/ui-card-battler-board/kenney-boardgame-pack/ui/diceWhite_border.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-card-battler-board/kenney-boardgame-pack/ui/diceWhite_border.json", sprite: "dieWhite_border6.png", role: "ui", category: "ui", animations: [], style: "", variant: "", dimension: "2d", aspect: "5:7", name: "card-frame", thumbnailUrl: "" }, fill: true, fit: "fill" }, { type: stack, direction: vertical, gap: xs, align: center, children: [ { type: badge, label: @c.cost, variant: info }, { type: game-icon, assetUrl: @c.sprite, icon: "image", size: 52, alt: @c.title }, { type: typography, variant: caption, content: @c.title }, { type: stack, direction: horizontal, gap: xs, justify: between, children: [ { type: typography, variant: caption, content: (str/concat "⚔" @c.attack) }, { type: typography, variant: caption, content: (str/concat "🛡" @c.defense) } ] } ] } ] }) },

package/behaviors/lolo/ui/game/organisms/ui-castle-board.lolo

@@ -325,7 +325,7 @@ orbital CastleBoardOrbital {
   ] } ]
         })
 
-      WAVE_DEFEATED -> victory when (>= @entity.wave 3)
+      WAVE_DEFEATED -> victory when (and (>= @entity.wave 3) (> @entity.health 0))
         (set @entity.result "victory")
         (render-ui main {
           type: game-shell
@@ -518,7 +518,7 @@ orbital CastleBoardOrbital {
       waveTick every 8s
         when (and (== @entity.result "none") (and (> @entity.health 0) (< @entity.wave 3)))
         (set @entity.wave (+ @entity.wave 1))
-        (set @entity.lastWaveDamage (math/max 0 (- @entity.wave (array/len @entity.buildings))))
+        (set @entity.lastWaveDamage (math/max 0 (- (* @entity.wave 4) (array/len @entity.buildings))))
         (set @entity.health (math/max 0 (- @entity.health @entity.lastWaveDamage)))
         (set @entity.units (array/map @entity.units (fn u (if (== @u.team "enemy") (object/merge @u { animation: "attack" }) (if (== @u.team "player") (object/merge @u { animation: (if (<= @entity.health 0) "hit" "idle") }) @u)))))
         (set @entity.effects (array/append @entity.effects { key: "slash", x: (object/get (object/get (array/first (array/filter @entity.units (fn u (== @u.team "enemy")))) position) x), y: (object/get (object/get (array/first (array/filter @entity.units (fn u (== @u.team "enemy")))) position) y), ttl: 4 }))
@@ -543,7 +543,7 @@ orbital CastleBoardOrbital {
   ] } ]
         })
         (emit CASTLE_HIT { damage: @entity.lastWaveDamage })
-        (emit WAVE_DEFEATED { wave: @entity.wave })
+        (if (> @entity.health 0) (emit WAVE_DEFEATED { wave: @entity.wave }) null)
     }
 
     emits {

package/behaviors/lolo/ui/game/organisms/ui-city-builder-board.lolo

@@ -107,7 +107,7 @@ orbital CityBuilderBoardOrbital {
           backgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hudBackgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Population", value: @entity.population, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_hand", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-population", thumbnailUrl: "" } }, { label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { label: "Build", value: @entity.pendingBuildType } ] }, { type: stat-badge, label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { type: stat-badge, label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { type: control-grid, items: @config.buildTypes, action: SELECT_BUILD_TYPE, labelKey: "label", valueKey: "type", selected: @entity.pendingBuildType } ] }
-          children: [ { type: canvas, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
+          children: [ { type: canvas, fit: true, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
             { type: draw-sprite-layer, items: (array/map @config.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (object/get @t terrainSprite) })) }
             { type: draw-sprite-layer, items: (array/map @entity.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f sprite) })) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m y) }, fill: "rgba(74,222,128,0.4)" })) }
@@ -124,7 +124,7 @@ orbital CityBuilderBoardOrbital {
           backgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hudBackgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Population", value: @entity.population, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_hand", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-population", thumbnailUrl: "" } }, { label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { label: "Build", value: @entity.pendingBuildType } ] }, { type: stat-badge, label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { type: stat-badge, label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { type: control-grid, items: @config.buildTypes, action: SELECT_BUILD_TYPE, labelKey: "label", valueKey: "type", selected: @entity.pendingBuildType } ] }
-          children: [ { type: canvas, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
+          children: [ { type: canvas, fit: true, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
             { type: draw-sprite-layer, items: (array/map @config.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (object/get @t terrainSprite) })) }
             { type: draw-sprite-layer, items: (array/map @entity.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f sprite) })) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m y) }, fill: "rgba(74,222,128,0.4)" })) }
@@ -139,6 +139,7 @@ orbital CityBuilderBoardOrbital {
         (set @entity.features (array/concat @entity.features [{ id: (str/concat "bld-" (array/len @entity.features)), x: ?x, y: ?y, type: @entity.pendingBuildType, sprite: (object/get @config.featureSprites @entity.pendingBuildType) }]))
         (set @entity.population (+ @entity.population @config.populationPerBuilding))
         (set @entity.result (if (>= @entity.population @config.targetPopulation) "won" @entity.result))
+        (if (!= @entity.result "none") (emit GAME_END { result: @entity.result }) null)
         (set @entity.selectedUnitId "")
         (set @entity.validMoves [])
         (render-ui main {
@@ -146,7 +147,7 @@ orbital CityBuilderBoardOrbital {
           backgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hudBackgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Population", value: @entity.population, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_hand", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-population", thumbnailUrl: "" } }, { label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { label: "Build", value: @entity.pendingBuildType } ] }, { type: stat-badge, label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { type: stat-badge, label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { type: control-grid, items: @config.buildTypes, action: SELECT_BUILD_TYPE, labelKey: "label", valueKey: "type", selected: @entity.pendingBuildType } ] }
-          children: [ { type: canvas, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
+          children: [ { type: canvas, fit: true, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
             { type: draw-sprite-layer, items: (array/map @config.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (object/get @t terrainSprite) })) }
             { type: draw-sprite-layer, items: (array/map @entity.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f sprite) })) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m y) }, fill: "rgba(74,222,128,0.4)" })) }
@@ -159,10 +160,11 @@ orbital CityBuilderBoardOrbital {
       GAME_END -> gameover when (or (== @entity.result "won") (== @entity.result "lost"))
         (render-ui main {
           type: game-shell
+          overlay: { type: game-menu, title: (if (== @entity.result "won") "CITY COMPLETE!" "GAME OVER"), subtitle: (str/concat "Population: " @entity.population), options: [ { id: "again", label: "Play Again", event: "PLAY_AGAIN", variant: "primary" } ] }
           backgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hudBackgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Population", value: @entity.population, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_hand", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-population", thumbnailUrl: "" } }, { label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { label: "Build", value: @entity.pendingBuildType } ] }, { type: stat-badge, label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { type: stat-badge, label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { type: control-grid, items: @config.buildTypes, action: SELECT_BUILD_TYPE, labelKey: "label", valueKey: "type", selected: @entity.pendingBuildType } ] }
-          children: [ { type: canvas, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
+          children: [ { type: canvas, fit: true, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
             { type: draw-sprite-layer, items: (array/map @config.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (object/get @t terrainSprite) })) }
             { type: draw-sprite-layer, items: (array/map @entity.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f sprite) })) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m y) }, fill: "rgba(74,222,128,0.4)" })) }
@@ -191,7 +193,7 @@ orbital CityBuilderBoardOrbital {
           backgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hudBackgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Population", value: @entity.population, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_hand", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-population", thumbnailUrl: "" } }, { label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { label: "Build", value: @entity.pendingBuildType } ] }, { type: stat-badge, label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { type: stat-badge, label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { type: control-grid, items: @config.buildTypes, action: SELECT_BUILD_TYPE, labelKey: "label", valueKey: "type", selected: @entity.pendingBuildType } ] }
-          children: [ { type: canvas, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
+          children: [ { type: canvas, fit: true, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
             { type: draw-sprite-layer, items: (array/map @config.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (object/get @t terrainSprite) })) }
             { type: draw-sprite-layer, items: (array/map @entity.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f sprite) })) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m y) }, fill: "rgba(74,222,128,0.4)" })) }
@@ -211,7 +213,7 @@ orbital CityBuilderBoardOrbital {
           backgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hudBackgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Population", value: @entity.population, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_hand", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-population", thumbnailUrl: "" } }, { label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { label: "Build", value: @entity.pendingBuildType } ] }, { type: stat-badge, label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { type: stat-badge, label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { type: control-grid, items: @config.buildTypes, action: SELECT_BUILD_TYPE, labelKey: "label", valueKey: "type", selected: @entity.pendingBuildType } ] }
-          children: [ { type: canvas, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
+          children: [ { type: canvas, fit: true, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
             { type: draw-sprite-layer, items: (array/map @config.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (object/get @t terrainSprite) })) }
             { type: draw-sprite-layer, items: (array/map @entity.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f sprite) })) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m y) }, fill: "rgba(74,222,128,0.4)" })) }
@@ -232,7 +234,7 @@ orbital CityBuilderBoardOrbital {
           backgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hudBackgroundAsset: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-ui-pack/ui/greySheet.json", sprite: "grey_panel.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "panel-frame", thumbnailUrl: "" }
           hud: { type: stack, direction: horizontal, gap: md, justify: between, children: [ { type: game-hud, stats: [ { label: "Population", value: @entity.population, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_hand", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-population", thumbnailUrl: "" } }, { label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { label: "Build", value: @entity.pendingBuildType } ] }, { type: stat-badge, label: "Gold", value: @entity.gold, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.png", atlas: "https://almadar-kflow-assets.web.app/shared/_shared/kenney-mobile-controls/ui/icons-default.json", sprite: "icon_money", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-gold", thumbnailUrl: "" } }, { type: stat-badge, label: "Wood", value: @entity.wood, iconUrl: { url: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.png", atlas: "https://almadar-kflow-assets.web.app/shared/ui-city-builder-board/kenney-isometric-vector-buildings/features/spritesheet_wood.json", sprite: "wood046.png", role: "ui", category: "ui", animations: [], style: "vector", variant: "", dimension: "2d", aspect: "1:1", name: "icon-wood", thumbnailUrl: "" } }, { type: control-grid, items: @config.buildTypes, action: SELECT_BUILD_TYPE, labelKey: "label", valueKey: "type", selected: @entity.pendingBuildType } ] }
-          children: [ { type: canvas, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
+          children: [ { type: canvas, fit: true, camera: { zoom: @config.scale }, projection: "isometric", showMinimap: true, tileClickEvent: PLACE_BUILDING, children: [
             { type: draw-sprite-layer, items: (array/map @config.tiles (fn t { type: draw-sprite, position: { x: (object/get @t x), y: (object/get @t y) }, asset: (object/get @t terrainSprite) })) }
             { type: draw-sprite-layer, items: (array/map @entity.features (fn f { type: draw-sprite, position: { x: (object/get @f x), y: (object/get @f y) }, asset: (object/get @f sprite) })) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m y) }, fill: "rgba(74,222,128,0.4)" })) }

package/behaviors/lolo/ui/game/organisms/ui-grid-tactics-demo-board.lolo

@@ -53,7 +53,7 @@ orbital GridTacticsDemoOrbital {
           type: game-shell
           hud: { type: game-hud, stats: [ { label: "Result", value: @entity.result }, { label: "Phase", value: @entity.uiPhase }, { label: "Selected", value: @entity.selectedUnitId } ] }
           addons: { type: stack, direction: vertical, gap: sm, children: [ { type: button, action: END_TURN, label: "End Turn", variant: primary }, { type: button, action: CANCEL, label: "Cancel", variant: secondary } ] }
-          children: [ { type: canvas, projection: "flat", showMinimap: false, tileClickEvent: TILE_CLICK, unitClickEvent: UNIT_CLICK, children: [
+          children: [ { type: canvas, fit: true, projection: "flat", showMinimap: false, tileClickEvent: TILE_CLICK, unitClickEvent: UNIT_CLICK, children: [
             { type: draw-shape-layer, items: (array/map @entity.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: (if (== (object/get @t passable) true) "rgba(148,163,184,0.15)" "rgba(51,65,85,0.75)") })) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m z) }, fill: "rgba(74,222,128,0.4)" })) }
             { type: draw-shape-layer, items: (array/map (array/filter @entity.units (fn u (== (object/get @u id) @entity.selectedUnitId))) (fn u { type: draw-shape, shape: "ellipse", position: (object/get @u position), radiusX: 0.5, radiusY: 0.2, stroke: "rgba(0,200,255,0.8)", strokeWidth: 3 })) }
@@ -101,7 +101,7 @@ orbital GridTacticsDemoOrbital {
           type: game-shell
           hud: { type: game-hud, stats: [ { label: "Result", value: @entity.result }, { label: "Phase", value: @entity.uiPhase }, { label: "Selected", value: @entity.selectedUnitId } ] }
           addons: { type: stack, direction: vertical, gap: sm, children: [ { type: button, action: END_TURN, label: "End Turn", variant: primary }, { type: button, action: CANCEL, label: "Cancel", variant: secondary } ] }
-          children: [ { type: canvas, projection: "flat", showMinimap: false, tileClickEvent: TILE_CLICK, unitClickEvent: UNIT_CLICK, children: [
+          children: [ { type: canvas, fit: true, projection: "flat", showMinimap: false, tileClickEvent: TILE_CLICK, unitClickEvent: UNIT_CLICK, children: [
             { type: draw-shape-layer, items: (array/map @entity.tiles (fn t { type: draw-shape, shape: "cell", position: { x: (object/get @t x), y: (object/get @t y) }, fill: (if (== (object/get @t passable) true) "rgba(148,163,184,0.15)" "rgba(51,65,85,0.75)") })) }
             { type: draw-shape-layer, items: (array/map @entity.validMoves (fn m { type: draw-shape, shape: "cell", position: { x: (object/get @m x), y: (object/get @m z) }, fill: "rgba(74,222,128,0.4)" })) }
             { type: draw-shape-layer, items: (array/map (array/filter @entity.units (fn u (== (object/get @u id) @entity.selectedUnitId))) (fn u { type: draw-shape, shape: "ellipse", position: (object/get @u position), radiusX: 0.5, radiusY: 0.2, stroke: "rgba(0,200,255,0.8)", strokeWidth: 3 })) }