bugfixes, improved markdown

README.md

@@ -39,13 +39,16 @@ Once you've saved the game manually (going into pause => selecting Save), look i
 
 ## Screenshots
 
-<img src="markdown/img/1.png" width="50%"></img>
+<p align="center">
-<img src="markdown/img/2.jpg" width="50%"></img>
+  <img src="markdown/1.png" width="49%">
-<img src="markdown/img/3.png" width="50%"></img>
+  <img src="markdown/2.jpg" width="49%">
-<img src="markdown/img/4.png" width="50%"></img>
+  <img src="markdown/3.png" width="49%">
-<img src="markdown/img/5.png" width="50%"></img>
+  <img src="markdown/4.png" width="49%">
-<img src="markdown/img/6.png" width="50%"></img>
+  <img src="markdown/5.png" width="49%">
-<img src="markdown/img/7.png" width="50%"></img>
+  <img src="markdown/6.png" width="49%">
+  <img src="markdown/7.png" width="49%">
+  <img src="markdown/8.png" width="49%">
+</p>
 
 ## TODO
 

src/components/MainScene/HUD.tsx

@@ -18,9 +18,6 @@ const HUD = memo(() => {
   const currentHudRef = useRef(
     getNodeHud(useStore.getState().activeNode.matrixIndices!)
   );
-  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);
@@ -136,7 +133,7 @@ const HUD = memo(() => {
     };
 
     if (activeRef.current !== undefined) {
-      const hud = getNodeHud(activeNodeMatrixIndices!);
+      const hud = getNodeHud(activeNode.matrixIndices!);
       if (
         !(scene === "main" && prevData?.scene === "main") ||
         (subscene === "site" && prevData?.subscene === "pause") ||
@@ -175,7 +172,6 @@ const HUD = memo(() => {
     }
   }, [
     activeLevel,
-    activeNodeMatrixIndices,
     prevData?.activeLevel,
     prevData?.scene,
     prevData?.siteRotY,
@@ -185,6 +181,8 @@ const HUD = memo(() => {
     siteRotY,
     subscene,
     protocolLinesToggled,
+    activeNode.matrixIndices,
+    activeNode.node_name,
   ]);
   const longHudTex = useLoader(THREE.TextureLoader, longHud);
   const boringHudTex = useLoader(THREE.TextureLoader, boringHud);

src/components/MediaScene/MediaProgressBar.tsx

@@ -151,7 +151,7 @@ const MediaProgressBar = () => {
 
   return (
     <>
-      <sprite scale={[5.2, 0.5, 1]} position={[2.15, 3.005, 0]}>
+      <sprite scale={[5.2, 0.5, 1]} position={[2.15, 3.005, 0]} renderOrder={3}>
         <spriteMaterial attach="material" map={progressBarContainerTex} />
       </sprite>
       <mesh
@@ -161,6 +161,7 @@ const MediaProgressBar = () => {
           2.945,
           0,
         ]}
+        renderOrder={3}
       >
         <planeBufferGeometry attach="geometry" />
         <meshBasicMaterial

src/components/MediaScene/NodeNameContainer.tsx

@@ -10,8 +10,13 @@ const NodeNameContainer = () => {
   );
 
   return (
-    <sprite scale={[2.6, 0.5, 1]} position={[3.425, 2.5, 0]}>
+    <sprite scale={[2.6, 0.5, 1]} position={[3.425, 2.5, 0]} renderOrder={3}>
-      <spriteMaterial attach="material" map={mediaNodeNameContainerTex} />
+      <spriteMaterial
+        attach="material"
+        map={mediaNodeNameContainerTex}
+        transparent={true}
+        depthTest={false}
+      />
     </sprite>
   );
 };

src/core/input-handlers/handleMainSceneInput.ts

@@ -255,9 +255,12 @@ const handleMainSceneInput = (
               activeNode: newNode,
             });
           case "SQUARE":
-            return setProtocolLines({
+            if (activeNode.node_name !== "Unknown") {
-              protocolLinesToggled: !protocolLinesToggled,
+              return setProtocolLines({
-            });
+                protocolLinesToggled: !protocolLinesToggled,
+              });
+            }
+            break;
           case "R2":
             if (cameraTiltValue === 0) {
               return setCameraTilt({

src/store.ts

@@ -284,6 +284,10 @@ export const useStore = create(
           activeMediaComponent: "play",
           currentMediaSide: "left",
           mediaWordPosStateIdx: 1,
+          lastActiveMediaComponents: {
+            left: "play",
+            right: "fstWord",
+          },
         })),
 
       incrementFinalVideoViewCount: () =>