@almadar/ui 5.55.0 → 5.57.0

package/dist/components/game/molecules/GameCanvas3D.d.ts

@@ -182,6 +182,10 @@ export interface GameCanvas3DProps {
     selectedTileIds?: string[];
     /** Selected unit ID */
     selectedUnitId?: string | null;
+    /** Unit draw-size multiplier. 1 = default tile-proportional size. */
+    unitScale?: number;
+    /** Board zoom/group scale. Applied to the scene group. Default 0.45. */
+    scale?: number;
 }
 /** Imperative handle for GameCanvas3D */
 export interface GameCanvas3DHandle {

package/dist/components/game/molecules/IsometricCanvas.d.ts

@@ -91,6 +91,10 @@ export interface IsometricCanvasProps {
     enableCamera?: boolean;
     /** Extra scale multiplier for unit draw size. 1 = default. */
     unitScale?: number;
+    /** Ratio of unit draw height to scaledFloorHeight. Default 1.5. */
+    spriteHeightRatio?: number;
+    /** Max unit draw width as a ratio of scaledTileWidth. Default 0.6. */
+    spriteMaxWidthRatio?: number;
     /** Board width in tiles (overrides tile-derived size) */
     boardWidth?: number;
     /** Board height in tiles (overrides tile-derived size) */
@@ -125,7 +129,7 @@ export interface IsometricCanvasProps {
         effects?: Record<string, string>;
     };
 }
-export declare function IsometricCanvas({ className, isLoading, error, tiles: _tilesPropRaw, units: _unitsPropRaw, features: _featuresPropRaw, selectedUnitId, validMoves, attackTargets, hoveredTile, onTileClick, onUnitClick, onTileHover, onTileLeave, tileClickEvent, unitClickEvent, tileHoverEvent, tileLeaveEvent, scale, debug, backgroundImage, showMinimap, enableCamera, unitScale, getTerrainSprite, getFeatureSprite, getUnitSprite, resolveUnitFrame, effectSpriteUrls, onDrawEffects, hasActiveEffects, diamondTopY: diamondTopYProp, assetBaseUrl, assetManifest, }: IsometricCanvasProps): React.JSX.Element;
+export declare function IsometricCanvas({ className, isLoading, error, tiles: _tilesPropRaw, units: _unitsPropRaw, features: _featuresPropRaw, selectedUnitId, validMoves, attackTargets, hoveredTile, onTileClick, onUnitClick, onTileHover, onTileLeave, tileClickEvent, unitClickEvent, tileHoverEvent, tileLeaveEvent, scale, debug, backgroundImage, showMinimap, enableCamera, unitScale, spriteHeightRatio, spriteMaxWidthRatio, getTerrainSprite, getFeatureSprite, getUnitSprite, resolveUnitFrame, effectSpriteUrls, onDrawEffects, hasActiveEffects, diamondTopY: diamondTopYProp, assetBaseUrl, assetManifest, }: IsometricCanvasProps): React.JSX.Element;
 export declare namespace IsometricCanvas {
     var displayName: string;
 }

package/dist/components/game/molecules/three/index.cjs

@@ -2583,6 +2583,7 @@ var GameCanvas3D = React11.forwardRef(
     attackTargets = [],
     selectedTileIds = [],
     selectedUnitId = null,
+    unitScale = 1,
     children
   }, ref) => {
     const containerRef = React11.useRef(null);
@@ -2799,12 +2800,18 @@ var GameCanvas3D = React11.forwardRef(
       },
       [selectedTileIds, hoveredTile, validMoves, attackTargets, handleTileClick, handleTileHover]
     );
+    const UNIT_BASE_MODEL_SCALE = 0.5;
+    const UNIT_BASE_BILLBOARD_HEIGHT = 1.2;
+    const UNIT_BASE_PRIMITIVE_RADIUS = 0.3;
     const DefaultUnitRenderer = React11.useCallback(
       ({ unit, position }) => {
         const isSelected = selectedUnitId === unit.id;
         const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
         const hasAtlas = unitAtlasUrl(unit) !== null;
         const initialFrame = hasAtlas ? resolveUnitFrame(unit.id) : null;
+        const modelScale = UNIT_BASE_MODEL_SCALE * unitScale;
+        const billboardHeight = UNIT_BASE_BILLBOARD_HEIGHT * unitScale;
+        const primitiveRadius = UNIT_BASE_PRIMITIVE_RADIUS * unitScale;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "group",
           {
@@ -2822,7 +2829,8 @@ var GameCanvas3D = React11.forwardRef(
                   UnitSpriteBillboard,
                   {
                     sheetUrl: initialFrame.sheetUrl,
-                    resolveFrame: () => resolveUnitFrame(unit.id)
+                    resolveFrame: () => resolveUnitFrame(unit.id),
+                    height: billboardHeight
                   }
                 ) })
               ) : unit.modelUrl ? (
@@ -2831,22 +2839,22 @@ var GameCanvas3D = React11.forwardRef(
                   ModelLoader,
                   {
                     url: unit.modelUrl,
-                    scale: 0.5,
+                    scale: modelScale,
                     fallbackGeometry: "box",
                     castShadow: true
                   }
                 )
               ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.3, 0], children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.3, 0.3, 0.1, 8] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius, 0], children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [primitiveRadius, primitiveRadius, primitiveRadius * 0.33, 8] }),
                   /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.6, 0], children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("capsuleGeometry", { args: [0.2, 0.4, 4, 8] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius * 2, 0], children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("capsuleGeometry", { args: [primitiveRadius * 0.67, primitiveRadius * 1.33, 4, 8] }),
                   /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.9, 0], children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [0.12, 8, 8] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, primitiveRadius * 3, 0], children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [primitiveRadius * 0.4, 8, 8] }),
                   /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
                 ] })
               ] }),
@@ -2879,7 +2887,7 @@ var GameCanvas3D = React11.forwardRef(
           }
         );
       },
-      [selectedUnitId, handleUnitClick, resolveUnitFrame]
+      [selectedUnitId, handleUnitClick, resolveUnitFrame, unitScale]
     );
     const DefaultFeatureRenderer = React11.useCallback(
       ({
@@ -3022,33 +3030,35 @@ var GameCanvas3D = React11.forwardRef(
                         fadeStrength: 1
                       }
                     ),
-                    tiles.map((tile, index) => {
-                      const position = gridToWorld2(
-                        tile.x,
-                        tile.z ?? tile.y ?? 0,
-                        tile.elevation ?? 0
-                      );
-                      const Renderer = CustomTileRenderer || DefaultTileRenderer;
-                      return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { tile, position }, tile.id ?? `tile-${index}`);
-                    }),
-                    features.map((feature, index) => {
-                      const position = gridToWorld2(
-                        feature.x,
-                        feature.z ?? feature.y ?? 0,
-                        (feature.elevation ?? 0) + 0.5
-                      );
-                      const Renderer = CustomFeatureRenderer || DefaultFeatureRenderer;
-                      return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { feature, position }, feature.id ?? `feature-${index}`);
-                    }),
-                    units.map((unit) => {
-                      const position = gridToWorld2(
-                        unit.x ?? 0,
-                        unit.z ?? unit.y ?? 0,
-                        (unit.elevation ?? 0) + 0.5
-                      );
-                      const Renderer = CustomUnitRenderer || DefaultUnitRenderer;
-                      return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { unit, position }, unit.id);
-                    }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
+                      tiles.map((tile, index) => {
+                        const position = gridToWorld2(
+                          tile.x,
+                          tile.z ?? tile.y ?? 0,
+                          tile.elevation ?? 0
+                        );
+                        const Renderer = CustomTileRenderer || DefaultTileRenderer;
+                        return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { tile, position }, tile.id ?? `tile-${index}`);
+                      }),
+                      features.map((feature, index) => {
+                        const position = gridToWorld2(
+                          feature.x,
+                          feature.z ?? feature.y ?? 0,
+                          (feature.elevation ?? 0) + 0.5
+                        );
+                        const Renderer = CustomFeatureRenderer || DefaultFeatureRenderer;
+                        return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { feature, position }, feature.id ?? `feature-${index}`);
+                      }),
+                      units.map((unit) => {
+                        const position = gridToWorld2(
+                          unit.x ?? 0,
+                          unit.z ?? unit.y ?? 0,
+                          (unit.elevation ?? 0) + 0.5
+                        );
+                        const Renderer = CustomUnitRenderer || DefaultUnitRenderer;
+                        return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { unit, position }, unit.id);
+                      })
+                    ] }),
                     children,
                     /* @__PURE__ */ jsxRuntime.jsx(
                       drei.OrbitControls,
@@ -4236,6 +4246,8 @@ function GameBoard3D({
   features = [],
   cameraMode = "perspective",
   backgroundColor = "#2a1a1a",
+  unitScale = 1,
+  scale = 0.45,
   tileClickEvent,
   unitClickEvent,
   attackEvent,
@@ -4336,6 +4348,8 @@ function GameBoard3D({
         selectedUnitId,
         validMoves,
         attackTargets,
+        unitScale,
+        scale,
         className: "game-board-3d__canvas w-full min-h-[85vh]"
       }
     ),
@@ -4576,32 +4590,36 @@ var Box = React11__default.default.forwardRef(
   }
 );
 Box.displayName = "Box";
+var CDN = "https://almadar-kflow-assets.web.app/shared/3d/dungeon/floor";
+var FLOOR_WALL = `${CDN}/template-floor-detail-a.glb`;
+var FLOOR_DIRT = `${CDN}/template-floor-detail.glb`;
+var FLOOR_OPEN = `${CDN}/template-floor.glb`;
 var DEFAULT_3D_BATTLE_TILES = [
-  { id: "t00", x: 0, y: 0, z: 0, type: "stone", passable: false },
-  { id: "t10", x: 1, y: 0, z: 0, type: "stone", passable: false },
-  { id: "t20", x: 2, y: 0, z: 0, type: "stone", passable: false },
-  { id: "t30", x: 3, y: 0, z: 0, type: "stone", passable: false },
-  { id: "t40", x: 4, y: 0, z: 0, type: "stone", passable: false },
-  { id: "t01", x: 0, y: 1, z: 1, type: "stone", passable: false },
-  { id: "t11", x: 1, y: 1, z: 1, type: "dirt", passable: true },
-  { id: "t21", x: 2, y: 1, z: 1, type: "grass", passable: true },
-  { id: "t31", x: 3, y: 1, z: 1, type: "grass", passable: true },
-  { id: "t41", x: 4, y: 1, z: 1, type: "stone", passable: false },
-  { id: "t02", x: 0, y: 2, z: 2, type: "stone", passable: false },
-  { id: "t12", x: 1, y: 2, z: 2, type: "grass", passable: true },
-  { id: "t22", x: 2, y: 2, z: 2, type: "dirt", passable: true },
-  { id: "t32", x: 3, y: 2, z: 2, type: "grass", passable: true },
-  { id: "t42", x: 4, y: 2, z: 2, type: "stone", passable: false },
-  { id: "t03", x: 0, y: 3, z: 3, type: "stone", passable: false },
-  { id: "t13", x: 1, y: 3, z: 3, type: "grass", passable: true },
-  { id: "t23", x: 2, y: 3, z: 3, type: "grass", passable: true },
-  { id: "t33", x: 3, y: 3, z: 3, type: "dirt", passable: true },
-  { id: "t43", x: 4, y: 3, z: 3, type: "stone", passable: false },
-  { id: "t04", x: 0, y: 4, z: 4, type: "stone", passable: false },
-  { id: "t14", x: 1, y: 4, z: 4, type: "stone", passable: false },
-  { id: "t24", x: 2, y: 4, z: 4, type: "stone", passable: false },
-  { id: "t34", x: 3, y: 4, z: 4, type: "stone", passable: false },
-  { id: "t44", x: 4, y: 4, z: 4, type: "stone", passable: false }
+  { id: "t00", x: 0, y: 0, z: 0, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t10", x: 1, y: 0, z: 0, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t20", x: 2, y: 0, z: 0, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t30", x: 3, y: 0, z: 0, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t40", x: 4, y: 0, z: 0, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t01", x: 0, y: 1, z: 1, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t11", x: 1, y: 1, z: 1, type: "dirt", passable: true, modelUrl: FLOOR_DIRT },
+  { id: "t21", x: 2, y: 1, z: 1, type: "grass", passable: true, modelUrl: FLOOR_OPEN },
+  { id: "t31", x: 3, y: 1, z: 1, type: "grass", passable: true, modelUrl: FLOOR_OPEN },
+  { id: "t41", x: 4, y: 1, z: 1, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t02", x: 0, y: 2, z: 2, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t12", x: 1, y: 2, z: 2, type: "grass", passable: true, modelUrl: FLOOR_OPEN },
+  { id: "t22", x: 2, y: 2, z: 2, type: "dirt", passable: true, modelUrl: FLOOR_DIRT },
+  { id: "t32", x: 3, y: 2, z: 2, type: "grass", passable: true, modelUrl: FLOOR_OPEN },
+  { id: "t42", x: 4, y: 2, z: 2, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t03", x: 0, y: 3, z: 3, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t13", x: 1, y: 3, z: 3, type: "grass", passable: true, modelUrl: FLOOR_OPEN },
+  { id: "t23", x: 2, y: 3, z: 3, type: "grass", passable: true, modelUrl: FLOOR_OPEN },
+  { id: "t33", x: 3, y: 3, z: 3, type: "dirt", passable: true, modelUrl: FLOOR_DIRT },
+  { id: "t43", x: 4, y: 3, z: 3, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t04", x: 0, y: 4, z: 4, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t14", x: 1, y: 4, z: 4, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t24", x: 2, y: 4, z: 4, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t34", x: 3, y: 4, z: 4, type: "stone", passable: false, modelUrl: FLOOR_WALL },
+  { id: "t44", x: 4, y: 4, z: 4, type: "stone", passable: false, modelUrl: FLOOR_WALL }
 ];
 var DEFAULT_3D_BATTLE_FEATURES = [
   { id: "f1", x: 2, y: 2, z: 2, type: "gold_mine", color: "#f4c542" },
@@ -4620,6 +4638,8 @@ function GameCanvas3DBattleTemplate({
   attackEvent,
   playAgainEvent,
   gameEndEvent,
+  unitScale,
+  scale,
   className
 }) {
   const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
@@ -4640,6 +4660,8 @@ function GameCanvas3DBattleTemplate({
             features,
             cameraMode,
             backgroundColor,
+            unitScale,
+            scale,
             tileClickEvent,
             unitClickEvent,
             endTurnEvent,
@@ -4670,32 +4692,36 @@ function GameCanvas3DBattleTemplate({
   );
 }
 GameCanvas3DBattleTemplate.displayName = "GameCanvas3DBattleTemplate";
+var CDN2 = "https://almadar-kflow-assets.web.app/shared/3d/dungeon/floor";
+var FLOOR_WALL2 = `${CDN2}/template-floor-detail-a.glb`;
+var FLOOR_DIRT2 = `${CDN2}/template-floor-detail.glb`;
+var FLOOR_OPEN2 = `${CDN2}/template-floor.glb`;
 var DEFAULT_3D_CASTLE_TILES = [
-  { id: "t00", x: 0, y: 0, z: 0, type: "wall", passable: false },
-  { id: "t10", x: 1, y: 0, z: 0, type: "wall", passable: false },
-  { id: "t20", x: 2, y: 0, z: 0, type: "wall", passable: false },
-  { id: "t30", x: 3, y: 0, z: 0, type: "wall", passable: false },
-  { id: "t40", x: 4, y: 0, z: 0, type: "wall", passable: false },
-  { id: "t01", x: 0, y: 1, z: 1, type: "wall", passable: false },
-  { id: "t11", x: 1, y: 1, z: 1, type: "floor", passable: true },
-  { id: "t21", x: 2, y: 1, z: 1, type: "floor", passable: true },
-  { id: "t31", x: 3, y: 1, z: 1, type: "floor", passable: true },
-  { id: "t41", x: 4, y: 1, z: 1, type: "wall", passable: false },
-  { id: "t02", x: 0, y: 2, z: 2, type: "wall", passable: false },
-  { id: "t12", x: 1, y: 2, z: 2, type: "floor", passable: true },
-  { id: "t22", x: 2, y: 2, z: 2, type: "floor", passable: true },
-  { id: "t32", x: 3, y: 2, z: 2, type: "floor", passable: true },
-  { id: "t42", x: 4, y: 2, z: 2, type: "wall", passable: false },
-  { id: "t03", x: 0, y: 3, z: 3, type: "wall", passable: false },
-  { id: "t13", x: 1, y: 3, z: 3, type: "floor", passable: true },
-  { id: "t23", x: 2, y: 3, z: 3, type: "floor", passable: true },
-  { id: "t33", x: 3, y: 3, z: 3, type: "floor", passable: true },
-  { id: "t43", x: 4, y: 3, z: 3, type: "wall", passable: false },
-  { id: "t04", x: 0, y: 4, z: 4, type: "wall", passable: false },
-  { id: "t14", x: 1, y: 4, z: 4, type: "wall", passable: false },
-  { id: "t24", x: 2, y: 4, z: 4, type: "wall", passable: false },
-  { id: "t34", x: 3, y: 4, z: 4, type: "wall", passable: false },
-  { id: "t44", x: 4, y: 4, z: 4, type: "wall", passable: false }
+  { id: "t00", x: 0, y: 0, z: 0, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t10", x: 1, y: 0, z: 0, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t20", x: 2, y: 0, z: 0, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t30", x: 3, y: 0, z: 0, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t40", x: 4, y: 0, z: 0, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t01", x: 0, y: 1, z: 1, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t11", x: 1, y: 1, z: 1, type: "floor", passable: true, modelUrl: FLOOR_DIRT2 },
+  { id: "t21", x: 2, y: 1, z: 1, type: "floor", passable: true, modelUrl: FLOOR_OPEN2 },
+  { id: "t31", x: 3, y: 1, z: 1, type: "floor", passable: true, modelUrl: FLOOR_OPEN2 },
+  { id: "t41", x: 4, y: 1, z: 1, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t02", x: 0, y: 2, z: 2, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t12", x: 1, y: 2, z: 2, type: "floor", passable: true, modelUrl: FLOOR_OPEN2 },
+  { id: "t22", x: 2, y: 2, z: 2, type: "floor", passable: true, modelUrl: FLOOR_DIRT2 },
+  { id: "t32", x: 3, y: 2, z: 2, type: "floor", passable: true, modelUrl: FLOOR_OPEN2 },
+  { id: "t42", x: 4, y: 2, z: 2, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t03", x: 0, y: 3, z: 3, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t13", x: 1, y: 3, z: 3, type: "floor", passable: true, modelUrl: FLOOR_OPEN2 },
+  { id: "t23", x: 2, y: 3, z: 3, type: "floor", passable: true, modelUrl: FLOOR_OPEN2 },
+  { id: "t33", x: 3, y: 3, z: 3, type: "floor", passable: true, modelUrl: FLOOR_DIRT2 },
+  { id: "t43", x: 4, y: 3, z: 3, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t04", x: 0, y: 4, z: 4, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t14", x: 1, y: 4, z: 4, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t24", x: 2, y: 4, z: 4, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t34", x: 3, y: 4, z: 4, type: "wall", passable: false, modelUrl: FLOOR_WALL2 },
+  { id: "t44", x: 4, y: 4, z: 4, type: "wall", passable: false, modelUrl: FLOOR_WALL2 }
 ];
 var DEFAULT_3D_CASTLE_FEATURES = [
   { id: "f1", x: 2, y: 2, z: 2, type: "chest", color: "#f4c542" },
@@ -4715,6 +4741,8 @@ function GameCanvas3DCastleTemplate({
   playAgainEvent,
   gameEndEvent,
   showHeader = true,
+  unitScale,
+  scale,
   className
 }) {
   const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
@@ -4745,6 +4773,8 @@ function GameCanvas3DCastleTemplate({
             features,
             cameraMode,
             backgroundColor,
+            unitScale,
+            scale,
             tileClickEvent: buildingClickEvent,
             unitClickEvent,
             endTurnEvent,
@@ -4767,32 +4797,36 @@ function GameCanvas3DCastleTemplate({
   );
 }
 GameCanvas3DCastleTemplate.displayName = "GameCanvas3DCastleTemplate";
+var CDN3 = "https://almadar-kflow-assets.web.app/shared/3d/dungeon/floor";
+var FLOOR_WALL3 = `${CDN3}/template-floor-detail-a.glb`;
+var FLOOR_DIRT3 = `${CDN3}/template-floor-detail.glb`;
+var FLOOR_OPEN3 = `${CDN3}/template-floor.glb`;
 var DEFAULT_3D_WORLDMAP_TILES = [
-  { id: "t00", x: 0, y: 0, z: 0, type: "mountain", passable: false },
-  { id: "t10", x: 1, y: 0, z: 0, type: "mountain", passable: false },
-  { id: "t20", x: 2, y: 0, z: 0, type: "water", passable: false },
-  { id: "t30", x: 3, y: 0, z: 0, type: "mountain", passable: false },
-  { id: "t40", x: 4, y: 0, z: 0, type: "mountain", passable: false },
-  { id: "t01", x: 0, y: 1, z: 1, type: "mountain", passable: false },
-  { id: "t11", x: 1, y: 1, z: 1, type: "grass", passable: true },
-  { id: "t21", x: 2, y: 1, z: 1, type: "grass", passable: true },
-  { id: "t31", x: 3, y: 1, z: 1, type: "grass", passable: true },
-  { id: "t41", x: 4, y: 1, z: 1, type: "water", passable: false },
-  { id: "t02", x: 0, y: 2, z: 2, type: "water", passable: false },
-  { id: "t12", x: 1, y: 2, z: 2, type: "grass", passable: true },
-  { id: "t22", x: 2, y: 2, z: 2, type: "road", passable: true },
-  { id: "t32", x: 3, y: 2, z: 2, type: "grass", passable: true },
-  { id: "t42", x: 4, y: 2, z: 2, type: "mountain", passable: false },
-  { id: "t03", x: 0, y: 3, z: 3, type: "mountain", passable: false },
-  { id: "t13", x: 1, y: 3, z: 3, type: "grass", passable: true },
-  { id: "t23", x: 2, y: 3, z: 3, type: "grass", passable: true },
-  { id: "t33", x: 3, y: 3, z: 3, type: "road", passable: true },
-  { id: "t43", x: 4, y: 3, z: 3, type: "mountain", passable: false },
-  { id: "t04", x: 0, y: 4, z: 4, type: "mountain", passable: false },
-  { id: "t14", x: 1, y: 4, z: 4, type: "water", passable: false },
-  { id: "t24", x: 2, y: 4, z: 4, type: "grass", passable: true },
-  { id: "t34", x: 3, y: 4, z: 4, type: "mountain", passable: false },
-  { id: "t44", x: 4, y: 4, z: 4, type: "mountain", passable: false }
+  { id: "t00", x: 0, y: 0, z: 0, type: "mountain", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t10", x: 1, y: 0, z: 0, type: "mountain", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t20", x: 2, y: 0, z: 0, type: "water", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t30", x: 3, y: 0, z: 0, type: "mountain", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t40", x: 4, y: 0, z: 0, type: "mountain", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t01", x: 0, y: 1, z: 1, type: "mountain", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t11", x: 1, y: 1, z: 1, type: "grass", passable: true, modelUrl: FLOOR_OPEN3 },
+  { id: "t21", x: 2, y: 1, z: 1, type: "grass", passable: true, modelUrl: FLOOR_OPEN3 },
+  { id: "t31", x: 3, y: 1, z: 1, type: "grass", passable: true, modelUrl: FLOOR_OPEN3 },
+  { id: "t41", x: 4, y: 1, z: 1, type: "water", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t02", x: 0, y: 2, z: 2, type: "water", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t12", x: 1, y: 2, z: 2, type: "grass", passable: true, modelUrl: FLOOR_OPEN3 },
+  { id: "t22", x: 2, y: 2, z: 2, type: "road", passable: true, modelUrl: FLOOR_DIRT3 },
+  { id: "t32", x: 3, y: 2, z: 2, type: "grass", passable: true, modelUrl: FLOOR_OPEN3 },
+  { id: "t42", x: 4, y: 2, z: 2, type: "mountain", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t03", x: 0, y: 3, z: 3, type: "mountain", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t13", x: 1, y: 3, z: 3, type: "grass", passable: true, modelUrl: FLOOR_OPEN3 },
+  { id: "t23", x: 2, y: 3, z: 3, type: "grass", passable: true, modelUrl: FLOOR_OPEN3 },
+  { id: "t33", x: 3, y: 3, z: 3, type: "road", passable: true, modelUrl: FLOOR_DIRT3 },
+  { id: "t43", x: 4, y: 3, z: 3, type: "mountain", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t04", x: 0, y: 4, z: 4, type: "mountain", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t14", x: 1, y: 4, z: 4, type: "water", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t24", x: 2, y: 4, z: 4, type: "grass", passable: true, modelUrl: FLOOR_OPEN3 },
+  { id: "t34", x: 3, y: 4, z: 4, type: "mountain", passable: false, modelUrl: FLOOR_WALL3 },
+  { id: "t44", x: 4, y: 4, z: 4, type: "mountain", passable: false, modelUrl: FLOOR_WALL3 }
 ];
 var DEFAULT_3D_WORLDMAP_FEATURES = [
   { id: "f1", x: 2, y: 2, z: 2, type: "capital", color: "#f4c542" },
@@ -4811,6 +4845,8 @@ function GameCanvas3DWorldMapTemplate({
   attackEvent,
   playAgainEvent,
   gameEndEvent,
+  unitScale,
+  scale,
   className
 }) {
   const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
@@ -4826,6 +4862,8 @@ function GameCanvas3DWorldMapTemplate({
         features,
         cameraMode,
         backgroundColor,
+        unitScale,
+        scale,
         tileClickEvent,
         unitClickEvent,
         endTurnEvent,