@buley/hexgrid-3d 3.5.1 → 3.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -0
- package/dist/components/GamePieceRenderer.d.ts +133 -0
- package/dist/components/GamePieceRenderer.d.ts.map +1 -0
- package/dist/components/GamePieceRenderer.js +688 -0
- package/dist/components/GameSphere.d.ts +13 -0
- package/dist/components/GameSphere.d.ts.map +1 -0
- package/dist/components/GameSphere.js +622 -0
- package/dist/components/index.d.ts +5 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +4 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/territory/HexTerritoryGlobe.d.ts +15 -0
- package/dist/territory/HexTerritoryGlobe.d.ts.map +1 -0
- package/dist/territory/HexTerritoryGlobe.js +75 -0
- package/dist/territory/globe.d.ts +54 -0
- package/dist/territory/globe.d.ts.map +1 -0
- package/dist/territory/globe.js +180 -0
- package/dist/territory/index.d.ts +4 -0
- package/dist/territory/index.d.ts.map +1 -0
- package/dist/territory/index.js +3 -0
- package/dist/territory/narration.d.ts +12 -0
- package/dist/territory/narration.d.ts.map +1 -0
- package/dist/territory/narration.js +84 -0
- package/dist/types.d.ts +165 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -9,6 +9,7 @@ A reusable 3D hexagonal grid visualization component for displaying content in a
|
|
|
9
9
|
- **Image Texture Mapping** - Automatic texture loading and caching
|
|
10
10
|
- **Real-time Statistics** - Live telemetry and performance metrics
|
|
11
11
|
- **Narration System** - Play-by-play commentary overlay
|
|
12
|
+
- **Territory Globe** - Deterministic wrapped globe topology for paid root claims, recursive subdivision, and delegated territory overlays
|
|
12
13
|
- **Web Worker Rendering** - High-performance offloaded calculations
|
|
13
14
|
- **Multi-Input Support** - Touch gestures, mouse, and keyboard controls
|
|
14
15
|
- **Responsive Design** - Adapts to mobile and desktop viewports
|
|
@@ -78,6 +79,39 @@ function AdvancedExample() {
|
|
|
78
79
|
}
|
|
79
80
|
```
|
|
80
81
|
|
|
82
|
+
### Territory Globe Example
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import {
|
|
86
|
+
HexTerritoryGlobe,
|
|
87
|
+
generateCanonicalHexGlobe,
|
|
88
|
+
} from "@buley/hexgrid-3d";
|
|
89
|
+
|
|
90
|
+
const board = generateCanonicalHexGlobe({
|
|
91
|
+
boardId: "main",
|
|
92
|
+
curveUDeg: 360,
|
|
93
|
+
curveVDeg: 180,
|
|
94
|
+
rowCount: 180,
|
|
95
|
+
equatorColumns: 288,
|
|
96
|
+
minimumColumnsPerRow: 24,
|
|
97
|
+
poleMinScale: 0.25,
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
function TerritoryExample() {
|
|
101
|
+
return (
|
|
102
|
+
<HexTerritoryGlobe
|
|
103
|
+
cells={board.cells}
|
|
104
|
+
claimedCellIds={new Set(["main:r90:c144"])}
|
|
105
|
+
colorsByCellId={{ "main:r90:c144": "#59d0ff" }}
|
|
106
|
+
/>
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
When `tileRadius` is omitted, `HexTerritoryGlobe` auto-fits each latitude row to
|
|
112
|
+
the available spacing to avoid overlap on dense boards. Pass `tileRadius` only
|
|
113
|
+
when you intentionally want a manual radius override.
|
|
114
|
+
|
|
81
115
|
## Components
|
|
82
116
|
|
|
83
117
|
### HexGrid
|
|
@@ -112,8 +146,39 @@ Displays narration messages and real-time statistics in a dashboard-style overla
|
|
|
112
146
|
| `isVisible` | `boolean` | Whether overlay is visible |
|
|
113
147
|
| `onClose` | `() => void` | Callback when overlay is closed |
|
|
114
148
|
|
|
149
|
+
### HexTerritoryGlobe
|
|
150
|
+
|
|
151
|
+
Wrapped React Three Fiber surface for territory-aware hex cells on a sphere.
|
|
152
|
+
|
|
153
|
+
**Props:**
|
|
154
|
+
|
|
155
|
+
| Prop | Type | Description |
|
|
156
|
+
| ---- | ---- | ----------- |
|
|
157
|
+
| `cells` | `HexTerritoryCell[]` | Deterministic canonical globe cells |
|
|
158
|
+
| `claimedCellIds` | `Iterable<string>` | Claimed sovereign roots |
|
|
159
|
+
| `lockedCellIds` | `Iterable<string>` | Visible but unclaimable roots |
|
|
160
|
+
| `colorsByCellId` | `Record<string, string>` | Per-root color overrides |
|
|
161
|
+
| `selectedCellId` | `string` | Active root highlight |
|
|
162
|
+
| `hoverCellId` | `string` | Hover highlight |
|
|
163
|
+
| `tileRadius` | `number` | Optional manual radius override; omit to auto-fit row-safe tile radii |
|
|
164
|
+
| `onSelectCell` | `(cell) => void` | Selection callback |
|
|
165
|
+
| `onHoverCell` | `(cell) => void` | Hover callback |
|
|
166
|
+
|
|
115
167
|
## Types
|
|
116
168
|
|
|
169
|
+
### Territory Types
|
|
170
|
+
|
|
171
|
+
The package now exports territory-specific helpers:
|
|
172
|
+
|
|
173
|
+
- `CanonicalHexGlobeConfig`
|
|
174
|
+
- `HexTerritoryBoard`
|
|
175
|
+
- `HexTerritoryCell`
|
|
176
|
+
- `HexNodePath`
|
|
177
|
+
- `HexwarEmbedRef`
|
|
178
|
+
- `HexTerritoryTickState`
|
|
179
|
+
- `HexwarNarrationEvent`
|
|
180
|
+
- `createHexwarNarrationAdapter()`
|
|
181
|
+
|
|
117
182
|
### Photo
|
|
118
183
|
|
|
119
184
|
```typescript
|
|
@@ -207,6 +272,7 @@ setCustomAccentColor("#ff00ff");
|
|
|
207
272
|
|
|
208
273
|
### Peer Dependencies
|
|
209
274
|
|
|
275
|
+
- `@react-three/fiber` ^9.4.2
|
|
210
276
|
- `react` ^18.0.0
|
|
211
277
|
- `react-dom` ^18.0.0
|
|
212
278
|
- `next` ^14.0.0
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* GamePieceRenderer — Three.js mesh factory for game pieces on a geodesic sphere.
|
|
3
|
+
*
|
|
4
|
+
* Builds 3D meshes from PieceShape primitives, accepts custom Object3D instances,
|
|
5
|
+
* handles instanced rendering for performance, surface-normal alignment, stacking,
|
|
6
|
+
* and piece animations (spin, bob, pulse, wobble, orbit, glow).
|
|
7
|
+
*/
|
|
8
|
+
import * as THREE from 'three';
|
|
9
|
+
import type { GamePiece, CellGameState } from '../types';
|
|
10
|
+
/**
|
|
11
|
+
* Build a Three.js Object3D from a GamePiece definition.
|
|
12
|
+
* Returns a Group containing the mesh, optional label, and optional count badge.
|
|
13
|
+
*/
|
|
14
|
+
export declare function buildPieceMesh(piece: GamePiece): THREE.Group;
|
|
15
|
+
/**
|
|
16
|
+
* Place a piece group onto the sphere surface at a given hex center position.
|
|
17
|
+
* Orients the piece so "up" points away from the sphere center (surface normal).
|
|
18
|
+
*
|
|
19
|
+
* @param pieceGroup - The group returned by buildPieceMesh
|
|
20
|
+
* @param hexCenter - The 3D position of the hex center on the unit sphere
|
|
21
|
+
* @param sphereRadius - Radius of the rendered sphere
|
|
22
|
+
* @param offsetY - Additional height above surface (from GamePiece.offsetY)
|
|
23
|
+
*/
|
|
24
|
+
export declare function placePieceOnSphere(pieceGroup: THREE.Group, hexCenter: {
|
|
25
|
+
x: number;
|
|
26
|
+
y: number;
|
|
27
|
+
z: number;
|
|
28
|
+
}, sphereRadius: number, offsetY?: number): void;
|
|
29
|
+
/**
|
|
30
|
+
* Animate a piece group based on its stored animation config.
|
|
31
|
+
* Call this every frame with the elapsed time.
|
|
32
|
+
*
|
|
33
|
+
* @param pieceGroup - The group with userData.animation
|
|
34
|
+
* @param time - Elapsed time in seconds
|
|
35
|
+
* @param deltaTime - Frame delta in seconds
|
|
36
|
+
*/
|
|
37
|
+
export declare function animatePiece(pieceGroup: THREE.Group, time: number, _deltaTime: number): void;
|
|
38
|
+
/**
|
|
39
|
+
* Create a flat polygon mesh for a hex or pentagon cell on the sphere surface.
|
|
40
|
+
* Used by GameSphere to render the board itself.
|
|
41
|
+
*
|
|
42
|
+
* @param center - Hex center on unit sphere
|
|
43
|
+
* @param vertices - Ordered vertices of the hex/pentagon (on unit sphere)
|
|
44
|
+
* @param radius - Sphere radius for scaling
|
|
45
|
+
* @param color - Fill color
|
|
46
|
+
* @param elevation - How far above the sphere surface (0 = flush)
|
|
47
|
+
*/
|
|
48
|
+
export declare function buildCellMesh(center: {
|
|
49
|
+
x: number;
|
|
50
|
+
y: number;
|
|
51
|
+
z: number;
|
|
52
|
+
}, vertices: {
|
|
53
|
+
x: number;
|
|
54
|
+
y: number;
|
|
55
|
+
z: number;
|
|
56
|
+
}[], radius: number, color?: string, elevation?: number): THREE.Mesh;
|
|
57
|
+
/**
|
|
58
|
+
* Build a cell border (wireframe outline) for a hex/pentagon on the sphere.
|
|
59
|
+
*/
|
|
60
|
+
export declare function buildCellBorder(vertices: {
|
|
61
|
+
x: number;
|
|
62
|
+
y: number;
|
|
63
|
+
z: number;
|
|
64
|
+
}[], radius: number, color?: string, lineWidth?: number, elevation?: number): THREE.LineLoop;
|
|
65
|
+
/**
|
|
66
|
+
* Create a fog overlay sphere slightly larger than the game sphere.
|
|
67
|
+
* Individual cell fog is handled by modifying cell material opacity,
|
|
68
|
+
* but this provides a global atmospheric effect.
|
|
69
|
+
*/
|
|
70
|
+
export declare function buildFogOverlay(radius: number, fogColor?: string): THREE.Mesh;
|
|
71
|
+
/**
|
|
72
|
+
* Build a glowing ring around a cell for highlights (attack target, selection, etc.)
|
|
73
|
+
*/
|
|
74
|
+
export declare function buildHighlightRing(center: {
|
|
75
|
+
x: number;
|
|
76
|
+
y: number;
|
|
77
|
+
z: number;
|
|
78
|
+
}, radius: number, ringRadius?: number, color?: string, intensity?: number): THREE.Mesh;
|
|
79
|
+
export interface AttackAnimationConfig {
|
|
80
|
+
fromCenter: {
|
|
81
|
+
x: number;
|
|
82
|
+
y: number;
|
|
83
|
+
z: number;
|
|
84
|
+
};
|
|
85
|
+
toCenter: {
|
|
86
|
+
x: number;
|
|
87
|
+
y: number;
|
|
88
|
+
z: number;
|
|
89
|
+
};
|
|
90
|
+
sphereRadius: number;
|
|
91
|
+
color?: string;
|
|
92
|
+
particleCount?: number;
|
|
93
|
+
duration?: number;
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Create an attack trail particle system between two cells on the sphere.
|
|
97
|
+
* Returns a Points object and an update function.
|
|
98
|
+
*/
|
|
99
|
+
export declare function buildAttackTrail(config: AttackAnimationConfig): {
|
|
100
|
+
points: THREE.Points;
|
|
101
|
+
update: (progress: number) => void;
|
|
102
|
+
dispose: () => void;
|
|
103
|
+
};
|
|
104
|
+
export interface OrbitalStrikeConfig {
|
|
105
|
+
targetCenter: {
|
|
106
|
+
x: number;
|
|
107
|
+
y: number;
|
|
108
|
+
z: number;
|
|
109
|
+
};
|
|
110
|
+
sphereRadius: number;
|
|
111
|
+
color?: string;
|
|
112
|
+
trailColor?: string;
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Create an orbital strike projectile that falls from high above to a cell.
|
|
116
|
+
* Returns the mesh, update function, and disposal.
|
|
117
|
+
*/
|
|
118
|
+
export declare function buildOrbitalStrike(config: OrbitalStrikeConfig): {
|
|
119
|
+
group: THREE.Group;
|
|
120
|
+
update: (progress: number) => void;
|
|
121
|
+
dispose: () => void;
|
|
122
|
+
};
|
|
123
|
+
export declare function disposePieceGroup(group: THREE.Group): void;
|
|
124
|
+
/**
|
|
125
|
+
* Apply CellGameState to a cell's mesh and border.
|
|
126
|
+
* Updates color, opacity (fog), and highlight state.
|
|
127
|
+
*/
|
|
128
|
+
export declare function applyCellState(cellMesh: THREE.Mesh, cellBorder: THREE.LineLoop | null, state: CellGameState, config?: {
|
|
129
|
+
fogDimOpacity?: number;
|
|
130
|
+
fogHiddenOpacity?: number;
|
|
131
|
+
fogExploredOpacity?: number;
|
|
132
|
+
}): void;
|
|
133
|
+
//# sourceMappingURL=GamePieceRenderer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GamePieceRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GamePieceRenderer.ts"],"names":[],"mappings":"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"}
|