diff --git a/src/components/MainScene/SyncedComponents/HUD.tsx b/src/components/MainScene/SyncedComponents/HUD.tsx
index e1af09c..f0d477f 100644
--- a/src/components/MainScene/SyncedComponents/HUD.tsx
+++ b/src/components/MainScene/SyncedComponents/HUD.tsx
@@ -67,49 +67,33 @@ const HUD = () => {
]
);
- const spriteTypeToSprite = useMemo(()=> {
+ console.log('called')
+ const longHudTex = useLoader(THREE.TextureLoader, longHud);
+ const longHudMirroredTex = useLoader(THREE.TextureLoader, longHudMirrored);
-
- }, [])
-
- //todo
- const spriteTypeToSprite = (spriteType: string, hudElement: string) => {
- switch (spriteType) {
- case "normal":
- switch (hudElement) {
- case "long":
- return longHud;
- case "boring":
- return boringHud;
- case "big":
- return bigHud;
- }
- break;
- case "mirrored":
- switch (hudElement) {
- case "big":
- return bigHudMirrored;
- case "long":
- return longHudMirrored;
- case "boring":
- return boringHudMirrored;
- }
- }
- };
-
- const longHudTexture = useLoader(
+ const boringHudTex = useLoader(THREE.TextureLoader, boringHud);
+ const boringHudMirroredTex = useLoader(
THREE.TextureLoader,
- spriteTypeToSprite(currentHud.long.type, "long")!
+ boringHudMirrored
);
- const longHudBoringTexture = useLoader(
- THREE.TextureLoader,
- spriteTypeToSprite(currentHud.boring.type, "boring")!
- );
+ const bigHudTex = useLoader(THREE.TextureLoader, bigHud);
+ const bigHudMirroredTex = useLoader(THREE.TextureLoader, bigHudMirrored);
- const bigHudTexture = useLoader(
- THREE.TextureLoader,
- spriteTypeToSprite(currentHud.big.type, "big")!
+ const textures = useMemo(
+ () =>
+ currentHud.mirrored === 0
+ ? [longHudTex, boringHudTex, bigHudTex]
+ : [longHudMirroredTex, boringHudMirroredTex, bigHudMirroredTex],
+ [
+ bigHudMirroredTex,
+ bigHudTex,
+ boringHudMirroredTex,
+ boringHudTex,
+ currentHud.mirrored,
+ longHudMirroredTex,
+ longHudTex,
+ ]
);
return (
@@ -123,7 +107,7 @@ const HUD = () => {
>
@@ -137,7 +121,7 @@ const HUD = () => {
>
@@ -151,7 +135,7 @@ const HUD = () => {
>
diff --git a/src/components/MainScene/SyncedComponents/Site.tsx b/src/components/MainScene/SyncedComponents/Site.tsx
index 92a930d..dc419ad 100644
--- a/src/components/MainScene/SyncedComponents/Site.tsx
+++ b/src/components/MainScene/SyncedComponents/Site.tsx
@@ -12,6 +12,7 @@ import Rings from "./Site/Rings";
import site_a from "../../../resources/site_a.json";
import site_b from "../../../resources/site_b.json";
import game_progress from "../../../resources/initial_progress.json";
+import NodeAnimations from "./Site/NodeAnimations";
export type NodeDataType = {
image_table_indices: { 1: string; 2: string; 3: string };
@@ -101,6 +102,7 @@ const Site = (props: SiteProps) => {
siteData={siteData}
gameProgress={gameProgress}
/>
+
{
if (isNodeVisible(node[0], props.gameProgress, props.currentSite)) {
return (
{
+const InactiveLevelNodes = memo((props: NodesProps) => {
const visibleNodes = useMemo(() => {
const obj = {};
const activeLevelNr = parseInt(props.activeLevel);
@@ -28,7 +28,7 @@ const InactiveLevelNodes = (props: NodesProps) => {
if (isNodeVisible(node[0], props.gameProgress, props.currentSite)) {
return (
{
})}
>
);
-};
+});
export default InactiveLevelNodes;
diff --git a/src/components/MainScene/SyncedComponents/Site/Node.tsx b/src/components/MainScene/SyncedComponents/Site/Node.tsx
index 6e55070..e51ae76 100644
--- a/src/components/MainScene/SyncedComponents/Site/Node.tsx
+++ b/src/components/MainScene/SyncedComponents/Site/Node.tsx
@@ -1,33 +1,26 @@
-import React, { useEffect, useMemo, useRef, memo } from "react";
+import React, { memo, useEffect, useMemo, useRef } from "react";
import { useFrame, useLoader } from "react-three-fiber";
import { a, useSpring } from "@react-spring/three";
import * as THREE from "three";
import Cou from "../../../../static/sprite/Cou.png";
import CouActive from "../../../../static/sprite/Cou_active.png";
-import CouGold from "../../../../static/sprite/Cou_gold.png";
import Dc from "../../../../static/sprite/Dc.png";
import DcActive from "../../../../static/sprite/Dc_active.png";
-import DcGold from "../../../../static/sprite/Dc_gold.png";
import SSkn from "../../../../static/sprite/SSkn.png";
import SSKnActive from "../../../../static/sprite/SSkn_active.png";
-import SSKnGold from "../../../../static/sprite/SSkn_gold.png";
import Tda from "../../../../static/sprite/Tda.png";
import TdaActive from "../../../../static/sprite/Tda_active.png";
-import TdaGold from "../../../../static/sprite/Tda_gold.png";
import Dia from "../../../../static/sprite/Dia.png";
import DiaActive from "../../../../static/sprite/Dia_active.png";
-import DiaGold from "../../../../static/sprite/Dia_gold.png";
import Lda from "../../../../static/sprite/Lda.png";
import LdaActive from "../../../../static/sprite/Lda_active.png";
-import LdaGold from "../../../../static/sprite/Lda_gold.png";
import MULTI from "../../../../static/sprite/MULTI.png";
import MULTIActive from "../../../../static/sprite/MULTI_active.png";
-import MULTIGold from "../../../../static/sprite/MULTI_gold.png";
import level_y_values from "../../../../resources/level_y_values.json";
import { useNodeStore } from "../../../../store";
type NodeContructorProps = {
- sprite: string;
+ nodeName: string;
position: number[];
rotation: number[];
active?: boolean;
@@ -40,40 +33,41 @@ const Node = memo((props: NodeContructorProps) => {
// so we import all of them here and then use this function to
// associate a sprite with the path
- const spriteToPath = (sprite: string) => {
- if (sprite.includes("S")) {
- return [SSkn, SSKnActive, SSKnGold];
+ const tex = useMemo(() => {
+ if (props.nodeName.includes("S")) {
+ return [SSkn, SSKnActive];
} else if (
- sprite.startsWith("P") ||
- sprite.startsWith("G") ||
- sprite.includes("?")
+ props.nodeName.startsWith("P") ||
+ props.nodeName.startsWith("G") ||
+ props.nodeName.includes("?")
) {
- return [MULTI, MULTIActive, MULTIGold];
- } else if (sprite.includes("Dc")) {
- return [Dc, DcActive, DcGold];
+ return [MULTI, MULTIActive];
+ } else if (props.nodeName.includes("Dc")) {
+ return [Dc, DcActive];
} else {
- const spriteAssocs = {
- Tda: [Tda, TdaActive, TdaGold],
- Cou: [Cou, CouActive, CouGold],
- Dia: [Dia, DiaActive, DiaGold],
- Lda: [Lda, LdaActive, LdaGold],
- Ere: [MULTI, MULTIActive, MULTIGold],
- Ekm: [MULTI, MULTIActive, MULTIGold],
- Eda: [MULTI, MULTIActive, MULTIGold],
- TaK: [MULTI, MULTIActive, MULTIGold],
- Env: [MULTI, MULTIActive, MULTIGold],
- };
-
- return spriteAssocs[sprite.substr(0, 3) as keyof typeof spriteAssocs];
+ switch (props.nodeName.substr(0, 3)) {
+ case "Tda":
+ return [Tda, TdaActive];
+ case "Cou":
+ return [Cou, CouActive];
+ case "Dia":
+ return [Dia, DiaActive];
+ case "Lda":
+ return [Lda, LdaActive];
+ case "Ere":
+ case "Ekm":
+ case "Eda":
+ case "TaK":
+ case "Env":
+ return [MULTI, MULTIActive];
+ }
}
- };
+ }, [props.nodeName]);
const materialRef = useRef();
- const sprite = spriteToPath(props.sprite);
-
- const nonActiveTexture = useLoader(THREE.TextureLoader, sprite[0]);
- const activeTexture = useLoader(THREE.TextureLoader, sprite[1]);
+ const nonActiveTexture = useLoader(THREE.TextureLoader, tex![0]);
+ const activeTexture = useLoader(THREE.TextureLoader, tex![1]);
const uniforms = useMemo(
() => ({
@@ -180,8 +174,6 @@ const Node = memo((props: NodeContructorProps) => {
}
});
- console.log("rendered");
-
return (
{
+ const nodeShrinking = useNodeStore(
+ (state) => state.activeNodeState.shrinking
+ );
+
+ const nodeExploding = useNodeStore(
+ (state) => state.activeNodeState.exploding
+ );
+
+ return (
+ <>
+ {nodeExploding ? : <>>}
+ {nodeShrinking ? : <>>}
+ >
+ );
+};
+
+export default NodeAnimations;
diff --git a/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx b/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx
index 225f34a..4e84b91 100644
--- a/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx
+++ b/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx
@@ -24,6 +24,13 @@ import {
import site_a from "../../../../../../resources/site_a.json";
import site_b from "../../../../../../resources/site_b.json";
import { SiteType } from "../../../Site";
+import SSKnActive from "../../../../../../static/sprite/SSkn_active.png";
+import MULTIActive from "../../../../../../static/sprite/MULTI_active.png";
+import DcActive from "../../../../../../static/sprite/Dc_active.png";
+import TdaActive from "../../../../../../static/sprite/Tda_active.png";
+import CouActive from "../../../../../../static/sprite/Cou_active.png";
+import DiaActive from "../../../../../../static/sprite/Dia_active.png";
+import LdaActive from "../../../../../../static/sprite/Lda_active.png";
type GLTFResult = GLTF & {
nodes: {
@@ -51,40 +58,41 @@ const GoldNode = (props: GoldNodeProps) => {
const activeNodeData = (siteData as SiteType)[activeLevel][activeNodeId];
const activeNodeName = activeNodeData.node_name;
- const activeNodeNameToPath = useMemo(() => {
+ const tex = useMemo(() => {
if (activeNodeName.includes("S")) {
- return [SSkn, SSKnGold];
+ return [SSkn, SSKnActive];
} else if (
activeNodeName.startsWith("P") ||
activeNodeName.startsWith("G") ||
activeNodeName.includes("?")
) {
- return [MULTI, MULTIGold];
+ return [MULTI, MULTIActive];
} else if (activeNodeName.includes("Dc")) {
- return [Dc, DcGold];
+ return [Dc, DcActive];
} else {
- const activeNodeNameAssocs = {
- Tda: [Tda, TdaGold],
- Cou: [Cou, CouGold],
- Dia: [Dia, DiaGold],
- Lda: [Lda, LdaGold],
- Ere: [MULTI, MULTIGold],
- Ekm: [MULTI, MULTIGold],
- Eda: [MULTI, MULTIGold],
- TaK: [MULTI, MULTIGold],
- Env: [MULTI, MULTIGold],
- };
-
- return activeNodeNameAssocs[
- activeNodeName.substr(0, 3) as keyof typeof activeNodeNameAssocs
- ];
+ switch (activeNodeName.substr(0, 3)) {
+ case "Tda":
+ return [Tda, TdaActive];
+ case "Cou":
+ return [Cou, CouActive];
+ case "Dia":
+ return [Dia, DiaActive];
+ case "Lda":
+ return [Lda, LdaActive];
+ case "Ere":
+ case "Ekm":
+ case "Eda":
+ case "TaK":
+ case "Env":
+ return [MULTI, MULTIActive];
+ }
}
}, [activeNodeName]);
const r = useRef();
- const regularTex = useLoader(THREE.TextureLoader, activeNodeNameToPath[0]);
- const goldTex = useLoader(THREE.TextureLoader, activeNodeNameToPath[1]);
+ const regularTex = useLoader(THREE.TextureLoader, tex![0]);
+ const goldTex = useLoader(THREE.TextureLoader, tex![1]);
useEffect(() => {
if (r.current && !props.visible) {
@@ -101,6 +109,7 @@ const GoldNode = (props: GoldNodeProps) => {
}
});
+
return (
{
mainSubscene !== "level_selection"
) {
if (now > timePassedSinceLastKeyPress.current + 5000) {
- setEventState({
- event: "play_idle_media",
- scene: "idle_media",
- site: currentSite,
- });
- timePassedSinceLastKeyPress.current = -1;
+ // setEventState({
+ // event: "play_idle_media",
+ // scene: "idle_media",
+ // site: currentSite,
+ // });
+ // timePassedSinceLastKeyPress.current = -1;
} else if (now > timePassedSinceLastKeyPress.current + 10000) {
const moves = [
"prayer",
diff --git a/src/resources/node_huds.json b/src/resources/node_huds.json
index 258f35f..9c9f50f 100644
--- a/src/resources/node_huds.json
+++ b/src/resources/node_huds.json
@@ -1,18 +1,16 @@
{
"fg_hud_1": {
+ "mirrored": 0,
"long": {
"position": [-0.45, 0.15, -8.6],
- "type": "normal",
"initial_position": [-1.45, 0.15, -8.6]
},
"boring": {
"position": [0.48, 0.174, -8.6],
- "type": "normal",
"initial_position": [1.48, 0.174, -8.6]
},
"big": {
"position": [0.36, 0.13, -8.6],
- "type": "normal",
"initial_position": [1.36, 0.13, -8.6]
},
"big_text": [-0.35, 0.23, -8.7],
@@ -22,19 +20,17 @@
}
},
"fg_hud_2": {
+ "mirrored": 0,
"long": {
"position": [-0.45, -0.09, -8.6],
- "type": "normal",
"initial_position": [-1.45, -0.09, -8.6]
},
"boring": {
"position": [0.5, -0.07, -8.6],
- "type": "normal",
"initial_position": [1.5, -0.07, -8.6]
},
"big": {
"position": [0.35, -0.12, -8.6],
- "type": "normal",
"initial_position": [1.35, -0.12, -8.6]
},
"big_text": [-0.35, -0.05, -8.7],
@@ -44,19 +40,17 @@
}
},
"fg_hud_3": {
+ "mirrored": 0,
"long": {
"position": [-0.45, -0.32, -8.6],
- "type": "normal",
"initial_position": [-1.43, -0.3, -8.6]
},
"boring": {
"position": [0.51, -0.3, -8.6],
- "type": "normal",
"initial_position": [1.51, -0.3, -8.6]
},
"big": {
"position": [0.3, -0.28, -8.6],
- "type": "normal",
"initial_position": [1.3, -0.12, -8.6]
},
"big_text": [-0.35, -0.32, -8.7],
@@ -66,19 +60,17 @@
}
},
"fg_hud_4": {
+ "mirrored": 1,
"long": {
"position": [0.85, 0.18, -8.6],
- "type": "mirrored",
"initial_position": [1.85, 0.18, -8.6]
},
"boring": {
"position": [-0.11, 0.2, -8.6],
- "type": "mirrored",
"initial_position": [-1.11, 0.2, -8.6]
},
"big": {
"position": [-0.35, 0.155, -8.6],
- "type": "mirrored",
"initial_position": [-1.35, 0.155, -8.6]
},
"big_text": [0.45, 0.265, -8.7],
@@ -88,19 +80,17 @@
}
},
"fg_hud_5": {
+ "mirrored": 1,
"long": {
"position": [0.85, -0.09, -8.6],
- "type": "mirrored",
"initial_position": [1.85, -0.09, -8.6]
},
"boring": {
"position": [-0.11, -0.07, -8.6],
- "type": "mirrored",
"initial_position": [-1.11, -0.07, -8.6]
},
"big": {
"position": [-0.35, -0.12, -8.6],
- "type": "mirrored",
"initial_position": [-1.35, -0.12, -8.6]
},
"big_text": [0.45, -0.05, -8.7],
@@ -110,19 +100,17 @@
}
},
"fg_hud_6": {
+ "mirrored": 1,
"long": {
"position": [0.78, -0.32, -8.6],
- "type": "mirrored",
"initial_position": [1.78, -0.32, -8.6]
},
"boring": {
"position": [-0.11, -0.3, -8.6],
- "type": "mirrored",
"initial_position": [-1.11, -0.3, -8.6]
},
"big": {
"position": [-0.25, -0.28, -8.6],
- "type": "mirrored",
"initial_position": [-1.25, -0.28, -8.6]
},
"big_text": [0.45, -0.32, -8.7],
@@ -132,19 +120,17 @@
}
},
"bg_hud_1": {
+ "mirrored": 0,
"long": {
"position": [-0.3, 0.04, -8.6],
- "type": "normal",
"initial_position": [-1.3, 0.02, -8.6]
},
"boring": {
"position": [0.6, 0.06, -8.6],
- "type": "normal",
"initial_position": [1.6, 0.038, -8.6]
},
"big": {
"position": [0.3, 0.015, -8.6],
- "type": "normal",
"initial_position": [1.3, 0, -8.6]
},
"big_text": [-0.15, 0.1, -8.7],
@@ -154,19 +140,17 @@
}
},
"bg_hud_2": {
+ "mirrored": 0,
"long": {
"position": [-0.3, -0.07, -8.6],
- "type": "normal",
"initial_position": [-1.35, -0.09, -8.6]
},
"boring": {
"position": [0.6, -0.05, -8.6],
- "type": "normal",
"initial_position": [1.6, -0.07, -8.6]
},
"big": {
"position": [0.3, -0.1, -8.6],
- "type": "normal",
"initial_position": [1.35, -0.12, -8.6]
},
"big_text": [-0.15, -0.03, -8.7],
@@ -176,19 +160,17 @@
}
},
"bg_hud_3": {
+ "mirrored": 0,
"long": {
"position": [-0.3, -0.19, -8.6],
- "type": "normal",
"initial_position": [-1.35, -0.19, -8.6]
},
"boring": {
"position": [0.6, -0.17, -8.6],
- "type": "normal",
"initial_position": [1.6, -0.17, -8.6]
},
"big": {
"position": [0.3, -0.22, -8.6],
- "type": "normal",
"initial_position": [1.35, -0.22, -8.6]
},
"big_text": [-0.15, -0.17, -8.7],
@@ -198,19 +180,17 @@
}
},
"bg_hud_4": {
+ "mirrored": 1,
"long": {
"position": [0.63, 0.04, -8.6],
- "type": "mirrored",
"initial_position": [1.63, 0.04, -8.6]
},
"boring": {
"position": [-0.28, 0.06, -8.6],
- "type": "mirrored",
"initial_position": [-1.28, 0.06, -8.6]
},
"big": {
"position": [-0.35, 0.015, -8.6],
- "type": "mirrored",
"initial_position": [-1.35, 0.015, -8.6]
},
"big_text": [0.2, 0.1, -8.7],
@@ -220,19 +200,17 @@
}
},
"bg_hud_5": {
+ "mirrored": 1,
"long": {
"position": [0.65, -0.07, -8.6],
- "type": "mirrored",
"initial_position": [1.65, -0.09, -8.6]
},
"boring": {
"position": [-0.3, -0.05, -8.6],
- "type": "mirrored",
"initial_position": [-1.3, -0.07, -8.6]
},
"big": {
"position": [-0.35, -0.1, -8.6],
- "type": "mirrored",
"initial_position": [-1.35, -0.12, -8.6]
},
"big_text": [0.2, -0.03, -8.7],
@@ -242,19 +220,17 @@
}
},
"bg_hud_6": {
+ "mirrored": 1,
"long": {
"position": [0.63, -0.19, -8.6],
- "type": "mirrored",
"initial_position": [1.63, -0.2, -8.6]
},
"boring": {
"position": [-0.29, -0.17, -8.6],
- "type": "mirrored",
"initial_position": [-1.29, -0.18, -8.6]
},
"big": {
"position": [-0.25, -0.22, -8.6],
- "type": "mirrored",
"initial_position": [-1.25, -0.18, -8.6]
},
"big_text": [0.2, -0.17, -8.7],
diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx
index 3ef6646..7e30321 100644
--- a/src/scenes/MainScene.tsx
+++ b/src/scenes/MainScene.tsx
@@ -37,8 +37,6 @@ const MainScene = () => {
-
-