added checkers for unlocked nodes

src/components/MainScene/ActiveLevelNodes.tsx

@@ -6,6 +6,8 @@ import { useNodeStore, useLevelStore, useSiteStore } from "../../store";
 import { a, useSpring } from "@react-spring/three";
 
 const ActiveLevelNodes = () => {
+  const unlockedNodes = useNodeStore((state) => state.unlockedNodes);
+
   const activeNodeState = useNodeStore((state) => state.activeNodeState);
   const activeLevel = useLevelStore((state) => state.activeLevel);
 
@@ -30,6 +32,18 @@ const ActiveLevelNodes = () => {
       rotation-x={siteState.siteRotX}
     >
       {Object.entries(activeLevelNodes).map((node: [string, any]) => {
+        const unlockedBy = node[1].unlocked_by;
+
+        let unlocked;
+        if (unlockedBy === "-1") unlocked = true;
+        else
+          unlocked =
+            unlockedNodes[unlockedBy as keyof typeof unlockedNodes].unlocked;
+
+        if (
+          unlocked &&
+          (node[1].is_hidden === "0" || node[1].is_hidden === "3")
+        ) {
           return (
             <Node
               sprite={node[1].node_name}
@@ -46,6 +60,7 @@ const ActiveLevelNodes = () => {
               level={node[0].substr(0, 2)}
             />
           );
+        }
       })}
     </a.group>
   );

src/components/MainScene/Site.tsx

@@ -4,7 +4,7 @@ import level_y_values from "../../resources/level_y_values.json";
 import node_positions from "../../resources/node_positions.json";
 import Node from "./Node";
 import { a, useSpring } from "@react-spring/three";
-import { useLevelStore, useSiteStore } from "../../store";
+import { useLevelStore, useNodeStore, useSiteStore } from "../../store";
 import PurpleRing from "./PurpleRing";
 import GrayRing from "./GrayRing";
 import CyanCrystal from "./CyanCrystal";
@@ -37,6 +37,8 @@ export type SiteType = {
 };
 
 const Site = memo(() => {
+  const unlockedNodes = useNodeStore((state) => state.unlockedNodes);
+
   const activeLevel = useLevelStore((state) => state.activeLevel);
   const visibleNodes = useMemo(() => {
     const obj = {};
@@ -78,22 +80,38 @@ const Site = memo(() => {
             <CyanCrystal crystalRingPosY={-0.45} />
           </group>
         ))}
-        {Object.entries(visibleNodes).map((node: [string, any]) => (
+        {Object.entries(visibleNodes).map((node: [string, any]) => {
+          const unlockedBy = node[1].unlocked_by;
+
+          let unlocked;
+          if (unlockedBy === "-1") unlocked = true;
+          else
+            unlocked =
+              unlockedNodes[unlockedBy as keyof typeof unlockedNodes].unlocked;
+
+          if (
+            unlocked &&
+            (node[1].is_hidden === "0" || node[1].is_hidden === "3")
+          ) {
+            return (
               <Node
                 sprite={node[1].node_name}
                 position={
-              node_positions[node[0].substr(2) as keyof typeof node_positions]
+                  node_positions[
-                .position
+                    node[0].substr(2) as keyof typeof node_positions
+                  ].position
                 }
                 rotation={
-              node_positions[node[0].substr(2) as keyof typeof node_positions]
+                  node_positions[
-                .rotation
+                    node[0].substr(2) as keyof typeof node_positions
+                  ].rotation
                 }
                 key={node[1].node_name}
                 level={node[0].substr(0, 2)}
               />
-        ))}
+            );
-        )
+          }
+        })}
       </a.group>
     </Suspense>
   );

src/core/mediaSceneEventHandler.ts

@@ -16,7 +16,11 @@ const handleMediaSceneEvent = (gameContext: any) => {
         if (newRightSideComponentIdx > 2) {
           newRightSideComponentIdx = 0;
         }
-        break;
+        return {
+          event: `${activeMediaComponent}_down`,
+          newWordPosStateIdx: newWordPosStateIdx,
+          newRightSideComponentIdx: newRightSideComponentIdx,
+        };
       case "UP":
         newWordPosStateIdx--;
         if (newWordPosStateIdx < 1) {
@@ -26,14 +30,28 @@ const handleMediaSceneEvent = (gameContext: any) => {
         if (newRightSideComponentIdx < 0) {
           newRightSideComponentIdx = 2;
         }
-        break;
-    }
-  }
         return {
-    event: `${activeMediaComponent}_${keyPress}`,
+          event: `${activeMediaComponent}_up`,
           newWordPosStateIdx: newWordPosStateIdx,
           newRightSideComponentIdx: newRightSideComponentIdx,
         };
+      case "RIGHT":
+      case "LEFT":
+        return { event: `${activeMediaComponent}_${keyPress.toLowerCase()}` };
+      case "CIRCLE":
+        return { event: `${activeMediaComponent}_select` };
+    }
+  } else {
+    switch (keyPress) {
+      case "UP":
+      case "DOWN":
+      case "RIGHT":
+      case "LEFT":
+        return { event: `${activeMediaComponent}_${keyPress.toLowerCase()}` };
+      case "CIRCLE":
+        return { event: `${activeMediaComponent}_select` };
+    }
+  }
 };
 
 export default handleMediaSceneEvent;

src/core/ssknSceneEventHandler.ts

@@ -1,7 +1,17 @@
 const handleSSknSceneEvent = (gameContext: any) => {
   const keyPress = gameContext.keyPress;
   const activeSSknComponent = gameContext.activeSSknComponent;
-  return { event: `${activeSSknComponent}_${keyPress}` };
+  switch (keyPress) {
+    case "UP":
+    case "DOWN":
+      return {
+        event: `${activeSSknComponent}_${keyPress.toLowerCase()}`,
+      };
+    case "CIRCLE":
+      return {
+        event: `${activeSSknComponent}_select`,
+      };
+  }
 };
 
 export default handleSSknSceneEvent;

src/resources/node_huds.json

@@ -45,7 +45,7 @@
   },
   "fg_hud_3": {
     "long": {
-      "position": [-0.43, -0.32, -8.6],
+      "position": [-0.45, -0.32, -8.6],
       "type": "normal",
       "initial_position": [-1.43, -0.3, -8.6]
     },
@@ -59,7 +59,7 @@
       "type": "normal",
       "initial_position": [1.3, -0.12, -8.6]
     },
-    "big_text": [-0.33, -0.32, -8.7],
+    "big_text": [-0.35, -0.32, -8.7],
     "medium_text": {
       "position": [0.12, -0.32, -8.7],
       "initial_position": [1.12, -0.32, -8.7]
@@ -133,43 +133,43 @@
   },
   "bg_hud_1": {
     "long": {
-      "position": [-0.3, 0.02, -8.6],
+      "position": [-0.3, 0.04, -8.6],
       "type": "normal",
       "initial_position": [-1.3, 0.02, -8.6]
     },
     "boring": {
-      "position": [0.6, 0.038, -8.6],
+      "position": [0.6, 0.06, -8.6],
       "type": "normal",
       "initial_position": [1.6, 0.038, -8.6]
     },
     "big": {
-      "position": [0.3, 0, -8.6],
+      "position": [0.3, 0.015, -8.6],
       "type": "normal",
       "initial_position": [1.3, 0, -8.6]
     },
-    "big_text": [-0.15, 0.06, -8.7],
+    "big_text": [-0.15, 0.1, -8.7],
     "medium_text": {
-      "position": [0.1, 0, -8.7],
+      "position": [0.1, 0.02, -8.7],
-      "initial_position": [1.1, 0, -8.7]
+      "initial_position": [1.1, 0.02, -8.7]
     }
   },
   "bg_hud_2": {
     "long": {
-      "position": [-0.35, -0.09, -8.6],
+      "position": [-0.3, -0.07, -8.6],
       "type": "normal",
       "initial_position": [-1.35, -0.09, -8.6]
     },
     "boring": {
-      "position": [0.6, -0.07, -8.6],
+      "position": [0.6, -0.05, -8.6],
       "type": "normal",
       "initial_position": [1.6, -0.07, -8.6]
     },
     "big": {
-      "position": [0.35, -0.12, -8.6],
+      "position": [0.3, -0.1, -8.6],
       "type": "normal",
       "initial_position": [1.35, -0.12, -8.6]
     },
-    "big_text": [-0.15, -0.05, -8.7],
+    "big_text": [-0.15, -0.03, -8.7],
     "medium_text": {
       "position": [0.18, -0.13, -8.7],
       "initial_position": [1.18, -0.13, -8.7]
@@ -177,7 +177,7 @@
   },
   "bg_hud_3": {
     "long": {
-      "position": [-0.35, -0.19, -8.6],
+      "position": [-0.3, -0.19, -8.6],
       "type": "normal",
       "initial_position": [-1.35, -0.19, -8.6]
     },
@@ -187,11 +187,11 @@
       "initial_position": [1.6, -0.17, -8.6]
     },
     "big": {
-      "position": [0.35, -0.22, -8.6],
+      "position": [0.3, -0.22, -8.6],
       "type": "normal",
       "initial_position": [1.35, -0.22, -8.6]
     },
-    "big_text": [-0.15, -0.16, -8.7],
+    "big_text": [-0.15, -0.17, -8.7],
     "medium_text": {
       "position": [0.18, -0.25, -8.7],
       "initial_position": [1.18, -0.25, -8.7]
@@ -213,7 +213,7 @@
       "type": "mirrored",
       "initial_position": [-1.35, 0.015, -8.6]
     },
-    "big_text": [0.15, 0.06, -8.7],
+    "big_text": [0.2, 0.1, -8.7],
     "medium_text": {
       "position": [-0.65, 0.02, -8.7],
       "initial_position": [-1.65, 0.02, -8.7]
@@ -235,7 +235,7 @@
       "type": "mirrored",
       "initial_position": [-1.35, -0.12, -8.6]
     },
-    "big_text": [0.15, -0.05, -8.7],
+    "big_text": [0.2, -0.03, -8.7],
     "medium_text": {
       "position": [-0.65, -0.11, -8.7],
       "initial_position": [-1.65, -0.11, -8.7]
@@ -243,23 +243,23 @@
   },
   "bg_hud_6": {
     "long": {
-      "position": [0.63, -0.2, -8.6],
+      "position": [0.63, -0.19, -8.6],
       "type": "mirrored",
       "initial_position": [1.63, -0.2, -8.6]
     },
     "boring": {
-      "position": [-0.29, -0.18, -8.6],
+      "position": [-0.29, -0.17, -8.6],
       "type": "mirrored",
       "initial_position": [-1.29, -0.18, -8.6]
     },
     "big": {
-      "position": [-0.25, -0.18, -8.6],
+      "position": [-0.25, -0.22, -8.6],
       "type": "mirrored",
       "initial_position": [-1.25, -0.18, -8.6]
     },
-    "big_text": [0.15, -0.16, -8.7],
+    "big_text": [0.2, -0.17, -8.7],
     "medium_text": {
-      "position": [-0.53, -0.2, -8.7],
+      "position": [-0.53, -0.25, -8.7],
       "initial_position": [-1.53, -0.2, -8.7]
     }
   }

src/scenes/MainScene.tsx

@@ -35,7 +35,7 @@ const MainScene = () => {
       <Suspense fallback={null}>
         <MainSceneIntro />
         <a.group>
-          {/*<Preloader />*/}
+          <Preloader />
           <Site />
           <ActiveLevelNodes />
           <HUD visible={!isPaused} />

src/store.ts

@@ -2,6 +2,7 @@ import create from "zustand";
 import { combine } from "zustand/middleware";
 import * as THREE from "three";
 import authorize_user_letters from "./resources/authorize_user_letters.json";
+import unlocked_nodes from "./resources/unlocked_nodes.json";
 
 type PauseState = {
   exitAnimation: boolean;
@@ -40,6 +41,7 @@ type NodeState = {
     interactedWith: boolean;
   };
   nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number };
+  unlockedNodes: typeof unlocked_nodes;
 };
 
 type LainState = {
@@ -234,6 +236,7 @@ export const useNodeStore = create(
         interactedWith: false,
       },
       nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
+      unlockedNodes: unlocked_nodes,
     } as NodeState,
     (set) => ({
       setActiveNodeState: (to: number | boolean | string, at: string) =>
@@ -371,7 +374,7 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
   posStateIdx: 1,
   setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
   setWords: (to) => set(() => ({ words: to })),
-  resetPosStateIdx: () => set(() => ({ posStateIdx: 0 })),
+  resetPosStateIdx: () => set(() => ({ posStateIdx: 1 })),
 }));
 
 export const useSSknStore = create<SSknState>((set) => ({