changed keybinding system, adding pause

src/components/MainScene/ActiveLevelNodes.tsx

@@ -19,11 +19,16 @@ const ActiveLevelNodes = () => {
   const siteState = useSpring({
     siteRotY: siteTransformState.rotY,
     sitePosY: siteTransformState.posY,
+    siteRotX: siteTransformState.rotX,
     config: { duration: 1200 },
   });
 
   return (
-    <a.group rotation-y={siteState.siteRotY} position-y={siteState.sitePosY}>
+    <a.group
+      rotation-y={siteState.siteRotY}
+      position-y={siteState.sitePosY}
+      rotation-x={siteState.siteRotX}
+    >
       {Object.entries(activeLevelNodes).map((node: [string, any]) => {
         return (
           <Node

src/components/MainScene/GrayPlanes.tsx

@@ -1,15 +1,10 @@
 import React, { createRef, memo, RefObject, useRef } from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
-import { useGrayPlanesStore } from "../../store";
 
-const GrayPlanes = memo(() => {
+const GrayPlanes = memo((props: { visible: boolean }) => {
   const grayPlaneGroupRef = useRef<THREE.Object3D>();
 
-  const grayPlanesVisible = useGrayPlanesStore(
-    (state) => state.grayPlanesVisible
-  );
-
   const grayPlanePoses = [
     [1.2, 0, -1.2],
     [1.2, 0, 1.2],
@@ -21,7 +16,7 @@ const GrayPlanes = memo(() => {
   ];
 
   const grayPlaneRefs = grayPlanePoses.map((poses: number[]) =>
-      // eslint-disable-next-line react-hooks/rules-of-hooks
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useRef<RefObject<THREE.Object3D>[]>(
       poses.map(() => createRef<THREE.Object3D>())
     )
@@ -37,7 +32,7 @@ const GrayPlanes = memo(() => {
     <group
       position={[0.1, 0, -2]}
       ref={grayPlaneGroupRef}
-      visible={grayPlanesVisible}
+      visible={props.visible}
     >
       {grayPlaneRefs.map((ref, idx: number) => {
         return (

src/components/MainScene/HUD.tsx

@@ -11,10 +11,9 @@ import { a, useSpring } from "@react-spring/three";
 import { useHudStore } from "../../store";
 import node_huds from "../../resources/node_huds.json";
 
-const HUD = memo(() => {
+const HUD = memo((props: { visible: boolean }) => {
   const active = useHudStore((state) => state.active);
   const id = useHudStore((state) => state.id);
-  const visible = useHudStore((state) => state.visible);
 
   const currentHud = node_huds[id as keyof typeof node_huds];
 
@@ -83,7 +82,7 @@ const HUD = memo(() => {
   );
 
   return (
-    <group visible={visible} position={[0, 0, 10]}>
+    <group visible={props.visible} position={[0, 0, 10]}>
       <a.sprite
         position-x={longHUDPosX}
         position-y={currentHud!.long.position[1]}

src/components/MainScene/Site.tsx

@@ -60,12 +60,17 @@ const Site = memo(() => {
   const siteState = useSpring({
     siteRotY: siteTransformState.rotY,
     sitePosY: siteTransformState.posY,
+    siteRotX: siteTransformState.rotX,
     config: { duration: 1200 },
   });
 
   return (
     <Suspense fallback={null}>
-      <a.group rotation-y={siteState.siteRotY} position-y={siteState.sitePosY}>
+      <a.group
+        rotation-y={siteState.siteRotY}
+        position-y={siteState.sitePosY}
+        rotation-x={siteState.siteRotX}
+      >
         {Object.entries(level_y_values).map((level: [string, number]) => (
           <group position={[0, level[1], 0]} key={level[0]}>
             <PurpleRing purpleRingPosY={0.44} level={level[0]} />

src/components/MainScene/YellowOrb.tsx

@@ -2,15 +2,14 @@ import React, { memo, useRef, useState } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import orbSprite from "../../static/sprite/orb.png";
-import { useYellowOrbStore } from "../../store";
+import { useMainSceneStore } from "../../store";
 
 // initialize outside the component otherwise it gets overwritten when it rerenders
 let orbIdx = 0;
 let orbDirectionChangeCount = 0;
 let renderOrder = -1;
 
-const YellowOrb = memo(() => {
-  const yellowOrbVisible = useYellowOrbStore((state) => state.yellowOrbVisible);
+const YellowOrb = memo((props: { visible: boolean }) => {
   const orbRef = useRef<THREE.Object3D>();
   const [orbDirection, setOrbDirection] = useState("left");
   const [currentCurve, setCurrentCurve] = useState("first");
@@ -32,7 +31,7 @@ const YellowOrb = memo(() => {
   );
 
   useFrame(() => {
-    if (yellowOrbVisible) {
+    if (props.visible) {
       let orbPosFirst = firstCurve.getPoint(orbIdx / 250);
       let orbPosSecond = secondCurve.getPoint(orbIdx / 250);
 
@@ -108,7 +107,7 @@ const YellowOrb = memo(() => {
   });
 
   return (
-    <group position={[0, -0.1, 1]} visible={yellowOrbVisible}>
+    <group position={[0, -0.1, 1]} visible={props.visible}>
       <sprite scale={[0.5, 0.5, 0.5]} ref={orbRef} renderOrder={renderOrder}>
         <spriteMaterial
           attach="material"

src/components/MainSceneIntro.tsx

@@ -1,11 +1,5 @@
 import React, { memo, useEffect } from "react";
-import {
-  useGrayPlanesStore,
-  useHudStore,
-  useLainStore,
-  useStarfieldStore,
-  useYellowOrbStore,
-} from "../store";
+import { useHudStore, useLainStore, useStarfieldStore } from "../store";
 
 // ghost component to manipulate the intro action for the main scene.
 
@@ -22,7 +16,7 @@ const MainSceneIntro = memo(() => {
   const toggleHud = useHudStore((state) => state.toggleActive);
 
   //const setHudVisible = useSetRecoilState(hudVisibilityAtom);
-  const setOrbVisible = useYellowOrbStore((state) => state.setYellowOrbVisible);
+  // const setOrbVisible = useYellowOrbStore((state) => state.setYellowOrbVisible);
 
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
 
@@ -36,13 +30,9 @@ const MainSceneIntro = memo(() => {
     (state) => state.setMainStarfieldBoostVal
   );
 
-  const setGrayPlanesVisible = useGrayPlanesStore(
-    (state) => state.setGrayPlanesVisible
-  );
-
   useEffect(() => {
     setTimeout(() => {
-      setGrayPlanesVisible(true);
+      // setGrayPlanesVisible(true);
     }, 2500);
 
     setTimeout(() => {
@@ -55,7 +45,7 @@ const MainSceneIntro = memo(() => {
     setTimeout(() => {
       setLainMoveState("standing");
 
-      setOrbVisible(true);
+      // setOrbVisible(true);
       //setHudVisible(true);
 
       setIntroStarfieldVisible(false);
@@ -67,10 +57,8 @@ const MainSceneIntro = memo(() => {
       }, 300);
     }, 3860);
   }, [
-    setGrayPlanesVisible,
     setMainStarfieldBoostVal,
     setMainStarfieldVisible,
-    setOrbVisible,
     setIntroStarfieldVisible,
     setLainMoveState,
     toggleHud,

src/components/TextRenderer/GreenTextRenderer.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from "react";
 import { GreenTextState, useGreenTextStore } from "../../store";
 import MediumLetter from "./MediumLetter";
 
-const GreenTextRenderer = () => {
+const GreenTextRenderer = (props: { visible?: boolean }) => {
   const greenTextActive = useGreenTextStore((state) => state.active);
 
   const transformRef = useRef(useGreenTextStore.getState().transformState);
@@ -34,7 +34,7 @@ const GreenTextRenderer = () => {
   );
 
   return (
-    <group position={[0, 0, 10]}>
+    <group position={[0, 0, 10]} visible={props.visible}>
       <a.group
         position-x={greenTextPosX}
         position-y={transformRef.current.posY}

src/components/TextRenderer/YellowTextRenderer.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef } from "react";
-import { useBigTextStore, BigTextState } from "../../store";
+import { useBigTextStore, BigTextState, useMainSceneStore } from "../../store";
 import { a, useSpring, useTrail } from "@react-spring/three";
 import BigLetter from "./BigLetter";
 
-const YellowTextRenderer = () => {
+const YellowTextRenderer = (props: { visible?: boolean }) => {
   const disableTrail = useBigTextStore((state) => state.disableTrail);
   const transformState = useBigTextStore((state) => state.transformState);
 
@@ -40,7 +40,7 @@ const YellowTextRenderer = () => {
   );
 
   return (
-    <group position={[0, 0, 10]}>
+    <group position={[0, 0, 10]} visible={props.visible}>
       {disableTrail
         ? textArrRef.current.map((letter, idx) => (
             <a.group

src/core/StateManagers/EventManager.tsx

@@ -35,13 +35,14 @@ import SubsceneManager from "./SubsceneManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
-    40: "down", // down arrow
-    37: "left", // left arrow
-    38: "up", // up arrow
-    39: "right", // right arrow
-    88: "select", // x key
-    90: "back", // z key
-    69: "toggle_level_selection", // e key
+    40: "DOWN", // down arrow
+    37: "LEFT", // left arrow
+    38: "UP", // up arrow
+    39: "RIGHT", // right arrow
+    88: "CIRCLE", // x key
+    90: "X", // z key
+    68: "TRIANGLE", // d key
+    69: "L2", // e key
   };
   return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs];
 };

src/core/StateManagers/GreenTextManager.tsx

@@ -87,6 +87,7 @@ const GreenTextManager = (props: StateManagerProps) => {
             value: [newActiveNodeId, newLevel],
           };
         case "toggle_level_selection":
+        case "toggle_pause":
           return {
             action: toggleActive,
           };

src/core/StateManagers/NodeHUDManager.tsx

@@ -57,6 +57,7 @@ const NodeHUDManager = (props: StateManagerProps) => {
             value: [targetNodeHudId],
           };
         case "toggle_level_selection":
+        case "toggle_pause":
           return {
             action: toggleActive,
           };

src/core/StateManagers/SiteManager.tsx

@@ -24,6 +24,12 @@ const SiteManager = (props: StateManagerProps) => {
             value: [newSiteRotY, "rotY"],
             actionDelay: 1100,
           };
+        case "toggle_pause":
+          return {
+            action: setTransformState,
+            value: [Math.PI / 2, "rotX"],
+            actionDelay: 0,
+          };
       }
     },
     [setTransformState]

src/core/StateManagers/SubsceneManager.tsx

@@ -21,6 +21,11 @@ const SubsceneManager = (props: StateManagerProps) => {
             action: setMainSubscene,
             value: "level_selection",
           };
+        case "toggle_pause":
+          return {
+            action: setMainSubscene,
+            value: "pause",
+          };
         case "authorize_user_back":
         case "load_data_no_select":
           return {

src/core/authorizeUserEventHandler.ts

@@ -8,13 +8,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => {
   const currentSubscene = "authorize_user";
 
   switch (keyPress) {
-    case "left":
+    case "LEFT":
       const utmostLeftIndices = [0, 13, 26, 39, 52];
       if (utmostLeftIndices.includes(matrixIdx)) {
         break;
       } else {
         return {
-          event: `${currentSubscene}_${keyPress}`,
+          event: `${currentSubscene}_left`,
           newBgLettersPos: { x: bgLettersPos.x + 0.3, y: bgLettersPos.y },
           newActiveLetterTexOffset: {
             x: activeLetterTexOffset.x - 0.0775,
@@ -23,13 +23,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => {
           newAuthorizeUserMatrixIdx: matrixIdx - 1,
         };
       }
-    case "right":
+    case "RIGHT":
       const utmostRightIndices = [12, 25, 38, 51, 64];
       if (utmostRightIndices.includes(matrixIdx)) {
         break;
       } else {
         return {
-          event: `${currentSubscene}_${keyPress}`,
+          event: `${currentSubscene}_right`,
           newBgLettersPos: { x: bgLettersPos.x - 0.3, y: bgLettersPos.y },
           newActiveLetterTexOffset: {
             x: activeLetterTexOffset.x + 0.0775,
@@ -38,13 +38,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => {
           newAuthorizeUserMatrixIdx: matrixIdx + 1,
         };
       }
-    case "down":
+    case "DOWN":
       const utmostLowIndices = Array.from(new Array(13), (x, i) => i + 52);
       if (utmostLowIndices.includes(matrixIdx)) {
         break;
       } else {
         return {
-          event: `${currentSubscene}_${keyPress}`,
+          event: `${currentSubscene}_down`,
           newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y + 0.25 },
           newActiveLetterTexOffset: {
             x: activeLetterTexOffset.x,
@@ -53,13 +53,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => {
           newAuthorizeUserMatrixIdx: matrixIdx + 13,
         };
       }
-    case "up":
+    case "UP":
       const utmostHighIndices = Array.from(new Array(13), (x, i) => i);
       if (utmostHighIndices.includes(matrixIdx)) {
         break;
       } else {
         return {
-          event: `${currentSubscene}_${keyPress}`,
+          event: `${currentSubscene}_up`,
           newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y - 0.25 },
           newActiveLetterTexOffset: {
             x: activeLetterTexOffset.x,
@@ -68,8 +68,7 @@ const handleAuthorizeUserEvent = (gameContext: any) => {
           newAuthorizeUserMatrixIdx: matrixIdx - 13,
         };
       }
-
-    case "back": {
+    case "X": {
       return { event: "authorize_user_back" };
     }
   }

src/core/bootEventHandler.ts

@@ -19,18 +19,22 @@ const handleBootEvent = (gameContext: any) => {
     });
   } else {
     switch (keyPress) {
-      case "down":
-      case "up":
-      case "left":
-      case "right":
-      case "back":
+      case "DOWN":
+      case "UP":
+      case "LEFT":
+      case "RIGHT":
         return {
-          event: `${currentSubscene}_${keyPress}`,
+          event: `${currentSubscene}_${keyPress.toLowerCase()}`,
           subscene: currentSubscene,
         };
-      case "select":
+      case "X":
         return {
-          event: `${activeBootElement}_${keyPress}`,
+          event: `${currentSubscene}_back`,
+          subscene: currentSubscene,
+        };
+      case "CIRCLE":
+        return {
+          event: `${activeBootElement}_select`,
           subscene: currentSubscene,
         };
     }

src/core/mainSceneEventHandler.ts

@@ -37,7 +37,7 @@ const handleMainSceneEvent = (gameContext: any) => {
 
   if (subscene === "site") {
     switch (keyPress) {
-      case "left":
+      case "LEFT":
         newNodeColIdx = nodeColIdx - 1;
         if (newNodeColIdx < 0) {
           event = "move_left";
@@ -48,7 +48,7 @@ const handleMainSceneEvent = (gameContext: any) => {
           event = "change_node";
         }
         break;
-      case "down":
+      case "DOWN":
         newNodeRowIdx = nodeRowIdx + 1;
         if (newNodeRowIdx > 2) {
           event = "move_down";
@@ -62,7 +62,7 @@ const handleMainSceneEvent = (gameContext: any) => {
           event = "change_node";
         }
         break;
-      case "up":
+      case "UP":
         newNodeRowIdx = nodeRowIdx - 1;
         if (newNodeRowIdx < 0) {
           event = "move_up";
@@ -77,7 +77,7 @@ const handleMainSceneEvent = (gameContext: any) => {
           event = "change_node";
         }
         break;
-      case "right":
+      case "RIGHT":
         newNodeColIdx = nodeColIdx + 1;
         if (newNodeColIdx > 3) {
           event = "move_right";
@@ -88,7 +88,7 @@ const handleMainSceneEvent = (gameContext: any) => {
           event = "change_node";
         }
         break;
-      case "select":
+      case "CIRCLE":
         // 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.
@@ -118,8 +118,10 @@ const handleMainSceneEvent = (gameContext: any) => {
             break;
         }
         break;
-      case "toggle_level_selection":
+      case "L2":
         return { event: "toggle_level_selection" };
+      case "TRIANGLE":
+        return { event: "toggle_pause" };
     }
 
     const newActiveNodeId =
@@ -145,21 +147,21 @@ const handleMainSceneEvent = (gameContext: any) => {
     };
   } else if (subscene === "level_selection") {
     switch (keyPress) {
-      case "up":
+      case "UP":
         if (levelSelectionIdx + 1 <= 23)
           return {
-            event: `level_selection_${keyPress}`,
+            event: `level_selection_up`,
             newSelectedLevelIdx: levelSelectionIdx + 1,
           };
         break;
-      case "down":
+      case "DOWN":
         if (levelSelectionIdx - 1 >= 0)
           return {
-            event: `level_selection_${keyPress}`,
+            event: `level_selection_down`,
             newSelectedLevelIdx: levelSelectionIdx - 1,
           };
         break;
-      case "back":
+      case "X":
         return {
           event: "level_selection_back",
           newActiveNodeId:
@@ -173,7 +175,7 @@ const handleMainSceneEvent = (gameContext: any) => {
             ],
           newLevel: newLevel,
         };
-      case "select":
+      case "CIRCLE":
         const oldLevel = newLevel;
         newLevel = (levelSelectionIdx + 1).toString().padStart(2, "0");
         if (oldLevel === newLevel) break;

src/core/mediaSceneEventHandler.ts

@@ -7,7 +7,7 @@ const handleMediaSceneEvent = (gameContext: any) => {
   const rightSideComponents = ["fstWord", "sndWord", "thirdWord"];
   if (rightSideComponents.includes(activeMediaComponent)) {
     switch (keyPress) {
-      case "down":
+      case "DOWN":
         newWordPosStateIdx++;
         if (newWordPosStateIdx > 6) {
           newWordPosStateIdx = 1;
@@ -17,7 +17,7 @@ const handleMediaSceneEvent = (gameContext: any) => {
           newRightSideComponentIdx = 0;
         }
         break;
-      case "up":
+      case "UP":
         newWordPosStateIdx--;
         if (newWordPosStateIdx < 1) {
           newWordPosStateIdx = 6;

src/scenes/MainScene.tsx

@@ -8,7 +8,7 @@ import MainSceneIntro from "../components/MainSceneIntro";
 import GrayPlanes from "../components/MainScene/GrayPlanes";
 import MiddleRing from "../components/MainScene/MiddleRing";
 import Starfield from "../components/MainScene/Starfield";
-import { useHudStore, useLainStore } from "../store";
+import { useHudStore, useLainStore, useMainSceneStore } from "../store";
 import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
 import HUD from "../components/MainScene/HUD";
 import YellowOrb from "../components/MainScene/YellowOrb";
@@ -17,6 +17,10 @@ import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
 import LevelSelection from "../components/MainScene/LevelSelection";
 
 const MainScene = () => {
+  const currentSubscene = useMainSceneStore((state) => state.subscene);
+
+  const isPaused = currentSubscene === "pause";
+
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
   const setActiveNodeHudId = useHudStore((state) => state.setId);
 
@@ -32,13 +36,13 @@ const MainScene = () => {
         <a.group>
           <Preloader />
           <Site />
-          <ActiveLevelNodes />
-          <HUD />
-          <GreenTextRenderer />
-          <YellowTextRenderer />
-          <YellowOrb />
-          <Starfield />
-          <GrayPlanes />
+          {/*<ActiveLevelNodes />*/}
+          <HUD visible={!isPaused} />
+          <GreenTextRenderer visible={!isPaused} />
+          <YellowTextRenderer visible={!isPaused} />
+          <YellowOrb visible={!isPaused} />
+          {/*<Starfield />*/}
+          <GrayPlanes visible={!isPaused} />
           <MiddleRing />
           <LevelSelection />
           {/*<OrbitControls />*/}

src/store.ts

@@ -19,7 +19,6 @@ type SceneState = {
 type HUDState = {
   id: string;
   active: number;
-  visible: boolean;
   setId: (to: string) => void;
   toggleActive: () => void;
 };
@@ -40,11 +39,6 @@ type LainState = {
   setLainMoveState: (to: string) => void;
 };
 
-type GrayPlanesState = {
-  grayPlanesVisible: boolean;
-  setGrayPlanesVisible: (to: boolean) => void;
-};
-
 type StarfieldState = {
   introStarfieldVisible: boolean;
   mainStarfieldVisible: boolean;
@@ -54,15 +48,11 @@ type StarfieldState = {
   setMainStarfieldBoostVal: (to: number) => void;
 };
 
-type YellowOrbState = {
-  yellowOrbVisible: boolean;
-  setYellowOrbVisible: (to: boolean) => void;
-};
-
 type SiteState = {
   transformState: {
     posY: number;
     rotY: number;
+    rotX: number;
   };
 };
 
@@ -221,7 +211,6 @@ export const useGreenTextStore = create(
 export const useHudStore = create<HUDState>((set) => ({
   id: "fg_hud_1",
   active: 1,
-  visible: true,
   setId: (to) => set(() => ({ id: to })),
   toggleActive: () => set((state) => ({ active: Number(!state.active) })),
 }));
@@ -257,11 +246,6 @@ export const useLainStore = create<LainState>((set) => ({
   setLainMoveState: (to) => set(() => ({ lainMoveState: to })),
 }));
 
-export const useGrayPlanesStore = create<GrayPlanesState>((set) => ({
-  grayPlanesVisible: true,
-  setGrayPlanesVisible: (to) => set(() => ({ grayPlanesVisible: to })),
-}));
-
 export const useStarfieldStore = create<StarfieldState>((set) => ({
   introStarfieldVisible: false,
   mainStarfieldVisible: true,
@@ -271,17 +255,13 @@ export const useStarfieldStore = create<StarfieldState>((set) => ({
   setMainStarfieldBoostVal: (to) => set(() => ({ mainStarfieldBoostVal: to })),
 }));
 
-export const useYellowOrbStore = create<YellowOrbState>((set) => ({
-  yellowOrbVisible: false,
-  setYellowOrbVisible: (to) => set(() => ({ yellowOrbVisible: to })),
-}));
-
 export const useSiteStore = create(
   combine(
     {
       transformState: {
         posY: 0,
         rotY: 0,
+        rotX: 0,
       },
     } as SiteState,
     (set) => ({