@almadar/ui 5.64.0 → 5.65.0

package/dist/providers/index.cjs

@@ -11286,16 +11286,26 @@ var init_useUnitSpriteAtlas = __esm({
 });
 
 // components/game/organisms/utils/isometric.ts
-function isoToScreen(tileX, tileY, scale, baseOffsetX) {
+function isoToScreen(tileX, tileY, scale, baseOffsetX, layout = "isometric") {
   const scaledTileWidth = TILE_WIDTH * scale;
   const scaledFloorHeight = FLOOR_HEIGHT * scale;
+  if (layout === "hex") {
+    const screenX2 = tileX * scaledTileWidth + (tileY & 1) * (scaledTileWidth / 2) + baseOffsetX;
+    const screenY2 = tileY * (scaledFloorHeight * 0.75);
+    return { x: screenX2, y: screenY2 };
+  }
   const screenX = (tileX - tileY) * (scaledTileWidth / 2) + baseOffsetX;
   const screenY = (tileX + tileY) * (scaledFloorHeight / 2);
   return { x: screenX, y: screenY };
 }
-function screenToIso(screenX, screenY, scale, baseOffsetX) {
+function screenToIso(screenX, screenY, scale, baseOffsetX, layout = "isometric") {
   const scaledTileWidth = TILE_WIDTH * scale;
   const scaledFloorHeight = FLOOR_HEIGHT * scale;
+  if (layout === "hex") {
+    const row = Math.round(screenY / (scaledFloorHeight * 0.75));
+    const col = Math.round((screenX - (row & 1) * (scaledTileWidth / 2) - baseOffsetX) / scaledTileWidth);
+    return { x: col, y: row };
+  }
   const adjustedX = screenX - baseOffsetX;
   const tileX = (adjustedX / (scaledTileWidth / 2) + screenY / (scaledFloorHeight / 2)) / 2;
   const tileY = (screenY / (scaledFloorHeight / 2) - adjustedX / (scaledTileWidth / 2)) / 2;
@@ -11345,6 +11355,7 @@ function IsometricCanvas({
   tileHoverEvent,
   tileLeaveEvent,
   // Rendering options
+  tileLayout = "isometric",
   scale = 0.4,
   debug: debug2 = false,
   backgroundImage = "",
@@ -11414,13 +11425,17 @@ function IsometricCanvas({
   );
   const sortedTiles = React85.useMemo(() => {
     const tiles = [...tilesProp];
-    tiles.sort((a, b) => {
-      const depthA = a.x + a.y;
-      const depthB = b.x + b.y;
-      return depthA !== depthB ? depthA - depthB : a.y - b.y;
-    });
+    if (tileLayout === "hex") {
+      tiles.sort((a, b) => a.y !== b.y ? a.y - b.y : a.x - b.x);
+    } else {
+      tiles.sort((a, b) => {
+        const depthA = a.x + a.y;
+        const depthB = b.x + b.y;
+        return depthA !== depthB ? depthA - depthB : a.y - b.y;
+      });
+    }
     return tiles;
-  }, [tilesProp]);
+  }, [tilesProp, tileLayout]);
   const gridWidth = React85.useMemo(() => {
     if (sortedTiles.length === 0) return 0;
     return Math.max(...sortedTiles.map((t2) => t2.x)) + 1;
@@ -11534,7 +11549,7 @@ function IsometricCanvas({
     miniCanvas.width = mW;
     miniCanvas.height = mH;
     mCtx.clearRect(0, 0, mW, mH);
-    const allScreenPos = sortedTiles.map((t2) => isoToScreen(t2.x, t2.y, scale, baseOffsetX));
+    const allScreenPos = sortedTiles.map((t2) => isoToScreen(t2.x, t2.y, scale, baseOffsetX, tileLayout));
     const minX = Math.min(...allScreenPos.map((p2) => p2.x));
     const maxX = Math.max(...allScreenPos.map((p2) => p2.x + scaledTileWidth));
     const minY = Math.min(...allScreenPos.map((p2) => p2.y));
@@ -11545,7 +11560,7 @@ function IsometricCanvas({
     const offsetMx = (mW - worldW * scaleM) / 2;
     const offsetMy = (mH - worldH * scaleM) / 2;
     for (const tile of sortedTiles) {
-      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX);
+      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX, tileLayout);
       const mx = (pos.x - minX) * scaleM + offsetMx;
       const my = (pos.y - minY) * scaleM + offsetMy;
       const mTileW = scaledTileWidth * scaleM;
@@ -11561,7 +11576,7 @@ function IsometricCanvas({
     }
     for (const unit of units) {
       if (!unit.position) continue;
-      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
+      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX, tileLayout);
       const mx = (pos.x + scaledTileWidth / 2 - minX) * scaleM + offsetMx;
       const my = (pos.y + scaledTileHeight / 2 - minY) * scaleM + offsetMy;
       mCtx.fillStyle = unit.team === "player" ? "#60a5fa" : unit.team === "enemy" ? "#f87171" : "#9ca3af";
@@ -11577,7 +11592,7 @@ function IsometricCanvas({
     mCtx.strokeStyle = "rgba(255, 255, 255, 0.8)";
     mCtx.lineWidth = 1;
     mCtx.strokeRect(vLeft, vTop, vW, vH);
-  }, [showMinimap, sortedTiles, units, scale, baseOffsetX, scaledTileWidth, scaledTileHeight, scaledFloorHeight, viewportSize, cameraRef]);
+  }, [showMinimap, sortedTiles, units, tileLayout, scale, baseOffsetX, scaledTileWidth, scaledTileHeight, scaledFloorHeight, viewportSize, cameraRef]);
   const draw = React85.useCallback((animTime) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -11617,7 +11632,7 @@ function IsometricCanvas({
     const visTop = cam.y - viewportSize.height / cam.zoom;
     const visBottom = cam.y + viewportSize.height * 2 / cam.zoom;
     for (const tile of sortedTiles) {
-      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX);
+      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX, tileLayout);
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
@@ -11697,12 +11712,13 @@ function IsometricCanvas({
       }
     }
     const sortedFeatures = [...features].sort((a, b) => {
+      if (tileLayout === "hex") return a.y !== b.y ? a.y - b.y : a.x - b.x;
       const depthA = a.x + a.y;
       const depthB = b.x + b.y;
       return depthA !== depthB ? depthA - depthB : a.y - b.y;
     });
     for (const feature of sortedFeatures) {
-      const pos = isoToScreen(feature.x, feature.y, scale, baseOffsetX);
+      const pos = isoToScreen(feature.x, feature.y, scale, baseOffsetX, tileLayout);
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
@@ -11737,12 +11753,13 @@ function IsometricCanvas({
     }
     const unitsWithPosition = units.filter((u) => !!u.position);
     const sortedUnits = [...unitsWithPosition].sort((a, b) => {
+      if (tileLayout === "hex") return a.position.y !== b.position.y ? a.position.y - b.position.y : a.position.x - b.position.x;
       const depthA = a.position.x + a.position.y;
       const depthB = b.position.x + b.position.y;
       return depthA !== depthB ? depthA - depthB : a.position.y - b.position.y;
     });
     for (const unit of sortedUnits) {
-      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
+      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX, tileLayout);
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
@@ -11762,7 +11779,7 @@ function IsometricCanvas({
         drawH = maxUnitW / ar;
       }
       if (unit.previousPosition && (unit.previousPosition.x !== unit.position.x || unit.previousPosition.y !== unit.position.y)) {
-        const ghostPos = isoToScreen(unit.previousPosition.x, unit.previousPosition.y, scale, baseOffsetX);
+        const ghostPos = isoToScreen(unit.previousPosition.x, unit.previousPosition.y, scale, baseOffsetX, tileLayout);
         const ghostCenterX = ghostPos.x + scaledTileWidth / 2;
         const ghostGroundY = ghostPos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
         ctx.save();
@@ -11891,6 +11908,7 @@ function IsometricCanvas({
     units,
     features,
     selectedUnitId,
+    tileLayout,
     scale,
     debug2,
     resolveTerrainSpriteUrl,
@@ -11919,14 +11937,14 @@ function IsometricCanvas({
     if (!selectedUnitId) return;
     const unit = units.find((u) => u.id === selectedUnitId);
     if (!unit?.position) return;
-    const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
+    const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX, tileLayout);
     const centerX = pos.x + scaledTileWidth / 2;
     const centerY = pos.y + scaledDiamondTopY + scaledFloorHeight / 2;
     targetCameraRef.current = {
       x: centerX - viewportSize.width / 2,
       y: centerY - viewportSize.height / 2
     };
-  }, [selectedUnitId, units, scale, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
+  }, [selectedUnitId, units, tileLayout, scale, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
   React85.useEffect(() => {
     const hasAnimations = units.length > 0 || validMoves.length > 0 || attackTargets.length > 0 || selectedUnitId != null || targetCameraRef.current != null || hasActiveEffects2 || pendingCount > 0 || atlasPending > 0;
     draw(animTimeRef.current);
@@ -11959,13 +11977,13 @@ function IsometricCanvas({
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
     const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
-    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
+    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX, tileLayout);
     const tileExists = tilesProp.some((t2) => t2.x === isoPos.x && t2.y === isoPos.y);
     if (tileExists) {
       if (tileHoverEvent) eventBus.emit(`UI:${tileHoverEvent}`, { x: isoPos.x, y: isoPos.y });
       onTileHover?.(isoPos.x, isoPos.y);
     }
-  }, [onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
+  }, [onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, tileLayout, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
   const handleCanvasPointerUp = React85.useCallback((e) => {
     singlePointerActiveRef.current = false;
     if (enableCamera) handlePointerUp();
@@ -11974,7 +11992,7 @@ function IsometricCanvas({
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
     const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
-    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
+    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX, tileLayout);
     const clickedUnit = units.find((u) => u.position?.x === isoPos.x && u.position?.y === isoPos.y);
     if (clickedUnit && (onUnitClick || unitClickEvent)) {
       if (unitClickEvent) eventBus.emit(`UI:${unitClickEvent}`, { unitId: clickedUnit.id });
@@ -11986,7 +12004,7 @@ function IsometricCanvas({
         onTileClick?.(isoPos.x, isoPos.y);
       }
     }
-  }, [enableCamera, handlePointerUp, dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
+  }, [enableCamera, handlePointerUp, dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, tileLayout, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
   const handleCanvasPointerLeave = React85.useCallback(() => {
     handleMouseLeave();
     if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
@@ -44561,6 +44579,48 @@ var init_HeroOrganism = __esm({
     _HeroClickInterceptor.displayName = "_HeroClickInterceptor";
   }
 });
+function HexStrategyBoard({
+  tiles,
+  units,
+  features,
+  assetManifest,
+  assetBaseUrl,
+  scale = 0.45,
+  showMinimap = true,
+  enableCamera = true,
+  tileClickEvent,
+  unitClickEvent,
+  isLoading,
+  error,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hex-strategy-board relative w-full h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    IsometricCanvas_default,
+    {
+      tileLayout: "hex",
+      tiles,
+      units,
+      features,
+      assetManifest,
+      assetBaseUrl,
+      scale,
+      showMinimap,
+      enableCamera,
+      tileClickEvent,
+      unitClickEvent,
+      isLoading,
+      error
+    }
+  ) });
+}
+var init_HexStrategyBoard = __esm({
+  "components/game/organisms/HexStrategyBoard.tsx"() {
+    "use client";
+    init_cn();
+    init_IsometricCanvas();
+    HexStrategyBoard.displayName = "HexStrategyBoard";
+  }
+});
 var LandingPageTemplate;
 var init_LandingPageTemplate = __esm({
   "components/marketing/templates/LandingPageTemplate.tsx"() {
@@ -52370,6 +52430,7 @@ var init_component_registry_generated = __esm({
     init_HealthPanel();
     init_HeroOrganism();
     init_HeroSection();
+    init_HexStrategyBoard();
     init_Icon();
     init_InfiniteScrollSentinel();
     init_Input();
@@ -52706,6 +52767,7 @@ var init_component_registry_generated = __esm({
       "HealthPanel": HealthPanel,
       "HeroOrganism": HeroOrganism,
       "HeroSection": HeroSection,
+      "HexStrategyBoard": HexStrategyBoard,
       "Icon": Icon,
       "InfiniteScrollSentinel": InfiniteScrollSentinel,
       "Input": Input,

package/dist/providers/index.js

@@ -11239,16 +11239,26 @@ var init_useUnitSpriteAtlas = __esm({
 });
 
 // components/game/organisms/utils/isometric.ts
-function isoToScreen(tileX, tileY, scale, baseOffsetX) {
+function isoToScreen(tileX, tileY, scale, baseOffsetX, layout = "isometric") {
   const scaledTileWidth = TILE_WIDTH * scale;
   const scaledFloorHeight = FLOOR_HEIGHT * scale;
+  if (layout === "hex") {
+    const screenX2 = tileX * scaledTileWidth + (tileY & 1) * (scaledTileWidth / 2) + baseOffsetX;
+    const screenY2 = tileY * (scaledFloorHeight * 0.75);
+    return { x: screenX2, y: screenY2 };
+  }
   const screenX = (tileX - tileY) * (scaledTileWidth / 2) + baseOffsetX;
   const screenY = (tileX + tileY) * (scaledFloorHeight / 2);
   return { x: screenX, y: screenY };
 }
-function screenToIso(screenX, screenY, scale, baseOffsetX) {
+function screenToIso(screenX, screenY, scale, baseOffsetX, layout = "isometric") {
   const scaledTileWidth = TILE_WIDTH * scale;
   const scaledFloorHeight = FLOOR_HEIGHT * scale;
+  if (layout === "hex") {
+    const row = Math.round(screenY / (scaledFloorHeight * 0.75));
+    const col = Math.round((screenX - (row & 1) * (scaledTileWidth / 2) - baseOffsetX) / scaledTileWidth);
+    return { x: col, y: row };
+  }
   const adjustedX = screenX - baseOffsetX;
   const tileX = (adjustedX / (scaledTileWidth / 2) + screenY / (scaledFloorHeight / 2)) / 2;
   const tileY = (screenY / (scaledFloorHeight / 2) - adjustedX / (scaledTileWidth / 2)) / 2;
@@ -11298,6 +11308,7 @@ function IsometricCanvas({
   tileHoverEvent,
   tileLeaveEvent,
   // Rendering options
+  tileLayout = "isometric",
   scale = 0.4,
   debug: debug2 = false,
   backgroundImage = "",
@@ -11367,13 +11378,17 @@ function IsometricCanvas({
   );
   const sortedTiles = useMemo(() => {
     const tiles = [...tilesProp];
-    tiles.sort((a, b) => {
-      const depthA = a.x + a.y;
-      const depthB = b.x + b.y;
-      return depthA !== depthB ? depthA - depthB : a.y - b.y;
-    });
+    if (tileLayout === "hex") {
+      tiles.sort((a, b) => a.y !== b.y ? a.y - b.y : a.x - b.x);
+    } else {
+      tiles.sort((a, b) => {
+        const depthA = a.x + a.y;
+        const depthB = b.x + b.y;
+        return depthA !== depthB ? depthA - depthB : a.y - b.y;
+      });
+    }
     return tiles;
-  }, [tilesProp]);
+  }, [tilesProp, tileLayout]);
   const gridWidth = useMemo(() => {
     if (sortedTiles.length === 0) return 0;
     return Math.max(...sortedTiles.map((t2) => t2.x)) + 1;
@@ -11487,7 +11502,7 @@ function IsometricCanvas({
     miniCanvas.width = mW;
     miniCanvas.height = mH;
     mCtx.clearRect(0, 0, mW, mH);
-    const allScreenPos = sortedTiles.map((t2) => isoToScreen(t2.x, t2.y, scale, baseOffsetX));
+    const allScreenPos = sortedTiles.map((t2) => isoToScreen(t2.x, t2.y, scale, baseOffsetX, tileLayout));
     const minX = Math.min(...allScreenPos.map((p2) => p2.x));
     const maxX = Math.max(...allScreenPos.map((p2) => p2.x + scaledTileWidth));
     const minY = Math.min(...allScreenPos.map((p2) => p2.y));
@@ -11498,7 +11513,7 @@ function IsometricCanvas({
     const offsetMx = (mW - worldW * scaleM) / 2;
     const offsetMy = (mH - worldH * scaleM) / 2;
     for (const tile of sortedTiles) {
-      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX);
+      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX, tileLayout);
       const mx = (pos.x - minX) * scaleM + offsetMx;
       const my = (pos.y - minY) * scaleM + offsetMy;
       const mTileW = scaledTileWidth * scaleM;
@@ -11514,7 +11529,7 @@ function IsometricCanvas({
     }
     for (const unit of units) {
       if (!unit.position) continue;
-      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
+      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX, tileLayout);
       const mx = (pos.x + scaledTileWidth / 2 - minX) * scaleM + offsetMx;
       const my = (pos.y + scaledTileHeight / 2 - minY) * scaleM + offsetMy;
       mCtx.fillStyle = unit.team === "player" ? "#60a5fa" : unit.team === "enemy" ? "#f87171" : "#9ca3af";
@@ -11530,7 +11545,7 @@ function IsometricCanvas({
     mCtx.strokeStyle = "rgba(255, 255, 255, 0.8)";
     mCtx.lineWidth = 1;
     mCtx.strokeRect(vLeft, vTop, vW, vH);
-  }, [showMinimap, sortedTiles, units, scale, baseOffsetX, scaledTileWidth, scaledTileHeight, scaledFloorHeight, viewportSize, cameraRef]);
+  }, [showMinimap, sortedTiles, units, tileLayout, scale, baseOffsetX, scaledTileWidth, scaledTileHeight, scaledFloorHeight, viewportSize, cameraRef]);
   const draw = useCallback((animTime) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -11570,7 +11585,7 @@ function IsometricCanvas({
     const visTop = cam.y - viewportSize.height / cam.zoom;
     const visBottom = cam.y + viewportSize.height * 2 / cam.zoom;
     for (const tile of sortedTiles) {
-      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX);
+      const pos = isoToScreen(tile.x, tile.y, scale, baseOffsetX, tileLayout);
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
@@ -11650,12 +11665,13 @@ function IsometricCanvas({
       }
     }
     const sortedFeatures = [...features].sort((a, b) => {
+      if (tileLayout === "hex") return a.y !== b.y ? a.y - b.y : a.x - b.x;
       const depthA = a.x + a.y;
       const depthB = b.x + b.y;
       return depthA !== depthB ? depthA - depthB : a.y - b.y;
     });
     for (const feature of sortedFeatures) {
-      const pos = isoToScreen(feature.x, feature.y, scale, baseOffsetX);
+      const pos = isoToScreen(feature.x, feature.y, scale, baseOffsetX, tileLayout);
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
@@ -11690,12 +11706,13 @@ function IsometricCanvas({
     }
     const unitsWithPosition = units.filter((u) => !!u.position);
     const sortedUnits = [...unitsWithPosition].sort((a, b) => {
+      if (tileLayout === "hex") return a.position.y !== b.position.y ? a.position.y - b.position.y : a.position.x - b.position.x;
       const depthA = a.position.x + a.position.y;
       const depthB = b.position.x + b.position.y;
       return depthA !== depthB ? depthA - depthB : a.position.y - b.position.y;
     });
     for (const unit of sortedUnits) {
-      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
+      const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX, tileLayout);
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
@@ -11715,7 +11732,7 @@ function IsometricCanvas({
         drawH = maxUnitW / ar;
       }
       if (unit.previousPosition && (unit.previousPosition.x !== unit.position.x || unit.previousPosition.y !== unit.position.y)) {
-        const ghostPos = isoToScreen(unit.previousPosition.x, unit.previousPosition.y, scale, baseOffsetX);
+        const ghostPos = isoToScreen(unit.previousPosition.x, unit.previousPosition.y, scale, baseOffsetX, tileLayout);
         const ghostCenterX = ghostPos.x + scaledTileWidth / 2;
         const ghostGroundY = ghostPos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
         ctx.save();
@@ -11844,6 +11861,7 @@ function IsometricCanvas({
     units,
     features,
     selectedUnitId,
+    tileLayout,
     scale,
     debug2,
     resolveTerrainSpriteUrl,
@@ -11872,14 +11890,14 @@ function IsometricCanvas({
     if (!selectedUnitId) return;
     const unit = units.find((u) => u.id === selectedUnitId);
     if (!unit?.position) return;
-    const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX);
+    const pos = isoToScreen(unit.position.x, unit.position.y, scale, baseOffsetX, tileLayout);
     const centerX = pos.x + scaledTileWidth / 2;
     const centerY = pos.y + scaledDiamondTopY + scaledFloorHeight / 2;
     targetCameraRef.current = {
       x: centerX - viewportSize.width / 2,
       y: centerY - viewportSize.height / 2
     };
-  }, [selectedUnitId, units, scale, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
+  }, [selectedUnitId, units, tileLayout, scale, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
   useEffect(() => {
     const hasAnimations = units.length > 0 || validMoves.length > 0 || attackTargets.length > 0 || selectedUnitId != null || targetCameraRef.current != null || hasActiveEffects2 || pendingCount > 0 || atlasPending > 0;
     draw(animTimeRef.current);
@@ -11912,13 +11930,13 @@ function IsometricCanvas({
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
     const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
-    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
+    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX, tileLayout);
     const tileExists = tilesProp.some((t2) => t2.x === isoPos.x && t2.y === isoPos.y);
     if (tileExists) {
       if (tileHoverEvent) eventBus.emit(`UI:${tileHoverEvent}`, { x: isoPos.x, y: isoPos.y });
       onTileHover?.(isoPos.x, isoPos.y);
     }
-  }, [onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
+  }, [onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, tileLayout, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
   const handleCanvasPointerUp = useCallback((e) => {
     singlePointerActiveRef.current = false;
     if (enableCamera) handlePointerUp();
@@ -11927,7 +11945,7 @@ function IsometricCanvas({
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
     const adjustedY = world.y - scaledDiamondTopY - scaledFloorHeight / 2;
-    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
+    const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX, tileLayout);
     const clickedUnit = units.find((u) => u.position?.x === isoPos.x && u.position?.y === isoPos.y);
     if (clickedUnit && (onUnitClick || unitClickEvent)) {
       if (unitClickEvent) eventBus.emit(`UI:${unitClickEvent}`, { unitId: clickedUnit.id });
@@ -11939,7 +11957,7 @@ function IsometricCanvas({
         onTileClick?.(isoPos.x, isoPos.y);
       }
     }
-  }, [enableCamera, handlePointerUp, dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
+  }, [enableCamera, handlePointerUp, dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, tileLayout, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
   const handleCanvasPointerLeave = useCallback(() => {
     handleMouseLeave();
     if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
@@ -44514,6 +44532,48 @@ var init_HeroOrganism = __esm({
     _HeroClickInterceptor.displayName = "_HeroClickInterceptor";
   }
 });
+function HexStrategyBoard({
+  tiles,
+  units,
+  features,
+  assetManifest,
+  assetBaseUrl,
+  scale = 0.45,
+  showMinimap = true,
+  enableCamera = true,
+  tileClickEvent,
+  unitClickEvent,
+  isLoading,
+  error,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("hex-strategy-board relative w-full h-full", className), children: /* @__PURE__ */ jsx(
+    IsometricCanvas_default,
+    {
+      tileLayout: "hex",
+      tiles,
+      units,
+      features,
+      assetManifest,
+      assetBaseUrl,
+      scale,
+      showMinimap,
+      enableCamera,
+      tileClickEvent,
+      unitClickEvent,
+      isLoading,
+      error
+    }
+  ) });
+}
+var init_HexStrategyBoard = __esm({
+  "components/game/organisms/HexStrategyBoard.tsx"() {
+    "use client";
+    init_cn();
+    init_IsometricCanvas();
+    HexStrategyBoard.displayName = "HexStrategyBoard";
+  }
+});
 var LandingPageTemplate;
 var init_LandingPageTemplate = __esm({
   "components/marketing/templates/LandingPageTemplate.tsx"() {
@@ -52323,6 +52383,7 @@ var init_component_registry_generated = __esm({
     init_HealthPanel();
     init_HeroOrganism();
     init_HeroSection();
+    init_HexStrategyBoard();
     init_Icon();
     init_InfiniteScrollSentinel();
     init_Input();
@@ -52659,6 +52720,7 @@ var init_component_registry_generated = __esm({
       "HealthPanel": HealthPanel,
       "HeroOrganism": HeroOrganism,
       "HeroSection": HeroSection,
+      "HexStrategyBoard": HexStrategyBoard,
       "Icon": Icon,
       "InfiniteScrollSentinel": InfiniteScrollSentinel,
       "Input": Input,