mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
too much, cant write a commit message for this
This commit is contained in:
parent
936f1089f2
commit
efdd391a6c
38 changed files with 2557 additions and 20823 deletions
18685
package-lock.json
generated
18685
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -7,22 +7,17 @@
|
||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
"@testing-library/react": "^9.5.0",
|
"@testing-library/react": "^9.5.0",
|
||||||
"@testing-library/user-event": "^7.2.1",
|
"@testing-library/user-event": "^7.2.1",
|
||||||
"@tweenjs/tween.js": "^18.6.0",
|
|
||||||
"@types/jest": "^24.9.1",
|
"@types/jest": "^24.9.1",
|
||||||
"@types/node": "^12.12.54",
|
"@types/node": "^12.12.54",
|
||||||
"@types/react": "^16.9.47",
|
"@types/react": "^16.9.47",
|
||||||
"@types/react-dom": "^16.9.8",
|
"@types/react-dom": "^16.9.8",
|
||||||
"drei": "^1.3.0",
|
"drei": "^1.3.0",
|
||||||
"eslint-plugin-react": "^7.19.0",
|
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
"react-player": "^2.6.2",
|
|
||||||
"react-scripts": "^4.0.0",
|
"react-scripts": "^4.0.0",
|
||||||
"react-three-fiber": "^4.2.20",
|
"react-three-fiber": "^4.2.20",
|
||||||
"three": "^0.119.1",
|
"three": "^0.119.1",
|
||||||
"three-plain-animator": "^1.0.2",
|
"three-plain-animator": "^1.0.2",
|
||||||
"threejs-slice-geometry": "^0.2.2",
|
|
||||||
"ts-node": "^9.0.0",
|
|
||||||
"typescript": "^3.7.5",
|
"typescript": "^3.7.5",
|
||||||
"zustand": "^3.1.3"
|
"zustand": "^3.1.3"
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useEffect, useState, Suspense, useMemo } from "react";
|
import React, { useEffect, useState, Suspense, useMemo } from "react";
|
||||||
import MainScene from "./scenes/MainScene";
|
import MainScene from "./scenes/MainScene";
|
||||||
import "./static/css/hub.css";
|
import "./static/css/main_scene.css";
|
||||||
import "./static/css/main.css";
|
import "./static/css/page.css";
|
||||||
import { Canvas } from "react-three-fiber";
|
import { Canvas } from "react-three-fiber";
|
||||||
import Boot from "./components/Boot";
|
import Boot from "./components/Boot";
|
||||||
import MediaPlayer from "./components/MediaScene/MediaPlayer";
|
import MediaPlayer from "./components/MediaScene/MediaPlayer";
|
||||||
|
|
|
@ -143,7 +143,7 @@ const Boot = (props: IntroProps) => {
|
||||||
|
|
||||||
const handleUserKeyPress = useCallback(
|
const handleUserKeyPress = useCallback(
|
||||||
(event) => {
|
(event) => {
|
||||||
const { _, keyCode } = event;
|
const { keyCode } = event;
|
||||||
|
|
||||||
if (keyCode === 40 || keyCode === 38) {
|
if (keyCode === 40 || keyCode === 38) {
|
||||||
setAuthorizeActive(!authorizeActive);
|
setAuthorizeActive(!authorizeActive);
|
||||||
|
|
|
@ -21,6 +21,7 @@ const GrayPlanes = memo(() => {
|
||||||
];
|
];
|
||||||
|
|
||||||
const grayPlaneRefs = grayPlanePoses.map((poses: number[]) =>
|
const grayPlaneRefs = grayPlanePoses.map((poses: number[]) =>
|
||||||
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||||
useRef<RefObject<THREE.Object3D>[]>(
|
useRef<RefObject<THREE.Object3D>[]>(
|
||||||
poses.map(() => createRef<THREE.Object3D>())
|
poses.map(() => createRef<THREE.Object3D>())
|
||||||
)
|
)
|
||||||
|
|
|
@ -90,6 +90,7 @@ const Starfield = memo(() => {
|
||||||
"blue",
|
"blue",
|
||||||
"cyan",
|
"cyan",
|
||||||
"gray",
|
"gray",
|
||||||
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||||
].map((color: string) => useMemo(() => uniformConstructor(color), [color]));
|
].map((color: string) => useMemo(() => uniformConstructor(color), [color]));
|
||||||
|
|
||||||
const [
|
const [
|
||||||
|
@ -122,6 +123,7 @@ const Starfield = memo(() => {
|
||||||
posesWhiteFromRight,
|
posesWhiteFromRight,
|
||||||
posesWhiteFromLeft,
|
posesWhiteFromLeft,
|
||||||
].map((poses) =>
|
].map((poses) =>
|
||||||
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||||
useRef<RefObject<THREE.Object3D>[]>(
|
useRef<RefObject<THREE.Object3D>[]>(
|
||||||
poses.map(() => createRef<THREE.Object3D>())
|
poses.map(() => createRef<THREE.Object3D>())
|
||||||
)
|
)
|
||||||
|
@ -144,6 +146,7 @@ const Starfield = memo(() => {
|
||||||
introPosesCyan,
|
introPosesCyan,
|
||||||
introPosesWhite,
|
introPosesWhite,
|
||||||
].map((poses) =>
|
].map((poses) =>
|
||||||
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||||
useRef<RefObject<THREE.Object3D>[]>(
|
useRef<RefObject<THREE.Object3D>[]>(
|
||||||
poses.map(() => createRef<THREE.Object3D>())
|
poses.map(() => createRef<THREE.Object3D>())
|
||||||
)
|
)
|
||||||
|
|
|
@ -67,7 +67,7 @@ const MainSceneIntro = memo(() => {
|
||||||
|
|
||||||
toggleHud();
|
toggleHud();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.getElementsByTagName("canvas")[0].className = "hub-background";
|
document.getElementsByTagName("canvas")[0].className = "main-scene-background";
|
||||||
}, 300);
|
}, 300);
|
||||||
}, 3860);
|
}, 3860);
|
||||||
}, [
|
}, [
|
||||||
|
|
|
@ -1,11 +1,57 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { useLoader } from "react-three-fiber";
|
||||||
|
import { useImageStore, useMediaStore } from "../../store";
|
||||||
|
import * as THREE from "three";
|
||||||
|
import sex from "../../static/sprite/gray_ring_lof.png";
|
||||||
|
import { a, useSpring } from "@react-spring/three";
|
||||||
|
|
||||||
const Images = () => {
|
const Images = () => {
|
||||||
|
const [imageScaleY, setImageScaleY] = useState(3.75);
|
||||||
|
const images = useImageStore((state) => state.images);
|
||||||
|
const [activeImage, setActiveImage] = useState<any>(sex);
|
||||||
|
|
||||||
|
const activeImageTex = useLoader(THREE.TextureLoader, activeImage);
|
||||||
|
|
||||||
|
const mediaPercentageElapsed = useMediaStore(
|
||||||
|
(state) => state.mediaPercentageElapsed
|
||||||
|
);
|
||||||
|
|
||||||
|
const imageScaleState = useSpring({
|
||||||
|
imageScaleY: imageScaleY,
|
||||||
|
config: { duration: 300 },
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (images[1]) {
|
||||||
|
setActiveImage(images[1].default);
|
||||||
|
}
|
||||||
|
}, [images]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (mediaPercentageElapsed === 35 && images[2]) {
|
||||||
|
setImageScaleY(0);
|
||||||
|
setTimeout(() => {
|
||||||
|
setActiveImage(images[2]!.default);
|
||||||
|
setImageScaleY(3.75);
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
if (mediaPercentageElapsed === 70 && images[3]) {
|
||||||
|
setImageScaleY(0);
|
||||||
|
setTimeout(() => {
|
||||||
|
setActiveImage(images[3]!.default);
|
||||||
|
setImageScaleY(3.75);
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}, [images, mediaPercentageElapsed]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<sprite position={[-0.2, 0.6, -4]} scale={[5, 3.75, 0]}>
|
<a.sprite
|
||||||
<spriteMaterial />
|
position={[-0.2, 0.6, -4]}
|
||||||
</sprite>
|
scale={[5, 3.75, 0]}
|
||||||
|
scale-y={imageScaleState.imageScaleY}
|
||||||
|
>
|
||||||
|
<spriteMaterial attach="material" map={activeImageTex} />
|
||||||
|
</a.sprite>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { createRef, useCallback, useRef } from "react";
|
import React, { createRef, useCallback, useRef } from "react";
|
||||||
import test from "../../static/movie/LAIN01.XA[18].ogg";
|
import test from "../../static/movie/LAIN01.XA[18].ogg";
|
||||||
import { useMediaStore, useSceneStore } from "../../store";
|
import { useMediaStore, useSceneStore } from "../../store";
|
||||||
|
import t from "../../static/webvtt/test.vtt";
|
||||||
|
|
||||||
const MediaPlayer = () => {
|
const MediaPlayer = () => {
|
||||||
const currentScene = useSceneStore((state) => state.currentScene);
|
const currentScene = useSceneStore((state) => state.currentScene);
|
||||||
|
@ -41,6 +42,7 @@ const MediaPlayer = () => {
|
||||||
style={{ display: currentScene === "media" ? "block" : "none" }}
|
style={{ display: currentScene === "media" ? "block" : "none" }}
|
||||||
>
|
>
|
||||||
<source src={test} />
|
<source src={test} />
|
||||||
|
<track src={t} kind="captions" default />
|
||||||
</video>
|
</video>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { useBlueOrbStore } from "../../../store";
|
import { useBlueOrbStore } from "../../store";
|
||||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
|
|
||||||
const BlueOrbHUDManager = (props: StateManagerProps) => {
|
const BlueOrbHUDManager = (props: StateManagerProps) => {
|
||||||
const setActiveBlueOrbHudId = useBlueOrbStore(
|
const setActiveBlueOrbHudId = useBlueOrbStore(
|
||||||
|
@ -46,9 +46,9 @@ const BlueOrbHUDManager = (props: StateManagerProps) => {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const eventObject =
|
const eventObject: any =
|
||||||
blue_orb_directions[
|
game_action_mappings[
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof game_action_mappings
|
||||||
];
|
];
|
||||||
|
|
||||||
if (eventObject) {
|
if (eventObject) {
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { useBlueOrbStore } from "../../../store";
|
import { useBlueOrbStore } from "../../store";
|
||||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
|
|
||||||
type SetActiveBlueOrb = (value: string) => void;
|
type SetActiveBlueOrb = (value: string) => void;
|
||||||
type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void;
|
type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void;
|
||||||
|
@ -111,9 +111,9 @@ const BlueOrbManager = (props: StateManagerProps) => {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const eventObject =
|
const eventObject: any =
|
||||||
blue_orb_directions[
|
game_action_mappings[
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof game_action_mappings
|
||||||
];
|
];
|
||||||
|
|
||||||
if (eventObject) {
|
if (eventObject) {
|
|
@ -1,18 +1,17 @@
|
||||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import SiteManager from "./MainScene/SiteManager";
|
import SiteManager from "./SiteManager";
|
||||||
import MiddleRingManager from "./MainScene/MiddleRingManager";
|
import MiddleRingManager from "./MiddleRingManager";
|
||||||
import LainManager from "./MainScene/LainManager";
|
import LainManager from "./LainManager";
|
||||||
import BlueOrbManager from "./MainScene/BlueOrbManager";
|
import BlueOrbManager from "./BlueOrbManager";
|
||||||
import BlueOrbHUDManager from "./MainScene/BlueOrbHUDManager";
|
import BlueOrbHUDManager from "./BlueOrbHUDManager";
|
||||||
import MainYellowTextManager from "./MainScene/MainYellowTextManager";
|
|
||||||
import { useBlueOrbStore, useMediaStore, useSceneStore } from "../../store";
|
import { useBlueOrbStore, useMediaStore, useSceneStore } from "../../store";
|
||||||
import GreenTextManager from "./MainScene/GreenTextManager";
|
import GreenTextManager from "./GreenTextManager";
|
||||||
import MediaComponentManager from "./MediaScene/MediaComponentManager";
|
import MediaComponentManager from "./MediaComponentManager";
|
||||||
import WordManager from "./MediaScene/WordManager";
|
import MediaWordManager from "./MediaWordManager";
|
||||||
import MediaYellowTextManager from "./MediaScene/MediaYellowTextManager";
|
import MediaElementManager from "./MediaElementManager";
|
||||||
import MediaElementManager from "./MediaScene/MediaElementManager";
|
|
||||||
import SceneManager from "./SceneManager";
|
import SceneManager from "./SceneManager";
|
||||||
import ImageManager from "./MediaScene/ImageManager";
|
import YellowTextManager from "./YellowTextManager";
|
||||||
|
import MediaImageManager from "./MediaImageManager";
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
const keyCodeAssocs = {
|
const keyCodeAssocs = {
|
||||||
|
@ -79,17 +78,16 @@ const EventManager = () => {
|
||||||
<>
|
<>
|
||||||
<BlueOrbManager eventState={eventState!} />
|
<BlueOrbManager eventState={eventState!} />
|
||||||
<BlueOrbHUDManager eventState={eventState!} />
|
<BlueOrbHUDManager eventState={eventState!} />
|
||||||
<MainYellowTextManager eventState={eventState!} />
|
|
||||||
<GreenTextManager eventState={eventState!} />
|
<GreenTextManager eventState={eventState!} />
|
||||||
<SiteManager eventState={eventState!} />
|
<SiteManager eventState={eventState!} />
|
||||||
<LainManager eventState={eventState!} />
|
<LainManager eventState={eventState!} />
|
||||||
<MiddleRingManager eventState={eventState!} />
|
<MiddleRingManager eventState={eventState!} />
|
||||||
<MediaComponentManager eventState={eventState!} />
|
<MediaComponentManager eventState={eventState!} />
|
||||||
<WordManager eventState={eventState!} />
|
<MediaWordManager eventState={eventState!} />
|
||||||
<MediaYellowTextManager eventState={eventState!} />
|
|
||||||
<MediaElementManager eventState={eventState!} />
|
<MediaElementManager eventState={eventState!} />
|
||||||
<SceneManager eventState={eventState!} />
|
<SceneManager eventState={eventState!} />
|
||||||
<ImageManager eventState={eventState!} />
|
<YellowTextManager eventState={eventState!} />
|
||||||
|
<MediaImageManager eventState={eventState!} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { useTextRendererStore } from "../../../store";
|
import { useTextRendererStore } from "../../store";
|
||||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
import site_a from "../../../resources/site_a.json";
|
import site_a from "../../resources/site_a.json";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
import blue_orb_huds from "../../../resources/blue_orb_huds.json";
|
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
||||||
|
|
||||||
const GreenTextManager = (props: StateManagerProps) => {
|
const GreenTextManager = (props: StateManagerProps) => {
|
||||||
const setGreenText = useTextRendererStore((state) => state.setGreenText);
|
const setGreenText = useTextRendererStore((state) => state.setGreenText);
|
||||||
|
@ -20,7 +20,7 @@ const GreenTextManager = (props: StateManagerProps) => {
|
||||||
const toggleAndSetGreenText = useCallback(
|
const toggleAndSetGreenText = useCallback(
|
||||||
(targetBlueOrbId: string, targetBlueOrbHudId: string, delay: number) => {
|
(targetBlueOrbId: string, targetBlueOrbHudId: string, delay: number) => {
|
||||||
const targetGreenText =
|
const targetGreenText =
|
||||||
site_a[targetBlueOrbId as keyof typeof site_a].green_text;
|
site_a[targetBlueOrbId as keyof typeof site_a].title;
|
||||||
|
|
||||||
const targetGreenTextPosData =
|
const targetGreenTextPosData =
|
||||||
blue_orb_huds[targetBlueOrbHudId as keyof typeof blue_orb_huds]
|
blue_orb_huds[targetBlueOrbHudId as keyof typeof blue_orb_huds]
|
||||||
|
@ -73,9 +73,9 @@ const GreenTextManager = (props: StateManagerProps) => {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const eventObject =
|
const eventObject: any =
|
||||||
blue_orb_directions[
|
game_action_mappings[
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof game_action_mappings
|
||||||
];
|
];
|
||||||
|
|
||||||
if (eventObject) {
|
if (eventObject) {
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { useLainStore } from "../../../store";
|
import { useLainStore } from "../../store";
|
||||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
|
|
||||||
const LainManager = (props: StateManagerProps) => {
|
const LainManager = (props: StateManagerProps) => {
|
||||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||||
|
@ -44,8 +44,8 @@ const LainManager = (props: StateManagerProps) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const eventObject =
|
const eventObject =
|
||||||
blue_orb_directions[
|
game_action_mappings[
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof game_action_mappings
|
||||||
];
|
];
|
||||||
|
|
||||||
if (eventObject) {
|
if (eventObject) {
|
|
@ -1,6 +1,8 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
import { useMediaStore } from "../../../store";
|
import { useMediaStore } from "../../store";
|
||||||
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
|
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
||||||
|
|
||||||
const MediaComponentManager = (props: StateManagerProps) => {
|
const MediaComponentManager = (props: StateManagerProps) => {
|
||||||
const setActiveMediaComponent = useMediaStore(
|
const setActiveMediaComponent = useMediaStore(
|
||||||
|
@ -47,54 +49,60 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(event: string) => {
|
(event: string, targetMediaComponent: string) => {
|
||||||
const dispatcherObjects = {
|
const dispatcherObjects = {
|
||||||
play_down: { action: setActiveMediaComponent, value: "exit" },
|
|
||||||
exit_up: { action: setActiveMediaComponent, value: "play" },
|
|
||||||
play_right: {
|
|
||||||
action: switchToRightSide,
|
|
||||||
value: "play",
|
|
||||||
},
|
|
||||||
exit_right: {
|
|
||||||
action: switchToRightSide,
|
|
||||||
value: "exit",
|
|
||||||
},
|
|
||||||
fstWord_left: {
|
|
||||||
action: switchToLeftSide,
|
|
||||||
value: "fstWord",
|
|
||||||
},
|
|
||||||
fstWord_up: {
|
fstWord_up: {
|
||||||
action: setActiveMediaComponent,
|
action: setActiveMediaComponent,
|
||||||
value: "thirdWord"
|
value: targetMediaComponent,
|
||||||
},
|
},
|
||||||
fstWord_down: {
|
fstWord_down: {
|
||||||
action: setActiveMediaComponent,
|
action: setActiveMediaComponent,
|
||||||
value: "sndWord",
|
value: targetMediaComponent,
|
||||||
},
|
},
|
||||||
sndWord_up: {
|
sndWord_up: {
|
||||||
action: setActiveMediaComponent,
|
action: setActiveMediaComponent,
|
||||||
value: "fstWord",
|
value: targetMediaComponent,
|
||||||
},
|
},
|
||||||
sndWord_down: {
|
sndWord_down: {
|
||||||
action: setActiveMediaComponent,
|
action: setActiveMediaComponent,
|
||||||
value: "thirdWord",
|
value: targetMediaComponent,
|
||||||
},
|
|
||||||
sndWord_left: {
|
|
||||||
action: switchToLeftSide,
|
|
||||||
value: "sndWord"
|
|
||||||
},
|
},
|
||||||
thirdWord_down: {
|
thirdWord_down: {
|
||||||
action: setActiveMediaComponent,
|
action: setActiveMediaComponent,
|
||||||
value: "fstWord",
|
value: targetMediaComponent,
|
||||||
},
|
},
|
||||||
thirdWord_up: {
|
thirdWord_up: {
|
||||||
action: setActiveMediaComponent,
|
action: setActiveMediaComponent,
|
||||||
|
value: targetMediaComponent,
|
||||||
|
},
|
||||||
|
play_down: {
|
||||||
|
action: setActiveMediaComponent,
|
||||||
|
value: targetMediaComponent,
|
||||||
|
},
|
||||||
|
exit_up: {
|
||||||
|
action: setActiveMediaComponent,
|
||||||
|
value: targetMediaComponent,
|
||||||
|
},
|
||||||
|
switch_to_right_side_from_play: {
|
||||||
|
action: switchToRightSide,
|
||||||
|
value: "play",
|
||||||
|
},
|
||||||
|
switch_to_right_side_from_exit: {
|
||||||
|
action: switchToRightSide,
|
||||||
|
value: "exit",
|
||||||
|
},
|
||||||
|
switch_to_left_side_from_fstWord: {
|
||||||
|
action: switchToLeftSide,
|
||||||
|
value: "fstWord",
|
||||||
|
},
|
||||||
|
switch_to_left_side_from_sndWord: {
|
||||||
|
action: switchToLeftSide,
|
||||||
value: "sndWord",
|
value: "sndWord",
|
||||||
},
|
},
|
||||||
thirdWord_left: {
|
switch_to_left_side_from_thirdWord: {
|
||||||
action: switchToLeftSide,
|
action: switchToLeftSide,
|
||||||
value: "thirdWord"
|
value: "thirdWord",
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
|
@ -104,10 +112,23 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const dispatchedObject = dispatchObject(props.eventState);
|
const eventObject: any =
|
||||||
|
game_action_mappings[
|
||||||
|
props.eventState as keyof typeof blue_orb_directions
|
||||||
|
];
|
||||||
|
|
||||||
if (dispatchedObject) {
|
if (eventObject) {
|
||||||
dispatchedObject.action(dispatchedObject.value);
|
const eventAction = eventObject.action;
|
||||||
|
const targetMediaComponent = eventObject.target_media_component;
|
||||||
|
|
||||||
|
const dispatchedObject = dispatchObject(
|
||||||
|
eventAction,
|
||||||
|
targetMediaComponent
|
||||||
|
);
|
||||||
|
|
||||||
|
if (dispatchedObject) {
|
||||||
|
dispatchedObject.action(dispatchedObject.value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [props.eventState, dispatchObject]);
|
}, [props.eventState, dispatchObject]);
|
46
src/components/StateManagers/MediaElementManager.tsx
Normal file
46
src/components/StateManagers/MediaElementManager.tsx
Normal file
|
@ -0,0 +1,46 @@
|
||||||
|
import { useCallback, useEffect } from "react";
|
||||||
|
|
||||||
|
import { StateManagerProps } from "./EventManager";
|
||||||
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
|
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
||||||
|
|
||||||
|
const MediaComponentManager = (props: StateManagerProps) => {
|
||||||
|
const playMedia = useCallback(() => {
|
||||||
|
const mediaElement = document.getElementById("media") as HTMLMediaElement;
|
||||||
|
if (mediaElement) mediaElement.play().then((r) => console.log(r));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const dispatchObject = useCallback(
|
||||||
|
(event: string) => {
|
||||||
|
const dispatcherObjects = {
|
||||||
|
play_media_element: { action: playMedia },
|
||||||
|
};
|
||||||
|
|
||||||
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
|
},
|
||||||
|
[playMedia]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.eventState) {
|
||||||
|
const eventObject: any =
|
||||||
|
game_action_mappings[
|
||||||
|
props.eventState as keyof typeof blue_orb_directions
|
||||||
|
];
|
||||||
|
|
||||||
|
if (eventObject) {
|
||||||
|
const eventAction = eventObject.action;
|
||||||
|
|
||||||
|
const dispatchedObject = dispatchObject(eventAction);
|
||||||
|
|
||||||
|
if (dispatchedObject) {
|
||||||
|
dispatchedObject.action();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [props.eventState, dispatchObject]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MediaComponentManager;
|
80
src/components/StateManagers/MediaImageManager.tsx
Normal file
80
src/components/StateManagers/MediaImageManager.tsx
Normal file
|
@ -0,0 +1,80 @@
|
||||||
|
import { useCallback, useEffect } from "react";
|
||||||
|
|
||||||
|
import { StateManagerProps } from "./EventManager";
|
||||||
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
|
import site_a from "../../resources/site_a.json";
|
||||||
|
import image_table from "../../resources/image_table.json";
|
||||||
|
import { ImageSrc, useImageStore } from "../../store";
|
||||||
|
|
||||||
|
const MediaImageManager = (props: StateManagerProps) => {
|
||||||
|
const setImages = useImageStore((state) => state.setImages);
|
||||||
|
|
||||||
|
const updateSceneImages = useCallback((targetBlueOrbId: string) => {
|
||||||
|
const node_name = site_a[targetBlueOrbId as keyof typeof site_a].node_name;
|
||||||
|
const images = image_table[node_name as keyof typeof image_table];
|
||||||
|
|
||||||
|
Object.values(images).forEach((img) => {
|
||||||
|
console.log(images);
|
||||||
|
switch (img.substr(img.length - 1)) {
|
||||||
|
case "0":
|
||||||
|
import("../../static/media_images/site_a/" + img + ".png").then(
|
||||||
|
(imageSrc: ImageSrc) => {
|
||||||
|
setImages(imageSrc, 1);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "1":
|
||||||
|
import("../../static/media_images/site_a/" + img + ".png").then(
|
||||||
|
(imageSrc: ImageSrc) => {
|
||||||
|
setImages(imageSrc, 2);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "2":
|
||||||
|
import("../../static/media_images/site_a/" + img + ".png").then(
|
||||||
|
(imageSrc: ImageSrc) => {
|
||||||
|
setImages(imageSrc, 3);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const dispatchObject = useCallback(
|
||||||
|
(event: string, targetBlueOrbId: string) => {
|
||||||
|
const dispatcherObjects = {
|
||||||
|
select_blue_orb: { action: updateSceneImages, value: targetBlueOrbId },
|
||||||
|
};
|
||||||
|
|
||||||
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
|
},
|
||||||
|
[updateSceneImages]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.eventState) {
|
||||||
|
const eventObject: any =
|
||||||
|
game_action_mappings[
|
||||||
|
props.eventState as keyof typeof game_action_mappings
|
||||||
|
];
|
||||||
|
|
||||||
|
if (eventObject) {
|
||||||
|
const eventAction = eventObject.action;
|
||||||
|
const targetBlueOrbId = eventObject.target_blue_orb_id;
|
||||||
|
|
||||||
|
const dispatchedObject = dispatchObject(eventAction, targetBlueOrbId);
|
||||||
|
|
||||||
|
if (dispatchedObject) {
|
||||||
|
dispatchedObject.action(dispatchedObject.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [props.eventState, dispatchObject]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MediaImageManager;
|
|
@ -1,59 +0,0 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
|
||||||
import image_table from "../../../resources/image_table.json";
|
|
||||||
import site_a from "../../../resources/site_a.json";
|
|
||||||
import { StateManagerProps } from "../EventManager";
|
|
||||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
|
||||||
import sex from "../../../static/media_images/site_a/[9]Lda024-0.png";
|
|
||||||
import { useImageStore } from "../../../store";
|
|
||||||
|
|
||||||
const ImageManager = (props: StateManagerProps) => {
|
|
||||||
const setImg = useImageStore((state) => state.img);
|
|
||||||
const setImages = useCallback(
|
|
||||||
(targetBlueOrbId: string) => {
|
|
||||||
//const node_name = site_a[targetBlueOrbId as keyof typeof site_a].node_name;
|
|
||||||
const images = image_table["Lda024" as keyof typeof image_table];
|
|
||||||
|
|
||||||
const p = require("../../../static/media_images/site_a/[9]Lda024-0.png");
|
|
||||||
import(p).then((image) => {
|
|
||||||
setImg(image);
|
|
||||||
});
|
|
||||||
console.log(sex)
|
|
||||||
},
|
|
||||||
[setImg]
|
|
||||||
);
|
|
||||||
const dispatchObject = useCallback(
|
|
||||||
(event: string, targetBlueOrbId: string) => {
|
|
||||||
const dispatcherObjects = {
|
|
||||||
play_select: { action: setImages, value: targetBlueOrbId },
|
|
||||||
};
|
|
||||||
|
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
|
||||||
},
|
|
||||||
[setImages]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (props.eventState) {
|
|
||||||
const eventObject =
|
|
||||||
blue_orb_directions[
|
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
|
||||||
];
|
|
||||||
|
|
||||||
console.log(eventObject);
|
|
||||||
const targetBlueOrbId = "";
|
|
||||||
|
|
||||||
const dispatchedObject = dispatchObject(
|
|
||||||
props.eventState,
|
|
||||||
targetBlueOrbId
|
|
||||||
);
|
|
||||||
|
|
||||||
if (dispatchedObject) {
|
|
||||||
dispatchedObject.action(dispatchedObject.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [props.eventState, dispatchObject]);
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ImageManager;
|
|
|
@ -1,35 +0,0 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
|
||||||
|
|
||||||
import { StateManagerProps } from "../EventManager";
|
|
||||||
|
|
||||||
const MediaComponentManager = (props: StateManagerProps) => {
|
|
||||||
const playMedia = useCallback(() => {
|
|
||||||
const mediaElement = document.getElementById("media") as HTMLMediaElement;
|
|
||||||
// if (mediaElement) mediaElement.play().then((r) => console.log(r));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
|
||||||
(event: string) => {
|
|
||||||
const dispatcherObjects = {
|
|
||||||
play_select: { action: playMedia },
|
|
||||||
};
|
|
||||||
|
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
|
||||||
},
|
|
||||||
[playMedia]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (props.eventState) {
|
|
||||||
const dispatchedObject = dispatchObject(props.eventState);
|
|
||||||
|
|
||||||
if (dispatchedObject) {
|
|
||||||
dispatchedObject.action();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [props.eventState, dispatchObject]);
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MediaComponentManager;
|
|
|
@ -1,90 +0,0 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
|
||||||
import { useTextRendererStore } from "../../../store";
|
|
||||||
|
|
||||||
type AnimateMediaYellowText = (
|
|
||||||
targetMediaText: string,
|
|
||||||
targetMediaTextPos: number[]
|
|
||||||
) => void;
|
|
||||||
|
|
||||||
type YellowTextDispatchData = {
|
|
||||||
action: AnimateMediaYellowText;
|
|
||||||
value: any;
|
|
||||||
};
|
|
||||||
|
|
||||||
type YellowTextDispatcher = {
|
|
||||||
play_down: YellowTextDispatchData;
|
|
||||||
exit_up: YellowTextDispatchData;
|
|
||||||
};
|
|
||||||
|
|
||||||
const MediaYellowTextManager = (props: any) => {
|
|
||||||
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
|
||||||
|
|
||||||
const setYellowTextOffsetXCoeff = useTextRendererStore(
|
|
||||||
(state) => state.setYellowTextOffsetXCoeff
|
|
||||||
);
|
|
||||||
|
|
||||||
const setYellowTextPosY = useTextRendererStore(
|
|
||||||
(state) => state.setYellowTextPosY
|
|
||||||
);
|
|
||||||
const setYellowTextPosX = useTextRendererStore(
|
|
||||||
(state) => state.setYellowTextPosX
|
|
||||||
);
|
|
||||||
|
|
||||||
const animateMediaYellowText: AnimateMediaYellowText = useCallback(
|
|
||||||
(targetMediaComponentText: string, targetMediaComponentTextPos: number[]) => {
|
|
||||||
// make current text shrink
|
|
||||||
setYellowTextOffsetXCoeff(-1);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setYellowTextPosX(targetMediaComponentTextPos[0]);
|
|
||||||
setYellowTextPosY(targetMediaComponentTextPos[1]);
|
|
||||||
}, 400);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setYellowText(targetMediaComponentText);
|
|
||||||
}, 1000);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
// unshrink text
|
|
||||||
setYellowTextOffsetXCoeff(0);
|
|
||||||
}, 1200);
|
|
||||||
},
|
|
||||||
[
|
|
||||||
setYellowText,
|
|
||||||
setYellowTextOffsetXCoeff,
|
|
||||||
setYellowTextPosX,
|
|
||||||
setYellowTextPosY,
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
|
||||||
(event: string) => {
|
|
||||||
const dispatcherObjects: YellowTextDispatcher = {
|
|
||||||
exit_up: {
|
|
||||||
action: animateMediaYellowText,
|
|
||||||
value: ["Play", [-0.8, 0.05, 0.6]],
|
|
||||||
},
|
|
||||||
play_down: {
|
|
||||||
action: animateMediaYellowText,
|
|
||||||
value: ["Exit", [-0.8, -0.08, 0.6]],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
|
||||||
},
|
|
||||||
[animateMediaYellowText]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (props.eventState) {
|
|
||||||
const dispatchedObject = dispatchObject(props.eventState);
|
|
||||||
if (dispatchedObject) {
|
|
||||||
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [props.eventState, dispatchObject]);
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MediaYellowTextManager;
|
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
import { useMediaWordStore } from "../../../store";
|
import { useMediaWordStore } from "../../store";
|
||||||
|
|
||||||
const WordManager = (props: StateManagerProps) => {
|
const MediaWordManager = (props: StateManagerProps) => {
|
||||||
const addToWordPositionDataStructIdx = useMediaWordStore(
|
const addToWordPositionDataStructIdx = useMediaWordStore(
|
||||||
(state) => state.addToWordPositionDataStructIdx
|
(state) => state.addToWordPositionDataStructIdx
|
||||||
);
|
);
|
||||||
|
@ -53,4 +53,4 @@ const WordManager = (props: StateManagerProps) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default WordManager;
|
export default MediaWordManager;
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useCallback, useEffect, useMemo } from "react";
|
import { useCallback, useEffect, useMemo } from "react";
|
||||||
import { useMiddleRingStore } from "../../../store";
|
import { useMiddleRingStore } from "../../store";
|
||||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
|
|
||||||
const MiddleRingManager = (props: any) => {
|
const MiddleRingManager = (props: any) => {
|
||||||
const setMiddleRingWobbleStrength = useMiddleRingStore(
|
const setMiddleRingWobbleStrength = useMiddleRingStore(
|
||||||
|
@ -196,8 +196,8 @@ const MiddleRingManager = (props: any) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const eventObject =
|
const eventObject =
|
||||||
blue_orb_directions[
|
game_action_mappings[
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof game_action_mappings
|
||||||
];
|
];
|
||||||
|
|
||||||
if (eventObject) {
|
if (eventObject) {
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
||||||
import { useSceneStore } from "../../store";
|
import { useSceneStore } from "../../store";
|
||||||
|
@ -6,16 +6,24 @@ import { useSceneStore } from "../../store";
|
||||||
const SceneManager = (props: StateManagerProps) => {
|
const SceneManager = (props: StateManagerProps) => {
|
||||||
const setScene = useSceneStore((state) => state.setScene);
|
const setScene = useSceneStore((state) => state.setScene);
|
||||||
|
|
||||||
const dispatchObject = useCallback((event: string) => {
|
const dispatchObject = useCallback(
|
||||||
const dispatcherObjects = {
|
(event: string) => {
|
||||||
select_blue_orb: {
|
const dispatcherObjects = {
|
||||||
action: setScene,
|
select_blue_orb: {
|
||||||
value: "media",
|
action: setScene,
|
||||||
delay: 3904.704,
|
value: "media",
|
||||||
},
|
delay: 3904.704,
|
||||||
};
|
},
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
exit_select: {
|
||||||
}, [setScene]);
|
action: setScene,
|
||||||
|
value: "main",
|
||||||
|
delay: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
|
},
|
||||||
|
[setScene]
|
||||||
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
|
@ -24,15 +32,24 @@ const SceneManager = (props: StateManagerProps) => {
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof blue_orb_directions
|
||||||
];
|
];
|
||||||
|
|
||||||
|
let dispatchedObject: {
|
||||||
|
action: (to: string) => void;
|
||||||
|
value: string;
|
||||||
|
delay: number;
|
||||||
|
};
|
||||||
|
|
||||||
if (eventObject) {
|
if (eventObject) {
|
||||||
const eventAction = eventObject.action;
|
const eventAction = eventObject.action;
|
||||||
const dispatchedObject = dispatchObject(eventAction);
|
dispatchedObject = dispatchObject(eventAction);
|
||||||
|
} else {
|
||||||
|
const eventAction = props.eventState;
|
||||||
|
dispatchedObject = dispatchObject(eventAction);
|
||||||
|
}
|
||||||
|
|
||||||
if (dispatchedObject) {
|
if (dispatchedObject) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
dispatchedObject.action(dispatchedObject.value);
|
dispatchedObject.action(dispatchedObject.value);
|
||||||
}, dispatchedObject.delay);
|
}, dispatchedObject.delay);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [props.eventState, dispatchObject]);
|
}, [props.eventState, dispatchObject]);
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useEffect, useMemo } from "react";
|
import { useEffect, useMemo } from "react";
|
||||||
import { useSiteStore } from "../../../store";
|
import { useSiteStore } from "../../store";
|
||||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
|
|
||||||
const SiteManager = (props: StateManagerProps) => {
|
const SiteManager = (props: StateManagerProps) => {
|
||||||
const incrementSiteRotY = useSiteStore((state) => state.incrementSiteRotY);
|
const incrementSiteRotY = useSiteStore((state) => state.incrementSiteRotY);
|
||||||
|
@ -29,8 +29,8 @@ const SiteManager = (props: StateManagerProps) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const eventObject =
|
const eventObject =
|
||||||
blue_orb_directions[
|
game_action_mappings[
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof game_action_mappings
|
||||||
];
|
];
|
||||||
|
|
||||||
if (eventObject) {
|
if (eventObject) {
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import blue_orb_huds from "../../../resources/blue_orb_huds.json";
|
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
||||||
import site_a from "../../../resources/site_a.json";
|
import site_a from "../../resources/site_a.json";
|
||||||
import { useTextRendererStore } from "../../../store";
|
import { useTextRendererStore } from "../../store";
|
||||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
|
|
||||||
type AnimateYellowTextWithMove = (
|
type AnimateYellowTextWithMove = (
|
||||||
yellowLetterPosYOffset: number,
|
yellowLetterPosYOffset: number,
|
||||||
|
@ -15,8 +15,16 @@ type AnimateYellowTextWithoutMove = (
|
||||||
targetBlueOrbId: string
|
targetBlueOrbId: string
|
||||||
) => void;
|
) => void;
|
||||||
|
|
||||||
|
type AnimateMediaYellowText = (
|
||||||
|
targetMediaText: string,
|
||||||
|
targetMediaTextPos: number[]
|
||||||
|
) => void;
|
||||||
|
|
||||||
type YellowTextDispatchData = {
|
type YellowTextDispatchData = {
|
||||||
action: AnimateYellowTextWithMove | AnimateYellowTextWithoutMove;
|
action:
|
||||||
|
| AnimateYellowTextWithMove
|
||||||
|
| AnimateYellowTextWithoutMove
|
||||||
|
| AnimateMediaYellowText;
|
||||||
value: any;
|
value: any;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -26,9 +34,11 @@ type YellowTextDispatcher = {
|
||||||
move_left: YellowTextDispatchData;
|
move_left: YellowTextDispatchData;
|
||||||
move_right: YellowTextDispatchData;
|
move_right: YellowTextDispatchData;
|
||||||
change_blue_orb: YellowTextDispatchData;
|
change_blue_orb: YellowTextDispatchData;
|
||||||
|
play_down: YellowTextDispatchData;
|
||||||
|
exit_up: YellowTextDispatchData;
|
||||||
};
|
};
|
||||||
|
|
||||||
const MainYellowTextManager = (props: any) => {
|
const YellowTextManager = (props: any) => {
|
||||||
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
||||||
|
|
||||||
const setYellowTextOffsetXCoeff = useTextRendererStore(
|
const setYellowTextOffsetXCoeff = useTextRendererStore(
|
||||||
|
@ -125,6 +135,36 @@ const MainYellowTextManager = (props: any) => {
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const animateMediaYellowText: AnimateMediaYellowText = useCallback(
|
||||||
|
(
|
||||||
|
targetMediaComponentText: string,
|
||||||
|
targetMediaComponentTextPos: number[]
|
||||||
|
) => {
|
||||||
|
// make current text shrink
|
||||||
|
setYellowTextOffsetXCoeff(-1);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setYellowTextPosX(targetMediaComponentTextPos[0]);
|
||||||
|
setYellowTextPosY(targetMediaComponentTextPos[1]);
|
||||||
|
}, 400);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setYellowText(targetMediaComponentText);
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
// unshrink text
|
||||||
|
setYellowTextOffsetXCoeff(0);
|
||||||
|
}, 1200);
|
||||||
|
},
|
||||||
|
[
|
||||||
|
setYellowText,
|
||||||
|
setYellowTextOffsetXCoeff,
|
||||||
|
setYellowTextPosX,
|
||||||
|
setYellowTextPosY,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(
|
(
|
||||||
event: string,
|
event: string,
|
||||||
|
@ -152,18 +192,30 @@ const MainYellowTextManager = (props: any) => {
|
||||||
action: animateYellowTextWithoutMove,
|
action: animateYellowTextWithoutMove,
|
||||||
value: [targetBlueOrbHudId, targetBlueOrbId],
|
value: [targetBlueOrbHudId, targetBlueOrbId],
|
||||||
},
|
},
|
||||||
|
exit_up: {
|
||||||
|
action: animateMediaYellowText,
|
||||||
|
value: ["Play", [-0.8, 0.05, 0.6]],
|
||||||
|
},
|
||||||
|
play_down: {
|
||||||
|
action: animateMediaYellowText,
|
||||||
|
value: ["Exit", [-0.8, -0.08, 0.6]],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
},
|
},
|
||||||
[animateYellowTextWithMove, animateYellowTextWithoutMove]
|
[
|
||||||
|
animateMediaYellowText,
|
||||||
|
animateYellowTextWithMove,
|
||||||
|
animateYellowTextWithoutMove,
|
||||||
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const eventObject =
|
const eventObject: any =
|
||||||
blue_orb_directions[
|
game_action_mappings[
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof game_action_mappings
|
||||||
];
|
];
|
||||||
|
|
||||||
if (eventObject) {
|
if (eventObject) {
|
||||||
|
@ -181,7 +233,6 @@ const MainYellowTextManager = (props: any) => {
|
||||||
if (dispatchedObject) {
|
if (dispatchedObject) {
|
||||||
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
|
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [
|
}, [
|
||||||
|
@ -196,4 +247,4 @@ const MainYellowTextManager = (props: any) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default MainYellowTextManager;
|
export default YellowTextManager;
|
|
@ -45,12 +45,15 @@ const BigLetter = (props: BigLetterProps) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const lineYOffsets = {
|
const lineYOffsets = useMemo(
|
||||||
1: 0.884,
|
() => ({
|
||||||
2: 0.765,
|
1: 0.884,
|
||||||
3: 0.648,
|
2: 0.765,
|
||||||
4: 0.47,
|
3: 0.648,
|
||||||
};
|
4: 0.47,
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
const letterData =
|
const letterData =
|
||||||
orange_font_json.glyphs[
|
orange_font_json.glyphs[
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
import orangeFont from "../../static/sprite/orange_font_texture.png";
|
|
||||||
import yellowFont from "../../static/sprite/yellow_font_texture.png";
|
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import greenFont from "../../static/sprite/white_and_green_texture.png";
|
import greenFont from "../../static/sprite/white_and_green_texture.png";
|
||||||
|
@ -34,13 +32,16 @@ const MediumLetter = (props: LetterProps) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
// 5th one is just a space, this is my hacky way of doing it.
|
// 5th one is just a space, this is my hacky way of doing it.
|
||||||
const lineYOffsets = {
|
const lineYOffsets = useMemo(
|
||||||
1: 0.355,
|
() => ({
|
||||||
2: 0.297,
|
1: 0.355,
|
||||||
3: 0.238,
|
2: 0.297,
|
||||||
4: 0.18,
|
3: 0.238,
|
||||||
5: 1,
|
4: 0.18,
|
||||||
};
|
5: 1,
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
const letterData =
|
const letterData =
|
||||||
medium_font_json.glyphs[
|
medium_font_json.glyphs[
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { a, useSpring, useTrail } from "@react-spring/three";
|
import { a, useSpring, useTrail } from "@react-spring/three";
|
||||||
import React, { useMemo } from "react";
|
import React, { useEffect, useMemo } from "react";
|
||||||
import { useSiteStore, useTextRendererStore } from "../../store";
|
import { useSiteStore, useTextRendererStore } from "../../store";
|
||||||
import BigLetter from "./BigLetter";
|
import BigLetter from "./BigLetter";
|
||||||
import MediumLetter from "./MediumLetter";
|
import MediumLetter from "./MediumLetter";
|
||||||
|
|
78
src/react-app-env.d.ts
vendored
78
src/react-app-env.d.ts
vendored
|
@ -1,9 +1,85 @@
|
||||||
/// <reference types="react-scripts" />
|
/// <reference types="node" />
|
||||||
|
/// <reference types="react" />
|
||||||
|
/// <reference types="react-dom" />
|
||||||
|
|
||||||
|
declare namespace NodeJS {
|
||||||
|
interface ProcessEnv {
|
||||||
|
readonly NODE_ENV: 'development' | 'production' | 'test';
|
||||||
|
readonly PUBLIC_URL: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.avif' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.bmp' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.gif' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.jpg' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.jpeg' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.png' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.webp' {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.svg' {
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export const ReactComponent: React.FunctionComponent<React.SVGProps<
|
||||||
|
SVGSVGElement
|
||||||
|
> & { title?: string }>;
|
||||||
|
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.module.css' {
|
||||||
|
const classes: { readonly [key: string]: string };
|
||||||
|
export default classes;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.module.scss' {
|
||||||
|
const classes: { readonly [key: string]: string };
|
||||||
|
export default classes;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.module.sass' {
|
||||||
|
const classes: { readonly [key: string]: string };
|
||||||
|
export default classes;
|
||||||
|
}
|
||||||
|
|
||||||
declare module "*.webm" {
|
declare module "*.webm" {
|
||||||
const src: string;
|
const src: string;
|
||||||
export default src;
|
export default src;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
declare module "*.vtt" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
declare module "*.mp3" {
|
declare module "*.mp3" {
|
||||||
const src: string;
|
const src: string;
|
||||||
export default src;
|
export default src;
|
||||||
|
|
138
src/resources/game_action_mappings.json
Normal file
138
src/resources/game_action_mappings.json
Normal file
|
@ -0,0 +1,138 @@
|
||||||
|
{
|
||||||
|
"play_select": {
|
||||||
|
"action": "play_media_element"
|
||||||
|
},
|
||||||
|
"exit_select": {
|
||||||
|
"action": "exit_media_scene"
|
||||||
|
},
|
||||||
|
|
||||||
|
"play_down": {
|
||||||
|
"action": "play_down",
|
||||||
|
"target_media_component": "exit"
|
||||||
|
},
|
||||||
|
"exit_up": {
|
||||||
|
"action": "exit_up",
|
||||||
|
"target_media_component": "play"
|
||||||
|
},
|
||||||
|
"play_right": {
|
||||||
|
"action": "switch_to_right_side_from_play",
|
||||||
|
"target_media_component": "last_active_right_media_component"
|
||||||
|
},
|
||||||
|
"exit_right": {
|
||||||
|
"action": "switch_to_right_side_from_exit",
|
||||||
|
"target_media_component": "last_active_right_media_component"
|
||||||
|
},
|
||||||
|
|
||||||
|
"fstWord_left": {
|
||||||
|
"action": "switch_to_left_side_from_fstWord",
|
||||||
|
"target_media_component": "last_active_left_media_component"
|
||||||
|
},
|
||||||
|
"fstWord_up": {
|
||||||
|
"action": "fstWord_up",
|
||||||
|
"target_media_component": "thirdWord"
|
||||||
|
},
|
||||||
|
"fstWord_down": {
|
||||||
|
"action": "fstWord_down",
|
||||||
|
"target_media_component": "sndWord"
|
||||||
|
},
|
||||||
|
"sndWord_up": {
|
||||||
|
"action": "sndWord_up",
|
||||||
|
"target_media_component": "fstWord"
|
||||||
|
},
|
||||||
|
"sndWord_down": {
|
||||||
|
"action": "sndWord_down",
|
||||||
|
"target_media_component": "thirdWord"
|
||||||
|
},
|
||||||
|
"sndWord_left": {
|
||||||
|
"action": "switch_to_left_side_from_sndWord",
|
||||||
|
"target_media_component": "last_active_left_media_component"
|
||||||
|
},
|
||||||
|
"thirdWord_down": {
|
||||||
|
"action": "thirdWord_down",
|
||||||
|
"target_media_component": "fstWord"
|
||||||
|
},
|
||||||
|
"thirdWord_up": {
|
||||||
|
"action": "thirdWord_up",
|
||||||
|
"target_media_component": "sndWord"
|
||||||
|
},
|
||||||
|
"thirdWord_left": {
|
||||||
|
"action": "switch_to_left_side_from_thirdWord",
|
||||||
|
"target_media_component": "last_active_left_media_component"
|
||||||
|
},
|
||||||
|
|
||||||
|
"0422_down": {
|
||||||
|
"action": "change_blue_orb",
|
||||||
|
"target_blue_orb_id": "0414",
|
||||||
|
"target_hud_id": "fg_hud_2"
|
||||||
|
},
|
||||||
|
"0422_right": {
|
||||||
|
"action": "change_blue_orb",
|
||||||
|
"target_blue_orb_id": "0417",
|
||||||
|
"target_hud_id": "bg_hud_1"
|
||||||
|
},
|
||||||
|
"0422_up": {
|
||||||
|
"action": "move_up",
|
||||||
|
"target_blue_orb_id": "0506",
|
||||||
|
"target_hud_id": "fg_hud_3"
|
||||||
|
},
|
||||||
|
"0422_select": {
|
||||||
|
"action": "select_blue_orb",
|
||||||
|
"target_blue_orb_id": "0422",
|
||||||
|
"target_hud_id": "fg_hud_1"
|
||||||
|
},
|
||||||
|
|
||||||
|
"0414_up": {
|
||||||
|
"action": "change_blue_orb",
|
||||||
|
"target_blue_orb_id": "0422",
|
||||||
|
"target_hud_id": "fg_hud_1"
|
||||||
|
},
|
||||||
|
"0414_right": {
|
||||||
|
"action": "change_blue_orb",
|
||||||
|
"target_blue_orb_id": "0417",
|
||||||
|
"target_hud_id": "bg_hud_1"
|
||||||
|
},
|
||||||
|
|
||||||
|
"0413_down": {
|
||||||
|
"action": "change_blue_orb",
|
||||||
|
"target_blue_orb_id": "0405",
|
||||||
|
"target_hud_id": "fg_hud_6"
|
||||||
|
},
|
||||||
|
"0413_left": {
|
||||||
|
"action": "change_blue_orb",
|
||||||
|
"target_blue_orb_id": "0417",
|
||||||
|
"target_hud_id": "bg_hud_1"
|
||||||
|
},
|
||||||
|
|
||||||
|
"0405_left": {
|
||||||
|
"action": "change_blue_orb",
|
||||||
|
"target_blue_orb_id": "0417",
|
||||||
|
"target_hud_id": "bg_hud_1"
|
||||||
|
},
|
||||||
|
"0405_up": {
|
||||||
|
"action": "change_blue_orb",
|
||||||
|
"target_blue_orb_id": "0413",
|
||||||
|
"target_hud_id": "fg_hud_5"
|
||||||
|
},
|
||||||
|
|
||||||
|
"0417_left": {
|
||||||
|
"action": "change_blue_orb",
|
||||||
|
"target_blue_orb_id": "0422",
|
||||||
|
"target_hud_id": "fg_hud_1"
|
||||||
|
},
|
||||||
|
"0417_down": {
|
||||||
|
"action": "change_blue_orb",
|
||||||
|
"target_blue_orb_id": "0414",
|
||||||
|
"target_hud_id": "fg_hud_2"
|
||||||
|
},
|
||||||
|
"0417_right": {
|
||||||
|
"action": "change_blue_orb",
|
||||||
|
"target_blue_orb_id": "0413",
|
||||||
|
"target_hud_id": "fg_hud_5"
|
||||||
|
},
|
||||||
|
|
||||||
|
"0506_down": {
|
||||||
|
"action": "move_down",
|
||||||
|
"target_blue_orb_id": "0422",
|
||||||
|
"target_hud_id": "fg_hud_1"
|
||||||
|
}
|
||||||
|
}
|
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
66
src/scenes/Initializers/MainSceneInitializer.tsx
Normal file
66
src/scenes/Initializers/MainSceneInitializer.tsx
Normal file
|
@ -0,0 +1,66 @@
|
||||||
|
import { memo, useEffect, useMemo } from "react";
|
||||||
|
import { useBlueOrbStore, useTextRendererStore } from "../../store";
|
||||||
|
import site_a from "../../resources/site_a.json";
|
||||||
|
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
||||||
|
|
||||||
|
const MainSceneInitializer = memo(() => {
|
||||||
|
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
||||||
|
const setYellowTextPosX = useTextRendererStore(
|
||||||
|
(state) => state.setYellowTextPosX
|
||||||
|
);
|
||||||
|
const setYellowTextPosY = useTextRendererStore(
|
||||||
|
(state) => state.setYellowTextPosY
|
||||||
|
);
|
||||||
|
const setGreenText = useTextRendererStore((state) => state.setGreenText);
|
||||||
|
const setGreenTextPosY = useTextRendererStore(
|
||||||
|
(state) => state.setGreenTextPosY
|
||||||
|
);
|
||||||
|
const setGreenTextPosX = useTextRendererStore(
|
||||||
|
(state) => state.setGreenTextPosX
|
||||||
|
);
|
||||||
|
|
||||||
|
const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
|
||||||
|
const activeBlueOrbHudId = useBlueOrbStore((state) => state.activeHudId);
|
||||||
|
|
||||||
|
const toggleGreenText = useTextRendererStore(
|
||||||
|
(state) => state.toggleGreenText
|
||||||
|
);
|
||||||
|
|
||||||
|
const activeBlueOrbHud =
|
||||||
|
blue_orb_huds[activeBlueOrbHudId as keyof typeof blue_orb_huds];
|
||||||
|
|
||||||
|
const blueOrbData = useMemo(
|
||||||
|
() => site_a[activeBlueOrb as keyof typeof site_a],
|
||||||
|
[activeBlueOrb]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const node_name = site_a[activeBlueOrb as keyof typeof site_a].node_name;
|
||||||
|
setGreenText(blueOrbData.title);
|
||||||
|
setYellowText(node_name);
|
||||||
|
setYellowTextPosX(activeBlueOrbHud.big_text[0]);
|
||||||
|
setYellowTextPosY(activeBlueOrbHud.big_text[1]);
|
||||||
|
|
||||||
|
setGreenTextPosX({
|
||||||
|
initial: activeBlueOrbHud.medium_text.initial_position[0],
|
||||||
|
final: activeBlueOrbHud.medium_text.position[0],
|
||||||
|
});
|
||||||
|
setGreenTextPosY(activeBlueOrbHud.medium_text.position[1]);
|
||||||
|
}, [
|
||||||
|
activeBlueOrb,
|
||||||
|
activeBlueOrbHud.big_text,
|
||||||
|
activeBlueOrbHud.medium_text.initial_position,
|
||||||
|
activeBlueOrbHud.medium_text.position,
|
||||||
|
blueOrbData,
|
||||||
|
setGreenText,
|
||||||
|
setGreenTextPosX,
|
||||||
|
setGreenTextPosY,
|
||||||
|
setYellowText,
|
||||||
|
setYellowTextPosX,
|
||||||
|
setYellowTextPosY,
|
||||||
|
toggleGreenText,
|
||||||
|
]);
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MainSceneInitializer;
|
|
@ -1,13 +1,23 @@
|
||||||
import React, { memo, useEffect, useMemo } from "react";
|
import { memo, useEffect, useMemo } from "react";
|
||||||
import {
|
import {
|
||||||
|
ImageSrc,
|
||||||
useBlueOrbStore,
|
useBlueOrbStore,
|
||||||
|
useImageStore,
|
||||||
|
useMediaStore,
|
||||||
useMediaWordStore,
|
useMediaWordStore,
|
||||||
useTextRendererStore,
|
useTextRendererStore,
|
||||||
} from "../../store";
|
} from "../../store";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../resources/site_a.json";
|
||||||
import string_table from "../../resources/string_table.json";
|
import string_table from "../../resources/string_table.json";
|
||||||
|
import image_table from "../../resources/image_table.json";
|
||||||
|
|
||||||
const MediaSceneInitializer = memo(() => {
|
const MediaSceneInitializer = memo(() => {
|
||||||
|
const lastActiveLeftSideComponent = useMediaStore(
|
||||||
|
(state) => state.lastActiveLeftSideElement
|
||||||
|
);
|
||||||
|
const setActiveMediaComponent = useMediaStore(
|
||||||
|
(state) => state.setActiveMediaComponent
|
||||||
|
);
|
||||||
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
||||||
const setYellowTextPosX = useTextRendererStore(
|
const setYellowTextPosX = useTextRendererStore(
|
||||||
(state) => state.setYellowTextPosX
|
(state) => state.setYellowTextPosX
|
||||||
|
@ -15,7 +25,6 @@ const MediaSceneInitializer = memo(() => {
|
||||||
const setYellowTextPosY = useTextRendererStore(
|
const setYellowTextPosY = useTextRendererStore(
|
||||||
(state) => state.setYellowTextPosY
|
(state) => state.setYellowTextPosY
|
||||||
);
|
);
|
||||||
const currentBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
|
|
||||||
const setGreenText = useTextRendererStore((state) => state.setGreenText);
|
const setGreenText = useTextRendererStore((state) => state.setGreenText);
|
||||||
const setGreenTextPosY = useTextRendererStore(
|
const setGreenTextPosY = useTextRendererStore(
|
||||||
(state) => state.setGreenTextPosY
|
(state) => state.setGreenTextPosY
|
||||||
|
@ -25,28 +34,44 @@ const MediaSceneInitializer = memo(() => {
|
||||||
);
|
);
|
||||||
const setWords = useMediaWordStore((state) => state.setWords);
|
const setWords = useMediaWordStore((state) => state.setWords);
|
||||||
|
|
||||||
|
const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
|
||||||
|
|
||||||
const blueOrbData = useMemo(
|
const blueOrbData = useMemo(
|
||||||
() => site_a[currentBlueOrb as keyof typeof site_a],
|
() => site_a[activeBlueOrb as keyof typeof site_a],
|
||||||
[currentBlueOrb]
|
[activeBlueOrb]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const resetWordPositionDataStructIdx = useMediaWordStore(
|
||||||
|
(state) => state.resetWordPositionDataStructIdx
|
||||||
|
);
|
||||||
|
const setImages = useImageStore((state) => state.setImages);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
setActiveMediaComponent(lastActiveLeftSideComponent);
|
||||||
setGreenText(blueOrbData.node_name);
|
setGreenText(blueOrbData.node_name);
|
||||||
setYellowText("Play");
|
setYellowText("Play");
|
||||||
setYellowTextPosX(-0.8);
|
setYellowTextPosX(-0.8);
|
||||||
setYellowTextPosY(0.05);
|
setYellowTextPosY(0.05);
|
||||||
setGreenTextPosX({ initial: 0.02, final: 0.02 });
|
setGreenTextPosX({ initial: 0.02, final: 0.02 });
|
||||||
setGreenTextPosY(0.675);
|
setGreenTextPosY(0.675);
|
||||||
|
resetWordPositionDataStructIdx();
|
||||||
setWords([
|
setWords([
|
||||||
string_table[blueOrbData.words[1] as keyof typeof string_table],
|
string_table[blueOrbData.words[1] as keyof typeof string_table],
|
||||||
string_table[blueOrbData.words[2] as keyof typeof string_table],
|
string_table[blueOrbData.words[2] as keyof typeof string_table],
|
||||||
string_table[blueOrbData.words[3] as keyof typeof string_table],
|
string_table[blueOrbData.words[3] as keyof typeof string_table],
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
||||||
}, [
|
}, [
|
||||||
|
activeBlueOrb,
|
||||||
blueOrbData,
|
blueOrbData,
|
||||||
|
lastActiveLeftSideComponent,
|
||||||
|
resetWordPositionDataStructIdx,
|
||||||
|
setActiveMediaComponent,
|
||||||
setGreenText,
|
setGreenText,
|
||||||
setGreenTextPosX,
|
setGreenTextPosX,
|
||||||
setGreenTextPosY,
|
setGreenTextPosY,
|
||||||
|
setImages,
|
||||||
setWords,
|
setWords,
|
||||||
setYellowText,
|
setYellowText,
|
||||||
setYellowTextPosX,
|
setYellowTextPosX,
|
||||||
|
|
|
@ -13,6 +13,7 @@ import { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
|
||||||
import TextRenderer from "../components/TextRenderer/TextRenderer";
|
import TextRenderer from "../components/TextRenderer/TextRenderer";
|
||||||
import HUD from "../components/MainScene/HUD";
|
import HUD from "../components/MainScene/HUD";
|
||||||
import YellowOrb from "../components/MainScene/YellowOrb";
|
import YellowOrb from "../components/MainScene/YellowOrb";
|
||||||
|
import MainSceneInitializer from "./Initializers/MainSceneInitializer";
|
||||||
|
|
||||||
const MainScene = () => {
|
const MainScene = () => {
|
||||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||||
|
@ -46,7 +47,8 @@ const MainScene = () => {
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<MainSceneIntro />
|
{/*<MainSceneIntro />*/}
|
||||||
|
{/*<MainSceneInitializer />*/}
|
||||||
<a.group
|
<a.group
|
||||||
rotation-x={mainGroupStateRot.mainGroupRotX}
|
rotation-x={mainGroupStateRot.mainGroupRotX}
|
||||||
position-y={mainGroupStatePos.mainGroupPosY}
|
position-y={mainGroupStatePos.mainGroupPosY}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
import { useMediaStore } from "../store";
|
import { useMediaStore } from "../store";
|
||||||
import TextRenderer from "../components/TextRenderer/TextRenderer";
|
import TextRenderer from "../components/TextRenderer/TextRenderer";
|
||||||
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
||||||
|
@ -16,11 +16,16 @@ const MediaScene = () => {
|
||||||
(state) => state.activeMediaComponent
|
(state) => state.activeMediaComponent
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.getElementsByTagName("canvas")[0].className =
|
||||||
|
"media-scene-background";
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<group position={[0.4, -0.3, 0]}>
|
<group position={[0.4, -0.3, 0]}>
|
||||||
<OrbitControls />
|
<OrbitControls />
|
||||||
<MediaSceneInitializer />
|
{/*<MediaSceneInitializer />*/}
|
||||||
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||||
<LeftSide activeMediaComponent={activeMediaComponent} />
|
<LeftSide activeMediaComponent={activeMediaComponent} />
|
||||||
<RightSide activeMediaComponent={activeMediaComponent} />
|
<RightSide activeMediaComponent={activeMediaComponent} />
|
||||||
|
|
44
src/store.ts
44
src/store.ts
|
@ -1,5 +1,5 @@
|
||||||
import create from "zustand";
|
import create from "zustand";
|
||||||
import { SpriteMaterial } from "three";
|
import { combine } from "zustand/middleware";
|
||||||
|
|
||||||
type SceneState = {
|
type SceneState = {
|
||||||
currentScene: string;
|
currentScene: string;
|
||||||
|
@ -102,6 +102,7 @@ type MediaWordState = {
|
||||||
words: string[];
|
words: string[];
|
||||||
setWords: (to: string[]) => void;
|
setWords: (to: string[]) => void;
|
||||||
addToWordPositionDataStructIdx: (val: number) => void;
|
addToWordPositionDataStructIdx: (val: number) => void;
|
||||||
|
resetWordPositionDataStructIdx: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type MediaState = {
|
type MediaState = {
|
||||||
|
@ -135,11 +136,27 @@ type TextRendererState = {
|
||||||
toggleGreenText: () => void;
|
toggleGreenText: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type ImageState = {
|
export type ImageSrc = {
|
||||||
img: any;
|
default: string;
|
||||||
setImg: (to: any) => void;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type ImageState = {
|
||||||
|
images: {
|
||||||
|
1: ImageSrc | undefined;
|
||||||
|
2: ImageSrc | undefined;
|
||||||
|
3: ImageSrc | undefined;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// type ImageState = {
|
||||||
|
// fstImg: ImageSrc | undefined;
|
||||||
|
// sndImg: ImageSrc | undefined;
|
||||||
|
// thirdImg: ImageSrc | undefined;
|
||||||
|
// setFstImg: (to: ImageSrc) => void;
|
||||||
|
// setSndImg: (to: ImageSrc) => void;
|
||||||
|
// setThirdImg: (to: ImageSrc) => void;
|
||||||
|
// };
|
||||||
|
//
|
||||||
export const useTextRendererStore = create<TextRendererState>((set) => ({
|
export const useTextRendererStore = create<TextRendererState>((set) => ({
|
||||||
// yellow text
|
// yellow text
|
||||||
yellowText: "Play",
|
yellowText: "Play",
|
||||||
|
@ -345,14 +362,23 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
|
||||||
: state.wordPositionDataStructIdx + val,
|
: state.wordPositionDataStructIdx + val,
|
||||||
})),
|
})),
|
||||||
setWords: (to) => set(() => ({ words: to })),
|
setWords: (to) => set(() => ({ words: to })),
|
||||||
|
resetWordPositionDataStructIdx: () =>
|
||||||
|
set(() => ({ wordPositionDataStructIdx: 0 })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useSceneStore = create<SceneState>((set) => ({
|
export const useSceneStore = create<SceneState>((set) => ({
|
||||||
currentScene: "media",
|
currentScene: "main",
|
||||||
setScene: (to) => set(() => ({ currentScene: to })),
|
setScene: (to) => set(() => ({ currentScene: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useImageStore = create<ImageState>((set) => ({
|
export const useImageStore = create(
|
||||||
img: 0,
|
combine(
|
||||||
setImg: (to) => set(() => ({ img: to })),
|
{
|
||||||
}));
|
images: { 1: undefined, 2: undefined, 3: undefined },
|
||||||
|
} as ImageState,
|
||||||
|
(set) => ({
|
||||||
|
setImages: (to: ImageSrc, idx: number) =>
|
||||||
|
set((state) => ({ images: { ...state.images, [idx]: to } })),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
|
@ -17,7 +17,8 @@
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"jsx": "react"
|
"jsx": "react",
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src"
|
"src"
|
||||||
|
|
Loading…
Reference in a new issue