mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
adding media interaction scene, heavily wip
This commit is contained in:
parent
4f86d2dbe0
commit
b036ce9839
28 changed files with 581 additions and 132 deletions
37
package-lock.json
generated
37
package-lock.json
generated
|
@ -4378,6 +4378,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
|
||||||
"integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
|
"integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
|
||||||
},
|
},
|
||||||
|
"deepmerge": {
|
||||||
|
"version": "4.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
|
||||||
|
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
|
||||||
|
},
|
||||||
"default-gateway": {
|
"default-gateway": {
|
||||||
"version": "4.2.0",
|
"version": "4.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
|
||||||
|
@ -7931,6 +7936,11 @@
|
||||||
"strip-bom": "^3.0.0"
|
"strip-bom": "^3.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"load-script": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
|
||||||
|
"integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
|
||||||
|
},
|
||||||
"loader-fs-cache": {
|
"loader-fs-cache": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
|
||||||
|
@ -8171,6 +8181,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||||
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
|
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
|
||||||
},
|
},
|
||||||
|
"memoize-one": {
|
||||||
|
"version": "5.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
|
||||||
|
"integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
|
||||||
|
},
|
||||||
"memory-fs": {
|
"memory-fs": {
|
||||||
"version": "0.4.1",
|
"version": "0.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
|
||||||
|
@ -10751,6 +10766,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
|
||||||
"integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA=="
|
"integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA=="
|
||||||
},
|
},
|
||||||
|
"react-fast-compare": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
|
||||||
|
},
|
||||||
"react-is": {
|
"react-is": {
|
||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
|
@ -10766,6 +10786,18 @@
|
||||||
"resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
|
||||||
"integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ=="
|
"integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ=="
|
||||||
},
|
},
|
||||||
|
"react-player": {
|
||||||
|
"version": "2.6.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-player/-/react-player-2.6.2.tgz",
|
||||||
|
"integrity": "sha512-Wi9DynNSVgddKxac5OzsH0Upk6VRYssvLLGgCRw6vsjzqMX6S5N26WDRNYnLaHykxFNtpPSDc53fXDe52hMaCg==",
|
||||||
|
"requires": {
|
||||||
|
"deepmerge": "^4.0.0",
|
||||||
|
"load-script": "^1.0.0",
|
||||||
|
"memoize-one": "^5.1.1",
|
||||||
|
"prop-types": "^15.7.2",
|
||||||
|
"react-fast-compare": "^3.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-promise-suspense": {
|
"react-promise-suspense": {
|
||||||
"version": "0.3.3",
|
"version": "0.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/react-promise-suspense/-/react-promise-suspense-0.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-promise-suspense/-/react-promise-suspense-0.3.3.tgz",
|
||||||
|
@ -12693,6 +12725,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"threejs-slice-geometry": {
|
||||||
|
"version": "0.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/threejs-slice-geometry/-/threejs-slice-geometry-0.2.2.tgz",
|
||||||
|
"integrity": "sha1-NqfRxXvCOBv64eY9Jmjsf2Q2qrE="
|
||||||
|
},
|
||||||
"throat": {
|
"throat": {
|
||||||
"version": "4.1.0",
|
"version": "4.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
|
||||||
|
|
|
@ -15,10 +15,12 @@
|
||||||
"drei": "^1.3.0",
|
"drei": "^1.3.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": "3.4.3",
|
"react-scripts": "3.4.3",
|
||||||
"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",
|
"ts-node": "^9.0.0",
|
||||||
"typescript": "^3.7.5",
|
"typescript": "^3.7.5",
|
||||||
"zustand": "^3.1.3"
|
"zustand": "^3.1.3"
|
||||||
|
|
14
src/App.tsx
14
src/App.tsx
|
@ -1,9 +1,12 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState, Suspense } from "react";
|
||||||
import MainScene from "./components/MainScene";
|
import MainScene from "./components/MainScene";
|
||||||
import "./static/css/hub.css";
|
import "./static/css/hub.css";
|
||||||
import "./static/css/main.css";
|
import "./static/css/main.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/MediaPlayer";
|
||||||
|
import MediaOverlay from "./components/MediaOverlay";
|
||||||
|
import EventStateManager from "./components/StateManagers/EventStateManager";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [moveToGame, setMoveToGame] = useState(false);
|
const [moveToGame, setMoveToGame] = useState(false);
|
||||||
|
@ -20,9 +23,16 @@ const App = () => {
|
||||||
<div id="game-root" className="game">
|
<div id="game-root" className="game">
|
||||||
{/*<Boot setMoveToGame={setMoveToGame} />*/}
|
{/*<Boot setMoveToGame={setMoveToGame} />*/}
|
||||||
{/* {moveToGame ? <MainScene /> : <Boot setMoveToGame={setMoveToGame} />} */}
|
{/* {moveToGame ? <MainScene /> : <Boot setMoveToGame={setMoveToGame} />} */}
|
||||||
|
<span className="canvas">
|
||||||
|
<EventStateManager />
|
||||||
<Canvas concurrent>
|
<Canvas concurrent>
|
||||||
<MainScene />
|
<Suspense fallback={null}>
|
||||||
|
<MediaOverlay />
|
||||||
|
</Suspense>
|
||||||
|
{/*<MainScene />*/}
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
</span>
|
||||||
|
<MediaPlayer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,20 +2,20 @@ import React, { memo, useEffect, useMemo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import { useSpring, a } from "@react-spring/three";
|
import { useSpring, a } from "@react-spring/three";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import Cou from "../static/sprites/Cou.png";
|
import Cou from "../static/sprite/Cou.png";
|
||||||
import CouActive from "../static/sprites/Cou_active.png";
|
import CouActive from "../static/sprite/Cou_active.png";
|
||||||
import Dc from "../static/sprites/Dc.png";
|
import Dc from "../static/sprite/Dc.png";
|
||||||
import DcActive from "../static/sprites/Dc_active.png";
|
import DcActive from "../static/sprite/Dc_active.png";
|
||||||
import SSkn from "../static/sprites/SSkn.png";
|
import SSkn from "../static/sprite/SSkn.png";
|
||||||
import SSKnActive from "../static/sprites/SSkn_active.png";
|
import SSKnActive from "../static/sprite/SSkn_active.png";
|
||||||
import Tda from "../static/sprites/Tda.png";
|
import Tda from "../static/sprite/Tda.png";
|
||||||
import TdaActive from "../static/sprites/Tda_active.png";
|
import TdaActive from "../static/sprite/Tda_active.png";
|
||||||
import Dia from "../static/sprites/Dia.png";
|
import Dia from "../static/sprite/Dia.png";
|
||||||
import DiaActive from "../static/sprites/Dia_active.png";
|
import DiaActive from "../static/sprite/Dia_active.png";
|
||||||
import Lda from "../static/sprites/Lda.png";
|
import Lda from "../static/sprite/Lda.png";
|
||||||
import LdaActive from "../static/sprites/Lda_active.png";
|
import LdaActive from "../static/sprite/Lda_active.png";
|
||||||
import MULTI from "../static/sprites/MULTI.png";
|
import MULTI from "../static/sprite/MULTI.png";
|
||||||
import MULTIActive from "../static/sprites/MULTI_active.png";
|
import MULTIActive from "../static/sprite/MULTI_active.png";
|
||||||
import level_y_values from "../resources/level_y_values.json";
|
import level_y_values from "../resources/level_y_values.json";
|
||||||
import { useBlueOrbStore } from "../store";
|
import { useBlueOrbStore } from "../store";
|
||||||
|
|
||||||
|
@ -28,7 +28,7 @@ type BlueOrbContructorProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
||||||
// the game only has a couple of sprites that it displays in the hub
|
// the game only has a couple of sprite that it displays in the hub
|
||||||
// dynamically importnig them would be worse for performance,
|
// dynamically importnig them would be worse for performance,
|
||||||
// so we import all of them here and then use this function to
|
// so we import all of them here and then use this function to
|
||||||
// associate a sprite with the path
|
// associate a sprite with the path
|
||||||
|
@ -144,6 +144,10 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
||||||
.isActiveBlueOrbInteractedWith
|
.isActiveBlueOrbInteractedWith
|
||||||
? state.activeBlueOrbPosX
|
? state.activeBlueOrbPosX
|
||||||
: props.position[0],
|
: props.position[0],
|
||||||
|
activeBlueOrbPosY: useBlueOrbStore.getState()
|
||||||
|
.isActiveBlueOrbInteractedWith
|
||||||
|
? level_y_values[props.level as keyof typeof level_y_values]
|
||||||
|
: props.position[1],
|
||||||
activeBlueOrbPosZ: useBlueOrbStore.getState()
|
activeBlueOrbPosZ: useBlueOrbStore.getState()
|
||||||
.isActiveBlueOrbInteractedWith
|
.isActiveBlueOrbInteractedWith
|
||||||
? state.activeBlueOrbPosZ
|
? state.activeBlueOrbPosZ
|
||||||
|
@ -153,7 +157,13 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
||||||
? state.activeBlueOrbRotZ
|
? state.activeBlueOrbRotZ
|
||||||
: 0,
|
: 0,
|
||||||
}));
|
}));
|
||||||
}, [activeBlueOrbPosX, activeBlueOrbPosZ, activeBlueOrbRotZ, set]);
|
}, [
|
||||||
|
activeBlueOrbPosX,
|
||||||
|
activeBlueOrbPosZ,
|
||||||
|
activeBlueOrbRotZ,
|
||||||
|
props.position,
|
||||||
|
set,
|
||||||
|
]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group
|
<group
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
import React, { useEffect, useState, useCallback } from "react";
|
import React, { useEffect, useState, useCallback } from "react";
|
||||||
|
|
||||||
import networkLogo from "../static/img/network_os_logo.png";
|
import networkLogo from "../static/sprite/network_os_logo.png";
|
||||||
import introBox from "../static/img/load_screen_box.png";
|
import introBox from "../static/sprite/gray_box.png";
|
||||||
import introTextBetween from "../static/img/intro_text_thing.png";
|
import introTextBetween from "../static/sprite/intro_text_thing.png";
|
||||||
import introTextArrow from "../static/img/intro_text_arrow.png";
|
import introTextArrow from "../static/sprite/intro_text_arrow.png";
|
||||||
import mask from "../static/img/load_screen_mask.png";
|
import mask from "../static/sprite/load_screen_mask.png";
|
||||||
import loop from "../static/img/loop.webp";
|
import loop from "../static/sprite/loop.webp";
|
||||||
|
|
||||||
import "../static/css/intro.css";
|
import "../static/css/intro.css";
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { memo } from "react";
|
import React, { memo } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import lofTexture from "../static/sprites/lof.png";
|
import lofTexture from "../static/sprite/lof.png";
|
||||||
import holeTexture from "../static/sprites/hole.png";
|
import holeTexture from "../static/sprite/hole.png";
|
||||||
import lifeTexture from "../static/sprites/life.png";
|
import lifeTexture from "../static/sprite/life.png";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
|
|
||||||
type GrayRingProps = {
|
type GrayRingProps = {
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
import React, { memo } from "react";
|
import React, { memo } from "react";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import bigHud from "../static/sprites/big_hud.png";
|
import bigHud from "../static/sprite/big_hud.png";
|
||||||
import bigHudMirrored from "../static/sprites/big_hud_mirrored.png";
|
import bigHudMirrored from "../static/sprite/big_hud_mirrored.png";
|
||||||
import longHud from "../static/sprites/long_hud.png";
|
import longHud from "../static/sprite/long_hud.png";
|
||||||
import longHudMirrored from "../static/sprites/long_hud_mirrored.png";
|
import longHudMirrored from "../static/sprite/long_hud_mirrored.png";
|
||||||
import boringHud from "../static/sprites/long_hud_boring.png";
|
import boringHud from "../static/sprite/long_hud_boring.png";
|
||||||
import boringHudMirrored from "../static/sprites/long_hud_boring_mirrored.png";
|
import boringHudMirrored from "../static/sprite/long_hud_boring_mirrored.png";
|
||||||
import { a, useSpring, useTrail } from "@react-spring/three";
|
import { a, useSpring, useTrail } from "@react-spring/three";
|
||||||
import { useBlueOrbStore, useSiteStore } from "../store";
|
import { useBlueOrbStore, useSiteStore } from "../store";
|
||||||
import blue_orb_huds from "../resources/blue_orb_huds.json";
|
import blue_orb_huds from "../resources/blue_orb_huds.json";
|
||||||
|
|
|
@ -2,13 +2,13 @@ import React, { Suspense, useState } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
||||||
import moveDownSpriteSheet from "../static/sprites/jump_down.png";
|
import moveDownSpriteSheet from "../static/sprite/jump_down.png";
|
||||||
import moveUpSpriteSheet from "../static/sprites/jump_up.png";
|
import moveUpSpriteSheet from "../static/sprite/jump_up.png";
|
||||||
import moveLeftSpriteSheet from "../static/sprites/move_left.png";
|
import moveLeftSpriteSheet from "../static/sprite/move_left.png";
|
||||||
import moveRightSpriteSheet from "../static/sprites/move_right.png";
|
import moveRightSpriteSheet from "../static/sprite/move_right.png";
|
||||||
import standingSpriteSheet from "../static/sprites/standing.png";
|
import standingSpriteSheet from "../static/sprite/standing.png";
|
||||||
import introSpriteSheet from "../static/sprites/intro.png";
|
import introSpriteSheet from "../static/sprite/intro.png";
|
||||||
import throwBlueOrbSpriteSheet from "../static/sprites/throw_blue_orb.png";
|
import throwBlueOrbSpriteSheet from "../static/sprite/throw_blue_orb.png";
|
||||||
import { useLainStore } from "../store";
|
import { useLainStore } from "../store";
|
||||||
|
|
||||||
type LainConstructorProps = {
|
type LainConstructorProps = {
|
||||||
|
|
|
@ -15,9 +15,7 @@ import { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
|
||||||
|
|
||||||
const MainScene = () => {
|
const MainScene = () => {
|
||||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||||
const setActiveBlueOrb = useBlueOrbStore(
|
const setActiveBlueOrb = useBlueOrbStore((state) => state.setActiveBlueOrbId);
|
||||||
(state) => state.setActiveBlueOrbId
|
|
||||||
);
|
|
||||||
const setActiveBlueOrbHudId = useBlueOrbStore(
|
const setActiveBlueOrbHudId = useBlueOrbStore(
|
||||||
(state) => state.setActiveBlueOrbHudId
|
(state) => state.setActiveBlueOrbHudId
|
||||||
);
|
);
|
||||||
|
@ -53,7 +51,6 @@ const MainScene = () => {
|
||||||
position-y={mainGroupStatePos.mainGroupPosY}
|
position-y={mainGroupStatePos.mainGroupPosY}
|
||||||
position-z={mainGroupStatePos.mainGroupPosZ}
|
position-z={mainGroupStatePos.mainGroupPosZ}
|
||||||
>
|
>
|
||||||
<EventStateManager />
|
|
||||||
<Preloader />
|
<Preloader />
|
||||||
<Site />
|
<Site />
|
||||||
<OrthoCamera />
|
<OrthoCamera />
|
||||||
|
|
272
src/components/MediaOverlay.tsx
Normal file
272
src/components/MediaOverlay.tsx
Normal file
|
@ -0,0 +1,272 @@
|
||||||
|
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
|
import grayTextureFile from "../static/sprite/gray_box.png";
|
||||||
|
import darkGrayTextureFile from "../static/sprite/dark_gray_box.png";
|
||||||
|
import mediaOverlayHud from "../static/sprite/media_hud.png";
|
||||||
|
|
||||||
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
|
import * as THREE from "three";
|
||||||
|
import { OrbitControls } from "drei";
|
||||||
|
import { a, useTrail } from "@react-spring/three";
|
||||||
|
import { useMediaStore } from "../store";
|
||||||
|
import { BigLetter, MediumLetter } from "./TextRenderer";
|
||||||
|
|
||||||
|
type ShapeProps = {
|
||||||
|
position: number[];
|
||||||
|
selectable?: boolean;
|
||||||
|
active?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const GrayCube = (props: ShapeProps) => {
|
||||||
|
const grayTex = useLoader(THREE.TextureLoader, grayTextureFile);
|
||||||
|
const darkGrayTex = useLoader(THREE.TextureLoader, darkGrayTextureFile);
|
||||||
|
|
||||||
|
const cubeRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
|
useFrame(() => {
|
||||||
|
if (props.selectable && props.active) {
|
||||||
|
cubeRef.current!.rotation.y -= 0.015;
|
||||||
|
} else {
|
||||||
|
cubeRef.current!.rotation.y = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<mesh
|
||||||
|
scale={[0.45, 0.5, 0.45]}
|
||||||
|
position={props.position as [number, number, number]}
|
||||||
|
rotation-y={0.15}
|
||||||
|
rotation-z={-0.02}
|
||||||
|
ref={cubeRef}
|
||||||
|
>
|
||||||
|
<boxBufferGeometry args={[1, 1, 1]} attach="geometry" />
|
||||||
|
<meshLambertMaterial
|
||||||
|
attach="material"
|
||||||
|
map={props.active ? grayTex : darkGrayTex}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const GrayTriangularPrism = (props: ShapeProps) => {
|
||||||
|
const grayTex = useLoader(THREE.TextureLoader, grayTextureFile);
|
||||||
|
const darkGrayTex = useLoader(THREE.TextureLoader, darkGrayTextureFile);
|
||||||
|
|
||||||
|
const prismRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
|
const verts = new Float32Array([
|
||||||
|
// Top
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
|
||||||
|
// Bottom
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
|
||||||
|
// Sides
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
|
||||||
|
// Hypotenuse
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
1,
|
||||||
|
]);
|
||||||
|
|
||||||
|
useFrame(() => {
|
||||||
|
if (props.selectable && props.active) {
|
||||||
|
prismRef.current!.rotation.y -= 0.015;
|
||||||
|
} else {
|
||||||
|
prismRef.current!.rotation.y = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<mesh
|
||||||
|
scale={[0.45, 0.5, 0.45]}
|
||||||
|
position={props.position as [number, number, number]}
|
||||||
|
rotation-y={0.15}
|
||||||
|
rotation-z={-0.02}
|
||||||
|
ref={prismRef}
|
||||||
|
>
|
||||||
|
<boxBufferGeometry args={[1, 1, 1]} attach="geometry" />
|
||||||
|
<meshLambertMaterial
|
||||||
|
attach="material"
|
||||||
|
map={props.active ? grayTex : darkGrayTex}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
|
||||||
|
// <mesh
|
||||||
|
// scale={[0.45, 0.5, 0.45]}
|
||||||
|
// position={props.position as [number, number, number]}
|
||||||
|
// rotation-y={0.15}
|
||||||
|
// rotation-x={-1.45}
|
||||||
|
// ref={prismRef}
|
||||||
|
// >
|
||||||
|
// <bufferGeometry attach="geometry">
|
||||||
|
// <bufferAttribute
|
||||||
|
// array={verts}
|
||||||
|
// itemSize={3}
|
||||||
|
// count={verts.length / 3}
|
||||||
|
// attachObject={["attributes", "position"]}
|
||||||
|
// />
|
||||||
|
// </bufferGeometry>
|
||||||
|
// <meshBasicMaterial
|
||||||
|
// side={THREE.DoubleSide}
|
||||||
|
// attach="material"
|
||||||
|
// map={props.active ? grayTex : darkGrayTex}
|
||||||
|
// />
|
||||||
|
// </mesh>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const MediaOverlay = () => {
|
||||||
|
const [grayCubesActive, setGrayCubesActive] = useState(false);
|
||||||
|
const mediaHudOverlayTex = useLoader(THREE.TextureLoader, mediaOverlayHud);
|
||||||
|
|
||||||
|
const activeLeftColElement = useMediaStore(
|
||||||
|
(state) => state.activeLeftColElement
|
||||||
|
);
|
||||||
|
|
||||||
|
const letterTrailText = activeLeftColElement.text;
|
||||||
|
|
||||||
|
const letterTrail = useTrail(letterTrailText.length, {
|
||||||
|
yellowLetterPosX: activeLeftColElement.position[0],
|
||||||
|
yellowLetterPosY: activeLeftColElement.position[1],
|
||||||
|
config: { duration: 280 },
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<OrbitControls />
|
||||||
|
<sprite scale={[5, 1, 1]} position={[2.65, 2.5, 0]}>
|
||||||
|
<spriteMaterial attach="material" map={mediaHudOverlayTex} />
|
||||||
|
</sprite>
|
||||||
|
<group position={[0.4, -0.3, 0]}>
|
||||||
|
<a.group position-x={2.65} position-y={2.55} scale={[0.16, 0.3, 0.2]}>
|
||||||
|
{"Tda028".split("").map((letter, idx) => (
|
||||||
|
<MediumLetter
|
||||||
|
color={"yellow"}
|
||||||
|
letter={letter}
|
||||||
|
kerningOffset={idx}
|
||||||
|
key={idx}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</a.group>
|
||||||
|
|
||||||
|
{letterTrail.map(({ yellowLetterPosX, yellowLetterPosY }, idx) => (
|
||||||
|
<a.group
|
||||||
|
key={idx}
|
||||||
|
position-x={yellowLetterPosX}
|
||||||
|
position-y={yellowLetterPosY}
|
||||||
|
position-z={-8.7}
|
||||||
|
scale={[1, 1.5, 1]}
|
||||||
|
>
|
||||||
|
<BigLetter
|
||||||
|
color={"yellow"}
|
||||||
|
letter={letterTrailText[idx]}
|
||||||
|
kerningOffset={idx}
|
||||||
|
key={idx}
|
||||||
|
/>
|
||||||
|
</a.group>
|
||||||
|
))}
|
||||||
|
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 3]} />
|
||||||
|
|
||||||
|
<GrayCube position={[-2.7, -1.6, 0.6]} active={grayCubesActive} />
|
||||||
|
<GrayTriangularPrism
|
||||||
|
position={[-3.5, -1.6, 0.6]}
|
||||||
|
active={!grayCubesActive}
|
||||||
|
/>
|
||||||
|
<GrayCube position={[-3.5, -0.9, 0.6]} active={grayCubesActive} />
|
||||||
|
<GrayTriangularPrism
|
||||||
|
position={[-2.7, -0.9, 0.6]}
|
||||||
|
active={!grayCubesActive}
|
||||||
|
/>
|
||||||
|
<GrayTriangularPrism
|
||||||
|
position={[-3.5, -1.6, 1.2]}
|
||||||
|
active={!grayCubesActive}
|
||||||
|
/>
|
||||||
|
<GrayCube position={[-3.5, -0.9, 1.2]} active={grayCubesActive} />
|
||||||
|
<GrayCube
|
||||||
|
position={[-2.7, -1.6, 1.2]}
|
||||||
|
active={grayCubesActive}
|
||||||
|
selectable={true}
|
||||||
|
/>
|
||||||
|
<GrayTriangularPrism
|
||||||
|
position={[-2.7, -0.9, 1.2]}
|
||||||
|
active={!grayCubesActive}
|
||||||
|
selectable={true}
|
||||||
|
/>
|
||||||
|
</group>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MediaOverlay;
|
15
src/components/MediaPlayer.tsx
Normal file
15
src/components/MediaPlayer.tsx
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import React from "react";
|
||||||
|
import ReactPlayer from "react-player";
|
||||||
|
import test from "../static/movie/test.webm";
|
||||||
|
|
||||||
|
const MediaPlayer = () => {
|
||||||
|
return (
|
||||||
|
<ReactPlayer
|
||||||
|
className="react-player"
|
||||||
|
controls={true}
|
||||||
|
url={[{ src: test, type: "video/webm" }]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MediaPlayer;
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useMemo, useRef } from "react";
|
import React, { useMemo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import middleRingTexture from "../static/sprites/middle_ring_tex.png";
|
import middleRingTexture from "../static/sprite/middle_ring_tex.png";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useMiddleRingStore } from "../store";
|
import { useMiddleRingStore } from "../store";
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
import introSpriteSheet from "../static/sprites/intro.png";
|
import introSpriteSheet from "../static/sprite/intro.png";
|
||||||
import moveDownSpriteSheet from "../static/sprites/jump_down.png";
|
import moveDownSpriteSheet from "../static/sprite/jump_down.png";
|
||||||
import moveUpSpriteSheet from "../static/sprites/jump_up.png";
|
import moveUpSpriteSheet from "../static/sprite/jump_up.png";
|
||||||
import standingSpriteSheet from "../static/sprites/standing.png";
|
import standingSpriteSheet from "../static/sprite/standing.png";
|
||||||
import moveLeftSpriteSheet from "../static/sprites/move_left.png";
|
import moveLeftSpriteSheet from "../static/sprite/move_left.png";
|
||||||
import moveRightSpriteSheet from "../static/sprites/move_right.png";
|
import moveRightSpriteSheet from "../static/sprite/move_right.png";
|
||||||
import bigHudSpriteSheet from "../static/sprites/big_hud.png";
|
import bigHudSpriteSheet from "../static/sprite/big_hud.png";
|
||||||
import bigHudMirroredSpriteSheet from "../static/sprites/big_hud_mirrored.png";
|
import bigHudMirroredSpriteSheet from "../static/sprite/big_hud_mirrored.png";
|
||||||
import longHudSpriteSheet from "../static/sprites/long_hud.png";
|
import longHudSpriteSheet from "../static/sprite/long_hud.png";
|
||||||
import longHudMirroredSpriteSheet from "../static/sprites/long_hud_mirrored.png";
|
import longHudMirroredSpriteSheet from "../static/sprite/long_hud_mirrored.png";
|
||||||
import boringHudSpriteSheet from "../static/sprites/long_hud_boring.png";
|
import boringHudSpriteSheet from "../static/sprite/long_hud_boring.png";
|
||||||
import boringHudMirroredSpriteSheet from "../static/sprites/long_hud_boring_mirrored.png";
|
import boringHudMirroredSpriteSheet from "../static/sprite/long_hud_boring_mirrored.png";
|
||||||
import throwBlueOrbSpriteSheet from "../static/sprites/throw_blue_orb.png";
|
import throwBlueOrbSpriteSheet from "../static/sprite/throw_blue_orb.png";
|
||||||
|
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useLoader, useThree } from "react-three-fiber";
|
import { useLoader, useThree } from "react-three-fiber";
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { memo, useRef } from "react";
|
import React, { memo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import siteATex from "../static/sprites/site_a.png";
|
import siteATex from "../static/sprite/site_a.png";
|
||||||
import siteBTex from "../static/sprites/site_b.png";
|
import siteBTex from "../static/sprite/site_b.png";
|
||||||
import siteLevelTex from "../static/sprites/site_levels.png";
|
import siteLevelTex from "../static/sprite/site_levels.png";
|
||||||
|
|
||||||
type PurpleRingProps = {
|
type PurpleRingProps = {
|
||||||
purpleRingPosY: number;
|
purpleRingPosY: number;
|
||||||
|
|
|
@ -51,10 +51,14 @@ const BlueOrbHUDStateManager = (props: StateManagerProps) => {
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof blue_orb_directions
|
||||||
];
|
];
|
||||||
|
|
||||||
|
if (eventObject) {
|
||||||
const eventAction = eventObject.action;
|
const eventAction = eventObject.action;
|
||||||
const targetBlueOrbHudId = eventObject.target_hud_id;
|
const targetBlueOrbHudId = eventObject.target_hud_id;
|
||||||
|
|
||||||
const dispatchedObject = dispatchObject(eventAction, targetBlueOrbHudId);
|
const dispatchedObject = dispatchObject(
|
||||||
|
eventAction,
|
||||||
|
targetBlueOrbHudId
|
||||||
|
);
|
||||||
|
|
||||||
if (dispatchedObject) {
|
if (dispatchedObject) {
|
||||||
toggleHud();
|
toggleHud();
|
||||||
|
@ -65,6 +69,7 @@ const BlueOrbHUDStateManager = (props: StateManagerProps) => {
|
||||||
}, dispatchedObject.actionDelay);
|
}, dispatchedObject.actionDelay);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}, [props.eventState, setActiveBlueOrbHudId, toggleHud, dispatchObject]);
|
}, [props.eventState, setActiveBlueOrbHudId, toggleHud, dispatchObject]);
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
|
@ -166,6 +166,7 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof blue_orb_directions
|
||||||
];
|
];
|
||||||
|
|
||||||
|
if (eventObject) {
|
||||||
const eventAction = eventObject.action;
|
const eventAction = eventObject.action;
|
||||||
const targetBlueOrbId = eventObject.target_blue_orb_id;
|
const targetBlueOrbId = eventObject.target_blue_orb_id;
|
||||||
const targetBlueOrbHudId = eventObject.target_hud_id;
|
const targetBlueOrbHudId = eventObject.target_hud_id;
|
||||||
|
@ -180,6 +181,7 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
||||||
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
|
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}, [
|
}, [
|
||||||
animateYellowTextWithMove,
|
animateYellowTextWithMove,
|
||||||
animateYellowTextWithoutMove,
|
animateYellowTextWithoutMove,
|
||||||
|
|
|
@ -49,14 +49,14 @@ const BlueOrbStateManager = (props: StateManagerProps) => {
|
||||||
setActiveBlueOrbPosX(0.5);
|
setActiveBlueOrbPosX(0.5);
|
||||||
}, 800);
|
}, 800);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveBlueOrbPosX(0.55);
|
setActiveBlueOrbPosX(1.55);
|
||||||
setActiveBlueOrbRotZ(-0.005);
|
setActiveBlueOrbRotZ(-0.005);
|
||||||
}, 2000);
|
}, 2600);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveBlueOrbPosZ(2);
|
setActiveBlueOrbPosZ(2);
|
||||||
setActiveBlueOrbPosX(0);
|
setActiveBlueOrbPosX(0);
|
||||||
setActiveBlueOrbRotZ(-0.5);
|
setActiveBlueOrbRotZ(-0.5);
|
||||||
}, 2450);
|
}, 2700);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveBlueOrbRotZ(0);
|
setActiveBlueOrbRotZ(0);
|
||||||
|
@ -116,6 +116,7 @@ const BlueOrbStateManager = (props: StateManagerProps) => {
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof blue_orb_directions
|
||||||
];
|
];
|
||||||
|
|
||||||
|
if (eventObject) {
|
||||||
const eventAction = eventObject.action;
|
const eventAction = eventObject.action;
|
||||||
const targetBlueOrbId = eventObject.target_blue_orb_id;
|
const targetBlueOrbId = eventObject.target_blue_orb_id;
|
||||||
|
|
||||||
|
@ -127,6 +128,7 @@ const BlueOrbStateManager = (props: StateManagerProps) => {
|
||||||
}, dispatchedObject.actionDelay);
|
}, dispatchedObject.actionDelay);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}, [props.eventState, setActiveBlueOrb, dispatchObject]);
|
}, [props.eventState, setActiveBlueOrb, dispatchObject]);
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,7 +5,8 @@ import LainStateManager from "./LainStateManager";
|
||||||
import BlueOrbStateManager from "./BlueOrbStateManager";
|
import BlueOrbStateManager from "./BlueOrbStateManager";
|
||||||
import BlueOrbHUDStateManager from "./BlueOrbHUDStateManager";
|
import BlueOrbHUDStateManager from "./BlueOrbHUDStateManager";
|
||||||
import BlueOrbHUDTextStateManager from "./BlueOrbHUDTextStateManager";
|
import BlueOrbHUDTextStateManager from "./BlueOrbHUDTextStateManager";
|
||||||
import { useBlueOrbStore } from "../../store";
|
import { useBlueOrbStore, useMediaStore } from "../../store";
|
||||||
|
import MediaSceneStateManager from "./MediaSceneStateManager";
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
const keyCodeAssocs = {
|
const keyCodeAssocs = {
|
||||||
|
@ -25,6 +26,7 @@ export type StateManagerProps = {
|
||||||
const EventStateManager = () => {
|
const EventStateManager = () => {
|
||||||
const [eventState, setEventState] = useState<string>();
|
const [eventState, setEventState] = useState<string>();
|
||||||
const activeBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
|
const activeBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
|
||||||
|
const activeMediaElement = useMediaStore((state) => state.activeMediaElement);
|
||||||
|
|
||||||
const [inputCooldown, setInputCooldown] = useState(false);
|
const [inputCooldown, setInputCooldown] = useState(false);
|
||||||
|
|
||||||
|
@ -39,8 +41,10 @@ const EventStateManager = () => {
|
||||||
// and the keypress.
|
// and the keypress.
|
||||||
// this id is later on used to get the needed corresponding data for each component
|
// this id is later on used to get the needed corresponding data for each component
|
||||||
// from blue_orb_directions.json file.
|
// from blue_orb_directions.json file.
|
||||||
const eventId = `${activeBlueOrb}_${keyPress}`;
|
// const eventId = `${activeBlueOrb}_${keyPress}`;
|
||||||
|
//
|
||||||
|
const eventId = `${activeMediaElement}_${keyPress}`;
|
||||||
|
console.log(eventId)
|
||||||
setEventState(eventId);
|
setEventState(eventId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -63,6 +67,7 @@ const EventStateManager = () => {
|
||||||
<SiteStateManager eventState={eventState!} />
|
<SiteStateManager eventState={eventState!} />
|
||||||
<LainStateManager eventState={eventState!} />
|
<LainStateManager eventState={eventState!} />
|
||||||
<MiddleRingStateManager eventState={eventState!} />
|
<MiddleRingStateManager eventState={eventState!} />
|
||||||
|
<MediaSceneStateManager eventState={eventState!} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -48,6 +48,7 @@ const LainStateManager = (props: StateManagerProps) => {
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof blue_orb_directions
|
||||||
];
|
];
|
||||||
|
|
||||||
|
if (eventObject) {
|
||||||
const eventAction = eventObject.action;
|
const eventAction = eventObject.action;
|
||||||
const dispatchedObject = dispatchObject(eventAction);
|
const dispatchedObject = dispatchObject(eventAction);
|
||||||
|
|
||||||
|
@ -59,6 +60,7 @@ const LainStateManager = (props: StateManagerProps) => {
|
||||||
}, dispatchedObject.duration);
|
}, dispatchedObject.duration);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}, [props.eventState, setLainMoveState, dispatchObject]);
|
}, [props.eventState, setLainMoveState, dispatchObject]);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
|
|
43
src/components/StateManagers/MediaSceneStateManager.tsx
Normal file
43
src/components/StateManagers/MediaSceneStateManager.tsx
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
import React, { useCallback, useEffect } from "react";
|
||||||
|
import { useMediaStore } from "../../store";
|
||||||
|
import media_scene_directions from "../../resources/media_scene_directions.json";
|
||||||
|
import { StateManagerProps } from "./EventStateManager";
|
||||||
|
|
||||||
|
const MediaSceneStateManager = (props: StateManagerProps) => {
|
||||||
|
const toggleLeftColActiveElement = useMediaStore(
|
||||||
|
(state) => state.toggleLeftColActiveElement
|
||||||
|
);
|
||||||
|
const activeMediaElement = useMediaStore((state) => state.activeMediaElement);
|
||||||
|
|
||||||
|
const toggleLeftColActiveElementAnimate = useCallback(() => {
|
||||||
|
toggleLeftColActiveElement();
|
||||||
|
console.log(activeMediaElement);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const dispatchObject = useCallback((event: string) => {
|
||||||
|
const dispatcherObjects = {
|
||||||
|
toggleLeftColActiveElement: { action: toggleLeftColActiveElementAnimate },
|
||||||
|
};
|
||||||
|
|
||||||
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.eventState) {
|
||||||
|
const eventObject =
|
||||||
|
media_scene_directions[
|
||||||
|
props.eventState as keyof typeof media_scene_directions
|
||||||
|
];
|
||||||
|
|
||||||
|
const eventAction = eventObject.action;
|
||||||
|
const dispatchedObject = dispatchObject(eventAction);
|
||||||
|
if (dispatchedObject) {
|
||||||
|
dispatchedObject.action();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [props.eventState, dispatchObject]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MediaSceneStateManager;
|
|
@ -200,6 +200,7 @@ const MiddleRingStateManager = (props: any) => {
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof blue_orb_directions
|
||||||
];
|
];
|
||||||
|
|
||||||
|
if (eventObject) {
|
||||||
const eventAction = eventObject.action;
|
const eventAction = eventObject.action;
|
||||||
|
|
||||||
const dispatchedObject =
|
const dispatchedObject =
|
||||||
|
@ -209,6 +210,7 @@ const MiddleRingStateManager = (props: any) => {
|
||||||
dispatchedObject.action();
|
dispatchedObject.action();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}, [
|
}, [
|
||||||
dispatcherObjects,
|
dispatcherObjects,
|
||||||
props.eventState,
|
props.eventState,
|
||||||
|
|
|
@ -33,6 +33,7 @@ const SiteStateManager = (props: StateManagerProps) => {
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof blue_orb_directions
|
||||||
];
|
];
|
||||||
|
|
||||||
|
if (eventObject) {
|
||||||
const eventAction = eventObject.action;
|
const eventAction = eventObject.action;
|
||||||
|
|
||||||
const dispatchedObject =
|
const dispatchedObject =
|
||||||
|
@ -50,6 +51,7 @@ const SiteStateManager = (props: StateManagerProps) => {
|
||||||
}, 3000);
|
}, 3000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}, [dispatcherObjects, props.eventState, setIsSiteYChanging]);
|
}, [dispatcherObjects, props.eventState, setIsSiteYChanging]);
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import orangeFont from "../static/sprites/orange_font_texture.png";
|
import orangeFont from "../static/sprite/orange_font_texture.png";
|
||||||
import greenFont from "../static/sprites/white_and_green_texture.png";
|
import greenFont from "../static/sprite/white_and_green_texture.png";
|
||||||
import yellowFont from "../static/sprites/yellow_font_texture.png";
|
import yellowFont from "../static/sprite/yellow_font_texture.png";
|
||||||
import orange_font_json from "../resources/orange_font.json";
|
import orange_font_json from "../resources/orange_font.json";
|
||||||
import medium_font_json from "../resources/medium_font.json";
|
import medium_font_json from "../resources/medium_font.json";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
|
@ -146,7 +146,7 @@ export const MediumLetter = (props: LetterProps) => {
|
||||||
// should be trivial to calculate though, im just lazy
|
// should be trivial to calculate though, im just lazy
|
||||||
const getLineNum = (letter: string) => {
|
const getLineNum = (letter: string) => {
|
||||||
const lineOne = "ABCDEFGHIJKLMNOPQQRSTUVW";
|
const lineOne = "ABCDEFGHIJKLMNOPQQRSTUVW";
|
||||||
const lineTwo = "XYZ0123456779abcdefghij";
|
const lineTwo = "XYZ0123456789abcdefghij";
|
||||||
const lineThree = "klmnopqrstuvwxyz,.*";
|
const lineThree = "klmnopqrstuvwxyz,.*";
|
||||||
|
|
||||||
if (letter === " ") return 5;
|
if (letter === " ") return 5;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { memo, useRef, useState } from "react";
|
import React, { memo, useRef, useState } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import orbSprite from "../static/sprites/orb.png";
|
import orbSprite from "../static/sprite/orb.png";
|
||||||
import { useYellowOrbStore } from "../store";
|
import { useYellowOrbStore } from "../store";
|
||||||
|
|
||||||
// initialize outside the component otherwise it gets overwritten when it rerenders
|
// initialize outside the component otherwise it gets overwritten when it rerenders
|
||||||
|
|
9
src/react-app-env.d.ts
vendored
9
src/react-app-env.d.ts
vendored
|
@ -1 +1,10 @@
|
||||||
/// <reference types="react-scripts" />
|
/// <reference types="react-scripts" />
|
||||||
|
declare module "*.webm" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "threejs-slice-geometry" {
|
||||||
|
const src: any;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
8
src/resources/media_scene_directions.json
Normal file
8
src/resources/media_scene_directions.json
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"play_down": {
|
||||||
|
"action": "toggleLeftColActiveElement"
|
||||||
|
},
|
||||||
|
"exit_up": {
|
||||||
|
"action": "toggleLeftColActiveElement"
|
||||||
|
}
|
||||||
|
}
|
26
src/store.ts
26
src/store.ts
|
@ -94,6 +94,14 @@ type MiddleRingState = {
|
||||||
setMiddleRingAnimDuration: (to: number) => void;
|
setMiddleRingAnimDuration: (to: number) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type MediaState = {
|
||||||
|
activeMediaElement: string;
|
||||||
|
activeLeftColElementIdx: number;
|
||||||
|
activeLeftColElement: { text: string; position: number[] };
|
||||||
|
leftColElements: { text: string; position: number[] }[];
|
||||||
|
toggleLeftColActiveElement: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
export const useBlueOrbStore = create<BlueOrbState>((set) => ({
|
export const useBlueOrbStore = create<BlueOrbState>((set) => ({
|
||||||
blueOrbId: "0422",
|
blueOrbId: "0422",
|
||||||
hudId: "fg_hud_1",
|
hudId: "fg_hud_1",
|
||||||
|
@ -198,3 +206,21 @@ export const useLevelStore = create<LevelState>((set) => ({
|
||||||
activeLevels: ["03", "04", "05"],
|
activeLevels: ["03", "04", "05"],
|
||||||
setActiveLevels: (to) => set(() => ({ activeLevels: to })),
|
setActiveLevels: (to) => set(() => ({ activeLevels: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
export const useMediaStore = create<MediaState>((set) => ({
|
||||||
|
// we can't have one global activeElement because both right and left col
|
||||||
|
// elements need to be stored (when you switch back and forth between the columns,
|
||||||
|
// you end up on the last active element FROM THAT COLUMN).
|
||||||
|
activeMediaElement: "play",
|
||||||
|
activeLeftColElementIdx: 0,
|
||||||
|
activeLeftColElement: { text: "Play", position: [-2.7, -0.9, 0.6] },
|
||||||
|
leftColElements: [
|
||||||
|
{ text: "Play", position: [-2.7, -0.9, 0.6] },
|
||||||
|
{ text: "Exit", position: [-3.5, -1.6, 0.6] },
|
||||||
|
],
|
||||||
|
toggleLeftColActiveElement: () =>
|
||||||
|
set((state) => ({
|
||||||
|
activeLeftColElement:
|
||||||
|
state.leftColElements[Number(!state.activeLeftColElementIdx)],
|
||||||
|
})),
|
||||||
|
}));
|
||||||
|
|
Loading…
Reference in a new issue