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/react": "^9.5.0",
|
||||
"@testing-library/user-event": "^7.2.1",
|
||||
"@tweenjs/tween.js": "^18.6.0",
|
||||
"@types/jest": "^24.9.1",
|
||||
"@types/node": "^12.12.54",
|
||||
"@types/react": "^16.9.47",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
"drei": "^1.3.0",
|
||||
"eslint-plugin-react": "^7.19.0",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-player": "^2.6.2",
|
||||
"react-scripts": "^4.0.0",
|
||||
"react-three-fiber": "^4.2.20",
|
||||
"three": "^0.119.1",
|
||||
"three-plain-animator": "^1.0.2",
|
||||
"threejs-slice-geometry": "^0.2.2",
|
||||
"ts-node": "^9.0.0",
|
||||
"typescript": "^3.7.5",
|
||||
"zustand": "^3.1.3"
|
||||
},
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useEffect, useState, Suspense, useMemo } from "react";
|
||||
import MainScene from "./scenes/MainScene";
|
||||
import "./static/css/hub.css";
|
||||
import "./static/css/main.css";
|
||||
import "./static/css/main_scene.css";
|
||||
import "./static/css/page.css";
|
||||
import { Canvas } from "react-three-fiber";
|
||||
import Boot from "./components/Boot";
|
||||
import MediaPlayer from "./components/MediaScene/MediaPlayer";
|
||||
|
|
|
@ -143,7 +143,7 @@ const Boot = (props: IntroProps) => {
|
|||
|
||||
const handleUserKeyPress = useCallback(
|
||||
(event) => {
|
||||
const { _, keyCode } = event;
|
||||
const { keyCode } = event;
|
||||
|
||||
if (keyCode === 40 || keyCode === 38) {
|
||||
setAuthorizeActive(!authorizeActive);
|
||||
|
|
|
@ -21,6 +21,7 @@ const GrayPlanes = memo(() => {
|
|||
];
|
||||
|
||||
const grayPlaneRefs = grayPlanePoses.map((poses: number[]) =>
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
useRef<RefObject<THREE.Object3D>[]>(
|
||||
poses.map(() => createRef<THREE.Object3D>())
|
||||
)
|
||||
|
|
|
@ -90,6 +90,7 @@ const Starfield = memo(() => {
|
|||
"blue",
|
||||
"cyan",
|
||||
"gray",
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
].map((color: string) => useMemo(() => uniformConstructor(color), [color]));
|
||||
|
||||
const [
|
||||
|
@ -122,6 +123,7 @@ const Starfield = memo(() => {
|
|||
posesWhiteFromRight,
|
||||
posesWhiteFromLeft,
|
||||
].map((poses) =>
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
useRef<RefObject<THREE.Object3D>[]>(
|
||||
poses.map(() => createRef<THREE.Object3D>())
|
||||
)
|
||||
|
@ -144,6 +146,7 @@ const Starfield = memo(() => {
|
|||
introPosesCyan,
|
||||
introPosesWhite,
|
||||
].map((poses) =>
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
useRef<RefObject<THREE.Object3D>[]>(
|
||||
poses.map(() => createRef<THREE.Object3D>())
|
||||
)
|
||||
|
|
|
@ -67,7 +67,7 @@ const MainSceneIntro = memo(() => {
|
|||
|
||||
toggleHud();
|
||||
setTimeout(() => {
|
||||
document.getElementsByTagName("canvas")[0].className = "hub-background";
|
||||
document.getElementsByTagName("canvas")[0].className = "main-scene-background";
|
||||
}, 300);
|
||||
}, 3860);
|
||||
}, [
|
||||
|
|
|
@ -1,11 +1,57 @@
|
|||
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 [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 (
|
||||
<sprite position={[-0.2, 0.6, -4]} scale={[5, 3.75, 0]}>
|
||||
<spriteMaterial />
|
||||
</sprite>
|
||||
<a.sprite
|
||||
position={[-0.2, 0.6, -4]}
|
||||
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 test from "../../static/movie/LAIN01.XA[18].ogg";
|
||||
import { useMediaStore, useSceneStore } from "../../store";
|
||||
import t from "../../static/webvtt/test.vtt";
|
||||
|
||||
const MediaPlayer = () => {
|
||||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
|
@ -41,6 +42,7 @@ const MediaPlayer = () => {
|
|||
style={{ display: currentScene === "media" ? "block" : "none" }}
|
||||
>
|
||||
<source src={test} />
|
||||
<track src={t} kind="captions" default />
|
||||
</video>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useCallback, useEffect } from "react";
|
||||
import { useBlueOrbStore } from "../../../store";
|
||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { useBlueOrbStore } from "../../store";
|
||||
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||
import { StateManagerProps } from "./EventManager";
|
||||
|
||||
const BlueOrbHUDManager = (props: StateManagerProps) => {
|
||||
const setActiveBlueOrbHudId = useBlueOrbStore(
|
||||
|
@ -46,9 +46,9 @@ const BlueOrbHUDManager = (props: StateManagerProps) => {
|
|||
|
||||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const eventObject =
|
||||
blue_orb_directions[
|
||||
props.eventState as keyof typeof blue_orb_directions
|
||||
const eventObject: any =
|
||||
game_action_mappings[
|
||||
props.eventState as keyof typeof game_action_mappings
|
||||
];
|
||||
|
||||
if (eventObject) {
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useCallback, useEffect } from "react";
|
||||
import { useBlueOrbStore } from "../../../store";
|
||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { useBlueOrbStore } from "../../store";
|
||||
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||
import { StateManagerProps } from "./EventManager";
|
||||
|
||||
type SetActiveBlueOrb = (value: string) => void;
|
||||
type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void;
|
||||
|
@ -111,9 +111,9 @@ const BlueOrbManager = (props: StateManagerProps) => {
|
|||
|
||||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const eventObject =
|
||||
blue_orb_directions[
|
||||
props.eventState as keyof typeof blue_orb_directions
|
||||
const eventObject: any =
|
||||
game_action_mappings[
|
||||
props.eventState as keyof typeof game_action_mappings
|
||||
];
|
||||
|
||||
if (eventObject) {
|
|
@ -1,18 +1,17 @@
|
|||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import SiteManager from "./MainScene/SiteManager";
|
||||
import MiddleRingManager from "./MainScene/MiddleRingManager";
|
||||
import LainManager from "./MainScene/LainManager";
|
||||
import BlueOrbManager from "./MainScene/BlueOrbManager";
|
||||
import BlueOrbHUDManager from "./MainScene/BlueOrbHUDManager";
|
||||
import MainYellowTextManager from "./MainScene/MainYellowTextManager";
|
||||
import SiteManager from "./SiteManager";
|
||||
import MiddleRingManager from "./MiddleRingManager";
|
||||
import LainManager from "./LainManager";
|
||||
import BlueOrbManager from "./BlueOrbManager";
|
||||
import BlueOrbHUDManager from "./BlueOrbHUDManager";
|
||||
import { useBlueOrbStore, useMediaStore, useSceneStore } from "../../store";
|
||||
import GreenTextManager from "./MainScene/GreenTextManager";
|
||||
import MediaComponentManager from "./MediaScene/MediaComponentManager";
|
||||
import WordManager from "./MediaScene/WordManager";
|
||||
import MediaYellowTextManager from "./MediaScene/MediaYellowTextManager";
|
||||
import MediaElementManager from "./MediaScene/MediaElementManager";
|
||||
import GreenTextManager from "./GreenTextManager";
|
||||
import MediaComponentManager from "./MediaComponentManager";
|
||||
import MediaWordManager from "./MediaWordManager";
|
||||
import MediaElementManager from "./MediaElementManager";
|
||||
import SceneManager from "./SceneManager";
|
||||
import ImageManager from "./MediaScene/ImageManager";
|
||||
import YellowTextManager from "./YellowTextManager";
|
||||
import MediaImageManager from "./MediaImageManager";
|
||||
|
||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||
const keyCodeAssocs = {
|
||||
|
@ -79,17 +78,16 @@ const EventManager = () => {
|
|||
<>
|
||||
<BlueOrbManager eventState={eventState!} />
|
||||
<BlueOrbHUDManager eventState={eventState!} />
|
||||
<MainYellowTextManager eventState={eventState!} />
|
||||
<GreenTextManager eventState={eventState!} />
|
||||
<SiteManager eventState={eventState!} />
|
||||
<LainManager eventState={eventState!} />
|
||||
<MiddleRingManager eventState={eventState!} />
|
||||
<MediaComponentManager eventState={eventState!} />
|
||||
<WordManager eventState={eventState!} />
|
||||
<MediaYellowTextManager eventState={eventState!} />
|
||||
<MediaWordManager eventState={eventState!} />
|
||||
<MediaElementManager 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 { useTextRendererStore } from "../../../store";
|
||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||
import site_a from "../../../resources/site_a.json";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import blue_orb_huds from "../../../resources/blue_orb_huds.json";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { useTextRendererStore } from "../../store";
|
||||
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||
import site_a from "../../resources/site_a.json";
|
||||
import { StateManagerProps } from "./EventManager";
|
||||
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
||||
|
||||
const GreenTextManager = (props: StateManagerProps) => {
|
||||
const setGreenText = useTextRendererStore((state) => state.setGreenText);
|
||||
|
@ -20,7 +20,7 @@ const GreenTextManager = (props: StateManagerProps) => {
|
|||
const toggleAndSetGreenText = useCallback(
|
||||
(targetBlueOrbId: string, targetBlueOrbHudId: string, delay: number) => {
|
||||
const targetGreenText =
|
||||
site_a[targetBlueOrbId as keyof typeof site_a].green_text;
|
||||
site_a[targetBlueOrbId as keyof typeof site_a].title;
|
||||
|
||||
const targetGreenTextPosData =
|
||||
blue_orb_huds[targetBlueOrbHudId as keyof typeof blue_orb_huds]
|
||||
|
@ -73,9 +73,9 @@ const GreenTextManager = (props: StateManagerProps) => {
|
|||
|
||||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const eventObject =
|
||||
blue_orb_directions[
|
||||
props.eventState as keyof typeof blue_orb_directions
|
||||
const eventObject: any =
|
||||
game_action_mappings[
|
||||
props.eventState as keyof typeof game_action_mappings
|
||||
];
|
||||
|
||||
if (eventObject) {
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useCallback, useEffect } from "react";
|
||||
import { useLainStore } from "../../../store";
|
||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { useLainStore } from "../../store";
|
||||
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||
import { StateManagerProps } from "./EventManager";
|
||||
|
||||
const LainManager = (props: StateManagerProps) => {
|
||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||
|
@ -44,8 +44,8 @@ const LainManager = (props: StateManagerProps) => {
|
|||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const eventObject =
|
||||
blue_orb_directions[
|
||||
props.eventState as keyof typeof blue_orb_directions
|
||||
game_action_mappings[
|
||||
props.eventState as keyof typeof game_action_mappings
|
||||
];
|
||||
|
||||
if (eventObject) {
|
|
@ -1,6 +1,8 @@
|
|||
import React, { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useMediaStore } from "../../../store";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "./EventManager";
|
||||
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 setActiveMediaComponent = useMediaStore(
|
||||
|
@ -47,54 +49,60 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
|||
);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(event: string) => {
|
||||
(event: string, targetMediaComponent: string) => {
|
||||
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: {
|
||||
action: setActiveMediaComponent,
|
||||
value: "thirdWord"
|
||||
value: targetMediaComponent,
|
||||
},
|
||||
fstWord_down: {
|
||||
action: setActiveMediaComponent,
|
||||
value: "sndWord",
|
||||
value: targetMediaComponent,
|
||||
},
|
||||
sndWord_up: {
|
||||
action: setActiveMediaComponent,
|
||||
value: "fstWord",
|
||||
value: targetMediaComponent,
|
||||
},
|
||||
sndWord_down: {
|
||||
action: setActiveMediaComponent,
|
||||
value: "thirdWord",
|
||||
},
|
||||
sndWord_left: {
|
||||
action: switchToLeftSide,
|
||||
value: "sndWord"
|
||||
value: targetMediaComponent,
|
||||
},
|
||||
thirdWord_down: {
|
||||
action: setActiveMediaComponent,
|
||||
value: "fstWord",
|
||||
value: targetMediaComponent,
|
||||
},
|
||||
thirdWord_up: {
|
||||
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",
|
||||
},
|
||||
thirdWord_left: {
|
||||
switch_to_left_side_from_thirdWord: {
|
||||
action: switchToLeftSide,
|
||||
value: "thirdWord"
|
||||
}
|
||||
value: "thirdWord",
|
||||
},
|
||||
};
|
||||
|
||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||
|
@ -104,12 +112,25 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
|||
|
||||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const dispatchedObject = dispatchObject(props.eventState);
|
||||
const eventObject: any =
|
||||
game_action_mappings[
|
||||
props.eventState as keyof typeof blue_orb_directions
|
||||
];
|
||||
|
||||
if (eventObject) {
|
||||
const eventAction = eventObject.action;
|
||||
const targetMediaComponent = eventObject.target_media_component;
|
||||
|
||||
const dispatchedObject = dispatchObject(
|
||||
eventAction,
|
||||
targetMediaComponent
|
||||
);
|
||||
|
||||
if (dispatchedObject) {
|
||||
dispatchedObject.action(dispatchedObject.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [props.eventState, dispatchObject]);
|
||||
|
||||
return null;
|
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 { StateManagerProps } from "../EventManager";
|
||||
import { useMediaWordStore } from "../../../store";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "./EventManager";
|
||||
import { useMediaWordStore } from "../../store";
|
||||
|
||||
const WordManager = (props: StateManagerProps) => {
|
||||
const MediaWordManager = (props: StateManagerProps) => {
|
||||
const addToWordPositionDataStructIdx = useMediaWordStore(
|
||||
(state) => state.addToWordPositionDataStructIdx
|
||||
);
|
||||
|
@ -53,4 +53,4 @@ const WordManager = (props: StateManagerProps) => {
|
|||
return null;
|
||||
};
|
||||
|
||||
export default WordManager;
|
||||
export default MediaWordManager;
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useCallback, useEffect, useMemo } from "react";
|
||||
import { useMiddleRingStore } from "../../../store";
|
||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||
import { useCallback, useEffect, useMemo } from "react";
|
||||
import { useMiddleRingStore } from "../../store";
|
||||
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||
|
||||
const MiddleRingManager = (props: any) => {
|
||||
const setMiddleRingWobbleStrength = useMiddleRingStore(
|
||||
|
@ -196,8 +196,8 @@ const MiddleRingManager = (props: any) => {
|
|||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const eventObject =
|
||||
blue_orb_directions[
|
||||
props.eventState as keyof typeof blue_orb_directions
|
||||
game_action_mappings[
|
||||
props.eventState as keyof typeof game_action_mappings
|
||||
];
|
||||
|
||||
if (eventObject) {
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useCallback, useEffect } from "react";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "./EventManager";
|
||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
||||
import { useSceneStore } from "../../store";
|
||||
|
@ -6,16 +6,24 @@ import { useSceneStore } from "../../store";
|
|||
const SceneManager = (props: StateManagerProps) => {
|
||||
const setScene = useSceneStore((state) => state.setScene);
|
||||
|
||||
const dispatchObject = useCallback((event: string) => {
|
||||
const dispatchObject = useCallback(
|
||||
(event: string) => {
|
||||
const dispatcherObjects = {
|
||||
select_blue_orb: {
|
||||
action: setScene,
|
||||
value: "media",
|
||||
delay: 3904.704,
|
||||
},
|
||||
exit_select: {
|
||||
action: setScene,
|
||||
value: "main",
|
||||
delay: 0,
|
||||
},
|
||||
};
|
||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||
}, [setScene]);
|
||||
},
|
||||
[setScene]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
|
@ -24,9 +32,19 @@ const SceneManager = (props: StateManagerProps) => {
|
|||
props.eventState as keyof typeof blue_orb_directions
|
||||
];
|
||||
|
||||
let dispatchedObject: {
|
||||
action: (to: string) => void;
|
||||
value: string;
|
||||
delay: number;
|
||||
};
|
||||
|
||||
if (eventObject) {
|
||||
const eventAction = eventObject.action;
|
||||
const dispatchedObject = dispatchObject(eventAction);
|
||||
dispatchedObject = dispatchObject(eventAction);
|
||||
} else {
|
||||
const eventAction = props.eventState;
|
||||
dispatchedObject = dispatchObject(eventAction);
|
||||
}
|
||||
|
||||
if (dispatchedObject) {
|
||||
setTimeout(() => {
|
||||
|
@ -34,7 +52,6 @@ const SceneManager = (props: StateManagerProps) => {
|
|||
}, dispatchedObject.delay);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [props.eventState, dispatchObject]);
|
||||
|
||||
return null;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useEffect, useMemo } from "react";
|
||||
import { useSiteStore } from "../../../store";
|
||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { useSiteStore } from "../../store";
|
||||
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||
import { StateManagerProps } from "./EventManager";
|
||||
|
||||
const SiteManager = (props: StateManagerProps) => {
|
||||
const incrementSiteRotY = useSiteStore((state) => state.incrementSiteRotY);
|
||||
|
@ -29,8 +29,8 @@ const SiteManager = (props: StateManagerProps) => {
|
|||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const eventObject =
|
||||
blue_orb_directions[
|
||||
props.eventState as keyof typeof blue_orb_directions
|
||||
game_action_mappings[
|
||||
props.eventState as keyof typeof game_action_mappings
|
||||
];
|
||||
|
||||
if (eventObject) {
|
|
@ -1,8 +1,8 @@
|
|||
import React, { useCallback, useEffect } from "react";
|
||||
import blue_orb_huds from "../../../resources/blue_orb_huds.json";
|
||||
import site_a from "../../../resources/site_a.json";
|
||||
import { useTextRendererStore } from "../../../store";
|
||||
import blue_orb_directions from "../../../resources/blue_orb_directions.json";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
||||
import site_a from "../../resources/site_a.json";
|
||||
import { useTextRendererStore } from "../../store";
|
||||
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||
|
||||
type AnimateYellowTextWithMove = (
|
||||
yellowLetterPosYOffset: number,
|
||||
|
@ -15,8 +15,16 @@ type AnimateYellowTextWithoutMove = (
|
|||
targetBlueOrbId: string
|
||||
) => void;
|
||||
|
||||
type AnimateMediaYellowText = (
|
||||
targetMediaText: string,
|
||||
targetMediaTextPos: number[]
|
||||
) => void;
|
||||
|
||||
type YellowTextDispatchData = {
|
||||
action: AnimateYellowTextWithMove | AnimateYellowTextWithoutMove;
|
||||
action:
|
||||
| AnimateYellowTextWithMove
|
||||
| AnimateYellowTextWithoutMove
|
||||
| AnimateMediaYellowText;
|
||||
value: any;
|
||||
};
|
||||
|
||||
|
@ -26,9 +34,11 @@ type YellowTextDispatcher = {
|
|||
move_left: YellowTextDispatchData;
|
||||
move_right: 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 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(
|
||||
(
|
||||
event: string,
|
||||
|
@ -152,18 +192,30 @@ const MainYellowTextManager = (props: any) => {
|
|||
action: animateYellowTextWithoutMove,
|
||||
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];
|
||||
},
|
||||
[animateYellowTextWithMove, animateYellowTextWithoutMove]
|
||||
[
|
||||
animateMediaYellowText,
|
||||
animateYellowTextWithMove,
|
||||
animateYellowTextWithoutMove,
|
||||
]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const eventObject =
|
||||
blue_orb_directions[
|
||||
props.eventState as keyof typeof blue_orb_directions
|
||||
const eventObject: any =
|
||||
game_action_mappings[
|
||||
props.eventState as keyof typeof game_action_mappings
|
||||
];
|
||||
|
||||
if (eventObject) {
|
||||
|
@ -181,7 +233,6 @@ const MainYellowTextManager = (props: any) => {
|
|||
if (dispatchedObject) {
|
||||
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
|
||||
}
|
||||
} else {
|
||||
}
|
||||
}
|
||||
}, [
|
||||
|
@ -196,4 +247,4 @@ const MainYellowTextManager = (props: any) => {
|
|||
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,
|
||||
3: 0.648,
|
||||
4: 0.47,
|
||||
};
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const letterData =
|
||||
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 * as THREE from "three";
|
||||
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.
|
||||
const lineYOffsets = {
|
||||
const lineYOffsets = useMemo(
|
||||
() => ({
|
||||
1: 0.355,
|
||||
2: 0.297,
|
||||
3: 0.238,
|
||||
4: 0.18,
|
||||
5: 1,
|
||||
};
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const letterData =
|
||||
medium_font_json.glyphs[
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
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 BigLetter from "./BigLetter";
|
||||
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" {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module "*.vtt" {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module "*.mp3" {
|
||||
const src: string;
|
||||
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 {
|
||||
ImageSrc,
|
||||
useBlueOrbStore,
|
||||
useImageStore,
|
||||
useMediaStore,
|
||||
useMediaWordStore,
|
||||
useTextRendererStore,
|
||||
} from "../../store";
|
||||
import site_a from "../../resources/site_a.json";
|
||||
import string_table from "../../resources/string_table.json";
|
||||
import image_table from "../../resources/image_table.json";
|
||||
|
||||
const MediaSceneInitializer = memo(() => {
|
||||
const lastActiveLeftSideComponent = useMediaStore(
|
||||
(state) => state.lastActiveLeftSideElement
|
||||
);
|
||||
const setActiveMediaComponent = useMediaStore(
|
||||
(state) => state.setActiveMediaComponent
|
||||
);
|
||||
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
||||
const setYellowTextPosX = useTextRendererStore(
|
||||
(state) => state.setYellowTextPosX
|
||||
|
@ -15,7 +25,6 @@ const MediaSceneInitializer = memo(() => {
|
|||
const setYellowTextPosY = useTextRendererStore(
|
||||
(state) => state.setYellowTextPosY
|
||||
);
|
||||
const currentBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
|
||||
const setGreenText = useTextRendererStore((state) => state.setGreenText);
|
||||
const setGreenTextPosY = useTextRendererStore(
|
||||
(state) => state.setGreenTextPosY
|
||||
|
@ -25,28 +34,44 @@ const MediaSceneInitializer = memo(() => {
|
|||
);
|
||||
const setWords = useMediaWordStore((state) => state.setWords);
|
||||
|
||||
const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
|
||||
|
||||
const blueOrbData = useMemo(
|
||||
() => site_a[currentBlueOrb as keyof typeof site_a],
|
||||
[currentBlueOrb]
|
||||
() => site_a[activeBlueOrb as keyof typeof site_a],
|
||||
[activeBlueOrb]
|
||||
);
|
||||
|
||||
const resetWordPositionDataStructIdx = useMediaWordStore(
|
||||
(state) => state.resetWordPositionDataStructIdx
|
||||
);
|
||||
const setImages = useImageStore((state) => state.setImages);
|
||||
|
||||
useEffect(() => {
|
||||
setActiveMediaComponent(lastActiveLeftSideComponent);
|
||||
setGreenText(blueOrbData.node_name);
|
||||
setYellowText("Play");
|
||||
setYellowTextPosX(-0.8);
|
||||
setYellowTextPosY(0.05);
|
||||
setGreenTextPosX({ initial: 0.02, final: 0.02 });
|
||||
setGreenTextPosY(0.675);
|
||||
resetWordPositionDataStructIdx();
|
||||
setWords([
|
||||
string_table[blueOrbData.words[1] 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],
|
||||
]);
|
||||
|
||||
|
||||
}, [
|
||||
activeBlueOrb,
|
||||
blueOrbData,
|
||||
lastActiveLeftSideComponent,
|
||||
resetWordPositionDataStructIdx,
|
||||
setActiveMediaComponent,
|
||||
setGreenText,
|
||||
setGreenTextPosX,
|
||||
setGreenTextPosY,
|
||||
setImages,
|
||||
setWords,
|
||||
setYellowText,
|
||||
setYellowTextPosX,
|
||||
|
|
|
@ -13,6 +13,7 @@ import { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
|
|||
import TextRenderer from "../components/TextRenderer/TextRenderer";
|
||||
import HUD from "../components/MainScene/HUD";
|
||||
import YellowOrb from "../components/MainScene/YellowOrb";
|
||||
import MainSceneInitializer from "./Initializers/MainSceneInitializer";
|
||||
|
||||
const MainScene = () => {
|
||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||
|
@ -46,7 +47,8 @@ const MainScene = () => {
|
|||
return (
|
||||
<perspectiveCamera position-z={3}>
|
||||
<Suspense fallback={null}>
|
||||
<MainSceneIntro />
|
||||
{/*<MainSceneIntro />*/}
|
||||
{/*<MainSceneInitializer />*/}
|
||||
<a.group
|
||||
rotation-x={mainGroupStateRot.mainGroupRotX}
|
||||
position-y={mainGroupStatePos.mainGroupPosY}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import { useMediaStore } from "../store";
|
||||
import TextRenderer from "../components/TextRenderer/TextRenderer";
|
||||
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
||||
|
@ -16,11 +16,16 @@ const MediaScene = () => {
|
|||
(state) => state.activeMediaComponent
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.getElementsByTagName("canvas")[0].className =
|
||||
"media-scene-background";
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<perspectiveCamera position-z={3}>
|
||||
<group position={[0.4, -0.3, 0]}>
|
||||
<OrbitControls />
|
||||
<MediaSceneInitializer />
|
||||
{/*<MediaSceneInitializer />*/}
|
||||
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||
<LeftSide activeMediaComponent={activeMediaComponent} />
|
||||
<RightSide activeMediaComponent={activeMediaComponent} />
|
||||
|
|
44
src/store.ts
44
src/store.ts
|
@ -1,5 +1,5 @@
|
|||
import create from "zustand";
|
||||
import { SpriteMaterial } from "three";
|
||||
import { combine } from "zustand/middleware";
|
||||
|
||||
type SceneState = {
|
||||
currentScene: string;
|
||||
|
@ -102,6 +102,7 @@ type MediaWordState = {
|
|||
words: string[];
|
||||
setWords: (to: string[]) => void;
|
||||
addToWordPositionDataStructIdx: (val: number) => void;
|
||||
resetWordPositionDataStructIdx: () => void;
|
||||
};
|
||||
|
||||
type MediaState = {
|
||||
|
@ -135,11 +136,27 @@ type TextRendererState = {
|
|||
toggleGreenText: () => void;
|
||||
};
|
||||
|
||||
type ImageState = {
|
||||
img: any;
|
||||
setImg: (to: any) => void;
|
||||
export type ImageSrc = {
|
||||
default: string;
|
||||
};
|
||||
|
||||
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) => ({
|
||||
// yellow text
|
||||
yellowText: "Play",
|
||||
|
@ -345,14 +362,23 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
|
|||
: state.wordPositionDataStructIdx + val,
|
||||
})),
|
||||
setWords: (to) => set(() => ({ words: to })),
|
||||
resetWordPositionDataStructIdx: () =>
|
||||
set(() => ({ wordPositionDataStructIdx: 0 })),
|
||||
}));
|
||||
|
||||
export const useSceneStore = create<SceneState>((set) => ({
|
||||
currentScene: "media",
|
||||
currentScene: "main",
|
||||
setScene: (to) => set(() => ({ currentScene: to })),
|
||||
}));
|
||||
|
||||
export const useImageStore = create<ImageState>((set) => ({
|
||||
img: 0,
|
||||
setImg: (to) => set(() => ({ img: to })),
|
||||
}));
|
||||
export const useImageStore = create(
|
||||
combine(
|
||||
{
|
||||
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,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react"
|
||||
"jsx": "react",
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
|
|
Loading…
Reference in a new issue