From 07cc48ae499af47e3ce463472105b96278ddd3a6 Mon Sep 17 00:00:00 2001 From: ad044 Date: Sun, 20 Dec 2020 19:52:05 +0400 Subject: [PATCH] added tak scene --- src/App.tsx | 2 + src/components/MainScene/Lain.tsx | 2 +- src/components/MediaScene/MediaPlayer.tsx | 11 ++- src/components/TaKScene/LainTaK.tsx | 89 +++++++++++++++++++ src/core/StateManagers/LainManager.tsx | 3 +- .../StateManagers/MediaComponentManager.tsx | 4 +- src/core/StateManagers/NodeManager.tsx | 1 + src/core/StateManagers/SceneManager.tsx | 1 + src/core/mainSceneEventHandler.ts | 5 +- src/core/nodeSelector.ts | 1 - src/scenes/TaKScene.tsx | 47 ++++++++++ 11 files changed, 153 insertions(+), 13 deletions(-) create mode 100644 src/components/TaKScene/LainTaK.tsx create mode 100644 src/scenes/TaKScene.tsx diff --git a/src/App.tsx b/src/App.tsx index ea254d0..0952a00 100644 --- a/src/App.tsx +++ b/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: , sskn: , polytan: , + tak: , }; }, []); diff --git a/src/components/MainScene/Lain.tsx b/src/components/MainScene/Lain.tsx index d92ebfc..634e542 100644 --- a/src/components/MainScene/Lain.tsx +++ b/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); diff --git a/src/components/MediaScene/MediaPlayer.tsx b/src/components/MediaScene/MediaPlayer.tsx index 919993a..a1cdc9d 100644 --- a/src/components/MediaScene/MediaPlayer.tsx +++ b/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) { diff --git a/src/components/TaKScene/LainTaK.tsx b/src/components/TaKScene/LainTaK.tsx new file mode 100644 index 0000000..2fcef99 --- /dev/null +++ b/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 = () => ( + + ); + + const Outro = () => ( + + ); + + const analyser = useMediaStore((state) => state.audioAnalyser); + + const mouthRef = useRef(); + 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 ; + else if (props.outro) return ; + }, [props.intro, props.outro]); + + return ( + <> + + {animationDispatch} + + + + + + ); +}; + +export default LainTaK; diff --git a/src/core/StateManagers/LainManager.tsx b/src/core/StateManagers/LainManager.tsx index 0237df0..0fe23bd 100644 --- a/src/core/StateManagers/LainManager.tsx +++ b/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, }; } }, diff --git a/src/core/StateManagers/MediaComponentManager.tsx b/src/core/StateManagers/MediaComponentManager.tsx index d8b7ce0..27aaed7 100644 --- a/src/core/StateManagers/MediaComponentManager.tsx +++ b/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)); diff --git a/src/core/StateManagers/NodeManager.tsx b/src/core/StateManagers/NodeManager.tsx index f12b28a..0e755f3 100644 --- a/src/core/StateManagers/NodeManager.tsx +++ b/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], diff --git a/src/core/StateManagers/SceneManager.tsx b/src/core/StateManagers/SceneManager.tsx index 27cee20..4e99d51 100644 --- a/src/core/StateManagers/SceneManager.tsx +++ b/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, diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts index 5145695..40e04c1 100644 --- a/src/core/mainSceneEventHandler.ts +++ b/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"; diff --git a/src/core/nodeSelector.ts b/src/core/nodeSelector.ts index 8756d49..adba7ed 100644 --- a/src/core/nodeSelector.ts +++ b/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) { diff --git a/src/scenes/TaKScene.tsx b/src/scenes/TaKScene.tsx new file mode 100644 index 0000000..39d803d --- /dev/null +++ b/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 ; +}; + +export default TaKScene;