visual aspect of level selection almost done

src/components/TextRenderer/BigLetter.tsx

@@ -34,6 +34,8 @@ const BigLetter = (props: {
     const lineTwo = "RSTUVWXYZ01234567";
     const lineThree = "89abcdefghijklmnopqrs";
 
+    if (letter === " ") return 5;
+
     if (lineOne.includes(letter)) {
       return 1;
     } else if (lineTwo.includes(letter)) {
@@ -51,6 +53,7 @@ const BigLetter = (props: {
       2: 0.765,
       3: 0.648,
       4: 0.47,
+      5: 1,
     }),
     []
   );
@@ -83,21 +86,19 @@ const BigLetter = (props: {
 
   const textRendererState = useSpring({
     letterOffsetXCoeff:
-      props.letterIdx === 0
-        ? props.letterIdx + props.letterIdx * props.yellowTextOffsetXCoeff
-        : props.letterIdx +
-          0.3 +
-          (props.letterIdx + 0.3) * props.yellowTextOffsetXCoeff,
+      props.letterIdx +
+      0.3 +
+      (props.letterIdx + 0.3) * props.yellowTextOffsetXCoeff,
     config: { duration: 200 },
   });
 
   return (
     <a.mesh
       position-x={textRendererState.letterOffsetXCoeff}
-      position-y={props.letterIdx === 0 ? -0.03 : 0 - letterData[4] / 12.5}
-      scale={props.letterIdx === 0 ? [1.5, 1, 1.5] : [1, 1, 1]}
+      position-y={-letterData[4] / 12.5}
+      scale={[1, 1, 0]}
       geometry={geom}
-      renderOrder={props.letterIdx === 0 ? 4 : 3}
+      renderOrder={props.letterIdx === 0 ? 11 : 10}
     >
       <meshBasicMaterial
         map={colorTexture}

src/components/TextRenderer/YellowTextRenderer.tsx

@@ -1,15 +1,17 @@
 import React, { useEffect, useRef } from "react";
-import { useYellowTextStore, YellowTextState } from "../../store";
+import { useBigTextStore, BigTextState } from "../../store";
 import { a, useSpring, useTrail } from "@react-spring/three";
 import BigLetter from "./BigLetter";
 
 const YellowTextRenderer = () => {
-  const disableTrail = useYellowTextStore((state) => state.disableTrail);
-  const transformState = useYellowTextStore((state) => state.transformState);
+  const disableTrail = useBigTextStore((state) => state.disableTrail);
+  const transformState = useBigTextStore((state) => state.transformState);
 
-  const textArrRef = useRef(useYellowTextStore.getState().text.split(""));
+  const color = useBigTextStore((state) => state.color);
 
-  const transformRef = useRef(useYellowTextStore.getState().transformState);
+  const textArrRef = useRef(useBigTextStore.getState().text.split(""));
+
+  const transformRef = useRef(useBigTextStore.getState().transformState);
 
   // this is used to animate the letters moving one after another
   const trail = useTrail(textArrRef.current.length, {
@@ -27,10 +29,10 @@ const YellowTextRenderer = () => {
 
   useEffect(
     () =>
-      useYellowTextStore.subscribe(
+      useBigTextStore.subscribe(
         (state) => {
-          transformRef.current = (state as YellowTextState).transformState;
-          textArrRef.current = (state as YellowTextState).text.split("");
+          transformRef.current = (state as BigTextState).transformState;
+          textArrRef.current = (state as BigTextState).text.split("");
         },
         (state) => state
       ),
@@ -49,7 +51,7 @@ const YellowTextRenderer = () => {
               scale={[0.04, 0.06, 0.04]}
             >
               <BigLetter
-                color={"yellow"}
+                color={color}
                 yellowTextOffsetXCoeff={0}
                 letter={textArrRef.current[idx]}
                 letterIdx={idx}
@@ -66,7 +68,7 @@ const YellowTextRenderer = () => {
               scale={[0.04, 0.06, 0.04]}
             >
               <BigLetter
-                color={"yellow"}
+                color={color}
                 yellowTextOffsetXCoeff={transformRef.current.xOffset}
                 letter={textArrRef.current[idx]}
                 letterIdx={idx}

src/core/StateManagers/BootComponentManager.tsx

@@ -9,7 +9,6 @@ const BootComponentManager = (props: StateManagerProps) => {
   const setAuthorizeUserMatrixIdx = useBootStore(
     (state) => state.setAuthorizeUserMatrixIdx
   );
-  const setBootSubscene = useBootStore((state) => state.setSubscene);
 
   const dispatchObject = useCallback(
     (
@@ -26,17 +25,6 @@ const BootComponentManager = (props: StateManagerProps) => {
             action: toggleComponentMatrixIdx,
             value: activeSubscene,
           };
-        case "authorize_user_back":
-        case "load_data_no_select":
-          return {
-            action: setBootSubscene,
-            value: "main_menu",
-          };
-        case "authorize_user_select":
-          return {
-            action: setBootSubscene,
-            value: "authorize_user",
-          };
         case "authorize_user_right":
         case "authorize_user_up":
         case "authorize_user_left":
@@ -45,11 +33,9 @@ const BootComponentManager = (props: StateManagerProps) => {
             action: setAuthorizeUserMatrixIdx,
             value: newAuthorizeUserMatrixIdx,
           };
-        case "load_data_select":
-          return { action: setBootSubscene, value: "load_data" };
       }
     },
-    [setAuthorizeUserMatrixIdx, setBootSubscene, toggleComponentMatrixIdx]
+    [setAuthorizeUserMatrixIdx, toggleComponentMatrixIdx]
   );
 
   useEffect(() => {

src/core/StateManagers/EventManager.tsx

@@ -7,7 +7,9 @@ import NodeHUDManager from "./NodeHUDManager";
 import {
   useAuthorizeUserStore,
   useBootStore,
+  useLevelSelectionStore,
   useLevelStore,
+  useMainSceneStore,
   useMediaStore,
   useMediaWordStore,
   useNodeStore,
@@ -28,6 +30,8 @@ import handleMediaSceneEvent from "../mediaSceneEventHandler";
 import handleBootEvent from "../bootEventHandler";
 import handleSSknSceneEvent from "../ssknSceneEventHandler";
 import BootAuthorizeUserManager from "./BootAuthorizeUserManager";
+import LevelSelectionManager from "./LevelSelectionManager";
+import SubsceneManager from "./SubsceneManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -53,6 +57,10 @@ const EventManager = () => {
   const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
   const siteTransformState = useSiteStore((state) => state.transformState);
   const activeLevel = useLevelStore((state) => state.activeLevel);
+  const mainSubscene = useMainSceneStore((state) => state.subscene);
+  const levelSelectionIdx = useLevelSelectionStore(
+    (state) => state.selectedLevelIdx
+  );
 
   // media scene
   const mediaComponentMatrixIndices = useMediaStore(
@@ -127,10 +135,12 @@ const EventManager = () => {
         switch (currentScene) {
           case "main":
             event = handleMainSceneEvent({
+              mainSubscene: mainSubscene,
               keyPress: keyPress,
               siteTransformState: siteTransformState,
               nodeMatrixIndices: nodeMatrixIndices,
               activeLevel: activeLevel,
+              levelSelectionIdx: levelSelectionIdx,
             });
             break;
           case "media":
@@ -169,9 +179,14 @@ const EventManager = () => {
       activeLevel,
       activeMediaComponent,
       activeSSknComponent,
+      authorizeUserActiveLetterTexOffset,
+      authorizeUserBgLettersPos,
+      authorizeUserMatrixIdx,
       currentBootSubscene,
       currentScene,
       inputCooldown,
+      levelSelectionIdx,
+      mainSubscene,
       nodeMatrixIndices,
       rightSideComponentIdx,
       siteTransformState,
@@ -203,6 +218,8 @@ const EventManager = () => {
       <BootComponentManager eventState={eventState!} />
       <SSknComponentManager eventState={eventState!} />
       <BootAuthorizeUserManager eventState={eventState!} />
+      <LevelSelectionManager eventState={eventState!} />
+      <SubsceneManager eventState={eventState!} />
     </>
   );
 };

src/core/StateManagers/LainManager.tsx

@@ -12,6 +12,7 @@ const LainManager = (props: StateManagerProps) => {
         case "move_down":
         case "move_left":
         case "move_right":
+        case "select_level":
           return {
             action: setLainMoveState,
             value: event,

src/core/StateManagers/LevelManager.tsx

@@ -1,29 +1,23 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "./EventManager";
-import { useLevelSelectionStore, useLevelStore } from "../../store";
+import { useLevelStore } from "../../store";
 
 const LevelManager = (props: StateManagerProps) => {
   const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
-  const toggleLevelSelection = useLevelSelectionStore(
-    (state) => state.toggleLevelSelection
-  );
 
   const dispatchObject = useCallback(
     (event: string, newLevel: string) => {
       switch (event) {
         case "move_up":
         case "move_down":
+        case "select_level":
           return {
             action: setActiveLevel,
             value: newLevel,
           };
-        case "toggle_level_selection":
-          return {
-            action: toggleLevelSelection,
-          };
       }
     },
-    [setActiveLevel, toggleLevelSelection]
+    [setActiveLevel]
   );
 
   useEffect(() => {
@@ -33,10 +27,7 @@ const LevelManager = (props: StateManagerProps) => {
       const dispatchedObject = dispatchObject(eventAction, newLevel);
 
       if (dispatchedObject) {
-        (dispatchedObject.action as any).apply(
-          null,
-          dispatchedObject.value as any
-        );
+        dispatchedObject.action(dispatchedObject.value);
       }
     }
   }, [props.eventState, dispatchObject]);

src/core/StateManagers/LevelSelectionManager.tsx

@@ -0,0 +1,48 @@
+import { useCallback, useEffect } from "react";
+import { StateManagerProps } from "./EventManager";
+import { useLevelSelectionStore } from "../../store";
+
+const LevelSelectionManager = (props: StateManagerProps) => {
+  const toggleLevelSelection = useLevelSelectionStore(
+    (state) => state.toggleLevelSelection
+  );
+  const setSelectedLevelIdx = useLevelSelectionStore(
+    (state) => state.setSelectedLevelIdx
+  );
+
+  const dispatchObject = useCallback(
+    (event: string, newSelectedLevelIdx: number) => {
+      switch (event) {
+        case "toggle_level_selection":
+        case "level_selection_back":
+          return {
+            action: toggleLevelSelection,
+          };
+        case "level_selection_up":
+        case "level_selection_down":
+          return {
+            action: setSelectedLevelIdx,
+            value: newSelectedLevelIdx,
+          };
+      }
+    },
+    [setSelectedLevelIdx, toggleLevelSelection]
+  );
+
+  useEffect(() => {
+    if (props.eventState) {
+      const eventAction = props.eventState.event;
+      const newSelectedLevelIdx = props.eventState.newSelectedLevelIdx;
+
+      const dispatchedObject = dispatchObject(eventAction, newSelectedLevelIdx);
+
+      if (dispatchedObject) {
+        dispatchedObject.action(dispatchedObject.value as any);
+      }
+    }
+  }, [props.eventState, dispatchObject]);
+
+  return null;
+};
+
+export default LevelSelectionManager;

src/core/StateManagers/SiteManager.tsx

@@ -10,6 +10,7 @@ const SiteManager = (props: StateManagerProps) => {
       switch (event) {
         case "move_up":
         case "move_down":
+        case "select_level":
           return {
             action: setTransformState,
             value: [newSitePosY, "posY"],

src/core/StateManagers/SubsceneManager.tsx

@@ -0,0 +1,55 @@
+import { useCallback, useEffect } from "react";
+import { StateManagerProps } from "./EventManager";
+import { useBootStore, useMainSceneStore } from "../../store";
+
+const SubsceneManager = (props: StateManagerProps) => {
+  const setMainSubscene = useMainSceneStore((state) => state.setSubscene);
+  const setBootSubscene = useBootStore((state) => state.setSubscene);
+
+  const dispatchObject = useCallback(
+    (event: string) => {
+      switch (event) {
+        case "level_selection_back":
+          return {
+            action: setMainSubscene,
+            value: "site",
+          };
+        case "toggle_level_selection":
+          return {
+            action: setMainSubscene,
+            value: "level_selection",
+          };
+        case "authorize_user_back":
+        case "load_data_no_select":
+          return {
+            action: setBootSubscene,
+            value: "main_menu",
+          };
+        case "authorize_user_select":
+          return {
+            action: setBootSubscene,
+            value: "authorize_user",
+          };
+        case "load_data_select":
+          return { action: setBootSubscene, value: "load_data" };
+      }
+    },
+    [setBootSubscene, setMainSubscene]
+  );
+
+  useEffect(() => {
+    if (props.eventState) {
+      const eventAction = props.eventState.event;
+
+      const dispatchedObject = dispatchObject(eventAction);
+
+      if (dispatchedObject) {
+        dispatchedObject.action(dispatchedObject.value);
+      }
+    }
+  }, [props.eventState, dispatchObject]);
+
+  return null;
+};
+
+export default SubsceneManager;

src/core/StateManagers/YellowTextManager.tsx

@@ -1,20 +1,20 @@
 import { useCallback, useEffect } from "react";
 import node_huds from "../../resources/node_huds.json";
 import site_a from "../../resources/site_a.json";
-import { useYellowTextStore } from "../../store";
+import { useBigTextStore } from "../../store";
 import { SiteType } from "../../components/MainScene/Site";
 import { StateManagerProps } from "./EventManager";
 
 const YellowTextManager = (props: StateManagerProps) => {
-  const setTransformState = useYellowTextStore(
-    (state) => state.setTransformState
-  );
-  const addToTransformState = useYellowTextStore(
+  const setTransformState = useBigTextStore((state) => state.setTransformState);
+  const addToTransformState = useBigTextStore(
     (state) => state.addToTransformState
   );
-  const setText = useYellowTextStore((state) => state.setText);
+  const setText = useBigTextStore((state) => state.setText);
 
-  const setDisableTrail = useYellowTextStore((state) => state.setDisableTrail);
+  const setDisableTrail = useBigTextStore((state) => state.setDisableTrail);
+
+  const setColor = useBigTextStore((state) => state.setColor);
 
   const animateYellowTextWithMove = useCallback(
     (
@@ -126,20 +126,65 @@ const YellowTextManager = (props: StateManagerProps) => {
   }, [setText, setTransformState]);
 
   const initializeYellowTextForMainScene = useCallback(
-    (activeNodeId: string, level: string) => {
+    (activeNodeId: string, activeHudId: string, level: string) => {
       setText((site_a as SiteType)[level][activeNodeId].node_name);
       setTransformState(
-        node_huds[activeNodeId as keyof typeof node_huds].big_text[0],
+        node_huds[activeHudId as keyof typeof node_huds].big_text[0],
         "posX"
       );
       setTransformState(
-        node_huds[activeNodeId as keyof typeof node_huds].big_text[1],
+        node_huds[activeHudId as keyof typeof node_huds].big_text[1],
         "posY"
       );
     },
     [setText, setTransformState]
   );
 
+  const initializeLevelSelection = useCallback(() => {
+    setTransformState(-1, "xOffset");
+
+    setTimeout(() => {
+      setTransformState(-0.02, "posX");
+      setTransformState(0, "posY");
+    }, 400);
+
+    setTimeout(() => {
+      setText("Jump To");
+      setColor("orange");
+    }, 1000);
+
+    setTimeout(() => {
+      setTransformState(0, "xOffset");
+    }, 1200);
+  }, [setColor, setText, setTransformState]);
+
+  const levelSelectionBack = useCallback(
+    (activeNodeId: string, activeHudId: string, level: string) => {
+      setTransformState(-1, "xOffset");
+
+      setTimeout(() => {
+        setTransformState(
+          node_huds[activeHudId as keyof typeof node_huds].big_text[0],
+          "posX"
+        );
+        setTransformState(
+          node_huds[activeHudId as keyof typeof node_huds].big_text[1],
+          "posY"
+        );
+      }, 400);
+
+      setTimeout(() => {
+        setColor("yellow");
+        setText((site_a as SiteType)[level][activeNodeId].node_name);
+      }, 1000);
+
+      setTimeout(() => {
+        setTransformState(0, "xOffset");
+      }, 1200);
+    },
+    [setColor, setText, setTransformState]
+  );
+
   const dispatchObject = useCallback(
     (
       event: string,
@@ -204,7 +249,16 @@ const YellowTextManager = (props: StateManagerProps) => {
         case "exit_media_scene":
           return {
             action: initializeYellowTextForMainScene,
-            value: [newActiveNodeId, newLevel],
+            value: [newActiveNodeId, newActiveHudId, newLevel],
+          };
+        case "level_selection_back":
+          return {
+            action: levelSelectionBack,
+            value: [newActiveNodeId, newActiveHudId, newLevel],
+          };
+        case "toggle_level_selection":
+          return {
+            action: initializeLevelSelection,
           };
       }
     },
@@ -212,6 +266,7 @@ const YellowTextManager = (props: StateManagerProps) => {
       animateMediaYellowText,
       animateYellowTextWithMove,
       animateYellowTextWithoutMove,
+      initializeLevelSelection,
       initializeYellowTextForMainScene,
       initializeYellowTextForMediaScene,
     ]

src/core/mainSceneEventHandler.ts

@@ -1,5 +1,6 @@
 import node_matrices from "../resources/node_matrices.json";
 import site_a from "../resources/site_a.json";
+import level_y_values from "../resources/level_y_values.json";
 
 const hudAssocs = {
   "00": "fg_hud_1",
@@ -20,6 +21,8 @@ const handleMainSceneEvent = (gameContext: any) => {
   let event;
 
   const keyPress = gameContext.keyPress;
+  const subscene = gameContext.mainSubscene;
+  const levelSelectionIdx = gameContext.levelSelectionIdx;
 
   const nodeColIdx = gameContext.nodeMatrixIndices.colIdx;
   const nodeRowIdx = gameContext.nodeMatrixIndices.rowIdx;
@@ -32,113 +35,153 @@ const handleMainSceneEvent = (gameContext: any) => {
   let newSitePosY = gameContext.siteTransformState.posY;
   let newScene = gameContext.scene;
 
-  switch (keyPress) {
-    case "left":
-      newNodeColIdx = nodeColIdx - 1;
-      if (newNodeColIdx < 0) {
-        event = "move_left";
-        newNodeMatIdx = newNodeMatIdx + 1 > 8 ? 1 : newNodeMatIdx + 1;
-        newNodeColIdx = 0;
-        newSiteRotY -= -Math.PI / 4;
-      } else {
-        event = "change_node";
-      }
-      break;
-    case "down":
-      newNodeRowIdx = nodeRowIdx + 1;
-      if (newNodeRowIdx > 2) {
-        event = "move_down";
+  if (subscene === "site") {
+    switch (keyPress) {
+      case "left":
+        newNodeColIdx = nodeColIdx - 1;
+        if (newNodeColIdx < 0) {
+          event = "move_left";
+          newNodeMatIdx = newNodeMatIdx + 1 > 8 ? 1 : newNodeMatIdx + 1;
+          newNodeColIdx = 0;
+          newSiteRotY -= -Math.PI / 4;
+        } else {
+          event = "change_node";
+        }
+        break;
+      case "down":
+        newNodeRowIdx = nodeRowIdx + 1;
+        if (newNodeRowIdx > 2) {
+          event = "move_down";
 
-        newLevel = (parseInt(gameContext.activeLevel) - 1)
-          .toString()
-          .padStart(2, "0");
-        newNodeRowIdx = 0;
-        newSitePosY += 1.5;
-      } else {
-        event = "change_node";
-      }
-      break;
-    case "up":
-      newNodeRowIdx = nodeRowIdx - 1;
-      if (newNodeRowIdx < 0) {
-        event = "move_up";
+          newLevel = (parseInt(gameContext.activeLevel) - 1)
+            .toString()
+            .padStart(2, "0");
+          newNodeRowIdx = 0;
+          newSitePosY += 1.5;
+        } else {
+          event = "change_node";
+        }
+        break;
+      case "up":
+        newNodeRowIdx = nodeRowIdx - 1;
+        if (newNodeRowIdx < 0) {
+          event = "move_up";
 
-        newLevel = (parseInt(gameContext.activeLevel) + 1)
-          .toString()
-          .padStart(2, "0");
+          newLevel = (parseInt(gameContext.activeLevel) + 1)
+            .toString()
+            .padStart(2, "0");
 
-        newNodeRowIdx = 2;
-        newSitePosY -= 1.5;
-      } else {
-        event = "change_node";
-      }
-      break;
-    case "right":
-      newNodeColIdx = nodeColIdx + 1;
-      if (newNodeColIdx > 3) {
-        event = "move_right";
-        newNodeMatIdx = newNodeMatIdx - 1 < 1 ? 8 : newNodeMatIdx - 1;
-        newNodeColIdx = 3;
-        newSiteRotY += -Math.PI / 4;
-      } else {
-        event = "change_node";
-      }
-      break;
-    case "select":
-      // in this case we have to check the type of the blue orb
-      // and dispatch an action depending on that, so we have to precalculate the
-      // new active blue orb here.
-      const newActiveNodeId =
-        newLevel +
-        node_matrices[newNodeMatIdx.toString() as keyof typeof node_matrices][
-          newNodeRowIdx as number
-        ][newNodeColIdx as number];
+          newNodeRowIdx = 2;
+          newSitePosY -= 1.5;
+        } else {
+          event = "change_node";
+        }
+        break;
+      case "right":
+        newNodeColIdx = nodeColIdx + 1;
+        if (newNodeColIdx > 3) {
+          event = "move_right";
+          newNodeMatIdx = newNodeMatIdx - 1 < 1 ? 8 : newNodeMatIdx - 1;
+          newNodeColIdx = 3;
+          newSiteRotY += -Math.PI / 4;
+        } else {
+          event = "change_node";
+        }
+        break;
+      case "select":
+        // in this case we have to check the type of the blue orb
+        // and dispatch an action depending on that, so we have to precalculate the
+        // new active blue orb here.
+        const newActiveNodeId =
+          newLevel +
+          node_matrices[newNodeMatIdx.toString() as keyof typeof node_matrices][
+            newNodeRowIdx as number
+          ][newNodeColIdx as number];
 
-      const nodeType = (site_a as any)[newLevel][newActiveNodeId].type;
+        const nodeType = (site_a as any)[newLevel][newActiveNodeId].type;
 
-      const eventAnimation = "throw_node_";
+        const eventAnimation = "throw_node_";
 
-      switch (parseInt(nodeType)) {
-        case 0:
-        case 2:
-          event = eventAnimation + "media";
-          newScene = "media";
-          break;
-        case 8:
-          event = eventAnimation + "gate";
-          newScene = "gate";
-          break;
-        case 7:
-          event = eventAnimation + "sskn";
-          newScene = "sskn";
-          break;
-      }
-      break;
-    case "toggle_level_selection":
-      return { event: "toggle_level_selection" };
+        switch (parseInt(nodeType)) {
+          case 0:
+          case 2:
+            event = eventAnimation + "media";
+            newScene = "media";
+            break;
+          case 8:
+            event = eventAnimation + "gate";
+            newScene = "gate";
+            break;
+          case 7:
+            event = eventAnimation + "sskn";
+            newScene = "sskn";
+            break;
+        }
+        break;
+      case "toggle_level_selection":
+        return { event: "toggle_level_selection" };
+    }
+
+    const newActiveNodeId =
+      newLevel +
+      node_matrices[newNodeMatIdx.toString() as keyof typeof node_matrices][
+        newNodeRowIdx as number
+      ][newNodeColIdx as number];
+
+    const newActiveHudId =
+      hudAssocs[`${newNodeRowIdx}${newNodeColIdx}` as keyof typeof hudAssocs];
+
+    return {
+      event: event,
+      newNodeColIdx: newNodeColIdx,
+      newNodeRowIdx: newNodeRowIdx,
+      newNodeMatIdx: newNodeMatIdx,
+      newSitePosY: newSitePosY,
+      newSiteRotY: newSiteRotY,
+      newLevel: newLevel,
+      newScene: newScene,
+      newActiveNodeId: newActiveNodeId,
+      newActiveHudId: newActiveHudId,
+    };
+  } else if (subscene === "level_selection") {
+    switch (keyPress) {
+      case "up":
+        if (levelSelectionIdx + 1 <= 23)
+          return {
+            event: `level_selection_${keyPress}`,
+            newSelectedLevelIdx: levelSelectionIdx + 1,
+          };
+        break;
+      case "down":
+        if (levelSelectionIdx - 1 >= 0)
+          return {
+            event: `level_selection_${keyPress}`,
+            newSelectedLevelIdx: levelSelectionIdx - 1,
+          };
+        break;
+      case "back":
+        return {
+          event: "level_selection_back",
+          newActiveNodeId:
+            newLevel +
+            node_matrices[
+              newNodeMatIdx.toString() as keyof typeof node_matrices
+            ][newNodeRowIdx as number][newNodeColIdx as number],
+          newActiveHudId:
+            hudAssocs[
+              `${newNodeRowIdx}${newNodeColIdx}` as keyof typeof hudAssocs
+            ],
+          newLevel: newLevel,
+        };
+      case "select":
+        newLevel = (levelSelectionIdx + 1).toString().padStart(2, "0");
+        return {
+          event: "select_level",
+          newLevel: newLevel,
+          newSitePosY: level_y_values[newLevel as keyof typeof level_y_values],
+        };
+    }
   }
-
-  const newActiveNodeId =
-    newLevel +
-    node_matrices[newNodeMatIdx.toString() as keyof typeof node_matrices][
-      newNodeRowIdx as number
-    ][newNodeColIdx as number];
-
-  const newActiveHudId =
-    hudAssocs[`${newNodeRowIdx}${newNodeColIdx}` as keyof typeof hudAssocs];
-
-  return {
-    event: event,
-    newNodeColIdx: newNodeColIdx,
-    newNodeRowIdx: newNodeRowIdx,
-    newNodeMatIdx: newNodeMatIdx,
-    newSitePosY: newSitePosY,
-    newSiteRotY: newSiteRotY,
-    newLevel: newLevel,
-    newScene: newScene,
-    newActiveNodeId: newActiveNodeId,
-    newActiveHudId: newActiveHudId,
-  };
 };
 
 export default handleMainSceneEvent;

src/resources/font_data/big_font.json

@@ -54,7 +54,7 @@
     "m": [160, 34, 14, 14, 0],
     "n": [176, 34, 11, 14, 0],
     "o": [188, 34, 12, 14, 0],
-    "p": [202, 34, 11, 18, 4],
+    "p": [202, 34, 11, 14, 4],
     "q": [214, 34, 11, 18, 4],
     "r": [226, 34, 9, 14, 0],
     "s": [236, 34, 8, 14, 0],
@@ -80,6 +80,7 @@
     "%": [222, 58, 17, 14, 0],
     "&": [0, 82, 16, 14, 0],
     "?": [18, 82, 9, 14, 0],
-    "/": [28, 82, 11, 16, 2]
+    "/": [28, 82, 11, 16, 2],
+    " ": [0, 0, 0, 0, 0, 0]
   }
 }

src/scenes/MainScene.tsx

@@ -9,7 +9,7 @@ import GrayPlanes from "../components/MainScene/GrayPlanes";
 import MiddleRing from "../components/MainScene/MiddleRing";
 import Starfield from "../components/MainScene/Starfield";
 import { useHudStore, useLainStore } from "../store";
-import TextRenderer from "../components/TextRenderer/GreenTextRenderer";
+import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
 import HUD from "../components/MainScene/HUD";
 import YellowOrb from "../components/MainScene/YellowOrb";
 import ActiveLevelNodes from "../components/MainScene/ActiveLevelNodes";
@@ -30,18 +30,18 @@ const MainScene = () => {
       <Suspense fallback={null}>
         <MainSceneIntro />
         <a.group>
-          {/*<Preloader />*/}
-          {/*<Site />*/}
-          {/*<ActiveLevelNodes />*/}
-          {/*<HUD />*/}
-          {/*<TextRenderer />*/}
-          {/*<YellowTextRenderer />*/}
-          {/*<YellowOrb />*/}
-          {/*<Starfield />*/}
-          {/*<GrayPlanes />*/}
-          {/*<MiddleRing />*/}
+          <Preloader />
+          <Site />
+          <ActiveLevelNodes />
+          <HUD />
+          <GreenTextRenderer />
+          <YellowTextRenderer />
+          <YellowOrb />
+          <Starfield />
+          <GrayPlanes />
+          <MiddleRing />
           <LevelSelection />
-          <OrbitControls />
+          {/*<OrbitControls />*/}
           <pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
           <pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
           <pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />

src/store.ts

@@ -91,9 +91,10 @@ type MediaWordState = {
   resetPosStateIdx: () => void;
 };
 
-export type YellowTextState = {
+export type BigTextState = {
   disableTrail: boolean;
   text: string;
+  color: string;
   transformState: {
     posX: number;
     posY: number;
@@ -154,9 +155,15 @@ type SSknState = {
   toggleLoading: () => void;
 };
 
-export const useYellowTextStore = create(
+type MainSceneState = {
+  subscene: string;
+  setSubscene: (to: string) => void;
+};
+
+export const useBigTextStore = create(
   combine(
     {
+      color: "yellow",
       disableTrail: false,
       text: "Play",
       transformState: {
@@ -164,7 +171,7 @@ export const useYellowTextStore = create(
         posY: 0,
         xOffset: 0,
       },
-    } as YellowTextState,
+    } as BigTextState,
     (set) => ({
       setDisableTrail: (to: boolean) => set(() => ({ disableTrail: to })),
       setText: (to: string) => set(() => ({ text: to })),
@@ -181,6 +188,7 @@ export const useYellowTextStore = create(
               val,
           },
         })),
+      setColor: (to: string) => set(() => ({ color: to })),
     })
   )
 );
@@ -408,6 +416,11 @@ export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
     set(() => ({ activeLetterTextureOffset: to })),
 }));
 
+export const useMainSceneStore = create<MainSceneState>((set) => ({
+  subscene: "site",
+  setSubscene: (to) => set(() => ({ subscene: to })),
+}));
+
 export const useBootStore = create(
   combine(
     {
@@ -468,7 +481,7 @@ export const useGateStore = create<GateState>((set) => ({
 
 export const useLevelSelectionStore = create<LevelSelectionState>((set) => ({
   availableLevels: Array.from({ length: 24 }, (x, i) => i + 1),
-  selectedLevelIdx: 23,
+  selectedLevelIdx: 3,
   levelSelectionToggled: 0,
   setSelectedLevelIdx: (to) => set(() => ({ selectedLevelIdx: to })),
   toggleLevelSelection: () =>