more werk

src/components/MainScene/PurpleRing.tsx

@@ -35,8 +35,7 @@ const PurpleRing = memo((props: PurpleRingProps) => {
 
   const uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]);
 
-  const formattedLevel =
-    props.level.length < 2 ? "0" + props.level : props.level;
+  const formattedLevel = props.level.padStart(2, "0");
 
   uniforms.siteA = { type: "t", value: siteA };
   uniforms.siteB = { type: "t", value: siteB };

src/components/MainScene/Site.tsx

@@ -40,7 +40,7 @@ const Site = memo(() => {
 
         {Object.entries(site_a).map((blueOrb) => {
           if (
-            (blueOrb as any)[1]["unlocked_by"] === "-1" &&
+            // (blueOrb as any)[1]["unlocked_by"] === "-1" &&
             activeLevels.includes((blueOrb as any)[0].substr(0, 2))
           )
             return (

src/components/StateManagers/EventManager.tsx

@@ -6,6 +6,7 @@ import BlueOrbManager from "./BlueOrbManager";
 import BlueOrbHUDManager from "./BlueOrbHUDManager";
 import {
   useBlueOrbStore,
+  useLevelStore,
   useMediaStore,
   useSceneStore,
   useSiteStore,
@@ -17,6 +18,8 @@ import MediaElementManager from "./MediaElementManager";
 import SceneManager from "./SceneManager";
 import YellowTextManager from "./YellowTextManager";
 import MediaImageManager from "./MediaImageManager";
+import computeAction from "../../core/computeAction";
+import available_blue_orbs_on_projection from "../../resources/available_blue_orbs_on_projection.json";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -33,12 +36,29 @@ export type StateManagerProps = {
   eventState: string;
 };
 
+export type GameContext = {
+  keyPress?: string;
+  scene: string;
+  blueOrbRowIdx: number;
+  blueOrbColIdx: number;
+  currentLevel: string;
+  siteRotIdx: string;
+};
+
 const EventManager = () => {
   const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
   const blueOrbRowIdx = useBlueOrbStore((state) => state.blueOrbRowIdx);
   const blueOrbColIdx = useBlueOrbStore((state) => state.blueOrbColIdx);
 
   const siteRotIdx = useSiteStore((state) => state.siteRotIdx);
+  const currentLevel = useLevelStore((state) => state.currentLevel);
+
+  const availableBlueOrbsForSelection = available_blue_orbs_on_projection[
+    siteRotIdx as keyof typeof available_blue_orbs_on_projection
+  ].map((posIdxArr) => posIdxArr.map((posIdx) => currentLevel + posIdx));
+
+  const selectedBlueOrb =
+    availableBlueOrbsForSelection[blueOrbRowIdx][blueOrbColIdx];
 
   const [eventState, setEventState] = useState<string>();
   const activeMediaComponent = useMediaStore(
@@ -56,39 +76,32 @@ const EventManager = () => {
     return keys[currentScene as keyof typeof keys];
   }, [activeBlueOrb, activeMediaComponent, currentScene]);
 
+  const gameContext: GameContext = useMemo(
+    () => ({
+      scene: currentScene,
+      siteRotIdx: siteRotIdx,
+      blueOrbRowIdx: blueOrbRowIdx,
+      blueOrbColIdx: blueOrbColIdx,
+      currentLevel: currentLevel,
+    }),
+    [blueOrbColIdx, blueOrbRowIdx, currentLevel, currentScene, siteRotIdx]
+  );
+
   const handleKeyPress = useCallback(
     (event) => {
       const { keyCode } = event;
 
       const keyPress = getKeyCodeAssociation(keyCode);
 
-      const gameContext = {
-        scene: currentScene,
-        keyPress: keyPress,
-        siteRotIdx: siteRotIdx,
-        blueOrbRowIdx: blueOrbRowIdx,
-        blueOrbColIdx: blueOrbColIdx,
-      };
-
       if (keyPress && !inputCooldown) {
-        // event id consists of the CURRENT blue orb id (to calculate where we're at currently)
-        // and the keypress.
-        // this id is later on used to get the needed corresponding data for each component
-        // from blue_orb_directions.json file.
-        // const eventId = `${activeBlueOrb}_${keyPress}`;
-        //
+        gameContext.keyPress = keyPress;
+        const event = computeAction(gameContext);
+        console.log(event);
         const eventId = `${sceneEventKey}_${keyPress}`;
         setEventState(eventId);
       }
     },
-    [
-      blueOrbColIdx,
-      blueOrbRowIdx,
-      currentScene,
-      inputCooldown,
-      sceneEventKey,
-      siteRotIdx,
-    ]
+    [gameContext, inputCooldown, sceneEventKey]
   );
 
   useEffect(() => {

src/core/computeAction.ts

@@ -1,31 +1,57 @@
-import available_blue_orbs_on_projection from "../resources/available_blue_orbs_on_projection.json";
-
-type GameContext = {
-  scene: string;
-  keyPress: string;
-  siteRotIdx: number;
-  blueOrbRowIdx: number;
-  blueOrbColIdx: number;
-};
+import { GameContext } from "../components/StateManagers/EventManager";
 
 const computeAction = (gameContext: GameContext) => {
-  const availableBlueOrbs = [
-    available_blue_orbs_on_projection.topRowProjection[gameContext.siteRotIdx],
-    available_blue_orbs_on_projection.middleRowProjection[
-      gameContext.siteRotIdx
-    ],
-    available_blue_orbs_on_projection.bottomRowProjection[
-      gameContext.siteRotIdx
-    ],
-  ];
+  let event;
+  let newBlueOrbColIdx;
+  let newBlueOrbRowIdx;
+  let newLevel;
+  let newSiteRotIdx;
 
   switch (gameContext.keyPress) {
     case "left":
-      let newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1;
-      if(newBlueOrbRowIdx < 0) {
+      newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1;
+      if (newBlueOrbRowIdx < 0) {
+        return { event: "move_left" };
+      } else {
+        return { event: "change_blue_orb_left" };
+      }
+    case "down":
+      newBlueOrbColIdx = gameContext.blueOrbColIdx + 1;
+      if (newBlueOrbColIdx > 2) {
+        event = "move_down";
 
+        newLevel = (parseInt(gameContext.currentLevel) - 1)
+          .toString()
+          .padStart(2, "0");
+      } else {
+        event = "change_blue_orb";
+      }
+      break;
+    case "up":
+      newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1;
+      if (newBlueOrbRowIdx < 0) {
+        event = "move_up";
+
+        newLevel = (parseInt(gameContext.currentLevel) + 1)
+          .toString()
+          .padStart(2, "0");
+
+        newBlueOrbColIdx = gameContext.blueOrbColIdx;
+        newBlueOrbRowIdx = 2;
+
+        newSiteRotIdx = gameContext.siteRotIdx;
+      } else {
+        event = "change_blue_orb";
       }
   }
+
+  return {
+    event: event,
+    newBlueOrbColIdx: newBlueOrbColIdx,
+    newBlueOrbRowIdx: newBlueOrbRowIdx,
+    newSiteRotIdx: newSiteRotIdx,
+    newLevel: newLevel,
+  };
 };
 
 export default computeAction;

src/resources/available_blue_orbs_on_projection.json

@@ -1,32 +1,42 @@
 {
-  "topRowProjection": [
+  "1": [
     ["16", "19", "20", "23"],
-    ["17", "20", "21", "16"],
-    ["18", "21", "22", "17"],
-    ["19", "22", "23", "18"],
-    ["20", "23", "16", "19"],
-    ["21", "16", "17", "20"],
-    ["22", "17", "18", "21"],
-    ["23", "18", "19", "22"]
-  ],
-  "middleRowProjection": [
     ["08", "11", "12", "15"],
-    ["09", "12", "13", "08"],
-    ["10", "13", "14", "09"],
-    ["11", "14", "15", "10"],
-    ["12", "15", "09", "11"],
-    ["13", "08", "09", "12"],
-    ["14", "09", "10", "13"],
-    ["15", "10", "11", "14"]
+    ["00", "03", "04", "07"]
   ],
-  "bottomRowProjection": [
-    ["00", "03", "04", "07"],
-    ["01", "04", "05", "00"],
-    ["02", "05", "06", "01"],
-    ["03", "06", "07", "02"],
-    ["04", "07", "00", "03"],
-    ["05", "00", "01", "04"],
-    ["06", "01", "02", "05"],
+  "2": [
+    ["17", "20", "21", "16"],
+    ["09", "12", "13", "08"],
+    ["01", "04", "05", "00"]
+  ],
+  "3": [
+    ["18", "21", "22", "17"],
+    ["10", "13", "14", "09"],
+    ["02", "05", "06", "01"]
+  ],
+  "4": [
+    ["19", "22", "23", "18"],
+    ["11", "14", "15", "10"],
+    ["03", "06", "07", "02"]
+  ],
+  "5": [
+    ["20", "23", "16", "19"],
+    ["12", "15", "09", "11"],
+    ["04", "07", "00", "03"]
+  ],
+  "6": [
+    ["21", "16", "17", "20"],
+    ["13", "08", "09", "12"],
+    ["05", "00", "01", "04"]
+  ],
+  "7": [
+    ["22", "17", "18", "21"],
+    ["14", "09", "10", "13"],
+    ["06", "01", "02", "05"]
+  ],
+  "8": [
+    ["23", "18", "19", "22"],
+    ["15", "10", "11", "14"],
     ["07", "02", "03", "06"]
   ]
 }

src/store.ts

@@ -1,5 +1,6 @@
 import create from "zustand";
 import { combine } from "zustand/middleware";
+import available_blue_orbs_on_projection from "./resources/available_blue_orbs_on_projection.json";
 
 type SceneState = {
   currentScene: string;
@@ -73,13 +74,15 @@ type SiteState = {
   setSiteRotY: (to: number) => void;
   setSitePosY: (to: number) => void;
   setIsSiteChanging: (to: boolean) => void;
-  siteRotIdx: number;
-  setSiteRotIdx: (to: number) => void;
+  siteRotIdx: string;
+  setSiteRotIdx: (to: string) => void;
 };
 
 type LevelState = {
+  currentLevel: string;
   activeLevels: string[];
   setActiveLevels: (to: string[]) => void;
+  setCurrentLevel: (to: string) => void;
 };
 
 type MiddleRingState = {
@@ -190,23 +193,25 @@ export const useHudStore = create<HUDState>((set) => ({
   toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
 }));
 
-export const useBlueOrbStore = create<BlueOrbState>((set) => ({
-  activeBlueOrbId: "0422",
-  isActiveBlueOrbInteractedWith: false,
-  activeBlueOrbPosX: 0,
-  activeBlueOrbPosZ: 0,
-  activeBlueOrbRotZ: 0,
-  setActiveBlueOrbPosX: (to) => set(() => ({ activeBlueOrbPosX: to })),
-  setActiveBlueOrbPosZ: (to) => set(() => ({ activeBlueOrbPosZ: to })),
-  setActiveBlueOrbRotZ: (to) => set(() => ({ activeBlueOrbRotZ: to })),
-  setActiveBlueOrbId: (to) => set(() => ({ activeBlueOrbId: to })),
-  setIsActiveBlueOrbInteractedWith: (to) =>
-    set(() => ({ isActiveBlueOrbInteractedWith: to })),
-  blueOrbRowIdx: 0,
-  setBlueOrbRowIdx: (to) => set(() => ({ blueOrbRowIdx: to })),
-  blueOrbColIdx: 0,
-  setBlueOrbColIdx: (to) => set(() => ({ blueOrbColIdx: to })),
-}));
+export const useBlueOrbStore = create<BlueOrbState>((set) => {
+  return {
+    activeBlueOrbId: "0422",
+    isActiveBlueOrbInteractedWith: false,
+    activeBlueOrbPosX: 0,
+    activeBlueOrbPosZ: 0,
+    activeBlueOrbRotZ: 0,
+    setActiveBlueOrbPosX: (to) => set(() => ({ activeBlueOrbPosX: to })),
+    setActiveBlueOrbPosZ: (to) => set(() => ({ activeBlueOrbPosZ: to })),
+    setActiveBlueOrbRotZ: (to) => set(() => ({ activeBlueOrbRotZ: to })),
+    setActiveBlueOrbId: (to) => set(() => ({ activeBlueOrbId: to })),
+    setIsActiveBlueOrbInteractedWith: (to) =>
+      set(() => ({ isActiveBlueOrbInteractedWith: to })),
+    blueOrbRowIdx: 0,
+    setBlueOrbRowIdx: (to) => set(() => ({ blueOrbRowIdx: to })),
+    blueOrbColIdx: 0,
+    setBlueOrbColIdx: (to) => set(() => ({ blueOrbColIdx: to })),
+  };
+});
 
 export const useLainStore = create<LainState>((set) => ({
   lainMoveState: "standing",
@@ -255,7 +260,7 @@ export const useSiteStore = create<SiteState>((set) => ({
   setSitePosY: (to) => set(() => ({ sitePosY: to })),
   setSiteRotY: (to) => set(() => ({ siteRotY: to })),
   setIsSiteChanging: (to) => set(() => ({ isSiteChangingY: to })),
-  siteRotIdx: 6,
+  siteRotIdx: "7",
   setSiteRotIdx: (to) => set(() => ({ siteRotIdx: to })),
 }));
 
@@ -281,8 +286,10 @@ export const useMiddleRingStore = create<MiddleRingState>((set) => ({
 }));
 
 export const useLevelStore = create<LevelState>((set) => ({
+  currentLevel: "04",
   activeLevels: ["03", "04", "05"],
   setActiveLevels: (to) => set(() => ({ activeLevels: to })),
+  setCurrentLevel: (to) => set(() => ({ currentLevel: to })),
 }));
 
 export const useMediaStore = create<MediaState>((set) => ({