added tak scene

src/App.tsx

@@ -11,6 +11,7 @@ import GateScene from "./scenes/GateScene";
 import BootScene from "./scenes/BootScene";
 import SSknScene from "./scenes/SSknScene";
 import PolytanScene from "./scenes/PolytanScene";
+import TaKScene from "./scenes/TaKScene";
 
 const App = () => {
   const currentScene = useSceneStore((state) => state.currentScene);
@@ -30,6 +31,7 @@ const App = () => {
       boot: <BootScene />,
       sskn: <SSknScene />,
       polytan: <PolytanScene />,
+      tak: <TaKScene />,
     };
   }, []);
 

src/components/MainScene/Lain.tsx

@@ -18,7 +18,7 @@ type LainConstructorProps = {
   framesHorizontal: number;
 };
 
-const LainConstructor = (props: LainConstructorProps) => {
+export const LainConstructor = (props: LainConstructorProps) => {
   // any here temporarily
   const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite);
 

src/components/MediaScene/MediaPlayer.tsx

@@ -40,6 +40,9 @@ const MediaPlayer = () => {
 
       if (percentageElapsed % 5 === 0) {
         setPercentageElapsed(percentageElapsed);
+        if (percentageElapsed === 100) {
+          videoRef.current.pause();
+        }
       }
     }
   }, [setPercentageElapsed, videoRef]);
@@ -51,7 +54,7 @@ const MediaPlayer = () => {
   }, [updateTime]);
 
   useEffect(() => {
-    if (currentScene === "media") {
+    if (currentScene === "media" || currentScene === "tak") {
       const nodeMedia = (site_a as SiteType)[activeLevel][activeNodeId]
         .media_file;
       if (nodeMedia.includes("XA")) {
@@ -65,11 +68,7 @@ const MediaPlayer = () => {
         });
       } else {
         import(
-          "../../static/movie/" +
-            currentSite +
-            "/" +
-            nodeMedia +
-            "[0].webm"
+          "../../static/movie/" + currentSite + "/" + nodeMedia + "[0].webm"
         ).then((media) => {
           setMediaSource(media.default);
           if (videoRef.current) {

src/components/TaKScene/LainTaK.tsx

@@ -0,0 +1,89 @@
+import React, { useMemo, useRef } from "react";
+import { useFrame, useLoader } from "react-three-fiber";
+import * as THREE from "three";
+import takIntro from "../../static/sprite/tak_intro.png";
+import takOutro from "../../static/sprite/tak_outro.png";
+import mouth1 from "../../static/sprite/mouth_1.png";
+import mouth2 from "../../static/sprite/mouth_2.png";
+import mouth3 from "../../static/sprite/mouth_3.png";
+import mouth4 from "../../static/sprite/mouth_4.png";
+import { useMediaStore } from "../../store";
+import { LainConstructor } from "../MainScene/Lain";
+
+type LainTaKProps = {
+  intro: boolean;
+  outro: boolean;
+};
+
+const LainTaK = (props: LainTaKProps) => {
+  const mouth1Tex = useLoader(THREE.TextureLoader, mouth1);
+  const mouth2Tex = useLoader(THREE.TextureLoader, mouth2);
+  const mouth3Tex = useLoader(THREE.TextureLoader, mouth3);
+  const mouth4Tex = useLoader(THREE.TextureLoader, mouth4);
+
+  const Intro = () => (
+    <LainConstructor
+      sprite={takIntro}
+      frameCount={31}
+      framesHorizontal={6}
+      framesVertical={6}
+    />
+  );
+
+  const Outro = () => (
+    <LainConstructor
+      sprite={takOutro}
+      frameCount={39}
+      framesHorizontal={7}
+      framesVertical={6}
+    />
+  );
+
+  const analyser = useMediaStore((state) => state.audioAnalyser);
+
+  const mouthRef = useRef<THREE.SpriteMaterial>();
+  useFrame(() => {
+    if (analyser) {
+      const freq = parseInt(analyser.getAverageFrequency());
+
+      if (mouthRef.current) {
+        if (freq >= 50) {
+          mouthRef.current.map = mouth4Tex;
+        } else if (freq >= 40 && freq <= 50) {
+          mouthRef.current.map = mouth3Tex;
+        } else if (freq >= 30 && freq <= 40) {
+          mouthRef.current.map = mouth2Tex;
+        } else {
+          mouthRef.current.map = mouth1Tex;
+        }
+      }
+    }
+  });
+
+  const animationDispatch = useMemo(() => {
+    if (props.intro) return <Intro />;
+    else if (props.outro) return <Outro />;
+  }, [props.intro, props.outro]);
+
+  return (
+    <>
+      <sprite scale={[11, 7.7, 0]} visible={props.intro || props.outro}>
+        {animationDispatch}
+      </sprite>
+      <sprite
+        scale={[11, 7.7, 0]}
+        renderOrder={2}
+        visible={!props.intro && !props.outro}
+      >
+        <spriteMaterial
+          attach="material"
+          map={mouth4Tex}
+          alphaTest={0.01}
+          ref={mouthRef}
+        />
+      </sprite>
+    </>
+  );
+};
+
+export default LainTaK;

src/core/StateManagers/LainManager.tsx

@@ -22,10 +22,11 @@ const LainManager = (props: StateManagerProps) => {
         case "throw_node_media":
         case "throw_node_gate":
         case "throw_node_sskn":
+        case "throw_node_tak":
           return {
             action: setLainMoveState,
             value: "throw_node",
-            duration: 3904.704,
+            duration: 3900,
           };
       }
     },

src/core/StateManagers/MediaComponentManager.tsx

@@ -24,9 +24,7 @@ const MediaComponentManager = (props: StateManagerProps) => {
     const listener = new THREE.AudioListener();
     const audio = new THREE.Audio(listener);
 
-    audio.setMediaElementSource(
-      document.getElementById("media") as HTMLMediaElement
-    );
+    audio.setMediaElementSource(mediaElement);
 
     setAudioAnalyser(new THREE.AudioAnalyser(audio, 2048));
 

src/core/StateManagers/NodeManager.tsx

@@ -100,6 +100,7 @@ const NodeManager = (props: StateManagerProps) => {
         case "throw_node_media":
         case "throw_node_gate":
         case "throw_node_sskn":
+        case "throw_node_tak":
           return {
             action: animateActiveNodeThrow,
             value: [newSiteRotY],

src/core/StateManagers/SceneManager.tsx

@@ -11,6 +11,7 @@ const SceneManager = (props: StateManagerProps) => {
         case "throw_node_media":
         case "throw_node_gate":
         case "throw_node_sskn":
+        case "throw_node_tak":
           return {
             action: setScene,
             value: newScene,

src/core/mainSceneEventHandler.ts

@@ -51,7 +51,6 @@ const handleMainSceneEvent = (gameContext: any) => {
           newSitePosY = selectedNodeData.newSitePosY;
           newLevel = selectedNodeData.newLevel;
           newActiveHudId = selectedNodeData.newActiveHudId;
-
         }
 
         break;
@@ -76,6 +75,10 @@ const handleMainSceneEvent = (gameContext: any) => {
             event = eventAnimation + "media";
             newScene = "media";
             break;
+          case 6:
+            event = eventAnimation + "tak";
+            newScene = "tak";
+            break;
           case 8:
             event = eventAnimation + "gate";
             newScene = "gate";

src/core/nodeSelector.ts

@@ -55,7 +55,6 @@ export const getNodeHudId = (nodeMatrixIndices: {
   ];
 
 export const isNodeVisible = (nodeId: string, gameProgress: typeof unlocked_nodes) => {
-  console.log(nodeId)
   const nodeLevel = nodeId.substr(0, 2);
   const nodeData = (site_a as SiteType)[nodeLevel][nodeId];
   if (nodeData) {

src/scenes/TaKScene.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+import LainTaK from "../components/TaKScene/LainTaK";
+import * as THREE from "three";
+import { useMediaStore, useSceneStore } from "../store";
+
+const TaKScene = () => {
+  const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
+  const setScene = useSceneStore((state) => state.setScene);
+
+  const [isIntro, setIntro] = useState(true);
+  const [isOutro, setIsOutro] = useState(false);
+
+  const percentageElapsed = useMediaStore(
+    (state) => state.mediaPercentageElapsed
+  );
+
+  useEffect(() => {
+    if (percentageElapsed === 100) {
+      setIsOutro(true);
+      setTimeout(() => {
+        setScene("main");
+      }, 4600);
+    }
+  }, [percentageElapsed, setScene]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      const mediaElement = document.getElementById("media") as HTMLMediaElement;
+
+      const listener = new THREE.AudioListener();
+      const audio = new THREE.Audio(listener);
+
+      audio.setMediaElementSource(mediaElement);
+
+      setAudioAnalyser(new THREE.AudioAnalyser(audio, 2048));
+
+      if (mediaElement) {
+        mediaElement.play();
+        setIntro(false);
+      }
+    }, 3800);
+  }, [setAudioAnalyser]);
+
+  return <LainTaK intro={isIntro} outro={isOutro} />;
+};
+
+export default TaKScene;