@almadar/ui 5.64.0 → 5.65.0

package/dist/components/game/organisms/utils/isometric.d.ts

@@ -27,20 +27,32 @@ export declare const DIAMOND_TOP_Y = 374;
  * Feature type → fallback color mapping (when sprites not loaded).
  */
 export declare const FEATURE_COLORS: Record<string, string>;
+/**
+ * Tile layout mode. 'isometric' = 2:1 diamond projection (default).
+ * 'hex' = pointy-top offset-row hex grid.
+ *
+ * Hex constants (at scale=1):
+ *   w = TILE_WIDTH (256)   — horizontal cell width
+ *   h = FLOOR_HEIGHT (128) — vertical row stride (= w/2; hex row-to-row = h*0.75 = 96)
+ * Forward:  screenX = col*w + (row&1)*(w/2) + baseOffsetX
+ *           screenY = row * (h * 0.75)
+ * Inverse: row = round(screenY / (h*0.75)); col = round((screenX - (row&1)*(w/2) - baseOffsetX) / w)
+ */
+export type TileLayout = 'isometric' | 'hex';
 /**
  * Convert tile grid coordinates to screen pixel coordinates.
  *
- * Uses 2:1 diamond isometric projection:
- * - X increases to the lower-right
- * - Y increases to the lower-left
+ * For 'isometric' (default): 2:1 diamond projection.
+ * For 'hex': pointy-top offset-row projection (odd rows shifted right by w/2).
  *
- * @param tileX - Grid X coordinate
- * @param tileY - Grid Y coordinate
+ * @param tileX - Grid X (col) coordinate
+ * @param tileY - Grid Y (row) coordinate
  * @param scale - Render scale factor
  * @param baseOffsetX - Horizontal offset to center the grid
+ * @param layout - Tile layout mode (default: 'isometric')
  * @returns Screen position { x, y } of the tile's top-left corner
  */
-export declare function isoToScreen(tileX: number, tileY: number, scale: number, baseOffsetX: number): {
+export declare function isoToScreen(tileX: number, tileY: number, scale: number, baseOffsetX: number, layout?: TileLayout): {
     x: number;
     y: number;
 };
@@ -53,9 +65,10 @@ export declare function isoToScreen(tileX: number, tileY: number, scale: number,
  * @param screenY - Screen Y in pixels
  * @param scale - Render scale factor
  * @param baseOffsetX - Horizontal offset used in isoToScreen
+ * @param layout - Tile layout mode (default: 'isometric')
  * @returns Snapped grid position { x, y }
  */
-export declare function screenToIso(screenX: number, screenY: number, scale: number, baseOffsetX: number): {
+export declare function screenToIso(screenX: number, screenY: number, scale: number, baseOffsetX: number, layout?: TileLayout): {
     x: number;
     y: number;
 };

package/dist/components/index.cjs

@@ -9923,16 +9923,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 = exports.TILE_WIDTH * scale;
   const scaledFloorHeight = exports.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 = exports.TILE_WIDTH * scale;
   const scaledFloorHeight = exports.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;
@@ -9982,6 +9992,7 @@ function IsometricCanvas({
   tileHoverEvent,
   tileLeaveEvent,
   // Rendering options
+  tileLayout = "isometric",
   scale = 0.4,
   debug: debug2 = false,
   backgroundImage = "",
@@ -10051,13 +10062,17 @@ function IsometricCanvas({
   );
   const sortedTiles = React79.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 = React79.useMemo(() => {
     if (sortedTiles.length === 0) return 0;
     return Math.max(...sortedTiles.map((t2) => t2.x)) + 1;
@@ -10171,7 +10186,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));
@@ -10182,7 +10197,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;
@@ -10198,7 +10213,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";
@@ -10214,7 +10229,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 = React79.useCallback((animTime) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -10254,7 +10269,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;
       }
@@ -10334,12 +10349,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;
       }
@@ -10374,12 +10390,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;
       }
@@ -10399,7 +10416,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();
@@ -10528,6 +10545,7 @@ function IsometricCanvas({
     units,
     features,
     selectedUnitId,
+    tileLayout,
     scale,
     debug2,
     resolveTerrainSpriteUrl,
@@ -10556,14 +10574,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]);
   React79.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);
@@ -10596,13 +10614,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 = React79.useCallback((e) => {
     singlePointerActiveRef.current = false;
     if (enableCamera) handlePointerUp();
@@ -10611,7 +10629,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 });
@@ -10623,7 +10641,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 = React79.useCallback(() => {
     handleMouseLeave();
     if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
@@ -45314,6 +45332,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";
+  }
+});
 exports.LandingPageTemplate = void 0;
 var init_LandingPageTemplate = __esm({
   "components/marketing/templates/LandingPageTemplate.tsx"() {
@@ -53622,6 +53682,7 @@ var init_component_registry_generated = __esm({
     init_HealthPanel();
     init_HeroOrganism();
     init_HeroSection();
+    init_HexStrategyBoard();
     init_Icon();
     init_InfiniteScrollSentinel();
     init_Input();
@@ -53958,6 +54019,7 @@ var init_component_registry_generated = __esm({
       "HealthPanel": HealthPanel,
       "HeroOrganism": exports.HeroOrganism,
       "HeroSection": exports.HeroSection,
+      "HexStrategyBoard": HexStrategyBoard,
       "Icon": exports.Icon,
       "InfiniteScrollSentinel": exports.InfiniteScrollSentinel,
       "Input": exports.Input,
@@ -55603,6 +55665,7 @@ init_CityBuilderBoard();
 init_GameBoard3D();
 init_VisualNovelBoard();
 init_CardBattlerBoard();
+init_HexStrategyBoard();
 init_TraitStateViewer();
 init_TraitSlot();
 
@@ -56244,6 +56307,7 @@ exports.GameMenu = GameMenu;
 exports.GameOverScreen = GameOverScreen;
 exports.HealthBar = HealthBar;
 exports.HealthPanel = HealthPanel;
+exports.HexStrategyBoard = HexStrategyBoard;
 exports.InventoryGrid = InventoryGrid;
 exports.InventoryPanel = InventoryPanel;
 exports.IsometricCanvas = IsometricCanvas;

package/dist/components/index.js

@@ -9877,16 +9877,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;
@@ -9936,6 +9946,7 @@ function IsometricCanvas({
   tileHoverEvent,
   tileLeaveEvent,
   // Rendering options
+  tileLayout = "isometric",
   scale = 0.4,
   debug: debug2 = false,
   backgroundImage = "",
@@ -10005,13 +10016,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;
@@ -10125,7 +10140,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));
@@ -10136,7 +10151,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;
@@ -10152,7 +10167,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";
@@ -10168,7 +10183,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;
@@ -10208,7 +10223,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;
       }
@@ -10288,12 +10303,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;
       }
@@ -10328,12 +10344,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;
       }
@@ -10353,7 +10370,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();
@@ -10482,6 +10499,7 @@ function IsometricCanvas({
     units,
     features,
     selectedUnitId,
+    tileLayout,
     scale,
     debug2,
     resolveTerrainSpriteUrl,
@@ -10510,14 +10528,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);
@@ -10550,13 +10568,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();
@@ -10565,7 +10583,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 });
@@ -10577,7 +10595,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}`, {});
@@ -45268,6 +45286,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"() {
@@ -53576,6 +53636,7 @@ var init_component_registry_generated = __esm({
     init_HealthPanel();
     init_HeroOrganism();
     init_HeroSection();
+    init_HexStrategyBoard();
     init_Icon();
     init_InfiniteScrollSentinel();
     init_Input();
@@ -53912,6 +53973,7 @@ var init_component_registry_generated = __esm({
       "HealthPanel": HealthPanel,
       "HeroOrganism": HeroOrganism,
       "HeroSection": HeroSection,
+      "HexStrategyBoard": HexStrategyBoard,
       "Icon": Icon,
       "InfiniteScrollSentinel": InfiniteScrollSentinel,
       "Input": Input,
@@ -55557,6 +55619,7 @@ init_CityBuilderBoard();
 init_GameBoard3D();
 init_VisualNovelBoard();
 init_CardBattlerBoard();
+init_HexStrategyBoard();
 init_TraitStateViewer();
 init_TraitSlot();
 
@@ -56144,4 +56207,4 @@ init_AboutPageTemplate();
 // components/index.ts
 init_cn();
 
-export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBattlerBoard, CardBattlerTemplate, CardBody, CardContent, CardFooter, CardGrid, CardHand, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, CityBuilderBoard, CityBuilderTemplate, ClassifierBoard, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameBoard3D, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HealthPanel, HeroOrganism, HeroSection, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerBoard, PlatformerCanvas, PlatformerTemplate, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RoguelikeBoard, RoguelikeTemplate, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TopDownShooterBoard, TopDownShooterTemplate, TowerDefenseBoard, TowerDefenseTemplate, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VisualNovelBoard, VisualNovelTemplate, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, parseLessonSegments, parseMarkdownWithCodeBlocks, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, toCodeLanguage, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };
+export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBattlerBoard, CardBattlerTemplate, CardBody, CardContent, CardFooter, CardGrid, CardHand, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, CityBuilderBoard, CityBuilderTemplate, ClassifierBoard, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameBoard3D, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HealthPanel, HeroOrganism, HeroSection, HexStrategyBoard, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NodeSlotEditor, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerBoard, PlatformerCanvas, PlatformerTemplate, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RoguelikeBoard, RoguelikeTemplate, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TopDownShooterBoard, TopDownShooterTemplate, TowerDefenseBoard, TowerDefenseTemplate, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VisualNovelBoard, VisualNovelTemplate, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, parseLessonSegments, parseMarkdownWithCodeBlocks, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, toCodeLanguage, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };