@almadar/ui 5.57.0 → 5.58.0

package/dist/avl/index.cjs

@@ -32130,13 +32130,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect85, useRef: useRef77, useCallback: useCallback125, useState: useState121 } = React90__namespace.default;
+      const { useEffect: useEffect86, useRef: useRef77, useCallback: useCallback125, useState: useState121 } = React90__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus4 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef77({ centerLat, centerLng, zoom });
-        useEffect85(() => {
+        useEffect86(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -32147,7 +32147,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect85(() => {
+        useEffect86(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -51557,12 +51557,25 @@ function pathToFeatures(path) {
     sprite: `${CDN6}world-map/road_straight.png`
   }));
 }
+function heroToUnit(hero) {
+  return {
+    id: hero.id,
+    position: { x: hero.x, y: hero.y },
+    name: "Hero",
+    team: "player",
+    sprite: HERO_SPRITE,
+    unitType: "amir",
+    health: 1,
+    maxHealth: 1
+  };
+}
 function TowerDefenseBoard({
   entity,
   tiles: propTiles,
   path: propPath,
   towers: propTowers,
   creeps: propCreeps,
+  hero: propHero,
   gold: propGold,
   lives: propLives,
   wave: propWave,
@@ -51578,6 +51591,7 @@ function TowerDefenseBoard({
   startWaveEvent,
   playAgainEvent,
   gameEndEvent,
+  moveHeroEvent,
   className
 }) {
   const board = boardEntity(entity) ?? {};
@@ -51589,6 +51603,7 @@ function TowerDefenseBoard({
   const path = rawPath.length > 0 ? rawPath : DEFAULT_TD_PATH;
   const towers = propTowers ?? rows(board.towers);
   const creeps = propCreeps ?? rows(board.creeps);
+  const hero = propHero ?? { id: "hero", x: 8, y: 8 };
   const gold = propGold ?? num(board.gold, 100);
   const lives = propLives ?? num(board.lives, 20);
   const wave = propWave ?? num(board.wave, 1);
@@ -51606,6 +51621,31 @@ function TowerDefenseBoard({
   if (result === "none") {
     emittedGameEnd.current = false;
   }
+  const moveHeroEventRef = React90.useRef(moveHeroEvent);
+  moveHeroEventRef.current = moveHeroEvent;
+  const resultRef = React90.useRef(result);
+  resultRef.current = result;
+  React90.useEffect(() => {
+    function onKeyDown(e) {
+      const evt = moveHeroEventRef.current;
+      if (!evt || resultRef.current !== "none") return;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowUp") {
+        dy = -1;
+      } else if (e.key === "ArrowDown") {
+        dy = 1;
+      } else if (e.key === "ArrowLeft") {
+        dx = -1;
+      } else if (e.key === "ArrowRight") {
+        dx = 1;
+      } else return;
+      e.preventDefault();
+      eventBus.emit(`UI:${evt}`, { dx, dy });
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [eventBus]);
   const towerPositions = React90.useMemo(() => new Set(towers.map((t2) => `${t2.x},${t2.y}`)), [towers]);
   const pathPositions = React90.useMemo(() => new Set(path.map((p2) => `${p2.x},${p2.y}`)), [path]);
   const validMoves = React90.useMemo(() => {
@@ -51617,7 +51657,8 @@ function TowerDefenseBoard({
   const isoTiles = React90.useMemo(() => tilesToIso(tiles), [tiles]);
   const towerUnits = React90.useMemo(() => towersToUnits(towers), [towers]);
   const creepUnits = React90.useMemo(() => creepsToUnits(creeps), [creeps]);
-  const isoUnits = React90.useMemo(() => [...towerUnits, ...creepUnits], [towerUnits, creepUnits]);
+  const heroUnit = React90.useMemo(() => heroToUnit(hero), [hero]);
+  const isoUnits = React90.useMemo(() => [...towerUnits, ...creepUnits, heroUnit], [towerUnits, creepUnits, heroUnit]);
   const pathFeatures = React90.useMemo(() => pathToFeatures(path), [path]);
   const handleTileClick = React90.useCallback((x, y) => {
     if (result !== "none") return;
@@ -51716,7 +51757,7 @@ function TowerDefenseBoard({
     ] }) })
   ] });
 }
-var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE;
+var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE, HERO_SPRITE;
 var init_TowerDefenseBoard = __esm({
   "components/game/organisms/TowerDefenseBoard.tsx"() {
     "use client";
@@ -51790,8 +51831,9 @@ var init_TowerDefenseBoard = __esm({
       { x: 13, y: 15 }
     ];
     DEFAULT_TD_TILES = buildDefaultTDTiles();
-    TOWER_SPRITE = `${CDN6}units/guardian.png`;
-    CREEP_SPRITE = `${CDN6}units/scrapper.png`;
+    TOWER_SPRITE = `${CDN6}sprite-sheets/guardian-sprite-sheet-se.png`;
+    CREEP_SPRITE = `${CDN6}sprite-sheets/scrapper-sprite-sheet-se.png`;
+    HERO_SPRITE = `${CDN6}sprite-sheets/amir-sprite-sheet-se.png`;
     TowerDefenseBoard.displayName = "TowerDefenseBoard";
   }
 });

package/dist/avl/index.js

@@ -32083,13 +32083,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect85, useRef: useRef77, useCallback: useCallback125, useState: useState121 } = React90__default;
+      const { useEffect: useEffect86, useRef: useRef77, useCallback: useCallback125, useState: useState121 } = React90__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus4 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef77({ centerLat, centerLng, zoom });
-        useEffect85(() => {
+        useEffect86(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -32100,7 +32100,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect85(() => {
+        useEffect86(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -51510,12 +51510,25 @@ function pathToFeatures(path) {
     sprite: `${CDN6}world-map/road_straight.png`
   }));
 }
+function heroToUnit(hero) {
+  return {
+    id: hero.id,
+    position: { x: hero.x, y: hero.y },
+    name: "Hero",
+    team: "player",
+    sprite: HERO_SPRITE,
+    unitType: "amir",
+    health: 1,
+    maxHealth: 1
+  };
+}
 function TowerDefenseBoard({
   entity,
   tiles: propTiles,
   path: propPath,
   towers: propTowers,
   creeps: propCreeps,
+  hero: propHero,
   gold: propGold,
   lives: propLives,
   wave: propWave,
@@ -51531,6 +51544,7 @@ function TowerDefenseBoard({
   startWaveEvent,
   playAgainEvent,
   gameEndEvent,
+  moveHeroEvent,
   className
 }) {
   const board = boardEntity(entity) ?? {};
@@ -51542,6 +51556,7 @@ function TowerDefenseBoard({
   const path = rawPath.length > 0 ? rawPath : DEFAULT_TD_PATH;
   const towers = propTowers ?? rows(board.towers);
   const creeps = propCreeps ?? rows(board.creeps);
+  const hero = propHero ?? { id: "hero", x: 8, y: 8 };
   const gold = propGold ?? num(board.gold, 100);
   const lives = propLives ?? num(board.lives, 20);
   const wave = propWave ?? num(board.wave, 1);
@@ -51559,6 +51574,31 @@ function TowerDefenseBoard({
   if (result === "none") {
     emittedGameEnd.current = false;
   }
+  const moveHeroEventRef = useRef(moveHeroEvent);
+  moveHeroEventRef.current = moveHeroEvent;
+  const resultRef = useRef(result);
+  resultRef.current = result;
+  useEffect(() => {
+    function onKeyDown(e) {
+      const evt = moveHeroEventRef.current;
+      if (!evt || resultRef.current !== "none") return;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowUp") {
+        dy = -1;
+      } else if (e.key === "ArrowDown") {
+        dy = 1;
+      } else if (e.key === "ArrowLeft") {
+        dx = -1;
+      } else if (e.key === "ArrowRight") {
+        dx = 1;
+      } else return;
+      e.preventDefault();
+      eventBus.emit(`UI:${evt}`, { dx, dy });
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [eventBus]);
   const towerPositions = useMemo(() => new Set(towers.map((t2) => `${t2.x},${t2.y}`)), [towers]);
   const pathPositions = useMemo(() => new Set(path.map((p2) => `${p2.x},${p2.y}`)), [path]);
   const validMoves = useMemo(() => {
@@ -51570,7 +51610,8 @@ function TowerDefenseBoard({
   const isoTiles = useMemo(() => tilesToIso(tiles), [tiles]);
   const towerUnits = useMemo(() => towersToUnits(towers), [towers]);
   const creepUnits = useMemo(() => creepsToUnits(creeps), [creeps]);
-  const isoUnits = useMemo(() => [...towerUnits, ...creepUnits], [towerUnits, creepUnits]);
+  const heroUnit = useMemo(() => heroToUnit(hero), [hero]);
+  const isoUnits = useMemo(() => [...towerUnits, ...creepUnits, heroUnit], [towerUnits, creepUnits, heroUnit]);
   const pathFeatures = useMemo(() => pathToFeatures(path), [path]);
   const handleTileClick = useCallback((x, y) => {
     if (result !== "none") return;
@@ -51669,7 +51710,7 @@ function TowerDefenseBoard({
     ] }) })
   ] });
 }
-var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE;
+var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE, HERO_SPRITE;
 var init_TowerDefenseBoard = __esm({
   "components/game/organisms/TowerDefenseBoard.tsx"() {
     "use client";
@@ -51743,8 +51784,9 @@ var init_TowerDefenseBoard = __esm({
       { x: 13, y: 15 }
     ];
     DEFAULT_TD_TILES = buildDefaultTDTiles();
-    TOWER_SPRITE = `${CDN6}units/guardian.png`;
-    CREEP_SPRITE = `${CDN6}units/scrapper.png`;
+    TOWER_SPRITE = `${CDN6}sprite-sheets/guardian-sprite-sheet-se.png`;
+    CREEP_SPRITE = `${CDN6}sprite-sheets/scrapper-sprite-sheet-se.png`;
+    HERO_SPRITE = `${CDN6}sprite-sheets/amir-sprite-sheet-se.png`;
     TowerDefenseBoard.displayName = "TowerDefenseBoard";
   }
 });

package/dist/components/game/organisms/TowerDefenseBoard.d.ts

@@ -30,6 +30,11 @@ export interface TowerDefenseCreep {
     pathIndex: number;
     speed: number;
 }
+export interface TowerDefenseHero {
+    id: string;
+    x: number;
+    y: number;
+}
 export interface TowerDefenseBoardProps extends DisplayStateProps {
     entity?: EntityRow | readonly EntityRow[];
     tiles?: TowerDefenseTile[];
@@ -42,6 +47,7 @@ export interface TowerDefenseBoardProps extends DisplayStateProps {
     maxWaves?: number;
     result?: 'none' | 'won' | 'lost';
     waveActive?: boolean;
+    hero?: TowerDefenseHero;
     towerCost?: number;
     scale?: number;
     unitScale?: number;
@@ -58,9 +64,13 @@ export interface TowerDefenseBoardProps extends DisplayStateProps {
     gameEndEvent?: EventEmit<{
         result: 'won' | 'lost';
     }>;
+    moveHeroEvent?: EventEmit<{
+        dx: number;
+        dy: number;
+    }>;
     className?: string;
 }
-export declare function TowerDefenseBoard({ entity, tiles: propTiles, path: propPath, towers: propTowers, creeps: propCreeps, gold: propGold, lives: propLives, wave: propWave, maxWaves: propMaxWaves, result: propResult, waveActive: propWaveActive, towerCost, scale, unitScale, spriteHeightRatio, spriteMaxWidthRatio, placeTowerEvent, startWaveEvent, playAgainEvent, gameEndEvent, className, }: TowerDefenseBoardProps): React.JSX.Element;
+export declare function TowerDefenseBoard({ entity, tiles: propTiles, path: propPath, towers: propTowers, creeps: propCreeps, hero: propHero, gold: propGold, lives: propLives, wave: propWave, maxWaves: propMaxWaves, result: propResult, waveActive: propWaveActive, towerCost, scale, unitScale, spriteHeightRatio, spriteMaxWidthRatio, placeTowerEvent, startWaveEvent, playAgainEvent, gameEndEvent, moveHeroEvent, className, }: TowerDefenseBoardProps): React.JSX.Element;
 export declare namespace TowerDefenseBoard {
     var displayName: string;
 }

package/dist/components/index.cjs

@@ -29941,13 +29941,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect80, useRef: useRef78, useCallback: useCallback120, useState: useState110 } = React76__namespace.default;
+      const { useEffect: useEffect81, useRef: useRef78, useCallback: useCallback120, useState: useState110 } = React76__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef78({ centerLat, centerLng, zoom });
-        useEffect80(() => {
+        useEffect81(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -29958,7 +29958,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect80(() => {
+        useEffect81(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -50500,12 +50500,25 @@ function pathToFeatures(path) {
     sprite: `${CDN6}world-map/road_straight.png`
   }));
 }
+function heroToUnit(hero) {
+  return {
+    id: hero.id,
+    position: { x: hero.x, y: hero.y },
+    name: "Hero",
+    team: "player",
+    sprite: HERO_SPRITE,
+    unitType: "amir",
+    health: 1,
+    maxHealth: 1
+  };
+}
 function TowerDefenseBoard({
   entity,
   tiles: propTiles,
   path: propPath,
   towers: propTowers,
   creeps: propCreeps,
+  hero: propHero,
   gold: propGold,
   lives: propLives,
   wave: propWave,
@@ -50521,6 +50534,7 @@ function TowerDefenseBoard({
   startWaveEvent,
   playAgainEvent,
   gameEndEvent,
+  moveHeroEvent,
   className
 }) {
   const board = boardEntity(entity) ?? {};
@@ -50532,6 +50546,7 @@ function TowerDefenseBoard({
   const path = rawPath.length > 0 ? rawPath : DEFAULT_TD_PATH;
   const towers = propTowers ?? rows(board.towers);
   const creeps = propCreeps ?? rows(board.creeps);
+  const hero = propHero ?? { id: "hero", x: 8, y: 8 };
   const gold = propGold ?? num(board.gold, 100);
   const lives = propLives ?? num(board.lives, 20);
   const wave = propWave ?? num(board.wave, 1);
@@ -50549,6 +50564,31 @@ function TowerDefenseBoard({
   if (result === "none") {
     emittedGameEnd.current = false;
   }
+  const moveHeroEventRef = React76.useRef(moveHeroEvent);
+  moveHeroEventRef.current = moveHeroEvent;
+  const resultRef = React76.useRef(result);
+  resultRef.current = result;
+  React76.useEffect(() => {
+    function onKeyDown(e) {
+      const evt = moveHeroEventRef.current;
+      if (!evt || resultRef.current !== "none") return;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowUp") {
+        dy = -1;
+      } else if (e.key === "ArrowDown") {
+        dy = 1;
+      } else if (e.key === "ArrowLeft") {
+        dx = -1;
+      } else if (e.key === "ArrowRight") {
+        dx = 1;
+      } else return;
+      e.preventDefault();
+      eventBus.emit(`UI:${evt}`, { dx, dy });
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [eventBus]);
   const towerPositions = React76.useMemo(() => new Set(towers.map((t2) => `${t2.x},${t2.y}`)), [towers]);
   const pathPositions = React76.useMemo(() => new Set(path.map((p2) => `${p2.x},${p2.y}`)), [path]);
   const validMoves = React76.useMemo(() => {
@@ -50560,7 +50600,8 @@ function TowerDefenseBoard({
   const isoTiles = React76.useMemo(() => tilesToIso(tiles), [tiles]);
   const towerUnits = React76.useMemo(() => towersToUnits(towers), [towers]);
   const creepUnits = React76.useMemo(() => creepsToUnits(creeps), [creeps]);
-  const isoUnits = React76.useMemo(() => [...towerUnits, ...creepUnits], [towerUnits, creepUnits]);
+  const heroUnit = React76.useMemo(() => heroToUnit(hero), [hero]);
+  const isoUnits = React76.useMemo(() => [...towerUnits, ...creepUnits, heroUnit], [towerUnits, creepUnits, heroUnit]);
   const pathFeatures = React76.useMemo(() => pathToFeatures(path), [path]);
   const handleTileClick = React76.useCallback((x, y) => {
     if (result !== "none") return;
@@ -50659,7 +50700,7 @@ function TowerDefenseBoard({
     ] }) })
   ] });
 }
-var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE;
+var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE, HERO_SPRITE;
 var init_TowerDefenseBoard = __esm({
   "components/game/organisms/TowerDefenseBoard.tsx"() {
     "use client";
@@ -50733,8 +50774,9 @@ var init_TowerDefenseBoard = __esm({
       { x: 13, y: 15 }
     ];
     DEFAULT_TD_TILES = buildDefaultTDTiles();
-    TOWER_SPRITE = `${CDN6}units/guardian.png`;
-    CREEP_SPRITE = `${CDN6}units/scrapper.png`;
+    TOWER_SPRITE = `${CDN6}sprite-sheets/guardian-sprite-sheet-se.png`;
+    CREEP_SPRITE = `${CDN6}sprite-sheets/scrapper-sprite-sheet-se.png`;
+    HERO_SPRITE = `${CDN6}sprite-sheets/amir-sprite-sheet-se.png`;
     TowerDefenseBoard.displayName = "TowerDefenseBoard";
   }
 });

package/dist/components/index.js

@@ -29895,13 +29895,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect80, useRef: useRef78, useCallback: useCallback120, useState: useState110 } = React76__default;
+      const { useEffect: useEffect81, useRef: useRef78, useCallback: useCallback120, useState: useState110 } = React76__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef78({ centerLat, centerLng, zoom });
-        useEffect80(() => {
+        useEffect81(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -29912,7 +29912,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect80(() => {
+        useEffect81(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -50454,12 +50454,25 @@ function pathToFeatures(path) {
     sprite: `${CDN6}world-map/road_straight.png`
   }));
 }
+function heroToUnit(hero) {
+  return {
+    id: hero.id,
+    position: { x: hero.x, y: hero.y },
+    name: "Hero",
+    team: "player",
+    sprite: HERO_SPRITE,
+    unitType: "amir",
+    health: 1,
+    maxHealth: 1
+  };
+}
 function TowerDefenseBoard({
   entity,
   tiles: propTiles,
   path: propPath,
   towers: propTowers,
   creeps: propCreeps,
+  hero: propHero,
   gold: propGold,
   lives: propLives,
   wave: propWave,
@@ -50475,6 +50488,7 @@ function TowerDefenseBoard({
   startWaveEvent,
   playAgainEvent,
   gameEndEvent,
+  moveHeroEvent,
   className
 }) {
   const board = boardEntity(entity) ?? {};
@@ -50486,6 +50500,7 @@ function TowerDefenseBoard({
   const path = rawPath.length > 0 ? rawPath : DEFAULT_TD_PATH;
   const towers = propTowers ?? rows(board.towers);
   const creeps = propCreeps ?? rows(board.creeps);
+  const hero = propHero ?? { id: "hero", x: 8, y: 8 };
   const gold = propGold ?? num(board.gold, 100);
   const lives = propLives ?? num(board.lives, 20);
   const wave = propWave ?? num(board.wave, 1);
@@ -50503,6 +50518,31 @@ function TowerDefenseBoard({
   if (result === "none") {
     emittedGameEnd.current = false;
   }
+  const moveHeroEventRef = useRef(moveHeroEvent);
+  moveHeroEventRef.current = moveHeroEvent;
+  const resultRef = useRef(result);
+  resultRef.current = result;
+  useEffect(() => {
+    function onKeyDown(e) {
+      const evt = moveHeroEventRef.current;
+      if (!evt || resultRef.current !== "none") return;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowUp") {
+        dy = -1;
+      } else if (e.key === "ArrowDown") {
+        dy = 1;
+      } else if (e.key === "ArrowLeft") {
+        dx = -1;
+      } else if (e.key === "ArrowRight") {
+        dx = 1;
+      } else return;
+      e.preventDefault();
+      eventBus.emit(`UI:${evt}`, { dx, dy });
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [eventBus]);
   const towerPositions = useMemo(() => new Set(towers.map((t2) => `${t2.x},${t2.y}`)), [towers]);
   const pathPositions = useMemo(() => new Set(path.map((p2) => `${p2.x},${p2.y}`)), [path]);
   const validMoves = useMemo(() => {
@@ -50514,7 +50554,8 @@ function TowerDefenseBoard({
   const isoTiles = useMemo(() => tilesToIso(tiles), [tiles]);
   const towerUnits = useMemo(() => towersToUnits(towers), [towers]);
   const creepUnits = useMemo(() => creepsToUnits(creeps), [creeps]);
-  const isoUnits = useMemo(() => [...towerUnits, ...creepUnits], [towerUnits, creepUnits]);
+  const heroUnit = useMemo(() => heroToUnit(hero), [hero]);
+  const isoUnits = useMemo(() => [...towerUnits, ...creepUnits, heroUnit], [towerUnits, creepUnits, heroUnit]);
   const pathFeatures = useMemo(() => pathToFeatures(path), [path]);
   const handleTileClick = useCallback((x, y) => {
     if (result !== "none") return;
@@ -50613,7 +50654,7 @@ function TowerDefenseBoard({
     ] }) })
   ] });
 }
-var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE;
+var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE, HERO_SPRITE;
 var init_TowerDefenseBoard = __esm({
   "components/game/organisms/TowerDefenseBoard.tsx"() {
     "use client";
@@ -50687,8 +50728,9 @@ var init_TowerDefenseBoard = __esm({
       { x: 13, y: 15 }
     ];
     DEFAULT_TD_TILES = buildDefaultTDTiles();
-    TOWER_SPRITE = `${CDN6}units/guardian.png`;
-    CREEP_SPRITE = `${CDN6}units/scrapper.png`;
+    TOWER_SPRITE = `${CDN6}sprite-sheets/guardian-sprite-sheet-se.png`;
+    CREEP_SPRITE = `${CDN6}sprite-sheets/scrapper-sprite-sheet-se.png`;
+    HERO_SPRITE = `${CDN6}sprite-sheets/amir-sprite-sheet-se.png`;
     TowerDefenseBoard.displayName = "TowerDefenseBoard";
   }
 });

package/dist/providers/index.cjs

@@ -29522,13 +29522,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect79, useRef: useRef75, useCallback: useCallback118, useState: useState109 } = React82__namespace.default;
+      const { useEffect: useEffect80, useRef: useRef75, useCallback: useCallback118, useState: useState109 } = React82__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef75({ centerLat, centerLng, zoom });
-        useEffect79(() => {
+        useEffect80(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -29539,7 +29539,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect79(() => {
+        useEffect80(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -49339,12 +49339,25 @@ function pathToFeatures(path) {
     sprite: `${CDN6}world-map/road_straight.png`
   }));
 }
+function heroToUnit(hero) {
+  return {
+    id: hero.id,
+    position: { x: hero.x, y: hero.y },
+    name: "Hero",
+    team: "player",
+    sprite: HERO_SPRITE,
+    unitType: "amir",
+    health: 1,
+    maxHealth: 1
+  };
+}
 function TowerDefenseBoard({
   entity,
   tiles: propTiles,
   path: propPath,
   towers: propTowers,
   creeps: propCreeps,
+  hero: propHero,
   gold: propGold,
   lives: propLives,
   wave: propWave,
@@ -49360,6 +49373,7 @@ function TowerDefenseBoard({
   startWaveEvent,
   playAgainEvent,
   gameEndEvent,
+  moveHeroEvent,
   className
 }) {
   const board = boardEntity(entity) ?? {};
@@ -49371,6 +49385,7 @@ function TowerDefenseBoard({
   const path = rawPath.length > 0 ? rawPath : DEFAULT_TD_PATH;
   const towers = propTowers ?? rows(board.towers);
   const creeps = propCreeps ?? rows(board.creeps);
+  const hero = propHero ?? { id: "hero", x: 8, y: 8 };
   const gold = propGold ?? num(board.gold, 100);
   const lives = propLives ?? num(board.lives, 20);
   const wave = propWave ?? num(board.wave, 1);
@@ -49388,6 +49403,31 @@ function TowerDefenseBoard({
   if (result === "none") {
     emittedGameEnd.current = false;
   }
+  const moveHeroEventRef = React82.useRef(moveHeroEvent);
+  moveHeroEventRef.current = moveHeroEvent;
+  const resultRef = React82.useRef(result);
+  resultRef.current = result;
+  React82.useEffect(() => {
+    function onKeyDown(e) {
+      const evt = moveHeroEventRef.current;
+      if (!evt || resultRef.current !== "none") return;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowUp") {
+        dy = -1;
+      } else if (e.key === "ArrowDown") {
+        dy = 1;
+      } else if (e.key === "ArrowLeft") {
+        dx = -1;
+      } else if (e.key === "ArrowRight") {
+        dx = 1;
+      } else return;
+      e.preventDefault();
+      eventBus.emit(`UI:${evt}`, { dx, dy });
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [eventBus]);
   const towerPositions = React82.useMemo(() => new Set(towers.map((t2) => `${t2.x},${t2.y}`)), [towers]);
   const pathPositions = React82.useMemo(() => new Set(path.map((p2) => `${p2.x},${p2.y}`)), [path]);
   const validMoves = React82.useMemo(() => {
@@ -49399,7 +49439,8 @@ function TowerDefenseBoard({
   const isoTiles = React82.useMemo(() => tilesToIso(tiles), [tiles]);
   const towerUnits = React82.useMemo(() => towersToUnits(towers), [towers]);
   const creepUnits = React82.useMemo(() => creepsToUnits(creeps), [creeps]);
-  const isoUnits = React82.useMemo(() => [...towerUnits, ...creepUnits], [towerUnits, creepUnits]);
+  const heroUnit = React82.useMemo(() => heroToUnit(hero), [hero]);
+  const isoUnits = React82.useMemo(() => [...towerUnits, ...creepUnits, heroUnit], [towerUnits, creepUnits, heroUnit]);
   const pathFeatures = React82.useMemo(() => pathToFeatures(path), [path]);
   const handleTileClick = React82.useCallback((x, y) => {
     if (result !== "none") return;
@@ -49498,7 +49539,7 @@ function TowerDefenseBoard({
     ] }) })
   ] });
 }
-var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE;
+var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE, HERO_SPRITE;
 var init_TowerDefenseBoard = __esm({
   "components/game/organisms/TowerDefenseBoard.tsx"() {
     "use client";
@@ -49572,8 +49613,9 @@ var init_TowerDefenseBoard = __esm({
       { x: 13, y: 15 }
     ];
     DEFAULT_TD_TILES = buildDefaultTDTiles();
-    TOWER_SPRITE = `${CDN6}units/guardian.png`;
-    CREEP_SPRITE = `${CDN6}units/scrapper.png`;
+    TOWER_SPRITE = `${CDN6}sprite-sheets/guardian-sprite-sheet-se.png`;
+    CREEP_SPRITE = `${CDN6}sprite-sheets/scrapper-sprite-sheet-se.png`;
+    HERO_SPRITE = `${CDN6}sprite-sheets/amir-sprite-sheet-se.png`;
     TowerDefenseBoard.displayName = "TowerDefenseBoard";
   }
 });

package/dist/providers/index.js

@@ -29475,13 +29475,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect79, useRef: useRef75, useCallback: useCallback118, useState: useState109 } = React82__default;
+      const { useEffect: useEffect80, useRef: useRef75, useCallback: useCallback118, useState: useState109 } = React82__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef75({ centerLat, centerLng, zoom });
-        useEffect79(() => {
+        useEffect80(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -29492,7 +29492,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect79(() => {
+        useEffect80(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -49292,12 +49292,25 @@ function pathToFeatures(path) {
     sprite: `${CDN6}world-map/road_straight.png`
   }));
 }
+function heroToUnit(hero) {
+  return {
+    id: hero.id,
+    position: { x: hero.x, y: hero.y },
+    name: "Hero",
+    team: "player",
+    sprite: HERO_SPRITE,
+    unitType: "amir",
+    health: 1,
+    maxHealth: 1
+  };
+}
 function TowerDefenseBoard({
   entity,
   tiles: propTiles,
   path: propPath,
   towers: propTowers,
   creeps: propCreeps,
+  hero: propHero,
   gold: propGold,
   lives: propLives,
   wave: propWave,
@@ -49313,6 +49326,7 @@ function TowerDefenseBoard({
   startWaveEvent,
   playAgainEvent,
   gameEndEvent,
+  moveHeroEvent,
   className
 }) {
   const board = boardEntity(entity) ?? {};
@@ -49324,6 +49338,7 @@ function TowerDefenseBoard({
   const path = rawPath.length > 0 ? rawPath : DEFAULT_TD_PATH;
   const towers = propTowers ?? rows(board.towers);
   const creeps = propCreeps ?? rows(board.creeps);
+  const hero = propHero ?? { id: "hero", x: 8, y: 8 };
   const gold = propGold ?? num(board.gold, 100);
   const lives = propLives ?? num(board.lives, 20);
   const wave = propWave ?? num(board.wave, 1);
@@ -49341,6 +49356,31 @@ function TowerDefenseBoard({
   if (result === "none") {
     emittedGameEnd.current = false;
   }
+  const moveHeroEventRef = useRef(moveHeroEvent);
+  moveHeroEventRef.current = moveHeroEvent;
+  const resultRef = useRef(result);
+  resultRef.current = result;
+  useEffect(() => {
+    function onKeyDown(e) {
+      const evt = moveHeroEventRef.current;
+      if (!evt || resultRef.current !== "none") return;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowUp") {
+        dy = -1;
+      } else if (e.key === "ArrowDown") {
+        dy = 1;
+      } else if (e.key === "ArrowLeft") {
+        dx = -1;
+      } else if (e.key === "ArrowRight") {
+        dx = 1;
+      } else return;
+      e.preventDefault();
+      eventBus.emit(`UI:${evt}`, { dx, dy });
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [eventBus]);
   const towerPositions = useMemo(() => new Set(towers.map((t2) => `${t2.x},${t2.y}`)), [towers]);
   const pathPositions = useMemo(() => new Set(path.map((p2) => `${p2.x},${p2.y}`)), [path]);
   const validMoves = useMemo(() => {
@@ -49352,7 +49392,8 @@ function TowerDefenseBoard({
   const isoTiles = useMemo(() => tilesToIso(tiles), [tiles]);
   const towerUnits = useMemo(() => towersToUnits(towers), [towers]);
   const creepUnits = useMemo(() => creepsToUnits(creeps), [creeps]);
-  const isoUnits = useMemo(() => [...towerUnits, ...creepUnits], [towerUnits, creepUnits]);
+  const heroUnit = useMemo(() => heroToUnit(hero), [hero]);
+  const isoUnits = useMemo(() => [...towerUnits, ...creepUnits, heroUnit], [towerUnits, creepUnits, heroUnit]);
   const pathFeatures = useMemo(() => pathToFeatures(path), [path]);
   const handleTileClick = useCallback((x, y) => {
     if (result !== "none") return;
@@ -49451,7 +49492,7 @@ function TowerDefenseBoard({
     ] }) })
   ] });
 }
-var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE;
+var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE, HERO_SPRITE;
 var init_TowerDefenseBoard = __esm({
   "components/game/organisms/TowerDefenseBoard.tsx"() {
     "use client";
@@ -49525,8 +49566,9 @@ var init_TowerDefenseBoard = __esm({
       { x: 13, y: 15 }
     ];
     DEFAULT_TD_TILES = buildDefaultTDTiles();
-    TOWER_SPRITE = `${CDN6}units/guardian.png`;
-    CREEP_SPRITE = `${CDN6}units/scrapper.png`;
+    TOWER_SPRITE = `${CDN6}sprite-sheets/guardian-sprite-sheet-se.png`;
+    CREEP_SPRITE = `${CDN6}sprite-sheets/scrapper-sprite-sheet-se.png`;
+    HERO_SPRITE = `${CDN6}sprite-sheets/amir-sprite-sheet-se.png`;
     TowerDefenseBoard.displayName = "TowerDefenseBoard";
   }
 });

package/dist/runtime/index.cjs

@@ -29220,13 +29220,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect81, useRef: useRef75, useCallback: useCallback119, useState: useState113 } = React81__namespace.default;
+      const { useEffect: useEffect82, useRef: useRef75, useCallback: useCallback119, useState: useState113 } = React81__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus4 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef75({ centerLat, centerLng, zoom });
-        useEffect81(() => {
+        useEffect82(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -29237,7 +29237,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect81(() => {
+        useEffect82(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -49056,12 +49056,25 @@ function pathToFeatures(path) {
     sprite: `${CDN6}world-map/road_straight.png`
   }));
 }
+function heroToUnit(hero) {
+  return {
+    id: hero.id,
+    position: { x: hero.x, y: hero.y },
+    name: "Hero",
+    team: "player",
+    sprite: HERO_SPRITE,
+    unitType: "amir",
+    health: 1,
+    maxHealth: 1
+  };
+}
 function TowerDefenseBoard({
   entity,
   tiles: propTiles,
   path: propPath,
   towers: propTowers,
   creeps: propCreeps,
+  hero: propHero,
   gold: propGold,
   lives: propLives,
   wave: propWave,
@@ -49077,6 +49090,7 @@ function TowerDefenseBoard({
   startWaveEvent,
   playAgainEvent,
   gameEndEvent,
+  moveHeroEvent,
   className
 }) {
   const board = boardEntity(entity) ?? {};
@@ -49088,6 +49102,7 @@ function TowerDefenseBoard({
   const path = rawPath.length > 0 ? rawPath : DEFAULT_TD_PATH;
   const towers = propTowers ?? rows(board.towers);
   const creeps = propCreeps ?? rows(board.creeps);
+  const hero = propHero ?? { id: "hero", x: 8, y: 8 };
   const gold = propGold ?? num(board.gold, 100);
   const lives = propLives ?? num(board.lives, 20);
   const wave = propWave ?? num(board.wave, 1);
@@ -49105,6 +49120,31 @@ function TowerDefenseBoard({
   if (result === "none") {
     emittedGameEnd.current = false;
   }
+  const moveHeroEventRef = React81.useRef(moveHeroEvent);
+  moveHeroEventRef.current = moveHeroEvent;
+  const resultRef = React81.useRef(result);
+  resultRef.current = result;
+  React81.useEffect(() => {
+    function onKeyDown(e) {
+      const evt = moveHeroEventRef.current;
+      if (!evt || resultRef.current !== "none") return;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowUp") {
+        dy = -1;
+      } else if (e.key === "ArrowDown") {
+        dy = 1;
+      } else if (e.key === "ArrowLeft") {
+        dx = -1;
+      } else if (e.key === "ArrowRight") {
+        dx = 1;
+      } else return;
+      e.preventDefault();
+      eventBus.emit(`UI:${evt}`, { dx, dy });
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [eventBus]);
   const towerPositions = React81.useMemo(() => new Set(towers.map((t2) => `${t2.x},${t2.y}`)), [towers]);
   const pathPositions = React81.useMemo(() => new Set(path.map((p2) => `${p2.x},${p2.y}`)), [path]);
   const validMoves = React81.useMemo(() => {
@@ -49116,7 +49156,8 @@ function TowerDefenseBoard({
   const isoTiles = React81.useMemo(() => tilesToIso(tiles), [tiles]);
   const towerUnits = React81.useMemo(() => towersToUnits(towers), [towers]);
   const creepUnits = React81.useMemo(() => creepsToUnits(creeps), [creeps]);
-  const isoUnits = React81.useMemo(() => [...towerUnits, ...creepUnits], [towerUnits, creepUnits]);
+  const heroUnit = React81.useMemo(() => heroToUnit(hero), [hero]);
+  const isoUnits = React81.useMemo(() => [...towerUnits, ...creepUnits, heroUnit], [towerUnits, creepUnits, heroUnit]);
   const pathFeatures = React81.useMemo(() => pathToFeatures(path), [path]);
   const handleTileClick = React81.useCallback((x, y) => {
     if (result !== "none") return;
@@ -49215,7 +49256,7 @@ function TowerDefenseBoard({
     ] }) })
   ] });
 }
-var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE;
+var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE, HERO_SPRITE;
 var init_TowerDefenseBoard = __esm({
   "components/game/organisms/TowerDefenseBoard.tsx"() {
     "use client";
@@ -49289,8 +49330,9 @@ var init_TowerDefenseBoard = __esm({
       { x: 13, y: 15 }
     ];
     DEFAULT_TD_TILES = buildDefaultTDTiles();
-    TOWER_SPRITE = `${CDN6}units/guardian.png`;
-    CREEP_SPRITE = `${CDN6}units/scrapper.png`;
+    TOWER_SPRITE = `${CDN6}sprite-sheets/guardian-sprite-sheet-se.png`;
+    CREEP_SPRITE = `${CDN6}sprite-sheets/scrapper-sprite-sheet-se.png`;
+    HERO_SPRITE = `${CDN6}sprite-sheets/amir-sprite-sheet-se.png`;
     TowerDefenseBoard.displayName = "TowerDefenseBoard";
   }
 });

package/dist/runtime/index.js

@@ -29173,13 +29173,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect81, useRef: useRef75, useCallback: useCallback119, useState: useState113 } = React81__default;
+      const { useEffect: useEffect82, useRef: useRef75, useCallback: useCallback119, useState: useState113 } = React81__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus4 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef75({ centerLat, centerLng, zoom });
-        useEffect81(() => {
+        useEffect82(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -29190,7 +29190,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect81(() => {
+        useEffect82(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -49009,12 +49009,25 @@ function pathToFeatures(path) {
     sprite: `${CDN6}world-map/road_straight.png`
   }));
 }
+function heroToUnit(hero) {
+  return {
+    id: hero.id,
+    position: { x: hero.x, y: hero.y },
+    name: "Hero",
+    team: "player",
+    sprite: HERO_SPRITE,
+    unitType: "amir",
+    health: 1,
+    maxHealth: 1
+  };
+}
 function TowerDefenseBoard({
   entity,
   tiles: propTiles,
   path: propPath,
   towers: propTowers,
   creeps: propCreeps,
+  hero: propHero,
   gold: propGold,
   lives: propLives,
   wave: propWave,
@@ -49030,6 +49043,7 @@ function TowerDefenseBoard({
   startWaveEvent,
   playAgainEvent,
   gameEndEvent,
+  moveHeroEvent,
   className
 }) {
   const board = boardEntity(entity) ?? {};
@@ -49041,6 +49055,7 @@ function TowerDefenseBoard({
   const path = rawPath.length > 0 ? rawPath : DEFAULT_TD_PATH;
   const towers = propTowers ?? rows(board.towers);
   const creeps = propCreeps ?? rows(board.creeps);
+  const hero = propHero ?? { id: "hero", x: 8, y: 8 };
   const gold = propGold ?? num(board.gold, 100);
   const lives = propLives ?? num(board.lives, 20);
   const wave = propWave ?? num(board.wave, 1);
@@ -49058,6 +49073,31 @@ function TowerDefenseBoard({
   if (result === "none") {
     emittedGameEnd.current = false;
   }
+  const moveHeroEventRef = useRef(moveHeroEvent);
+  moveHeroEventRef.current = moveHeroEvent;
+  const resultRef = useRef(result);
+  resultRef.current = result;
+  useEffect(() => {
+    function onKeyDown(e) {
+      const evt = moveHeroEventRef.current;
+      if (!evt || resultRef.current !== "none") return;
+      let dx = 0;
+      let dy = 0;
+      if (e.key === "ArrowUp") {
+        dy = -1;
+      } else if (e.key === "ArrowDown") {
+        dy = 1;
+      } else if (e.key === "ArrowLeft") {
+        dx = -1;
+      } else if (e.key === "ArrowRight") {
+        dx = 1;
+      } else return;
+      e.preventDefault();
+      eventBus.emit(`UI:${evt}`, { dx, dy });
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [eventBus]);
   const towerPositions = useMemo(() => new Set(towers.map((t2) => `${t2.x},${t2.y}`)), [towers]);
   const pathPositions = useMemo(() => new Set(path.map((p2) => `${p2.x},${p2.y}`)), [path]);
   const validMoves = useMemo(() => {
@@ -49069,7 +49109,8 @@ function TowerDefenseBoard({
   const isoTiles = useMemo(() => tilesToIso(tiles), [tiles]);
   const towerUnits = useMemo(() => towersToUnits(towers), [towers]);
   const creepUnits = useMemo(() => creepsToUnits(creeps), [creeps]);
-  const isoUnits = useMemo(() => [...towerUnits, ...creepUnits], [towerUnits, creepUnits]);
+  const heroUnit = useMemo(() => heroToUnit(hero), [hero]);
+  const isoUnits = useMemo(() => [...towerUnits, ...creepUnits, heroUnit], [towerUnits, creepUnits, heroUnit]);
   const pathFeatures = useMemo(() => pathToFeatures(path), [path]);
   const handleTileClick = useCallback((x, y) => {
     if (result !== "none") return;
@@ -49168,7 +49209,7 @@ function TowerDefenseBoard({
     ] }) })
   ] });
 }
-var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE;
+var CDN6, TD_GRID_W, TD_GRID_H, TERRAIN_SPRITES, DEFAULT_TD_PATH, DEFAULT_TD_TILES, TOWER_SPRITE, CREEP_SPRITE, HERO_SPRITE;
 var init_TowerDefenseBoard = __esm({
   "components/game/organisms/TowerDefenseBoard.tsx"() {
     "use client";
@@ -49242,8 +49283,9 @@ var init_TowerDefenseBoard = __esm({
       { x: 13, y: 15 }
     ];
     DEFAULT_TD_TILES = buildDefaultTDTiles();
-    TOWER_SPRITE = `${CDN6}units/guardian.png`;
-    CREEP_SPRITE = `${CDN6}units/scrapper.png`;
+    TOWER_SPRITE = `${CDN6}sprite-sheets/guardian-sprite-sheet-se.png`;
+    CREEP_SPRITE = `${CDN6}sprite-sheets/scrapper-sprite-sheet-se.png`;
+    HERO_SPRITE = `${CDN6}sprite-sheets/amir-sprite-sheet-se.png`;
     TowerDefenseBoard.displayName = "TowerDefenseBoard";
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.57.0",
+  "version": "5.58.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [