implemented L1, R1 and SQUARE button functionality

src/components/MainScene/HUD.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef } from "react";
+import React, { createRef, memo, useEffect, useRef } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import bigHud from "../../static/sprites/main/big_hud.png";
@@ -11,6 +11,8 @@ import usePrevious from "../../hooks/usePrevious";
 import { getNodeHud } from "../../helpers/node-helpers";
 import { HUDData } from "../../types/types";
 
+// the hud is an imperative mess. unfortunately this seems to perform by far the best out of all the approaches i've tried.
+
 const HUD = memo(() => {
   const activeRef = useRef(true);
   const currentHudRef = useRef(
@@ -19,20 +21,36 @@ const HUD = memo(() => {
   const activeNodeMatrixIndices = useStore(
     (state) => state.activeNode.matrixIndices
   );
+  const activeNode = useStore((state) => state.activeNode);
   const siteRotY = useStore((state) => state.siteRot[1]);
   const activeLevel = useStore((state) => state.activeLevel);
   const subscene = useStore((state) => state.mainSubscene);
   const scene = useStore((state) => state.currentScene);
-  const prevData = usePrevious({ siteRotY, activeLevel, subscene, scene });
+  const protocolLinesToggled = useStore((state) => state.protocolLinesToggled);
+  const prevData = usePrevious({
+    siteRotY,
+    activeLevel,
+    subscene,
+    scene,
+    protocolLinesToggled,
+  });
+
+  const longHudRef = useRef<THREE.Object3D>();
+  const boringHudRef = useRef<THREE.Object3D>();
+  const bigHudRef = useRef<THREE.Object3D>();
+  const nodeTitleRef = useRef<THREE.Object3D>();
+  const protocolLine1Ref = useRef<THREE.Object3D>();
+  const protocolLine2Ref = useRef<THREE.Object3D>();
+  const protocolLine3Ref = useRef<THREE.Object3D>();
+
+  const protocolLineTitleRefs = useRef([
+    useRef<THREE.Object3D>(),
+    useRef<THREE.Object3D>(),
+    useRef<THREE.Object3D>(),
+  ]);
 
-  // this part is imperative because it performs a lot better than having a toggleable spring.
   useFrame(() => {
-    if (
+    if (longHudRef.current && bigHudRef.current && boringHudRef.current) {
-      longHudRef.current &&
-      bigHudRef.current &&
-      boringHudRef.current &&
-      greenTextRef.current
-    ) {
       const hud = currentHudRef.current;
 
       longHudRef.current.position.x = lerp(
@@ -52,13 +70,6 @@ const HUD = memo(() => {
         activeRef.current ? hud.big.position[0] : hud.big.initial_position[0],
         0.12
       );
-      greenTextRef.current.position.x = lerp(
-        greenTextRef.current.position.x,
-        activeRef.current
-          ? hud.medium_text.position[0]
-          : hud.medium_text.initial_position[0],
-        0.12
-      );
     }
   });
 
@@ -67,12 +78,30 @@ const HUD = memo(() => {
       longHudRef.current!.scale.x = -Math.abs(longHudRef.current!.scale.x);
       boringHudRef.current!.scale.x = -Math.abs(boringHudRef.current!.scale.x);
       bigHudRef.current!.scale.x = -Math.abs(bigHudRef.current!.scale.x);
+      nodeTitleRef.current!.scale.x = -Math.abs(nodeTitleRef.current!.scale.x);
+      nodeTitleRef.current!.position.x = 0.2;
+
+      if (protocolLinesToggled) {
+        protocolLineTitleRefs.current.forEach((ref) => {
+          ref.current!.scale.x = -Math.abs(ref.current!.scale.x);
+          ref.current!.position.x = 0.2;
+        });
+      }
     };
 
     const unMirror = () => {
       longHudRef.current!.scale.x = Math.abs(longHudRef.current!.scale.x);
       boringHudRef.current!.scale.x = Math.abs(boringHudRef.current!.scale.x);
       bigHudRef.current!.scale.x = Math.abs(bigHudRef.current!.scale.x);
+      nodeTitleRef.current!.scale.x = Math.abs(nodeTitleRef.current!.scale.x);
+      nodeTitleRef.current!.position.x = -0.2;
+
+      if (protocolLinesToggled) {
+        protocolLineTitleRefs.current.forEach((ref) => {
+          ref.current!.scale.x = Math.abs(ref.current!.scale.x);
+          ref.current!.position.x = -0.2;
+        });
+      }
     };
 
     const setPos = (hud: HUDData, pos: string) => {
@@ -89,13 +118,21 @@ const HUD = memo(() => {
       bigHudRef.current!.position.set(
         ...(hud.big[pos as keyof typeof hud.big] as [number, number, number])
       );
-      greenTextRef.current!.position.set(
+      if (
-        ...(hud.medium_text[pos as keyof typeof hud.medium_text] as [
+        protocolLine1Ref.current &&
-          number,
+        protocolLine2Ref.current &&
-          number,
+        protocolLine3Ref.current
-          number
+      ) {
-        ])
+        protocolLine1Ref.current.position.set(
+          ...(hud.big.protocol_line_positions[0] as [number, number, number])
         );
+        protocolLine2Ref.current.position.set(
+          ...(hud.big.protocol_line_positions[1] as [number, number, number])
+        );
+        protocolLine3Ref.current.position.set(
+          ...(hud.big.protocol_line_positions[2] as [number, number, number])
+        );
+      }
     };
 
     if (activeRef.current !== undefined) {
@@ -103,7 +140,8 @@ const HUD = memo(() => {
       if (
         !(scene === "main" && prevData?.scene === "main") ||
         (subscene === "site" && prevData?.subscene === "pause") ||
-        subscene === "pause"
+        subscene === "pause" ||
+        protocolLinesToggled !== prevData?.protocolLinesToggled
       ) {
         // set to final pos instantly
         setPos(hud, "position");
@@ -142,28 +180,19 @@ const HUD = memo(() => {
     prevData?.scene,
     prevData?.siteRotY,
     prevData?.subscene,
+    prevData?.protocolLinesToggled,
     scene,
     siteRotY,
     subscene,
+    protocolLinesToggled,
   ]);
-
-  const longHudRef = useRef<THREE.Object3D>();
-  const boringHudRef = useRef<THREE.Object3D>();
-  const bigHudRef = useRef<THREE.Object3D>();
-  const greenTextRef = useRef<THREE.Object3D>();
-
   const longHudTex = useLoader(THREE.TextureLoader, longHud);
   const boringHudTex = useLoader(THREE.TextureLoader, boringHud);
   const bigHudTex = useLoader(THREE.TextureLoader, bigHud);
 
   return (
     <group position={[0, 0, 10]}>
-      <mesh
+      <mesh scale={[1, 0.03, 1]} renderOrder={2} ref={longHudRef}>
-        scale={[1, 0.03, 1]}
-        renderOrder={2}
-        ref={longHudRef}
-        position-z={-8.6}
-      >
         <planeBufferGeometry attach="geometry" />
         <meshBasicMaterial
           attach="material"
@@ -172,12 +201,7 @@ const HUD = memo(() => {
           depthTest={false}
         />
       </mesh>
-      <mesh
+      <mesh scale={[1, 0.03, 1]} renderOrder={2} ref={boringHudRef}>
-        scale={[1, 0.03, 1]}
-        renderOrder={2}
-        ref={boringHudRef}
-        position-z={-8.6}
-      >
         <planeBufferGeometry attach="geometry" />
         <meshBasicMaterial
           attach="material"
@@ -186,12 +210,8 @@ const HUD = memo(() => {
           depthTest={false}
         />
       </mesh>
-      <mesh
+      <group ref={bigHudRef}>
-        scale={[0.5, 0.06, 1]}
+        <mesh scale={[0.5, 0.06, 1]} renderOrder={2}>
-        renderOrder={2}
-        ref={bigHudRef}
-        position-z={-8.6}
-      >
           <planeBufferGeometry attach="geometry" />
           <meshBasicMaterial
             attach="material"
@@ -200,8 +220,71 @@ const HUD = memo(() => {
             depthTest={false}
           />
         </mesh>
-      <group position-z={-8.7} scale={[0.02, 0.035, 0.02]} ref={greenTextRef}>
+        <group ref={nodeTitleRef} scale={[0.016, 0.03, 0.016]}>
-        <GreenTextRenderer />
+          <GreenTextRenderer textToRender={activeNode.title.split("")} />
+        </group>
+        {protocolLinesToggled && (
+          <>
+            <group ref={protocolLine1Ref}>
+              <mesh scale={[0.5, 0.06, 1]} renderOrder={2}>
+                <planeBufferGeometry attach="geometry" />
+                <meshBasicMaterial
+                  attach="material"
+                  map={bigHudTex}
+                  transparent={true}
+                  depthTest={false}
+                />
+              </mesh>
+              <group
+                scale={[0.016, 0.03, 0.016]}
+                ref={protocolLineTitleRefs.current[0]}
+              >
+                <GreenTextRenderer
+                  textToRender={activeNode.protocol_lines["1"].split("")}
+                />
+              </group>
+            </group>
+            <group ref={protocolLine2Ref}>
+              <mesh scale={[0.5, 0.06, 1]} renderOrder={2}>
+                <planeBufferGeometry attach="geometry" />
+                <meshBasicMaterial
+                  attach="material"
+                  map={bigHudTex}
+                  transparent={true}
+                  depthTest={false}
+                />
+              </mesh>
+              <group
+                scale={[0.016, 0.03, 0.016]}
+                ref={protocolLineTitleRefs.current[1]}
+              >
+                <GreenTextRenderer
+                  textToRender={activeNode.protocol_lines["2"].split("")}
+                />
+              </group>
+            </group>
+
+            <group ref={protocolLine3Ref}>
+              <mesh scale={[0.5, 0.06, 1]} renderOrder={2}>
+                <planeBufferGeometry attach="geometry" />
+                <meshBasicMaterial
+                  attach="material"
+                  map={bigHudTex}
+                  transparent={true}
+                  depthTest={false}
+                />
+              </mesh>
+              <group
+                scale={[0.016, 0.03, 0.016]}
+                ref={protocolLineTitleRefs.current[2]}
+              >
+                <GreenTextRenderer
+                  textToRender={activeNode.protocol_lines["3"].split("")}
+                />
+              </group>
+            </group>
+          </>
+        )}
       </group>
     </group>
   );

src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx

@@ -22,10 +22,7 @@ const AudioVisualizer = memo(() => {
       const frequencyData = audioAnalyser.getFrequencyData();
 
       columnRefs.forEach((refArray, idx) => {
-        const ref1 = refArray[0];
+        const [ref1, ref2, ref3, ref4] = [...refArray];
-        const ref2 = refArray[1];
-        const ref3 = refArray[2];
-        const ref4 = refArray[3];
 
         const currentFrequency = frequencyData[16 * idx];
 

src/components/TextRenderer/GreenTextRenderer.tsx

@@ -4,16 +4,8 @@ import greenFont from "../../static/sprites/fonts/white_and_green_texture.png";
 import medium_font_json from "../../resources/fonts/medium_font.json";
 import { a } from "@react-spring/three";
 import React, { memo, useMemo } from "react";
-import { useStore } from "../../store";
-
-const GreenTextRenderer = memo(() => {
-  const textToRender = useStore((state) =>
-    (state.currentScene === "main"
-      ? state.activeNode.title
-      : state.activeNode.node_name
-    ).split("")
-  );
 
+const GreenTextRenderer = memo((props: { textToRender: string[] }) => {
   const colorTexture = useLoader(THREE.TextureLoader, greenFont);
 
   const getLineYOffset = (letter: string) => {
@@ -69,7 +61,7 @@ const GreenTextRenderer = memo(() => {
       return geometry;
     };
 
-    return textToRender.map((letter, idx) => {
+    return props.textToRender.map((letter, idx) => {
       const letterData =
         medium_font_json.glyphs[letter as keyof typeof medium_font_json.glyphs];
       const geom = getGeom(letter, letterData);
@@ -92,7 +84,7 @@ const GreenTextRenderer = memo(() => {
         </a.mesh>
       );
     });
-  }, [colorTexture, textToRender]);
+  }, [colorTexture, props.textToRender]);
 
   return <>{text}</>;
 });

src/core/eventTemplates.ts

@@ -243,7 +243,6 @@ export const pauseGame = (calculatedState: { siteRot: number[] }) => ({
     {
       mutation: {
         lainMoveState: "rip_middle_ring",
-        pauseExitAnimation: false,
         mainSubscene: "pause",
         inputCooldown: -1,
       },
@@ -785,6 +784,19 @@ export const playLainIdleAnim = (calculatedState: {
   ],
 });
 
+export const setProtocolLines = (calculatedState: {
+  protocolLinesToggled: boolean;
+}) => ({
+  state: [
+    {
+      mutation: {
+        protocolLinesToggled: calculatedState.protocolLinesToggled,
+        inputCooldown: 0,
+      },
+    },
+  ],
+});
+
 export const resetInputCooldown = {
   state: [{ mutation: { inputCooldown: 0 } }],
 };

src/core/input-handlers/handleMainSceneInput.ts

@@ -2,6 +2,7 @@ import {
   findNode,
   getNodeById,
   isNodeVisible,
+  moveHorizontalAndFindNode,
   nodeToScene,
   unknownNodeTemplate,
 } from "../../helpers/node-helpers";
@@ -28,6 +29,7 @@ import {
   ripNode,
   saveGame,
   selectLevel,
+  setProtocolLines,
   showAbout,
   showPermissionDenied,
   siteMoveHorizontal,
@@ -56,6 +58,7 @@ const handleMainSceneInput = (
     siteSaveState,
     wordNotFound,
     canLainMove,
+    protocolLinesToggled,
   } = mainSceneContext;
 
   if (promptVisible) {
@@ -176,7 +179,6 @@ const handleMainSceneInput = (
 
             if (nodeData.didMove) {
               if (!canLainMove) return resetInputCooldown;
-
               return siteMoveVertical({
                 lainMoveAnimation: lainMoveAnimation,
                 activeLevel: newLevel,
@@ -208,6 +210,46 @@ const handleMainSceneInput = (
           case "TRIANGLE":
             if (!canLainMove) return resetInputCooldown;
             return pauseGame({ siteRot: [Math.PI / 2, siteRotY, 0] });
+          case "L1":
+          case "R1":
+            const direction = keyPress === "L1" ? "left" : "right";
+
+            const nodeData = moveHorizontalAndFindNode(
+              activeNode,
+              direction,
+              level,
+              activeSite,
+              gameProgress
+            );
+
+            if (!nodeData) return resetInputCooldown;
+
+            const lainMoveAnimation = `move_${direction}`;
+            const newSiteRot = [
+              0,
+              direction === "left"
+                ? siteRotY + Math.PI / 4
+                : siteRotY - Math.PI / 4,
+              0,
+            ];
+
+            const newNode = {
+              ...(nodeData.node !== "unknown"
+                ? getNodeById(nodeData.node, activeSite)
+                : unknownNodeTemplate),
+              matrixIndices: nodeData.matrixIndices,
+            };
+
+            if (!canLainMove) return resetInputCooldown;
+            return siteMoveHorizontal({
+              lainMoveAnimation: lainMoveAnimation,
+              siteRot: newSiteRot,
+              activeNode: newNode,
+            });
+          case "SQUARE":
+            return setProtocolLines({
+              protocolLinesToggled: !protocolLinesToggled,
+            });
         }
         break;
       case "level_selection":
@@ -223,7 +265,6 @@ const handleMainSceneInput = (
             break;
           case "CROSS":
             return exitLevelSelection;
-
           case "CIRCLE":
             if (!canLainMove) return resetInputCooldown;
 

src/helpers/node-helpers.ts

@@ -183,6 +183,66 @@ const move = (direction: string, [matrix, level]: [number, number]) => {
   return [matrix, level];
 };
 
+export const moveHorizontalAndFindNode = (
+  startingPoint: NodeData,
+  direction: string,
+  level: number,
+  activeSite: ActiveSite,
+  gameProgress: GameProgress
+) => {
+  const funcs: {
+    [key: string]: ([row, col]: [number, number]) => Generator<number[], void>;
+  } = {
+    left: ([r]: [number, number]) => nextPos_right([r, -1]),
+    right: ([r]: [number, number]) => nextPos_left([r, 4]),
+  };
+
+  if (startingPoint.matrixIndices) {
+    const nextPos = funcs[direction];
+
+    let { matrixIdx, colIdx, rowIdx } = { ...startingPoint.matrixIndices };
+
+    [matrixIdx] = move(direction, [matrixIdx, level]);
+
+    const nodes = getVisibleNodesMatrix(
+      matrixIdx,
+      level,
+      activeSite,
+      gameProgress
+    );
+
+    for (const [r, c] of nextPos([rowIdx, colIdx])) {
+      const node = nodes[r][c];
+
+      if (node)
+        return {
+          node,
+
+          matrixIndices: {
+            matrixIdx,
+            rowIdx: r,
+            colIdx: c,
+          },
+
+          didMove: true,
+        };
+    }
+
+    const nodeId = startingPoint.id;
+    if (nodeId === "") {
+      return {
+        node: "unknown",
+        matrixIndices: {
+          matrixIdx,
+          rowIdx: rowIdx,
+          colIdx: colIdx,
+        },
+        didMove: true,
+      };
+    }
+  }
+};
+
 export const findNode = (
   startingPoint: NodeData,
   direction: string,
@@ -302,6 +362,11 @@ export const unknownNodeTemplate = {
     "2": "",
     "3": "",
   },
+  protocol_lines: {
+    "1": "",
+    "2": "",
+    "3": "",
+  },
 };
 
 export const nodeToScene = (node: NodeData) => {

src/resources/fonts/medium_font.json

@@ -81,6 +81,7 @@
     "&": [80, 104, 8, 8, 0],
     "?": [88, 104, 8, 8, 0],
     "/": [96, 104, 8, 9, 0],
-    " ": [0, 0, 0, 0, 0, 0]
+    " ": [0, 0, 0, 0, 0, 0],
+    "_": [0, 0, 0, 0, 0, 0]
   }
 }

src/resources/node_huds.json

@@ -11,13 +11,14 @@
     },
     "big": {
       "position": [0.36, 0.13, -8.6],
-      "initial_position": [1.36, 0.13, -8.6]
+      "initial_position": [1.36, 0.13, -8.6],
+      "protocol_line_positions": [
+        [-0.03, -0.06, 0],
+        [-0.06, -0.12, 0],
+        [-0.09, -0.18, 0]
+      ]
     },
-    "big_text": [-0.35, 0.23, -8.7],
+    "big_text": [-0.35, 0.23, -8.7]
-    "medium_text": {
-      "position": [0.18, 0.16, -8.7],
-      "initial_position": [1.18, 0.16, -8.7]
-    }
   },
   "fg_hud_2": {
     "mirrored": 0,
@@ -31,13 +32,14 @@
     },
     "big": {
       "position": [0.35, -0.12, -8.6],
-      "initial_position": [1.35, -0.12, -8.6]
+      "initial_position": [1.35, -0.12, -8.6],
+      "protocol_line_positions": [
+        [-0.03, -0.06, 0],
+        [-0.06, -0.12, 0],
+        [-0.09, -0.18, 0]
+      ]
     },
-    "big_text": [-0.35, -0.05, -8.7],
+    "big_text": [-0.35, -0.05, -8.7]
-    "medium_text": {
-      "position": [0.18, -0.13, -8.7],
-      "initial_position": [1.18, -0.13, -8.7]
-    }
   },
   "fg_hud_3": {
     "mirrored": 0,
@@ -51,13 +53,14 @@
     },
     "big": {
       "position": [0.3, -0.28, -8.6],
-      "initial_position": [1.3, -0.28, -8.6]
+      "initial_position": [1.3, -0.28, -8.6],
+      "protocol_line_positions": [
+        [0.03, 0.06, 0],
+        [0.06, 0.12, 0],
+        [0.09, 0.18, 0]
+      ]
     },
-    "big_text": [-0.35, -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]
-    }
   },
   "fg_hud_4": {
     "mirrored": 1,
@@ -71,13 +74,14 @@
     },
     "big": {
       "position": [-0.35, 0.155, -8.6],
-      "initial_position": [-1.35, 0.155, -8.6]
+      "initial_position": [-1.35, 0.155, -8.6],
+      "protocol_line_positions": [
+        [-0.03, -0.06, 0],
+        [-0.06, -0.12, 0],
+        [-0.09, -0.18, 0]
+      ]
     },
-    "big_text": [0.45, 0.265, -8.7],
+    "big_text": [0.45, 0.265, -8.7]
-    "medium_text": {
-      "position": [-0.65, 0.18, -8.7],
-      "initial_position": [-1.65, 0.18, -8.7]
-    }
   },
   "fg_hud_5": {
     "mirrored": 1,
@@ -91,13 +95,14 @@
     },
     "big": {
       "position": [-0.35, -0.12, -8.6],
-      "initial_position": [-1.35, -0.12, -8.6]
+      "initial_position": [-1.35, -0.12, -8.6],
+      "protocol_line_positions": [
+        [-0.03, -0.06, 0],
+        [-0.06, -0.12, 0],
+        [-0.09, -0.18, 0]
+      ]
     },
-    "big_text": [0.45, -0.05, -8.7],
+    "big_text": [0.45, -0.05, -8.7]
-    "medium_text": {
-      "position": [-0.65, -0.13, -8.7],
-      "initial_position": [-1.65, -0.13, -8.7]
-    }
   },
   "fg_hud_6": {
     "mirrored": 1,
@@ -111,13 +116,14 @@
     },
     "big": {
       "position": [-0.25, -0.28, -8.6],
-      "initial_position": [-1.25, -0.28, -8.6]
+      "initial_position": [-1.25, -0.28, -8.6],
+      "protocol_line_positions": [
+        [0.03, 0.06, 0],
+        [0.06, 0.12, 0],
+        [0.09, 0.18, 0]
+      ]
     },
-    "big_text": [0.45, -0.32, -8.7],
+    "big_text": [0.45, -0.32, -8.7]
-    "medium_text": {
-      "position": [-0.55, -0.32, -8.7],
-      "initial_position": [-1.55, -0.32, -8.7]
-    }
   },
   "bg_hud_1": {
     "mirrored": 0,
@@ -131,13 +137,14 @@
     },
     "big": {
       "position": [0.3, 0.015, -8.6],
-      "initial_position": [1.3, 0.015, -8.6]
+      "initial_position": [1.3, 0.015, -8.6],
+      "protocol_line_positions": [
+        [-0.03, -0.06, 0],
+        [-0.06, -0.12, 0],
+        [-0.09, -0.18, 0]
+      ]
     },
-    "big_text": [-0.15, 0.1, -8.7],
+    "big_text": [-0.15, 0.1, -8.7]
-    "medium_text": {
-      "position": [0.1, 0.02, -8.7],
-      "initial_position": [1.1, 0.02, -8.7]
-    }
   },
   "bg_hud_2": {
     "mirrored": 0,
@@ -151,13 +158,14 @@
     },
     "big": {
       "position": [0.3, -0.1, -8.6],
-      "initial_position": [1.35, -0.1, -8.6]
+      "initial_position": [1.35, -0.1, -8.6],
+      "protocol_line_positions": [
+        [-0.03, -0.06, 0],
+        [-0.06, -0.12, 0],
+        [-0.09, -0.18, 0]
+      ]
     },
-    "big_text": [-0.15, -0.03, -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]
-    }
   },
   "bg_hud_3": {
     "mirrored": 0,
@@ -171,13 +179,14 @@
     },
     "big": {
       "position": [0.3, -0.22, -8.6],
-      "initial_position": [1.35, -0.22, -8.6]
+      "initial_position": [1.35, -0.22, -8.6],
+      "protocol_line_positions": [
+        [-0.03, -0.06, 0],
+        [-0.06, -0.12, 0],
+        [-0.09, -0.18, 0]
+      ]
     },
-    "big_text": [-0.15, -0.17, -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]
-    }
   },
   "bg_hud_4": {
     "mirrored": 1,
@@ -191,13 +200,14 @@
     },
     "big": {
       "position": [-0.35, 0.015, -8.6],
-      "initial_position": [-1.35, 0.015, -8.6]
+      "initial_position": [-1.35, 0.015, -8.6],
+      "protocol_line_positions": [
+        [-0.03, -0.06, 0],
+        [-0.06, -0.12, 0],
+        [-0.09, -0.18, 0]
+      ]
     },
-    "big_text": [0.2, 0.1, -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]
-    }
   },
   "bg_hud_5": {
     "mirrored": 1,
@@ -211,13 +221,14 @@
     },
     "big": {
       "position": [-0.35, -0.1, -8.6],
-      "initial_position": [-1.35, -0.1, -8.6]
+      "initial_position": [-1.35, -0.1, -8.6],
+      "protocol_line_positions": [
+        [-0.03, -0.06, 0],
+        [-0.06, -0.12, 0],
+        [-0.09, -0.18, 0]
+      ]
     },
-    "big_text": [0.2, -0.03, -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]
-    }
   },
   "bg_hud_6": {
     "mirrored": 1,
@@ -231,12 +242,13 @@
     },
     "big": {
       "position": [-0.25, -0.22, -8.6],
-      "initial_position": [-1.25, -0.22, -8.6]
+      "initial_position": [-1.25, -0.22, -8.6],
+      "protocol_line_positions": [
+        [0.03, 0.06, 0],
+        [0.06, 0.12, 0],
+        [0.09, 0.18, 0]
+      ]
     },
-    "big_text": [0.2, -0.17, -8.7],
+    "big_text": [0.2, -0.17, -8.7]
-    "medium_text": {
-      "position": [-0.53, -0.25, -8.7],
-      "initial_position": [-1.53, -0.25, -8.7]
-    }
   }
 }

src/scenes/MediaScene.tsx

@@ -132,7 +132,7 @@ const MediaScene = () => {
             <NodeNameContainer />
           </group>
           <group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
-            <GreenTextRenderer />
+            <GreenTextRenderer textToRender={activeNode.node_name.split("")} />
           </group>
           <MediaYellowTextAnimator />
 

src/store.ts

@@ -47,6 +47,8 @@ type State = {
   activeNodeRot: number[];
   activeNodeAttributes: NodeAttributes;
 
+  protocolLinesToggled: boolean;
+
   lainMoveState: string;
   canLainMove: boolean;
 
@@ -63,7 +65,6 @@ type State = {
   endSceneSelectionVisible: boolean;
 
   activePauseComponent: PauseComponent;
-  pauseExitAnimation: boolean;
   showingAbout: boolean;
   permissionDenied: boolean;
 
@@ -141,6 +142,9 @@ export const useStore = create(
       lainMoveState: "standing",
       canLainMove: true,
 
+      // extra node data display
+      protocolLinesToggled: false,
+
       // site
       activeSite: "a",
       siteRot: [0, 0, 0],
@@ -363,6 +367,7 @@ export const getMainSceneContext = (): MainSceneContext => {
     siteSaveState: state.siteSaveState,
     wordNotFound: state.wordNotFound,
     canLainMove: state.canLainMove,
+    protocolLinesToggled: state.protocolLinesToggled,
   };
 };
 

src/types/types.ts

@@ -57,6 +57,11 @@ export type NodeData = {
   unlocked_by: string;
   upgrade_requirement: number;
   words: { 1: string; 2: string; 3: string };
+  protocol_lines: {
+    1: string;
+    2: string;
+    3: string;
+  };
   matrixIndices?: NodeMatrixIndices;
   is_viewed?: number;
 };
@@ -109,6 +114,7 @@ export interface MainSceneContext extends PromptContext {
   wordNotFound: boolean;
   siteSaveState: SiteSaveState;
   canLainMove: boolean;
+  protocolLinesToggled: boolean;
 }
 
 export type SsknSceneContext = {
@@ -186,12 +192,9 @@ export type HUDData = {
   big: {
     position: number[];
     initial_position: number[];
+    protocol_line_positions: number[][];
   };
   big_text: number[];
-  medium_text: {
-    position: number[];
-    initial_position: number[];
-  };
 };
 
 export type UserSaveState = {

src/utils/getKeyPress.ts

@@ -1,16 +1,20 @@
 const getKeyPress = (key: string) => {
-  if (["X", "Z", "D", "E", "V"].includes(key)) key = key.toLowerCase();
+  if (["X", "Z", "D", "E", "V", "T", "W", "R"].includes(key))
+    key = key.toLowerCase();
 
   const keyCodeAssocs = {
-    ArrowDown: "DOWN", // down arrow
+    ArrowDown: "DOWN",
-    ArrowLeft: "LEFT", // left arrow
+    ArrowLeft: "LEFT",
-    ArrowUp: "UP", // up arrow
+    ArrowUp: "UP",
-    ArrowRight: "RIGHT", // right arrow
+    ArrowRight: "RIGHT",
-    x: "CIRCLE", // x key
+    x: "CIRCLE",
-    z: "CROSS", // z key
+    z: "CROSS",
-    d: "TRIANGLE", // d key
+    d: "TRIANGLE",
-    e: "L2", // e key
+    s: "SQUARE",
-    v: "START", // v key
+    e: "L2",
+    v: "START",
+    w: "L1",
+    r: "R1",
   };
   return keyCodeAssocs[key as keyof typeof keyCodeAssocs];
 };