Skip to content

Commit 5180c8f

Browse files
aymericdelabaymericdelab
authored
Merge pull request #164 from BibliothecaDAO/feat/hs-models
feat: hyperstructure model stages
2 parents d1c4808 + 2836585 commit 5180c8f

18 files changed

+285
-78
lines changed

‎client/public/models/hyperstructure-finished-transformed.glb

76.2 KB
Binary file not shown.

‎client/public/models/hyperstructure-half-transformed.glb

210 KB
Binary file not shown.

‎client/public/models/hyperstructure-started-transformed.glb

337 KB
Binary file not shown.

‎client/src/components/cityview/CityView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
Auto-generated by: https://github.com/pmndrs/gltfjsx
3-
Command: npx gltfjsx@6.2.11 --types --keepnames --keepgroups --keepmeshes --transform --simplify --precision 6 public/models/realm-city_20.glb
3+
Command: npx gltfjsx --types --keepnames --keepgroups --keepmeshes --transform --simplify --precision 6 public/models/hyperstructure-1.glb
44
Files: public/models/realm-city_20.glb [1.92MB] > realm-city_20-transformed.glb [710.58KB] (63%)
55
*/
66
// @ts-nocheck

‎client/src/components/worldmap/Flags.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,6 @@ export function Flags(props) {
168168
flagMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
169169
});
170170

171-
console.log("test", ordersRealms);
172171
ordersRealms.forEach((orderRealms, index) => {
173172
orderRealms.forEach((realm, i) => {
174173
const x = realmsJson.features[realm.realm_id - 1].xy[0];

‎client/src/components/worldmap/hyperstructures/FeedHyperstructure.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,11 @@ export const FeedHyperstructurePopup = ({ onClose, order }: FeedHyperstructurePo
4343
}, [order]);
4444

4545
const { getHyperstructure } = useHyperstructure();
46-
const hyperstructureData = getHyperstructure(order, hyperStructurePosition);
46+
const hyperstructureData = getHyperstructure(order, {
47+
x: hyperStructures[order - 1].x,
48+
y: hyperStructures[order - 1].y,
49+
z: hyperStructures[order - 1].z,
50+
});
4751

4852
const { caravans } = useGetPositionCaravans(hyperStructurePosition.x, hyperStructurePosition.y);
4953

‎client/src/components/worldmap/hyperstructures/Hyperstructure.tsx

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎client/src/components/worldmap/hyperstructures/HyperstructuresListComponent.tsx

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
import { FiltersPanel } from "../../../elements/FiltersPanel";
22
import { FilterButton } from "../../../elements/FilterButton";
3-
import { HYPERSTRUCTURES_POSITIONS } from "../../../modules/scenes/WorldMapScene";
43
import { HyperstructuresListItem } from "./HyperstructuresListItem";
54
import useRealmStore from "../../../hooks/store/useRealmStore";
65
import { useMemo, useState } from "react";
76
import { getRealm } from "../../../utils/realms";
87
import { useDojo } from "../../../DojoContext";
98
import { FeedHyperstructurePopup } from "./FeedHyperstructure";
109
import useUIStore from "../../../hooks/store/useUIStore";
11-
import { getContractPositionFromRealPosition } from "../../../utils/utils";
1210

1311
type HyperstructuresListComponentProps = {};
1412

1513
export const HyperstructuresListComponent = ({}: HyperstructuresListComponentProps) => {
1614
const [showFeedPopup, setShowFeedPopup] = useState(false);
1715
const moveCameraToTarget = useUIStore((state) => state.moveCameraToTarget);
16+
const hyperstructures = useUIStore((state) => state.hyperstructures);
1817

1918
const {
2019
account: { account },
@@ -39,29 +38,25 @@ export const HyperstructuresListComponent = ({}: HyperstructuresListComponentPro
3938
<div className="space-y-2 px-2 mb-2">
4039
<div className="text-xs text-gold">Hyperstructure of your order: </div>
4140
<HyperstructuresListItem
41+
hyperstructure={hyperstructures[chosenOrder - 1]}
4242
order={chosenOrder}
43-
coords={getContractPositionFromRealPosition({
44-
x: HYPERSTRUCTURES_POSITIONS[chosenOrder - 1].x,
45-
y: HYPERSTRUCTURES_POSITIONS[chosenOrder - 1].z,
46-
})}
43+
coords={hyperstructures[chosenOrder - 1]?.uiPosition}
4744
onFeed={() => {
48-
moveCameraToTarget(HYPERSTRUCTURES_POSITIONS[chosenOrder - 1]);
45+
moveCameraToTarget(hyperstructures[chosenOrder - 1]?.uiPosition as any);
4946
setShowFeedPopup(true);
5047
}}
5148
/>
5249
</div>
5350
)}
5451
<div className="flex flex-col space-y-2 px-2 mb-2">
5552
<div className="text-xs text-gold">Other Hyperstructures: </div>
56-
{HYPERSTRUCTURES_POSITIONS.map((hyperstructure, i) =>
53+
{hyperstructures.map((hyperstructure, i) =>
5754
chosenOrder && i + 1 !== chosenOrder ? (
5855
<HyperstructuresListItem
5956
key={i}
57+
hyperstructure={hyperstructure}
6058
order={i + 1}
61-
coords={getContractPositionFromRealPosition({
62-
x: hyperstructure.x,
63-
y: hyperstructure.z,
64-
})}
59+
coords={hyperstructure?.uiPosition as any}
6560
/>
6661
) : null,
6762
)}

‎client/src/components/worldmap/hyperstructures/HyperstructuresListItem.tsx

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,25 @@ import { ReactComponent as Map } from "../../../assets/icons/common/map.svg";
44
import { orderNameDict, orders } from "../../../constants/orders";
55
import useUIStore from "../../../hooks/store/useUIStore";
66
import ProgressBar from "../../../elements/ProgressBar";
7-
import { useHyperstructure } from "../../../hooks/helpers/useHyperstructure";
7+
import { HyperStructureInterface } from "../../../hooks/helpers/useHyperstructure";
88
import clsx from "clsx";
9+
import { UIPosition } from "../../../types";
910

1011
type HyperstructuresListItemProps = {
12+
hyperstructure: HyperStructureInterface | undefined;
1113
order: number;
12-
coords: { x: number; y: number };
14+
coords: UIPosition | undefined;
1315
onFeed?: () => void;
1416
};
1517

16-
export const HyperstructuresListItem = ({ order, coords, onFeed = undefined }: HyperstructuresListItemProps) => {
18+
export const HyperstructuresListItem = ({
19+
hyperstructure,
20+
order,
21+
coords,
22+
onFeed = undefined,
23+
}: HyperstructuresListItemProps) => {
1724
const moveCameraToTarget = useUIStore((state) => state.moveCameraToTarget);
1825

19-
const { getHyperstructure } = useHyperstructure();
20-
21-
const hyperstructure = getHyperstructure(order, coords);
22-
2326
return (
2427
<div className="flex flex-col p-2 border rounded-md border-gray-gold text-xxs text-gray-gold">
2528
<div className="flex items-center">
@@ -30,13 +33,9 @@ export const HyperstructuresListItem = ({ order, coords, onFeed = undefined }: H
3033

3134
<div className=" text-gold flex ml-auto ">
3235
<Button
33-
onClick={() =>
34-
moveCameraToTarget({
35-
x: coords.x,
36-
y: 0.528415243525413,
37-
z: coords.y,
38-
})
39-
}
36+
onClick={() => {
37+
moveCameraToTarget(coords as any);
38+
}}
4039
variant="outline"
4140
className="p-1 !h-4 text-xxs !rounded-md"
4241
>

‎client/src/components/worldmap/hyperstructures/models/HyperstructureFinished.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*
2+
Auto-generated by: https://github.com/pmndrs/gltfjsx
3+
Command: npx gltfjsx@6.2.13 --types --keepnames --keepgroups --keepmeshes --transform public/models/hyperstructure-finished.glb
4+
Files: public/models/hyperstructure-finished.glb [133.63KB] > hyperstructure-finished-transformed.glb [78.06KB] (42%)
5+
*/
6+
7+
import * as THREE from "three";
8+
import { useGLTF } from "@react-three/drei";
9+
import { GLTF } from "three-stdlib";
10+
import { HyperStructureInterface } from "../../../../hooks/helpers/useHyperstructure";
11+
12+
type GLTFResult = GLTF & {
13+
nodes: {
14+
tower: THREE.Mesh;
15+
tower_1: THREE.Mesh;
16+
tower_2: THREE.Mesh;
17+
tower_3: THREE.Mesh;
18+
};
19+
materials: {
20+
Stone: THREE.MeshStandardMaterial;
21+
Gold: THREE.MeshStandardMaterial;
22+
Grass: THREE.MeshStandardMaterial;
23+
Foilage: THREE.MeshStandardMaterial;
24+
};
25+
};
26+
27+
export default function HyperstructureFinished(
28+
props: JSX.IntrinsicElements["group"] & { hyperstructure?: HyperStructureInterface },
29+
) {
30+
const { nodes, materials } = useGLTF("/models/hyperstructure-finished-transformed.glb") as GLTFResult;
31+
32+
return (
33+
<group {...props} dispose={null}>
34+
<group name="Scene">
35+
<group name="tower_finished" position={[0, -0.096, 0]}>
36+
<mesh name="tower" geometry={nodes.tower.geometry} material={materials.Stone} />
37+
<mesh name="tower_1" geometry={nodes.tower_1.geometry} material={materials.Gold} />
38+
<mesh name="tower_2" geometry={nodes.tower_2.geometry} material={materials.Grass} />
39+
<mesh name="tower_3" geometry={nodes.tower_3.geometry} material={materials.Foilage} />
40+
</group>
41+
</group>
42+
</group>
43+
);
44+
}
45+
46+
useGLTF.preload("/models/hyperstructure-finished-transformed.glb");

‎client/src/components/worldmap/hyperstructures/models/HyperstructureHalf.tsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/*
2+
Auto-generated by: https://github.com/pmndrs/gltfjsx
3+
Command: npx gltfjsx@6.2.13 --types --keepnames --keepgroups --keepmeshes --transform public/models/models/hyperstructure-half.glb
4+
Files: public/models/models/hyperstructure-half.glb [570.8KB] > hyperstructure-half-transformed.glb [215.31KB] (62%)
5+
*/
6+
7+
import * as THREE from "three";
8+
import { Html, useGLTF } from "@react-three/drei";
9+
import { GLTF } from "three-stdlib";
10+
import { HyperStructureInterface } from "../../../../hooks/helpers/useHyperstructure";
11+
12+
type GLTFResult = GLTF & {
13+
nodes: {
14+
["tower_half-finished_1"]: THREE.Mesh;
15+
["tower_half-finished_2"]: THREE.Mesh;
16+
["tower_half-finished_scaffolds"]: THREE.Mesh;
17+
};
18+
materials: {
19+
Stone_Rough: THREE.MeshStandardMaterial;
20+
Ground: THREE.MeshStandardMaterial;
21+
Wood: THREE.MeshStandardMaterial;
22+
};
23+
};
24+
25+
export default function HyperstructureHalfFinished(
26+
props: JSX.IntrinsicElements["group"] & { hyperstructure?: HyperStructureInterface },
27+
) {
28+
const { nodes, materials } = useGLTF("/models/hyperstructure-half-transformed.glb") as GLTFResult;
29+
return (
30+
<group {...props} dispose={null}>
31+
<group name="Scene">
32+
{props.hyperstructure?.initialized && (
33+
<Html position={[0, -1.1, 0]} distanceFactor={10}>
34+
<div className="p-2 text-white -translate-x-1/2 bg-black rounded-lg whitespace-nowrap">
35+
Progress: {props.hyperstructure?.progress}%
36+
</div>
37+
</Html>
38+
)}
39+
<group name="tower_half-finished">
40+
<mesh
41+
name="tower_half-finished_1"
42+
geometry={nodes["tower_half-finished_1"].geometry}
43+
material={materials.Stone_Rough}
44+
/>
45+
<mesh
46+
name="tower_half-finished_2"
47+
geometry={nodes["tower_half-finished_2"].geometry}
48+
material={materials.Ground}
49+
/>
50+
</group>
51+
<mesh
52+
name="tower_half-finished_scaffolds"
53+
geometry={nodes["tower_half-finished_scaffolds"].geometry}
54+
material={materials.Wood}
55+
/>
56+
</group>
57+
</group>
58+
);
59+
}
60+
61+
useGLTF.preload("/models/hyperstructure-half-transformed.glb");

‎client/src/components/worldmap/hyperstructures/models/HyperstructureStarted.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/*
2+
Auto-generated by: https://github.com/pmndrs/gltfjsx
3+
Command: npx gltfjsx@6.2.13 --types --keepnames --keepgroups --keepmeshes --transform public/models/hyperstructure-started.glb
4+
Files: public/models/hyperstructure-started.glb [802.53KB] > hyperstructure-started-transformed.glb [344.78KB] (57%)
5+
*/
6+
7+
import * as THREE from "three";
8+
import { useEffect } from "react";
9+
import { Html, useGLTF } from "@react-three/drei";
10+
import { GLTF } from "three-stdlib";
11+
import { HyperStructureInterface } from "../../../../hooks/helpers/useHyperstructure";
12+
13+
type GLTFResult = GLTF & {
14+
nodes: {
15+
tower_initialized: THREE.Mesh;
16+
tower_initialized_scaffolds: THREE.Mesh;
17+
};
18+
materials: {
19+
Stone_Rough: THREE.MeshStandardMaterial;
20+
Wood: THREE.MeshStandardMaterial;
21+
};
22+
};
23+
24+
export default function HyperstructureStarted(
25+
props: JSX.IntrinsicElements["group"] & { hyperstructure?: HyperStructureInterface },
26+
) {
27+
const { nodes, materials } = useGLTF("/models/hyperstructure-started-transformed.glb") as GLTFResult;
28+
const { hyperstructure } = props;
29+
30+
const uninitializedMaterials = {
31+
Wood: materials.Wood.clone(),
32+
Stone_Rough: materials.Stone_Rough.clone(),
33+
};
34+
35+
useEffect(() => {
36+
if (!hyperstructure?.initialized) {
37+
Object.values(uninitializedMaterials).forEach((material) => {
38+
material.opacity = 0.2;
39+
material.transparent = true;
40+
// need to rerender
41+
material.needsUpdate = true;
42+
});
43+
}
44+
}, [hyperstructure, uninitializedMaterials]);
45+
46+
return (
47+
<group {...props} dispose={null}>
48+
<group name="Scene">
49+
{!hyperstructure?.initialized && (
50+
<Html distanceFactor={10}>
51+
<div className="p-2 text-white -translate-x-1/2 bg-black rounded-lg whitespace-nowrap">Not Initialized</div>
52+
</Html>
53+
)}
54+
{hyperstructure?.initialized && (
55+
<Html position={[0, -1.1, 0]} distanceFactor={10}>
56+
<div className="p-2 text-white -translate-x-1/2 bg-black rounded-lg whitespace-nowrap">
57+
Progress: {hyperstructure?.progress}%
58+
</div>
59+
</Html>
60+
)}
61+
<mesh
62+
name="tower_initialized"
63+
geometry={nodes.tower_initialized.geometry}
64+
material={hyperstructure?.initialized ? materials.Stone_Rough : uninitializedMaterials.Stone_Rough}
65+
position={[0, -0.096, -0.634]}
66+
/>
67+
<mesh
68+
name="tower_initialized_scaffolds"
69+
geometry={nodes.tower_initialized_scaffolds.geometry}
70+
material={hyperstructure?.initialized ? materials.Wood : uninitializedMaterials.Wood}
71+
position={[0.118, -0.001, -1.24]}
72+
rotation={[-Math.PI, 0.719, -Math.PI]}
73+
/>
74+
</group>
75+
</group>
76+
);
77+
}
78+
79+
useGLTF.preload("/models/hyperstructure-started-transformed.glb");

0 commit comments

Comments
 (0)