Merge branch 'master' of https://github.com/ad044/lain-psx-ts

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,7 +48,7 @@
   "homepage": ".",
   "devDependencies": {
     "eslint-loader": "^4.0.2",
-    "wav": "^1.0.2",
-    "yargs": "^16.2.0"
+    "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(
-          "../static/media/movie/" + activeNode.media_file + ".mp4"
-        ).then((media) => {
-          mediaElement.src = media.default;
-          mediaElement.load();
-        });
+        import("../static/media/movie/" + activeNode.media_file + ".mp4").then(
+          (media) => {
+            mediaElement.src = media.default;
+            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 />