diff --git a/src/App.tsx b/src/App.tsx
index c07a2f8..595ee53 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,7 @@ import { Canvas } from "react-three-fiber";
import MediaPlayer from "./components/MediaScene/MediaPlayer";
import MediaScene from "./scenes/MediaScene";
import EventManager from "./core/StateManagers/EventManager";
-import { useSceneStore } from "./store";
+import { useMediaStore, useSceneStore } from "./store";
import GateScene from "./scenes/GateScene";
import BootScene from "./scenes/BootScene";
import SSknScene from "./scenes/SSknScene";
@@ -45,7 +45,7 @@ const App = () => {
- {/**/}
+
);
};
diff --git a/src/components/MainScene/SyncedComponents/Site.tsx b/src/components/MainScene/SyncedComponents/Site.tsx
index 381aa3b..92a930d 100644
--- a/src/components/MainScene/SyncedComponents/Site.tsx
+++ b/src/components/MainScene/SyncedComponents/Site.tsx
@@ -62,8 +62,8 @@ const Site = (props: SiteProps) => {
posZ: 0,
rotX: 0,
from: {
- posZ: props.shouldIntro ? -10 : 0,
- rotX: props.shouldIntro ? Math.PI / 2 : 0,
+ posZ: -10,
+ rotX: Math.PI / 2,
},
config: { duration: 3400 },
});
@@ -81,8 +81,8 @@ const Site = (props: SiteProps) => {
return (
{
const [mediaSource, setMediaSource] = useState();
@@ -40,6 +44,17 @@ const MediaPlayer = () => {
currentSite,
]);
+ // end scene specific stuff
+ const endMediaPlayedCount = useEndSceneStore(
+ (state) => state.mediaPlayedCount
+ );
+ const incrementEndMediaPlayedCount = useEndSceneStore(
+ (state) => state.incrementMediaPlayedCount
+ );
+ const resetEndMediaPlayedCount = useEndSceneStore(
+ (state) => state.resetMediaPlayedCount
+ );
+
const updateTime = useCallback(() => {
(requestRef.current as any) = requestAnimationFrame(updateTime);
if (videoRef.current) {
@@ -51,13 +66,18 @@ const MediaPlayer = () => {
setPercentageElapsed(percentageElapsed);
if (percentageElapsed === 100) {
videoRef.current.currentTime = 0;
- if (
- (siteData as SiteType)[activeLevel][activeNodeId]
- .triggers_final_video === 1
- ) {
- setScene("end");
+ if (currentScene === "end") {
+ incrementEndMediaPlayedCount();
} else {
- videoRef.current.pause();
+ if (
+ (siteData as SiteType)[activeLevel][activeNodeId]
+ .triggers_final_video === 1
+ ) {
+ resetEndMediaPlayedCount();
+ setScene("end");
+ } else {
+ videoRef.current.pause();
+ }
}
}
}
@@ -65,6 +85,9 @@ const MediaPlayer = () => {
}, [
activeLevel,
activeNodeId,
+ currentScene,
+ incrementEndMediaPlayedCount,
+ resetEndMediaPlayedCount,
setPercentageElapsed,
setScene,
siteData,
@@ -79,13 +102,29 @@ const MediaPlayer = () => {
useEffect(() => {
if (currentScene === "end") {
- import("../../static/movie/b/ENDROLL1.STR[0].webm").then((media) => {
- setMediaSource(media.default);
+ if (endMediaPlayedCount === 0) {
+ setMediaSource(endroll);
if (videoRef.current) {
videoRef.current.load();
- videoRef.current.play();
+ videoRef.current.play().catch((e) => {
+ console.log(e);
+ });
}
- });
+ } else if (endMediaPlayedCount === 1) {
+ setMediaSource(xa0001);
+ if (videoRef.current) {
+ videoRef.current.load();
+ }
+ } else if (endMediaPlayedCount === 2) {
+ console.log('s')
+ setMediaSource(xa0006);
+ if (videoRef.current) {
+ videoRef.current.load();
+ // videoRef.current.play().catch((e) => {
+ // console.log(e);
+ // });
+ }
+ }
} else if (currentScene === "media" || currentScene === "tak") {
const nodeMedia = (siteData as SiteType)[activeLevel][activeNodeId]
.media_file;
@@ -114,6 +153,7 @@ const MediaPlayer = () => {
activeNodeId,
currentScene,
currentSite,
+ endMediaPlayedCount,
siteData,
videoRef,
]);
@@ -130,8 +170,8 @@ const MediaPlayer = () => {
? "block"
: "none",
}}
+ src={mediaSource}
>
-
);
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 23148b6..aa39d03 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -85,6 +85,11 @@ declare module "*.mp3" {
export default src;
}
+declare module '*.mp4' {
+ const src: string;
+ export default src;
+}
+
declare module "*.ogg" {
const src: string;
export default src;
diff --git a/src/scenes/EndScene.tsx b/src/scenes/EndScene.tsx
index 0855acd..9c253ae 100644
--- a/src/scenes/EndScene.tsx
+++ b/src/scenes/EndScene.tsx
@@ -1,11 +1,15 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import { useFrame } from "react-three-fiber";
import EndCylinder from "../components/EndScene/EndCylinder";
import EndSphere from "../components/EndScene/EndSphere";
import LainSpeak from "../components/LainSpeak";
-
+import { useEndSceneStore, useMediaStore } from "../store";
const EndScene = () => {
+ const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
+
+ const mediaPlayedCount = useEndSceneStore((state) => state.mediaPlayedCount);
+
const mainCylinderRef = useRef();
useFrame(() => {
@@ -17,7 +21,31 @@ const EndScene = () => {
const [isIntro, setIsIntro] = useState(true);
const [isOutro, setIsOutro] = useState(false);
- return (
+ useEffect(() => {
+ if (mediaPlayedCount === 1) {
+ 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();
+ setIsIntro(false);
+ }
+ }, 3800);
+ } else if (mediaPlayedCount > 1) {
+ setIsOutro(true);
+ }
+ }, [mediaPlayedCount, setAudioAnalyser]);
+
+ return mediaPlayedCount > 0 ? (
<>
@@ -32,6 +60,8 @@ const EndScene = () => {
>
+ ) : (
+ <>>
);
};
diff --git a/src/store.ts b/src/store.ts
index b035e65..c2ad30b 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -4,6 +4,12 @@ import * as THREE from "three";
import authorize_user_letters from "./resources/authorize_user_letters.json";
import game_progress from "./resources/initial_progress.json";
+type EndState = {
+ mediaPlayedCount: number;
+ incrementMediaPlayedCount: () => void;
+ resetMediaPlayedCount: () => void;
+};
+
type SiteSaveState = {
a: {
activeNodeId: string;
@@ -585,3 +591,10 @@ export const useSiteSaveStore = create(
})
)
);
+
+export const useEndSceneStore = create((set) => ({
+ mediaPlayedCount: 0,
+ incrementMediaPlayedCount: () =>
+ set((state) => ({ mediaPlayedCount: state.mediaPlayedCount + 1 })),
+ resetMediaPlayedCount: () => set(() => ({ mediaPlayedCount: 0 })),
+}));