added postinstall script, fixed issues.

package-lock.json

@@ -6,6 +6,7 @@
   "packages": {
     "": {
       "version": "0.1.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@react-spring/three": "^9.0.0-rc.3",
         "@testing-library/jest-dom": "^4.2.4",
@@ -28,6 +29,7 @@
       },
       "devDependencies": {
         "eslint-loader": "^4.0.2",
+        "replace-in-file": "^6.2.0",
         "wav": "^1.0.2"
       }
     },
@@ -15869,6 +15871,87 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/replace-in-file": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-6.2.0.tgz",
+      "integrity": "sha512-Im2AF9G/qgkYneOc9QwWwUS/efyyonTUBvzXS2VXuxPawE5yQIjT/e6x4CTijO0Quq48lfAujuo+S89RR2TP2Q==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "glob": "^7.1.6",
+        "yargs": "^16.2.0"
+      },
+      "bin": {
+        "replace-in-file": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/replace-in-file/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/replace-in-file/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/replace-in-file/node_modules/y18n": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz",
+      "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/replace-in-file/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/replace-in-file/node_modules/yargs-parser": {
+      "version": "20.2.6",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.6.tgz",
+      "integrity": "sha512-AP1+fQIWSM/sMiET8fyayjx/J+JmTPt2Mr0FkrgqB4todtfa53sOsrSAcIrJRD5XS20bKUwaDIuMkWKCEiQLKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -33567,6 +33650,68 @@
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
+    "replace-in-file": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-6.2.0.tgz",
+      "integrity": "sha512-Im2AF9G/qgkYneOc9QwWwUS/efyyonTUBvzXS2VXuxPawE5yQIjT/e6x4CTijO0Quq48lfAujuo+S89RR2TP2Q==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "glob": "^7.1.6",
+        "yargs": "^16.2.0"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "5.0.5",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz",
+          "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.6",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.6.tgz",
+          "integrity": "sha512-AP1+fQIWSM/sMiET8fyayjx/J+JmTPt2Mr0FkrgqB4todtfa53sOsrSAcIrJRD5XS20bKUwaDIuMkWKCEiQLKA==",
+          "dev": true
+        }
+      }
+    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",

package.json

@@ -27,7 +27,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!three/.*)/\"",
     "eject": "react-scripts eject",
-    "extract": "node scripts/extract/extract.mjs"
+    "extract": "node scripts/extract/extract.mjs",
+    "postinstall": "node scripts/postinstall.js"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -47,6 +48,7 @@
   "homepage": ".",
   "devDependencies": {
     "eslint-loader": "^4.0.2",
+    "replace-in-file": "^6.2.0",
     "wav": "^1.0.2"
   }
 }

scripts/postinstall.js

@@ -0,0 +1,23 @@
+// https://github.com/pmndrs/react-spring/issues/1078
+// thanks to https://github.com/pmndrs/react-spring/issues/1078#issuecomment-677528907
+
+const replace = require("replace-in-file");
+
+const removeAllSideEffectsFalseFromReactSpringPackages = async () => {
+  try {
+    const results = await replace({
+      files: "node_modules/@react-spring/*/package.json",
+      from: `"sideEffects": false`,
+      to: `"sideEffects": true`,
+    });
+
+    // console.log(results); // uncomment to log changed files
+  } catch (e) {
+    console.log(
+      'error while trying to remove string "sideEffects:false" from react-spring packages',
+      e
+    );
+  }
+};
+
+removeAllSideEffectsFalseFromReactSpringPackages();

src/App.tsx

@@ -21,6 +21,7 @@ import EndScene from "./scenes/EndScene";
 import IdleMediaScene from "./scenes/IdleMediaScene";
 import InputHandler from "./components/InputHandler";
 import mobileAndTabletCheck from "./utils/mobileAndTabletCheck";
+import Preloader from "./components/Preloader";
 
 const App = () => {
   const currentScene = useStore((state) => state.currentScene);
@@ -98,7 +99,7 @@ const App = () => {
         className="main-canvas"
       >
         <Suspense fallback={null}>
-          {/*<Preloader />*/}
+          <Preloader />
           {dispatchScene[currentScene as keyof typeof dispatchScene]}
           <InputHandler isMobile={isMobile} />
         </Suspense>

src/components/MainScene/Site/NodeAnimations/NodeRip/RipLine.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
 import * as THREE from "three";
+import { useUpdate } from "react-three-fiber";
 
 type RipLineProps = {
   color: string;
@@ -7,7 +8,7 @@ type RipLineProps = {
 };
 
 const RipLine = (props: RipLineProps) => {
-  const horizontalPoints = useMemo(
+  const points = useMemo(
     () => [
       new THREE.Vector3(0, 0, 0),
       new THREE.Vector3(props.endPoints[0], props.endPoints[1], 0),
@@ -15,9 +16,13 @@ const RipLine = (props: RipLineProps) => {
     [props.endPoints]
   );
 
+  const lineGeomRef = useUpdate((geometry: THREE.BufferGeometry) => {
+    geometry.setFromPoints(points);
+  }, []);
+
   return (
     <line>
-      <geometry attach="geometry" vertices={horizontalPoints} />
+      <bufferGeometry attach="geometry" ref={lineGeomRef} />
       <lineBasicMaterial
         attach="material"
         color={props.color === "yellow" ? "#f5cc16" : "#e33d00"}

src/components/Preloader.tsx

@@ -4,9 +4,6 @@ import moveUpSpriteSheet from "../static/sprites/lain/jump_up.png";
 import standingSpriteSheet from "../static/sprites/lain/standing.png";
 import moveLeftSpriteSheet from "../static/sprites/lain/move_left.png";
 import moveRightSpriteSheet from "../static/sprites/lain/move_right.png";
-import bigHudSpriteSheet from "../static/sprites/big_hud.png";
-import longHudSpriteSheet from "../static/sprites/long_hud.png";
-import boringHudSpriteSheet from "../static/sprites/long_hud_boring.png";
 import throwNodeSpriteSheet from "../static/sprites/lain/throw_node.png";
 import ripMiddleRingSpriteSheet from "../static/sprites/lain/rip_middle_ring.png";
 import ripNodeSpriteSheet from "../static/sprites/lain/rip_node.png";
@@ -30,6 +27,9 @@ import leanLeftSpriteSheet from "../static/sprites/lain/lean_left.png";
 import leanRightSpriteSheet from "../static/sprites/lain/lean_right.png";
 import lookAroundSpriteSheet from "../static/sprites/lain/look_around.png";
 import playWithHairSpriteSheet from "../static/sprites/lain/play_with_hair.png";
+import bigHudSpriteSheet from "../static/sprites/main/big_hud.png";
+import longHudSpriteSheet from "../static/sprites/main/long_hud.png";
+import boringHudSpriteSheet from "../static/sprites/main/boring_hud.png";
 
 import * as THREE from "three";
 import { useLoader, useThree } from "react-three-fiber";
@@ -152,6 +152,7 @@ const Preloader = memo(() => {
     handsOnHips2,
     handsTogether,
   ]);
+
   return null;
 });
 

src/core/input-handlers/handleMainSceneInput.ts

@@ -305,7 +305,7 @@ const handleMainSceneInput = (
               case "change":
                 if (
                   activePauseComponent === "change" &&
-                  gameProgress.gate_level > 4
+                  gameProgress.gate_level < 4
                 )
                   return showPermissionDenied;
                 else return displayPrompt;

src/core/input-handlers/handleMediaSceneInput.ts

@@ -53,6 +53,11 @@ const handleMediaSceneInput = (
         case "CIRCLE":
           switch (activeMediaComponent) {
             case "play":
+              const mediaElement = document.getElementById(
+                "media"
+              ) as HTMLMediaElement;
+
+              if (!mediaElement.paused) return;
               return playMedia({ activeNode: activeNode });
             case "exit":
               return exitMedia;

src/scenes/MediaScene.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { createAudioAnalyser, useStore } from "../store";
 import LeftSide from "../components/MediaScene/Selectables/LeftSide";
 import RightSide from "../components/MediaScene/Selectables/RightSide";
@@ -35,6 +35,10 @@ const MediaScene = () => {
     setScene,
   ]);
 
+  const isAudioOnly = useMemo(() => activeNode.media_file.includes("XA"), [
+    activeNode,
+  ]);
+
   useEffect(() => {
     const mediaElement = document.getElementById("media") as HTMLMediaElement;
     const trackElement = document.getElementById("track") as HTMLTrackElement;
@@ -52,7 +56,7 @@ const MediaScene = () => {
           trackElement.removeAttribute("src");
         });
 
-      if (activeNode.media_file.includes("XA")) {
+      if (isAudioOnly) {
         import("../static/media/audio/" + activeNode.media_file + ".mp4").then(
           (media) => {
             mediaElement.src = media.default;
@@ -60,15 +64,20 @@ const MediaScene = () => {
           }
         );
       } else {
-        import(
+        import("../static/media/movie/" + activeNode.media_file + ".mp4").then(
-          "../static/media/movie/" + activeNode.media_file + ".mp4"
+          (media) => {
-        ).then((media) => {
+            mediaElement.src = media.default;
-          mediaElement.src = media.default;
+            mediaElement.load();
-          mediaElement.load();
+          }
-        });
+        );
       }
     }
-  }, [activeNode.media_file, activeNode.node_name, setAudioAnalyser]);
+  }, [
+    activeNode.media_file,
+    activeNode.node_name,
+    isAudioOnly,
+    setAudioAnalyser,
+  ]);
 
   const [loaded, setLoaded] = useState(false);
 
@@ -92,7 +101,7 @@ const MediaScene = () => {
           </group>
           <MediaYellowTextAnimator />
 
-          <group visible={activeNode.media_file.includes("XA")}>
+          <group visible={isAudioOnly}>
             <RightSide />
             <AudioVisualizer />
             <Images />