From ec0e81378b2413a87e92bd78a7962949ac05df3a Mon Sep 17 00:00:00 2001 From: ad044 Date: Sun, 7 Mar 2021 19:36:13 +0400 Subject: [PATCH] added postinstall script, fixed issues. --- package-lock.json | 145 ++++++++++++++++++ package.json | 4 +- scripts/postinstall.js | 23 +++ src/App.tsx | 3 +- .../Site/NodeAnimations/NodeRip/RipLine.tsx | 9 +- src/components/Preloader.tsx | 7 +- .../input-handlers/handleMainSceneInput.ts | 2 +- .../input-handlers/handleMediaSceneInput.ts | 5 + src/scenes/MediaScene.tsx | 29 ++-- 9 files changed, 209 insertions(+), 18 deletions(-) create mode 100644 scripts/postinstall.js diff --git a/package-lock.json b/package-lock.json index 0027ae3..e544121 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 53a82b7..4cd1ffe 100644 --- a/package.json +++ b/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" } } diff --git a/scripts/postinstall.js b/scripts/postinstall.js new file mode 100644 index 0000000..377e564 --- /dev/null +++ b/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(); diff --git a/src/App.tsx b/src/App.tsx index 554148f..26a99fb 100644 --- a/src/App.tsx +++ b/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" > - {/**/} + {dispatchScene[currentScene as keyof typeof dispatchScene]} diff --git a/src/components/MainScene/Site/NodeAnimations/NodeRip/RipLine.tsx b/src/components/MainScene/Site/NodeAnimations/NodeRip/RipLine.tsx index 6848380..95b1bfc 100644 --- a/src/components/MainScene/Site/NodeAnimations/NodeRip/RipLine.tsx +++ b/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 ( - + { handsOnHips2, handsTogether, ]); + return null; }); diff --git a/src/core/input-handlers/handleMainSceneInput.ts b/src/core/input-handlers/handleMainSceneInput.ts index 3bd3379..f848915 100644 --- a/src/core/input-handlers/handleMainSceneInput.ts +++ b/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; diff --git a/src/core/input-handlers/handleMediaSceneInput.ts b/src/core/input-handlers/handleMediaSceneInput.ts index 6dc4856..ef82340 100644 --- a/src/core/input-handlers/handleMediaSceneInput.ts +++ b/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; diff --git a/src/scenes/MediaScene.tsx b/src/scenes/MediaScene.tsx index 6956bd9..4cb9def 100644 --- a/src/scenes/MediaScene.tsx +++ b/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 = () => { - +