@almadar/ui 5.33.0 → 5.34.0

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

@@ -17,6 +17,7 @@ import React from 'react';
 import type { EventEmit } from '@almadar/core';
 import * as THREE from 'three';
 import { AssetLoader } from './three/loaders/AssetLoader';
+import { type MinimalMouseEvent } from './three/hooks/useGameCanvas3DEvents';
 import type { IsometricTile, IsometricUnit, IsometricFeature } from '../organisms/types/isometric';
 import './GameCanvas3D.css';
 export type { IsometricTile, IsometricUnit, IsometricFeature };
@@ -74,15 +75,15 @@ export interface GameCanvas3DProps {
     /** Background color */
     backgroundColor?: string;
     /** Callback when a tile is clicked */
-    onTileClick?: (tile: IsometricTile, event: React.MouseEvent) => void;
+    onTileClick?: (tile: IsometricTile, event: MinimalMouseEvent) => void;
     /** Callback when a unit is clicked */
-    onUnitClick?: (unit: IsometricUnit, event: React.MouseEvent) => void;
+    onUnitClick?: (unit: IsometricUnit, event: MinimalMouseEvent) => void;
     /** Callback when a feature is clicked */
-    onFeatureClick?: (feature: IsometricFeature, event: React.MouseEvent) => void;
+    onFeatureClick?: (feature: IsometricFeature, event: MinimalMouseEvent) => void;
     /** Callback when canvas is clicked (background) */
-    onCanvasClick?: (event: React.MouseEvent) => void;
+    onCanvasClick?: (event: MinimalMouseEvent) => void;
     /** Callback when mouse moves over a tile */
-    onTileHover?: (tile: IsometricTile | null, event: React.MouseEvent) => void;
+    onTileHover?: (tile: IsometricTile | null, event: MinimalMouseEvent) => void;
     /** Callback for unit animation state change */
     onUnitAnimation?: (unitId: string, state: string) => void;
     /** Asset loader instance (uses global singleton if not provided) */

package/dist/components/game/molecules/three/hooks/useGameCanvas3DEvents.d.ts

@@ -69,29 +69,29 @@ export interface MinimalMouseEvent {
 }
 export interface UseGameCanvas3DEventsOptions extends GameCanvas3DEventConfig {
     /** Callback for tile clicks (direct) */
-    onTileClick?: (tile: IsometricTile, event: React.MouseEvent) => void;
+    onTileClick?: (tile: IsometricTile, event: MinimalMouseEvent) => void;
     /** Callback for unit clicks (direct) */
-    onUnitClick?: (unit: IsometricUnit, event: React.MouseEvent) => void;
+    onUnitClick?: (unit: IsometricUnit, event: MinimalMouseEvent) => void;
     /** Callback for feature clicks (direct) */
-    onFeatureClick?: (feature: IsometricFeature, event: React.MouseEvent) => void;
+    onFeatureClick?: (feature: IsometricFeature, event: MinimalMouseEvent) => void;
     /** Callback for canvas clicks (direct) */
-    onCanvasClick?: (event: React.MouseEvent) => void;
+    onCanvasClick?: (event: MinimalMouseEvent) => void;
     /** Callback for tile hover (direct) */
-    onTileHover?: (tile: IsometricTile | null, event: React.MouseEvent) => void;
+    onTileHover?: (tile: IsometricTile | null, event: MinimalMouseEvent) => void;
     /** Callback for unit animation changes (direct) */
     onUnitAnimation?: (unitId: string, state: string) => void;
 }
 export interface UseGameCanvas3DEventsReturn {
     /** Handle tile click - emits event and calls callback */
-    handleTileClick: (tile: IsometricTile, event: React.MouseEvent) => void;
+    handleTileClick: (tile: IsometricTile, event: MinimalMouseEvent) => void;
     /** Handle unit click - emits event and calls callback */
-    handleUnitClick: (unit: IsometricUnit, event: React.MouseEvent) => void;
+    handleUnitClick: (unit: IsometricUnit, event: MinimalMouseEvent) => void;
     /** Handle feature click - emits event and calls callback */
-    handleFeatureClick: (feature: IsometricFeature, event: React.MouseEvent) => void;
+    handleFeatureClick: (feature: IsometricFeature, event: MinimalMouseEvent) => void;
     /** Handle canvas click - emits event and calls callback */
     handleCanvasClick: (event: MinimalMouseEvent) => void;
     /** Handle tile hover - emits event and calls callback */
-    handleTileHover: (tile: IsometricTile | null, event: React.MouseEvent) => void;
+    handleTileHover: (tile: IsometricTile | null, event: MinimalMouseEvent) => void;
     /** Handle unit animation - emits event and calls callback */
     handleUnitAnimation: (unitId: string, state: string) => void;
     /** Handle camera change - emits event */

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

@@ -2518,6 +2518,28 @@ var GameCanvas3D = React11.forwardRef(
         else if (isAttackTarget) emissive = 4456448;
         else if (isValidMove) emissive = 17408;
         else if (isHovered) emissive = 2236962;
+        if (tile.modelUrl) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "group",
+            {
+              position,
+              onClick: (e) => handleTileClick(tile, e),
+              onPointerEnter: (e) => handleTileHover(tile, e),
+              onPointerLeave: (e) => handleTileHover(null, e),
+              userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ModelLoader,
+                {
+                  url: tile.modelUrl,
+                  scale: 0.95,
+                  fallbackGeometry: "box",
+                  castShadow: true,
+                  receiveShadow: true
+                }
+              )
+            }
+          );
+        }
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "mesh",
           {
@@ -2550,17 +2572,30 @@ var GameCanvas3D = React11.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
                 /* @__PURE__ */ jsxRuntime.jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.3, 0], children: [
-                /* @__PURE__ */ jsxRuntime.jsx("cylinderGeometry", { args: [0.3, 0.3, 0.1, 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.jsx("meshStandardMaterial", { color })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.9, 0], children: [
-                /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [0.12, 8, 8] }),
-                /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
+              unit.modelUrl ? (
+                /* GLB unit model (box fallback while loading / on error) */
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ModelLoader,
+                  {
+                    url: unit.modelUrl,
+                    scale: 0.5,
+                    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.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.jsx("meshStandardMaterial", { color })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [0, 0.9, 0], children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("sphereGeometry", { args: [0.12, 8, 8] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("meshStandardMaterial", { color })
+                ] })
               ] }),
               unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("group", { position: [0, 1.2, 0], children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("mesh", { position: [-0.25, 0, 0], children: [

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

@@ -2494,6 +2494,28 @@ var GameCanvas3D = forwardRef(
         else if (isAttackTarget) emissive = 4456448;
         else if (isValidMove) emissive = 17408;
         else if (isHovered) emissive = 2236962;
+        if (tile.modelUrl) {
+          return /* @__PURE__ */ jsx(
+            "group",
+            {
+              position,
+              onClick: (e) => handleTileClick(tile, e),
+              onPointerEnter: (e) => handleTileHover(tile, e),
+              onPointerLeave: (e) => handleTileHover(null, e),
+              userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
+              children: /* @__PURE__ */ jsx(
+                ModelLoader,
+                {
+                  url: tile.modelUrl,
+                  scale: 0.95,
+                  fallbackGeometry: "box",
+                  castShadow: true,
+                  receiveShadow: true
+                }
+              )
+            }
+          );
+        }
         return /* @__PURE__ */ jsxs(
           "mesh",
           {
@@ -2526,17 +2548,30 @@ var GameCanvas3D = forwardRef(
                 /* @__PURE__ */ jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
                 /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
               ] }),
-              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.3, 0], children: [
-                /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.3, 0.3, 0.1, 8] }),
-                /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-              ] }),
-              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.6, 0], children: [
-                /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.2, 0.4, 4, 8] }),
-                /* @__PURE__ */ jsx("meshStandardMaterial", { color })
-              ] }),
-              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
-                /* @__PURE__ */ jsx("sphereGeometry", { args: [0.12, 8, 8] }),
-                /* @__PURE__ */ jsx("meshStandardMaterial", { color })
+              unit.modelUrl ? (
+                /* GLB unit model (box fallback while loading / on error) */
+                /* @__PURE__ */ jsx(
+                  ModelLoader,
+                  {
+                    url: unit.modelUrl,
+                    scale: 0.5,
+                    fallbackGeometry: "box",
+                    castShadow: true
+                  }
+                )
+              ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("mesh", { position: [0, 0.3, 0], children: [
+                  /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.3, 0.3, 0.1, 8] }),
+                  /* @__PURE__ */ jsx("meshStandardMaterial", { color })
+                ] }),
+                /* @__PURE__ */ jsxs("mesh", { position: [0, 0.6, 0], children: [
+                  /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.2, 0.4, 4, 8] }),
+                  /* @__PURE__ */ jsx("meshStandardMaterial", { color })
+                ] }),
+                /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
+                  /* @__PURE__ */ jsx("sphereGeometry", { args: [0.12, 8, 8] }),
+                  /* @__PURE__ */ jsx("meshStandardMaterial", { color })
+                ] })
               ] }),
               unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxs("group", { position: [0, 1.2, 0], children: [
                 /* @__PURE__ */ jsxs("mesh", { position: [-0.25, 0, 0], children: [

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

@@ -51,6 +51,8 @@ export type IsometricUnit = {
     z?: number;
     /** Static sprite URL (used when no sprite sheet animation) */
     sprite?: AssetUrl;
+    /** 3D model URL (GLB format) for GameCanvas3D — rendered via ModelLoader with box fallback */
+    modelUrl?: AssetUrl;
     /** Unit archetype key for sprite resolution */
     unitType?: string;
     /** Hero identifier for sprite sheet lookup */