@almadar/ui 5.57.0 → 5.59.0

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);
@@ -37651,6 +37651,9 @@ var init_GraphCanvas = __esm({
       actions,
       onNodeClick,
       nodeClickEvent,
+      selectedNodeId,
+      repulsion = 800,
+      linkDistance = 100,
       layout = "force",
       entity,
       isLoading = false,
@@ -37666,6 +37669,35 @@ var init_GraphCanvas = __esm({
       const [hoveredNode, setHoveredNode] = useState(null);
       const nodesRef = useRef([]);
       const [, forceUpdate] = useState(0);
+      const interactionRef = useRef({
+        mode: "none",
+        dragNodeId: null,
+        startMouse: { x: 0, y: 0 },
+        startOffset: { x: 0, y: 0 },
+        downPos: { x: 0, y: 0 }
+      });
+      const toCoords = useCallback(
+        (e) => {
+          const canvas = canvasRef.current;
+          if (!canvas) return null;
+          const rect = canvas.getBoundingClientRect();
+          const screenX = e.clientX - rect.left;
+          const screenY = e.clientY - rect.top;
+          return {
+            screenX,
+            screenY,
+            graphX: (screenX - offset.x) / zoom,
+            graphY: (screenY - offset.y) / zoom
+          };
+        },
+        [offset, zoom]
+      );
+      const nodeAt = useCallback((graphX, graphY) => {
+        return nodesRef.current.find((n) => {
+          const dist = Math.sqrt((n.x - graphX) ** 2 + (n.y - graphY) ** 2);
+          return dist < (n.size || 8) + 4;
+        });
+      }, []);
       const handleAction = useCallback(
         (action) => {
           if (action.event) {
@@ -37731,7 +37763,7 @@ var init_GraphCanvas = __esm({
                 const dx = nodes[j].x - nodes[i].x;
                 const dy = nodes[j].y - nodes[i].y;
                 const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const force = 800 / (dist * dist);
+                const force = repulsion / (dist * dist);
                 const fx = dx / dist * force;
                 const fy = dy / dist * force;
                 nodes[i].fx -= fx;
@@ -37747,7 +37779,7 @@ var init_GraphCanvas = __esm({
               const dx = target.x - source.x;
               const dy = target.y - source.y;
               const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-              const force = (dist - 100) * 0.05;
+              const force = (dist - linkDistance) * 0.05;
               const fx = dx / dist * force;
               const fy = dy / dist * force;
               source.fx += fx;
@@ -37781,7 +37813,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -37817,18 +37849,25 @@ var init_GraphCanvas = __esm({
           const size = node.size || 8;
           const color = node.color || getGroupColor(node.group, groups);
           const isHovered = hoveredNode === node.id;
+          const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
+          const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
           ctx.beginPath();
-          ctx.arc(node.x, node.y, isHovered ? size + 2 : size, 0, Math.PI * 2);
+          ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
           ctx.fillStyle = color;
           ctx.fill();
-          ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
-          ctx.lineWidth = isHovered ? 2 : 1;
+          if (isSelected) {
+            ctx.strokeStyle = "var(--color-accent)";
+            ctx.lineWidth = 3;
+          } else {
+            ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
+            ctx.lineWidth = isHovered ? 2 : 1;
+          }
           ctx.stroke();
           if (showLabels && node.label) {
             ctx.fillStyle = "#666666";
-            ctx.font = `${isHovered ? "bold " : ""}10px system-ui`;
+            ctx.font = `${isSelected || isHovered ? "bold " : ""}10px system-ui`;
             ctx.textAlign = "center";
-            ctx.fillText(node.label, node.x, node.y + size + 12);
+            ctx.fillText(node.label, node.x, node.y + radius + 12);
           }
         }
         ctx.restore();
@@ -37839,6 +37878,97 @@ var init_GraphCanvas = __esm({
         setZoom(1);
         setOffset({ x: 0, y: 0 });
       }, []);
+      const handleWheel = useCallback(
+        (e) => {
+          if (!interactive) return;
+          e.preventDefault();
+          const coords = toCoords(e);
+          if (!coords) return;
+          const oldZoom = zoom;
+          const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+          const newZoom = Math.max(0.3, Math.min(3, oldZoom * factor));
+          if (newZoom === oldZoom) return;
+          setOffset((o) => ({
+            x: coords.screenX - (coords.screenX - o.x) * (newZoom / oldZoom),
+            y: coords.screenY - (coords.screenY - o.y) * (newZoom / oldZoom)
+          }));
+          setZoom(newZoom);
+        },
+        [interactive, toCoords, zoom]
+      );
+      const handleMouseDown = useCallback(
+        (e) => {
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          const state = interactionRef.current;
+          state.downPos = { x: e.clientX, y: e.clientY };
+          state.startMouse = { x: e.clientX, y: e.clientY };
+          state.startOffset = { ...offset };
+          if (draggable && node) {
+            state.mode = "dragging";
+            state.dragNodeId = node.id;
+          } else if (interactive) {
+            state.mode = "panning";
+            state.dragNodeId = null;
+          } else {
+            state.mode = "none";
+            state.dragNodeId = null;
+          }
+        },
+        [toCoords, nodeAt, draggable, interactive, offset]
+      );
+      const handleMouseMove = useCallback(
+        (e) => {
+          const state = interactionRef.current;
+          if (state.mode === "panning") {
+            const dx = e.clientX - state.startMouse.x;
+            const dy = e.clientY - state.startMouse.y;
+            setOffset({ x: state.startOffset.x + dx, y: state.startOffset.y + dy });
+            return;
+          }
+          if (state.mode === "dragging" && state.dragNodeId) {
+            const coords2 = toCoords(e);
+            if (!coords2) return;
+            const node2 = nodesRef.current.find((n) => n.id === state.dragNodeId);
+            if (node2) {
+              node2.x = coords2.graphX;
+              node2.y = coords2.graphY;
+              node2.vx = 0;
+              node2.vy = 0;
+              forceUpdate((n) => n + 1);
+            }
+            return;
+          }
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          setHoveredNode(node?.id ?? null);
+        },
+        [toCoords, nodeAt]
+      );
+      const handleMouseUp = useCallback(
+        (e) => {
+          const state = interactionRef.current;
+          const moved = Math.abs(e.clientX - state.downPos.x) + Math.abs(e.clientY - state.downPos.y);
+          state.mode = "none";
+          state.dragNodeId = null;
+          if (moved < 4) {
+            const coords = toCoords(e);
+            if (!coords) return;
+            const node = nodeAt(coords.graphX, coords.graphY);
+            if (node) {
+              handleNodeClick(node);
+            }
+          }
+        },
+        [toCoords, nodeAt, handleNodeClick]
+      );
+      const handleMouseLeave = useCallback(() => {
+        interactionRef.current.mode = "none";
+        interactionRef.current.dragNodeId = null;
+        setHoveredNode(null);
+      }, []);
       if (isLoading) {
         return /* @__PURE__ */ jsx(LoadingState, { message: t("common.loading"), className });
       }
@@ -37900,20 +38030,11 @@ var init_GraphCanvas = __esm({
             height,
             className: "w-full cursor-grab active:cursor-grabbing",
             style: { height },
-            onClick: (e) => {
-              const canvas = canvasRef.current;
-              if (!canvas) return;
-              const rect = canvas.getBoundingClientRect();
-              const x = (e.clientX - rect.left - offset.x) / zoom;
-              const y = (e.clientY - rect.top - offset.y) / zoom;
-              const clickedNode = nodesRef.current.find((n) => {
-                const dist = Math.sqrt((n.x - x) ** 2 + (n.y - y) ** 2);
-                return dist < (n.size || 8) + 4;
-              });
-              if (clickedNode) {
-                handleNodeClick(clickedNode);
-              }
-            }
+            onWheel: handleWheel,
+            onMouseDown: handleMouseDown,
+            onMouseMove: handleMouseMove,
+            onMouseUp: handleMouseUp,
+            onMouseLeave: handleMouseLeave
           }
         ) }),
         groups.length > 1 && /* @__PURE__ */ jsx(HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
@@ -49009,12 +49130,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 +49164,7 @@ function TowerDefenseBoard({
   startWaveEvent,
   playAgainEvent,
   gameEndEvent,
+  moveHeroEvent,
   className
 }) {
   const board = boardEntity(entity) ?? {};
@@ -49041,6 +49176,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 +49194,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 +49230,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 +49330,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 +49404,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.59.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [