minor adjustments

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 = () => {
       >
         <spriteMaterial
           attach="material"
-          map={longHudTexture}
+          map={textures[0]}
           transparent={true}
           depthTest={false}
         />
@@ -137,7 +121,7 @@ const HUD = () => {
       >
         <spriteMaterial
           attach="material"
-          map={longHudBoringTexture}
+          map={textures[1]}
           transparent={true}
           depthTest={false}
         />
@@ -151,7 +135,7 @@ const HUD = () => {
       >
         <spriteMaterial
           attach="material"
-          map={bigHudTexture}
+          map={textures[2]}
           transparent={true}
           depthTest={false}
         />

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}
             />
+            <NodeAnimations />
             <Rings
               currentSite={currentSite}
               activeLevel={activeLevel}

src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx

@@ -19,7 +19,7 @@ const ActiveLevelNodes = (props: NodesProps) => {
         if (isNodeVisible(node[0], props.gameProgress, props.currentSite)) {
           return (
             <Node
-              sprite={node[1].node_name}
+              nodeName={node[1].node_name}
               position={
                 node_positions[node[0].substr(2) as keyof typeof node_positions]
                   .position

src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo } from "react";
+import React, { useMemo, memo } from "react";
 import node_positions from "../../../../resources/node_positions.json";
 import Node from "./Node";
 import { isNodeVisible } from "../../../../core/nodeSelector";
 import { NodesProps } from "../Site";
 
-const InactiveLevelNodes = (props: NodesProps) => {
+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 (
             <Node
-              sprite={node[1].node_name}
+              nodeName={node[1].node_name}
               position={
                 node_positions[node[0].substr(2) as keyof typeof node_positions]
                   .position
@@ -45,6 +45,6 @@ const InactiveLevelNodes = (props: NodesProps) => {
       })}
     </>
   );
-};
+});
 
 export default InactiveLevelNodes;

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<THREE.ShaderMaterial>();
 
-  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 (
     <group
       position={[

src/components/MainScene/SyncedComponents/Site/NodeAnimations.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useNodeStore } from "../../../../store";
+import NodeExplosion from "./NodeAnimations/NodeExplosion";
+import NodeRip from "./NodeAnimations/NodeRip";
+
+const NodeAnimations = () => {
+  const nodeShrinking = useNodeStore(
+    (state) => state.activeNodeState.shrinking
+  );
+
+  const nodeExploding = useNodeStore(
+    (state) => state.activeNodeState.exploding
+  );
+
+  return (
+    <>
+      {nodeExploding ? <NodeExplosion /> : <></>}
+      {nodeShrinking ? <NodeRip /> : <></>}
+    </>
+  );
+};
+
+export default NodeAnimations;

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<THREE.Object3D>();
 
-  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 (
     <mesh
       geometry={nodes.Cube.geometry}

src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import TriangleNode from "./NodeRip/TriangleNode";
 import { useNodeStore } from "../../../../../store";
-import ExplosionLine from "./NodeExplosion/ExplosionLine";
 import RipLine from "./NodeRip/RipLine";
 import { useFrame } from "react-three-fiber";
 

src/core/StateManagers/MainSceneEventManager.tsx

@@ -58,12 +58,12 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
       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",

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],

src/scenes/MainScene.tsx

@@ -37,8 +37,6 @@ const MainScene = () => {
           <pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
           <pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
           <pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
-          <NodeExplosion />
-          <NodeRip />
         </a.group>
         <Lain shouldIntro={shouldIntro} />
       </Suspense>