mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

adding media interaction scene, heavily wip

Browse source
This commit is contained in:
ad044 2020-10-19 17:46:29 +04:00
parent 4f86d2dbe0
commit b036ce9839
28 changed files with 581 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
package-lock.json generated
View file

@ -4378,6 +4378,11 @@
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
"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": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@ -7931,6 +7936,11 @@
"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": {
"version": "1.0.3",
"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",
"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": {
"version": "0.4.1",
"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",
"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": {
"version": "16.13.1",
"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",
"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": {
"version": "0.3.3",
"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": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",

2
package.json
View file

@ -15,10 +15,12 @@
"drei": "^1.3.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-player": "^2.6.2",
"react-scripts": "3.4.3",
"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"

18
src/App.tsx
View file

@ -1,9 +1,12 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, Suspense } from "react";
import MainScene from "./components/MainScene";
import "./static/css/hub.css";
import "./static/css/main.css";
import { Canvas } from "react-three-fiber";
import Boot from "./components/Boot";
import MediaPlayer from "./components/MediaPlayer";
import MediaOverlay from "./components/MediaOverlay";
import EventStateManager from "./components/StateManagers/EventStateManager";
const App = () => {
const [moveToGame, setMoveToGame] = useState(false);
@ -20,9 +23,16 @@ const App = () => {
<div id="game-root" className="game">
{/*<Boot setMoveToGame={setMoveToGame} />*/}
{/* {moveToGame ? <MainScene /> : <Boot setMoveToGame={setMoveToGame} />} */}
<Canvas concurrent>
<MainScene />
</Canvas>
<span className="canvas">
<EventStateManager />
<Canvas concurrent>
<Suspense fallback={null}>
<MediaOverlay />
</Suspense>
{/*<MainScene />*/}
</Canvas>
</span>
<MediaPlayer />
</div>
);
};

42
src/components/BlueOrb.tsx
View file

@ -2,20 +2,20 @@ import React, { memo, useEffect, useMemo, useRef } from "react";
import { useFrame, useLoader } from "react-three-fiber";
import { useSpring, a } from "@react-spring/three";
import * as THREE from "three";
import Cou from "../static/sprites/Cou.png";
import CouActive from "../static/sprites/Cou_active.png";
import Dc from "../static/sprites/Dc.png";
import DcActive from "../static/sprites/Dc_active.png";
import SSkn from "../static/sprites/SSkn.png";
import SSKnActive from "../static/sprites/SSkn_active.png";
import Tda from "../static/sprites/Tda.png";
import TdaActive from "../static/sprites/Tda_active.png";
import Dia from "../static/sprites/Dia.png";
import DiaActive from "../static/sprites/Dia_active.png";
import Lda from "../static/sprites/Lda.png";
import LdaActive from "../static/sprites/Lda_active.png";
import MULTI from "../static/sprites/MULTI.png";
import MULTIActive from "../static/sprites/MULTI_active.png";
import Cou from "../static/sprite/Cou.png";
import CouActive from "../static/sprite/Cou_active.png";
import Dc from "../static/sprite/Dc.png";
import DcActive from "../static/sprite/Dc_active.png";
import SSkn from "../static/sprite/SSkn.png";
import SSKnActive from "../static/sprite/SSkn_active.png";
import Tda from "../static/sprite/Tda.png";
import TdaActive from "../static/sprite/Tda_active.png";
import Dia from "../static/sprite/Dia.png";
import DiaActive from "../static/sprite/Dia_active.png";
import Lda from "../static/sprite/Lda.png";
import LdaActive from "../static/sprite/Lda_active.png";
import MULTI from "../static/sprite/MULTI.png";
import MULTIActive from "../static/sprite/MULTI_active.png";
import level_y_values from "../resources/level_y_values.json";
import { useBlueOrbStore } from "../store";
@ -28,7 +28,7 @@ type 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,
// so we import all of them here and then use this function to
// associate a sprite with the path
@ -144,6 +144,10 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
.isActiveBlueOrbInteractedWith
? state.activeBlueOrbPosX
: props.position[0],
activeBlueOrbPosY: useBlueOrbStore.getState()
.isActiveBlueOrbInteractedWith
? level_y_values[props.level as keyof typeof level_y_values]
: props.position[1],
activeBlueOrbPosZ: useBlueOrbStore.getState()
.isActiveBlueOrbInteractedWith
? state.activeBlueOrbPosZ
@ -153,7 +157,13 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
? state.activeBlueOrbRotZ
: 0,
}));
}, [activeBlueOrbPosX, activeBlueOrbPosZ, activeBlueOrbRotZ, set]);
}, [
activeBlueOrbPosX,
activeBlueOrbPosZ,
activeBlueOrbRotZ,
props.position,
set,
]);
return (
<group

12
src/components/Boot.tsx
View file

@ -1,11 +1,11 @@
import React, { useEffect, useState, useCallback } from "react";
import networkLogo from "../static/img/network_os_logo.png";
import introBox from "../static/img/load_screen_box.png";
import introTextBetween from "../static/img/intro_text_thing.png";
import introTextArrow from "../static/img/intro_text_arrow.png";
import mask from "../static/img/load_screen_mask.png";
import loop from "../static/img/loop.webp";
import networkLogo from "../static/sprite/network_os_logo.png";
import introBox from "../static/sprite/gray_box.png";
import introTextBetween from "../static/sprite/intro_text_thing.png";
import introTextArrow from "../static/sprite/intro_text_arrow.png";
import mask from "../static/sprite/load_screen_mask.png";
import loop from "../static/sprite/loop.webp";
import "../static/css/intro.css";

6
src/components/GrayRing.tsx
View file

@ -1,8 +1,8 @@
import React, { memo } from "react";
import * as THREE from "three";
import lofTexture from "../static/sprites/lof.png";
import holeTexture from "../static/sprites/hole.png";
import lifeTexture from "../static/sprites/life.png";
import lofTexture from "../static/sprite/lof.png";
import holeTexture from "../static/sprite/hole.png";
import lifeTexture from "../static/sprite/life.png";
import { useLoader } from "react-three-fiber";
type GrayRingProps = {

12
src/components/HUD.tsx
View file

@ -1,12 +1,12 @@
import React, { memo } from "react";
import { useLoader } from "react-three-fiber";
import * as THREE from "three";
import bigHud from "../static/sprites/big_hud.png";
import bigHudMirrored from "../static/sprites/big_hud_mirrored.png";
import longHud from "../static/sprites/long_hud.png";
import longHudMirrored from "../static/sprites/long_hud_mirrored.png";
import boringHud from "../static/sprites/long_hud_boring.png";
import boringHudMirrored from "../static/sprites/long_hud_boring_mirrored.png";
import bigHud from "../static/sprite/big_hud.png";
import bigHudMirrored from "../static/sprite/big_hud_mirrored.png";
import longHud from "../static/sprite/long_hud.png";
import longHudMirrored from "../static/sprite/long_hud_mirrored.png";
import boringHud from "../static/sprite/long_hud_boring.png";
import boringHudMirrored from "../static/sprite/long_hud_boring_mirrored.png";
import { a, useSpring, useTrail } from "@react-spring/three";
import { useBlueOrbStore, useSiteStore } from "../store";
import blue_orb_huds from "../resources/blue_orb_huds.json";

14
src/components/Lain.tsx
View file

@ -2,13 +2,13 @@ import React, { Suspense, useState } from "react";
import { useFrame, useLoader } from "react-three-fiber";
import * as THREE from "three";
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
import moveDownSpriteSheet from "../static/sprites/jump_down.png";
import moveUpSpriteSheet from "../static/sprites/jump_up.png";
import moveLeftSpriteSheet from "../static/sprites/move_left.png";
import moveRightSpriteSheet from "../static/sprites/move_right.png";
import standingSpriteSheet from "../static/sprites/standing.png";
import introSpriteSheet from "../static/sprites/intro.png";
import throwBlueOrbSpriteSheet from "../static/sprites/throw_blue_orb.png";
import moveDownSpriteSheet from "../static/sprite/jump_down.png";
import moveUpSpriteSheet from "../static/sprite/jump_up.png";
import moveLeftSpriteSheet from "../static/sprite/move_left.png";
import moveRightSpriteSheet from "../static/sprite/move_right.png";
import standingSpriteSheet from "../static/sprite/standing.png";
import introSpriteSheet from "../static/sprite/intro.png";
import throwBlueOrbSpriteSheet from "../static/sprite/throw_blue_orb.png";
import { useLainStore } from "../store";
type LainConstructorProps = {

18
src/components/Level.tsx
View file

@ -5,18 +5,18 @@ import CyanCrystal from "./CyanCrystal";
//constructor for levels
type LevelProps = {
levelPosY: number;
level: string;
levelPosY: number;
level: string;
};
const Level = (props: LevelProps) => {
return (
<group position={[0, props.levelPosY, 0]}>
<PurpleRing purpleRingPosY={0.44} level={props.level}/>
<GrayRing grayRingPosY={-0.29} />
<CyanCrystal crystalRingPosY={-0.45} />
</group>
);
return (
<group position={[0, props.levelPosY, 0]}>
<PurpleRing purpleRingPosY={0.44} level={props.level} />
<GrayRing grayRingPosY={-0.29} />
<CyanCrystal crystalRingPosY={-0.45} />
</group>
);
};
export default Level;

5
src/components/MainScene.tsx
View file

@ -15,9 +15,7 @@ import { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
const MainScene = () => {
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
const setActiveBlueOrb = useBlueOrbStore(
(state) => state.setActiveBlueOrbId
);
const setActiveBlueOrb = useBlueOrbStore((state) => state.setActiveBlueOrbId);
const setActiveBlueOrbHudId = useBlueOrbStore(
(state) => state.setActiveBlueOrbHudId
);
@ -53,7 +51,6 @@ const MainScene = () => {
position-y={mainGroupStatePos.mainGroupPosY}
position-z={mainGroupStatePos.mainGroupPosZ}
>
<EventStateManager />
<Preloader />
<Site />
<OrthoCamera />

272
src/components/MediaOverlay.tsx Normal file
View 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
View 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;

2
src/components/MiddleRing.tsx
View file

@ -1,6 +1,6 @@
import React, { useMemo, useRef } from "react";
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 { a, useSpring } from "@react-spring/three";
import { useMiddleRingStore } from "../store";

26
src/components/Preloader.tsx
View file

@ -1,16 +1,16 @@
import introSpriteSheet from "../static/sprites/intro.png";
import moveDownSpriteSheet from "../static/sprites/jump_down.png";
import moveUpSpriteSheet from "../static/sprites/jump_up.png";
import standingSpriteSheet from "../static/sprites/standing.png";
import moveLeftSpriteSheet from "../static/sprites/move_left.png";
import moveRightSpriteSheet from "../static/sprites/move_right.png";
import bigHudSpriteSheet from "../static/sprites/big_hud.png";
import bigHudMirroredSpriteSheet from "../static/sprites/big_hud_mirrored.png";
import longHudSpriteSheet from "../static/sprites/long_hud.png";
import longHudMirroredSpriteSheet from "../static/sprites/long_hud_mirrored.png";
import boringHudSpriteSheet from "../static/sprites/long_hud_boring.png";
import boringHudMirroredSpriteSheet from "../static/sprites/long_hud_boring_mirrored.png";
import throwBlueOrbSpriteSheet from "../static/sprites/throw_blue_orb.png";
import introSpriteSheet from "../static/sprite/intro.png";
import moveDownSpriteSheet from "../static/sprite/jump_down.png";
import moveUpSpriteSheet from "../static/sprite/jump_up.png";
import standingSpriteSheet from "../static/sprite/standing.png";
import moveLeftSpriteSheet from "../static/sprite/move_left.png";
import moveRightSpriteSheet from "../static/sprite/move_right.png";
import bigHudSpriteSheet from "../static/sprite/big_hud.png";
import bigHudMirroredSpriteSheet from "../static/sprite/big_hud_mirrored.png";
import longHudSpriteSheet from "../static/sprite/long_hud.png";
import longHudMirroredSpriteSheet from "../static/sprite/long_hud_mirrored.png";
import boringHudSpriteSheet from "../static/sprite/long_hud_boring.png";
import boringHudMirroredSpriteSheet from "../static/sprite/long_hud_boring_mirrored.png";
import throwBlueOrbSpriteSheet from "../static/sprite/throw_blue_orb.png";
import * as THREE from "three";
import { useLoader, useThree } from "react-three-fiber";

6
src/components/PurpleRing.tsx
View file

@ -1,9 +1,9 @@
import React, { memo, useRef } from "react";
import { useFrame, useLoader } from "react-three-fiber";
import * as THREE from "three";
import siteATex from "../static/sprites/site_a.png";
import siteBTex from "../static/sprites/site_b.png";
import siteLevelTex from "../static/sprites/site_levels.png";
import siteATex from "../static/sprite/site_a.png";
import siteBTex from "../static/sprite/site_b.png";
import siteLevelTex from "../static/sprite/site_levels.png";
type PurpleRingProps = {
purpleRingPosY: number;

23
src/components/StateManagers/BlueOrbHUDStateManager.tsx
View file

@ -51,18 +51,23 @@ const BlueOrbHUDStateManager = (props: StateManagerProps) => {
props.eventState as keyof typeof blue_orb_directions
];
const eventAction = eventObject.action;
const targetBlueOrbHudId = eventObject.target_hud_id;
if (eventObject) {
const eventAction = eventObject.action;
const targetBlueOrbHudId = eventObject.target_hud_id;
const dispatchedObject = dispatchObject(eventAction, targetBlueOrbHudId);
const dispatchedObject = dispatchObject(
eventAction,
targetBlueOrbHudId
);
if (dispatchedObject) {
toggleHud();
setTimeout(() => {
dispatchedObject.action(dispatchedObject.value);
if (dispatchedObject) {
toggleHud();
}, dispatchedObject.actionDelay);
setTimeout(() => {
dispatchedObject.action(dispatchedObject.value);
toggleHud();
}, dispatchedObject.actionDelay);
}
}
}
}, [props.eventState, setActiveBlueOrbHudId, toggleHud, dispatchObject]);

22
src/components/StateManagers/BlueOrbHUDTextStateManager.tsx
View file

@ -166,18 +166,20 @@ const BlueOrbHUDTextStateManager = (props: any) => {
props.eventState as keyof typeof blue_orb_directions
];
const eventAction = eventObject.action;
const targetBlueOrbId = eventObject.target_blue_orb_id;
const targetBlueOrbHudId = eventObject.target_hud_id;
if (eventObject) {
const eventAction = eventObject.action;
const targetBlueOrbId = eventObject.target_blue_orb_id;
const targetBlueOrbHudId = eventObject.target_hud_id;
const dispatchedObject = dispatchObject(
eventAction,
targetBlueOrbHudId,
targetBlueOrbId
);
const dispatchedObject = dispatchObject(
eventAction,
targetBlueOrbHudId,
targetBlueOrbId
);
if (dispatchedObject) {
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
if (dispatchedObject) {
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
}
}
}
}, [

22
src/components/StateManagers/BlueOrbStateManager.tsx
View file

@ -49,14 +49,14 @@ const BlueOrbStateManager = (props: StateManagerProps) => {
setActiveBlueOrbPosX(0.5);
}, 800);
setTimeout(() => {
setActiveBlueOrbPosX(0.55);
setActiveBlueOrbPosX(1.55);
setActiveBlueOrbRotZ(-0.005);
}, 2000);
}, 2600);
setTimeout(() => {
setActiveBlueOrbPosZ(2);
setActiveBlueOrbPosX(0);
setActiveBlueOrbRotZ(-0.5);
}, 2450);
}, 2700);
setTimeout(() => {
setActiveBlueOrbRotZ(0);
@ -116,15 +116,17 @@ const BlueOrbStateManager = (props: StateManagerProps) => {
props.eventState as keyof typeof blue_orb_directions
];
const eventAction = eventObject.action;
const targetBlueOrbId = eventObject.target_blue_orb_id;
if (eventObject) {
const eventAction = eventObject.action;
const targetBlueOrbId = eventObject.target_blue_orb_id;
const dispatchedObject = dispatchObject(eventAction, targetBlueOrbId);
const dispatchedObject = dispatchObject(eventAction, targetBlueOrbId);
if (dispatchedObject) {
setTimeout(() => {
dispatchedObject.action(dispatchedObject.value as never);
}, dispatchedObject.actionDelay);
if (dispatchedObject) {
setTimeout(() => {
dispatchedObject.action(dispatchedObject.value as never);
}, dispatchedObject.actionDelay);
}
}
}
}, [props.eventState, setActiveBlueOrb, dispatchObject]);

11
src/components/StateManagers/EventStateManager.tsx
View file

@ -5,7 +5,8 @@ import LainStateManager from "./LainStateManager";
import BlueOrbStateManager from "./BlueOrbStateManager";
import BlueOrbHUDStateManager from "./BlueOrbHUDStateManager";
import BlueOrbHUDTextStateManager from "./BlueOrbHUDTextStateManager";
import { useBlueOrbStore } from "../../store";
import { useBlueOrbStore, useMediaStore } from "../../store";
import MediaSceneStateManager from "./MediaSceneStateManager";
const getKeyCodeAssociation = (keyCode: number): string => {
const keyCodeAssocs = {
@ -25,6 +26,7 @@ export type StateManagerProps = {
const EventStateManager = () => {
const [eventState, setEventState] = useState<string>();
const activeBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
const activeMediaElement = useMediaStore((state) => state.activeMediaElement);
const [inputCooldown, setInputCooldown] = useState(false);
@ -39,8 +41,10 @@ const EventStateManager = () => {
// and the keypress.
// this id is later on used to get the needed corresponding data for each component
// from blue_orb_directions.json file.
const eventId = `${activeBlueOrb}_${keyPress}`;
// const eventId = `${activeBlueOrb}_${keyPress}`;
//
const eventId = `${activeMediaElement}_${keyPress}`;
console.log(eventId)
setEventState(eventId);
}
},
@ -63,6 +67,7 @@ const EventStateManager = () => {
<SiteStateManager eventState={eventState!} />
<LainStateManager eventState={eventState!} />
<MiddleRingStateManager eventState={eventState!} />
<MediaSceneStateManager eventState={eventState!} />
</>
);
};

16
src/components/StateManagers/LainStateManager.tsx
View file

@ -48,15 +48,17 @@ const LainStateManager = (props: StateManagerProps) => {
props.eventState as keyof typeof blue_orb_directions
];
const eventAction = eventObject.action;
const dispatchedObject = dispatchObject(eventAction);
if (eventObject) {
const eventAction = eventObject.action;
const dispatchedObject = dispatchObject(eventAction);
if (dispatchedObject) {
dispatchedObject.action(dispatchedObject.value);
if (dispatchedObject) {
dispatchedObject.action(dispatchedObject.value);
setTimeout(() => {
setLainMoveState("standing");
}, dispatchedObject.duration);
setTimeout(() => {
setLainMoveState("standing");
}, dispatchedObject.duration);
}
}
}
}, [props.eventState, setLainMoveState, dispatchObject]);

43
src/components/StateManagers/MediaSceneStateManager.tsx Normal file
View 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;

12
src/components/StateManagers/MiddleRingStateManager.tsx
View file

@ -200,13 +200,15 @@ const MiddleRingStateManager = (props: any) => {
props.eventState as keyof typeof blue_orb_directions
];
const eventAction = eventObject.action;
if (eventObject) {
const eventAction = eventObject.action;
const dispatchedObject =
dispatcherObjects[eventAction as keyof typeof dispatcherObjects];
const dispatchedObject =
dispatcherObjects[eventAction as keyof typeof dispatcherObjects];
if (dispatchedObject) {
dispatchedObject.action();
if (dispatchedObject) {
dispatchedObject.action();
}
}
}
}, [

24
src/components/StateManagers/SiteStateManager.tsx
View file

@ -33,21 +33,23 @@ const SiteStateManager = (props: StateManagerProps) => {
props.eventState as keyof typeof blue_orb_directions
];
const eventAction = eventObject.action;
if (eventObject) {
const eventAction = eventObject.action;
const dispatchedObject =
dispatcherObjects[eventAction as keyof typeof dispatcherObjects];
const dispatchedObject =
dispatcherObjects[eventAction as keyof typeof dispatcherObjects];
if (dispatchedObject) {
setIsSiteYChanging(true);
if (dispatchedObject) {
setIsSiteYChanging(true);
setTimeout(() => {
dispatchedObject.action(dispatchedObject.value);
}, dispatchedObject.actionDelay);
setTimeout(() => {
dispatchedObject.action(dispatchedObject.value);
}, dispatchedObject.actionDelay);
setTimeout(() => {
setIsSiteYChanging(false);
}, 3000);
setTimeout(() => {
setIsSiteYChanging(false);
}, 3000);
}
}
}
}, [dispatcherObjects, props.eventState, setIsSiteYChanging]);

8
src/components/TextRenderer.tsx
View file

@ -1,8 +1,8 @@
import { useLoader } from "react-three-fiber";
import * as THREE from "three";
import orangeFont from "../static/sprites/orange_font_texture.png";
import greenFont from "../static/sprites/white_and_green_texture.png";
import yellowFont from "../static/sprites/yellow_font_texture.png";
import orangeFont from "../static/sprite/orange_font_texture.png";
import greenFont from "../static/sprite/white_and_green_texture.png";
import yellowFont from "../static/sprite/yellow_font_texture.png";
import orange_font_json from "../resources/orange_font.json";
import medium_font_json from "../resources/medium_font.json";
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
const getLineNum = (letter: string) => {
const lineOne = "ABCDEFGHIJKLMNOPQQRSTUVW";
const lineTwo = "XYZ0123456779abcdefghij";
const lineTwo = "XYZ0123456789abcdefghij";
const lineThree = "klmnopqrstuvwxyz,.*";
if (letter === " ") return 5;

2
src/components/YellowOrb.tsx
View file

@ -1,7 +1,7 @@
import React, { memo, useRef, useState } from "react";
import { useFrame, useLoader } from "react-three-fiber";
import * as THREE from "three";
import orbSprite from "../static/sprites/orb.png";
import orbSprite from "../static/sprite/orb.png";
import { useYellowOrbStore } from "../store";
// initialize outside the component otherwise it gets overwritten when it rerenders

9
src/react-app-env.d.ts vendored
View file

@ -1 +1,10 @@
/// <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
View file

@ -0,0 +1,8 @@
{
"play_down": {
"action": "toggleLeftColActiveElement"
},
"exit_up": {
"action": "toggleLeftColActiveElement"
}
}

26
src/store.ts
View file

@ -94,6 +94,14 @@ type MiddleRingState = {
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) => ({
blueOrbId: "0422",
hudId: "fg_hud_1",
@ -198,3 +206,21 @@ export const useLevelStore = create<LevelState>((set) => ({
activeLevels: ["03", "04", "05"],
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)],
})),
}));