mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
intro anim works properly now, changed structure a bit
This commit is contained in:
parent
e19ad4548b
commit
79a4808012
34 changed files with 364 additions and 238 deletions
|
@ -15,12 +15,9 @@ import ChangeDiscScene from "./scenes/ChangeDiscScene";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const currentScene = useSceneStore((state) => state.currentScene);
|
const currentScene = useSceneStore((state) => state.currentScene);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.title = "< index >";
|
document.title = "< index >";
|
||||||
document.getElementsByTagName("body")[0].className = "main-body";
|
|
||||||
return () => {
|
|
||||||
document.getElementsByTagName("body")[0].className = "";
|
|
||||||
};
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const dispatchScene = useMemo(() => {
|
const dispatchScene = useMemo(() => {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { Suspense, useState } from "react";
|
import React, { Suspense, useEffect, useMemo, 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";
|
||||||
|
@ -112,7 +112,11 @@ export const LainThrowNode = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const Lain = () => {
|
type LainProps = {
|
||||||
|
shouldIntro: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Lain = (props: LainProps) => {
|
||||||
const lainMoveState = useLainStore((state) => state.lainMoveState);
|
const lainMoveState = useLainStore((state) => state.lainMoveState);
|
||||||
|
|
||||||
const lainAnimationDispatch = {
|
const lainAnimationDispatch = {
|
||||||
|
@ -126,14 +130,28 @@ const Lain = () => {
|
||||||
throw_node: <LainThrowNode />,
|
throw_node: <LainThrowNode />,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const [introFinished, setIntroFinished] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setIntroFinished(true);
|
||||||
|
}, 4000);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const stopIntroAnim = useMemo(() => {
|
||||||
|
return props.shouldIntro ? introFinished : true;
|
||||||
|
}, [introFinished, props.shouldIntro]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<sprite scale={[4.5, 4.5, 4.5]} position={[0, -0.15, 0]}>
|
<sprite scale={[4.5, 4.5, 4.5]} position={[0, -0.15, 0]}>
|
||||||
{
|
{stopIntroAnim ? (
|
||||||
lainAnimationDispatch[
|
lainAnimationDispatch[
|
||||||
lainMoveState as keyof typeof lainAnimationDispatch
|
lainMoveState as keyof typeof lainAnimationDispatch
|
||||||
]
|
]
|
||||||
}
|
) : (
|
||||||
|
<LainIntro />
|
||||||
|
)}
|
||||||
</sprite>
|
</sprite>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,35 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import level_y_values from "../../../resources/level_y_values.json";
|
|
||||||
import { useSiteStore } from "../../../store";
|
|
||||||
import PurpleRing from "../PurpleRing";
|
|
||||||
import GrayRing from "../GrayRing";
|
|
||||||
import CyanCrystal from "../CyanCrystal";
|
|
||||||
|
|
||||||
const Rings = () => {
|
|
||||||
const currentSite = useSiteStore((state) => state.currentSite);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{Object.entries(level_y_values).map((level: [string, number]) => {
|
|
||||||
if (
|
|
||||||
(currentSite === "b" && parseInt(level[0]) <= 13) ||
|
|
||||||
currentSite === "a"
|
|
||||||
) {
|
|
||||||
return (
|
|
||||||
<group position={[0, level[1], 0]} key={level[0]}>
|
|
||||||
<PurpleRing
|
|
||||||
purpleRingPosY={0.44}
|
|
||||||
level={level[0]}
|
|
||||||
site={currentSite}
|
|
||||||
/>
|
|
||||||
<GrayRing grayRingPosY={-0.29} />
|
|
||||||
<CyanCrystal crystalRingPosY={-0.45} />
|
|
||||||
</group>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Rings;
|
|
|
@ -1,57 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import Star from "./Star";
|
|
||||||
|
|
||||||
type StarfieldProps = {
|
|
||||||
visible: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Starfield = (props: StarfieldProps) => {
|
|
||||||
const LCG = (a: number, c: number, m: number, s: number) => () =>
|
|
||||||
(s = (s * a + c) % m);
|
|
||||||
|
|
||||||
const lcgInstance = LCG(1664525, 1013904223, 2 ** 32, 2);
|
|
||||||
|
|
||||||
const [
|
|
||||||
posesBlueFromRight,
|
|
||||||
posesBlueFromLeft,
|
|
||||||
posesCyanFromRight,
|
|
||||||
posesCyanFromLeft,
|
|
||||||
posesWhiteFromRight,
|
|
||||||
posesWhiteFromLeft,
|
|
||||||
] = [5, 5, 5, 5, 5, 5].map((x) =>
|
|
||||||
Array.from({ length: x }, () => [
|
|
||||||
lcgInstance() / 1000000000,
|
|
||||||
lcgInstance() / 10000000000 - 10,
|
|
||||||
lcgInstance() / 1000000000,
|
|
||||||
])
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<group position={[0, -1, 2]} visible={props.visible}>
|
|
||||||
<group rotation={[0, 0.75, Math.PI / 2]} position={[-0.7, -1, -5]}>
|
|
||||||
{posesBlueFromLeft.map((poses, idx) => (
|
|
||||||
<Star position={poses} color={"blue"} key={idx} />
|
|
||||||
))}
|
|
||||||
{posesWhiteFromLeft.map((poses, idx) => (
|
|
||||||
<Star position={poses} color={"white"} key={idx} />
|
|
||||||
))}
|
|
||||||
{posesCyanFromLeft.map((poses, idx) => (
|
|
||||||
<Star position={poses} color={"cyan"} key={idx} />
|
|
||||||
))}
|
|
||||||
</group>
|
|
||||||
<group rotation={[0, 2.5, Math.PI / 2]} position={[-0.7, -1, -1]}>
|
|
||||||
{posesBlueFromRight.map((poses, idx) => (
|
|
||||||
<Star position={poses} color={"blue"} key={idx} />
|
|
||||||
))}
|
|
||||||
{posesWhiteFromRight.map((poses, idx) => (
|
|
||||||
<Star position={poses} color={"white"} key={idx} />
|
|
||||||
))}
|
|
||||||
{posesCyanFromRight.map((poses, idx) => (
|
|
||||||
<Star position={poses} color={"cyan"} key={idx} />
|
|
||||||
))}
|
|
||||||
</group>
|
|
||||||
</group>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Starfield;
|
|
49
src/components/MainScene/SyncedComponentLoader.tsx
Normal file
49
src/components/MainScene/SyncedComponentLoader.tsx
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
|
import HUD from "./SyncedComponents/HUD";
|
||||||
|
import GreenTextRenderer from "../TextRenderer/GreenTextRenderer";
|
||||||
|
import YellowTextRenderer from "../TextRenderer/YellowTextRenderer";
|
||||||
|
import YellowOrb from "./SyncedComponents/YellowOrb";
|
||||||
|
import LevelSelection from "./SyncedComponents/LevelSelection";
|
||||||
|
import GrayPlanes from "./SyncedComponents/GrayPlanes";
|
||||||
|
import Starfield from "./SyncedComponents/Starfield";
|
||||||
|
import Site from "./SyncedComponents/Site";
|
||||||
|
|
||||||
|
type SyncedComponentLoaderProps = {
|
||||||
|
paused: boolean;
|
||||||
|
shouldIntro: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => {
|
||||||
|
const [introFinished, setIntroFinished] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setIntroFinished(true);
|
||||||
|
}, 4000);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const visible = useMemo(() => {
|
||||||
|
if (props.paused) {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
return props.shouldIntro ? introFinished : true;
|
||||||
|
}
|
||||||
|
}, [introFinished, props.paused, props.shouldIntro]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<group visible={visible}>
|
||||||
|
<HUD />
|
||||||
|
<GreenTextRenderer />
|
||||||
|
<YellowTextRenderer />
|
||||||
|
<YellowOrb visible={visible} />
|
||||||
|
<LevelSelection />
|
||||||
|
<GrayPlanes />
|
||||||
|
</group>
|
||||||
|
<Starfield visible={visible} />
|
||||||
|
<Site shouldIntro={props.shouldIntro} introFinished={introFinished} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SyncedComponentLoader;
|
|
@ -2,7 +2,7 @@ import React, { createRef, memo, RefObject, useRef } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
|
|
||||||
const GrayPlanes = memo((props: { visible: boolean }) => {
|
const GrayPlanes = () => {
|
||||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
const grayPlanePoses = [
|
const grayPlanePoses = [
|
||||||
|
@ -29,11 +29,7 @@ const GrayPlanes = memo((props: { visible: boolean }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// separate wrapper group to make it rotate around [0,0,0]
|
// separate wrapper group to make it rotate around [0,0,0]
|
||||||
<group
|
<group position={[0.1, 0, -2]} ref={grayPlaneGroupRef}>
|
||||||
position={[0.1, 0, -2]}
|
|
||||||
ref={grayPlaneGroupRef}
|
|
||||||
visible={props.visible}
|
|
||||||
>
|
|
||||||
{grayPlaneRefs.map((ref, idx: number) => {
|
{grayPlaneRefs.map((ref, idx: number) => {
|
||||||
return (
|
return (
|
||||||
<mesh
|
<mesh
|
||||||
|
@ -55,6 +51,6 @@ const GrayPlanes = memo((props: { visible: boolean }) => {
|
||||||
})}
|
})}
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
});
|
};
|
||||||
|
|
||||||
export default GrayPlanes;
|
export default GrayPlanes;
|
|
@ -1,17 +1,17 @@
|
||||||
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/sprite/big_hud.png";
|
import bigHud from "../../../static/sprite/big_hud.png";
|
||||||
import bigHudMirrored from "../../static/sprite/big_hud_mirrored.png";
|
import bigHudMirrored from "../../../static/sprite/big_hud_mirrored.png";
|
||||||
import longHud from "../../static/sprite/long_hud.png";
|
import longHud from "../../../static/sprite/long_hud.png";
|
||||||
import longHudMirrored from "../../static/sprite/long_hud_mirrored.png";
|
import longHudMirrored from "../../../static/sprite/long_hud_mirrored.png";
|
||||||
import boringHud from "../../static/sprite/long_hud_boring.png";
|
import boringHud from "../../../static/sprite/long_hud_boring.png";
|
||||||
import boringHudMirrored from "../../static/sprite/long_hud_boring_mirrored.png";
|
import boringHudMirrored from "../../../static/sprite/long_hud_boring_mirrored.png";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useHudStore } from "../../store";
|
import { useHudStore } from "../../../store";
|
||||||
import node_huds from "../../resources/node_huds.json";
|
import node_huds from "../../../resources/node_huds.json";
|
||||||
|
|
||||||
const HUD = memo((props: { visible: boolean }) => {
|
const HUD = () => {
|
||||||
const active = useHudStore((state) => state.active);
|
const active = useHudStore((state) => state.active);
|
||||||
const id = useHudStore((state) => state.id);
|
const id = useHudStore((state) => state.id);
|
||||||
|
|
||||||
|
@ -82,7 +82,7 @@ const HUD = memo((props: { visible: boolean }) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group visible={props.visible} position={[0, 0, 10]}>
|
<group position={[0, 0, 10]}>
|
||||||
<a.sprite
|
<a.sprite
|
||||||
position-x={longHUDPosX}
|
position-x={longHUDPosX}
|
||||||
position-y={currentHud!.long.position[1]}
|
position-y={currentHud!.long.position[1]}
|
||||||
|
@ -127,6 +127,6 @@ const HUD = memo((props: { visible: boolean }) => {
|
||||||
</a.sprite>
|
</a.sprite>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
});
|
};
|
||||||
|
|
||||||
export default HUD;
|
export default HUD;
|
|
@ -1,16 +1,16 @@
|
||||||
import React, { useCallback, useEffect, useMemo } from "react";
|
import React, { useCallback, useEffect, useMemo } from "react";
|
||||||
import level_selection_font from "../../static/sprite/select_level_font.png";
|
import level_selection_font from "../../../static/sprite/select_level_font.png";
|
||||||
import verticalHud from "../../static/sprite/select_level_hud_vertical.png";
|
import verticalHud from "../../../static/sprite/select_level_hud_vertical.png";
|
||||||
import horizontalHud from "../../static/sprite/select_level_hud_horizontal.png";
|
import horizontalHud from "../../../static/sprite/select_level_hud_horizontal.png";
|
||||||
import levelSelectionText from "../../static/sprite/select_level_text.png";
|
import levelSelectionText from "../../../static/sprite/select_level_text.png";
|
||||||
import upArrow from "../../static/sprite/select_level_up_arrow.png";
|
import upArrow from "../../../static/sprite/select_level_up_arrow.png";
|
||||||
import downArrow from "../../static/sprite/select_level_down_arrow.png";
|
import downArrow from "../../../static/sprite/select_level_down_arrow.png";
|
||||||
import { useLevelSelectionStore } from "../../store";
|
import { useLevelSelectionStore } from "../../../store";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
|
|
||||||
const LevelSelection = (props: { visible: boolean }) => {
|
const LevelSelection = () => {
|
||||||
const levelSelectionFontTex = useLoader(
|
const levelSelectionFontTex = useLoader(
|
||||||
THREE.TextureLoader,
|
THREE.TextureLoader,
|
||||||
level_selection_font
|
level_selection_font
|
||||||
|
@ -57,7 +57,7 @@ const LevelSelection = (props: { visible: boolean }) => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group visible={props.visible}>
|
<group>
|
||||||
<a.group position-y={verticalHudPosY} renderOrder={5}>
|
<a.group position-y={verticalHudPosY} renderOrder={5}>
|
||||||
<mesh
|
<mesh
|
||||||
scale={[0.3, 0.4, 0]}
|
scale={[0.3, 0.4, 0]}
|
|
@ -1,9 +1,9 @@
|
||||||
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/sprite/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";
|
||||||
|
|
||||||
const MiddleRing = () => {
|
const MiddleRing = () => {
|
||||||
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
|
@ -1,19 +1,17 @@
|
||||||
import React, {
|
import React, { Suspense, useMemo } from "react";
|
||||||
memo,
|
|
||||||
Suspense,
|
|
||||||
useCallback,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useState,
|
|
||||||
} from "react";
|
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useLevelStore, useNodeStore, useSiteStore } from "../../store";
|
import {
|
||||||
|
useLevelStore,
|
||||||
|
useMainSceneStore,
|
||||||
|
useNodeStore,
|
||||||
|
useSiteStore,
|
||||||
|
} from "../../../store";
|
||||||
import ActiveLevelNodes from "./Site/ActiveLevelNodes";
|
import ActiveLevelNodes from "./Site/ActiveLevelNodes";
|
||||||
import InactiveLevelNodes from "./Site/InactiveLevelNodes";
|
import InactiveLevelNodes from "./Site/InactiveLevelNodes";
|
||||||
import Rings from "./Site/Rings";
|
import Rings from "./Site/Rings";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../../resources/site_a.json";
|
||||||
import site_b from "../../resources/site_b.json";
|
import site_b from "../../../resources/site_b.json";
|
||||||
import game_progress from "../../resources/initial_progress.json";
|
import game_progress from "../../../resources/initial_progress.json";
|
||||||
|
|
||||||
export type NodeDataType = {
|
export type NodeDataType = {
|
||||||
image_table_indices: { 1: string; 2: string; 3: string };
|
image_table_indices: { 1: string; 2: string; 3: string };
|
||||||
|
@ -45,9 +43,13 @@ export type NodesProps = {
|
||||||
gameProgress: typeof game_progress;
|
gameProgress: typeof game_progress;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Site = () => {
|
type SiteProps = {
|
||||||
|
shouldIntro: boolean;
|
||||||
|
introFinished: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Site = (props: SiteProps) => {
|
||||||
const siteTransformState = useSiteStore((state) => state.transformState);
|
const siteTransformState = useSiteStore((state) => state.transformState);
|
||||||
const introAnim = useSiteStore((state) => state.introAnim);
|
|
||||||
|
|
||||||
const siteState = useSpring({
|
const siteState = useSpring({
|
||||||
siteRotY: siteTransformState.rotY,
|
siteRotY: siteTransformState.rotY,
|
||||||
|
@ -59,8 +61,11 @@ const Site = () => {
|
||||||
const introSiteState = useSpring({
|
const introSiteState = useSpring({
|
||||||
posZ: 0,
|
posZ: 0,
|
||||||
rotX: 0,
|
rotX: 0,
|
||||||
from: { posZ: introAnim ? -7 : 0, rotX: introAnim ? Math.PI / 2 : 0 },
|
from: {
|
||||||
config: { duration: 3900 },
|
posZ: props.shouldIntro ? -10 : 0,
|
||||||
|
rotX: props.shouldIntro ? Math.PI / 2 : 0,
|
||||||
|
},
|
||||||
|
config: { duration: 3400 },
|
||||||
});
|
});
|
||||||
|
|
||||||
const gameProgress = useNodeStore((state) => state.gameProgress);
|
const gameProgress = useNodeStore((state) => state.gameProgress);
|
||||||
|
@ -96,7 +101,11 @@ const Site = () => {
|
||||||
siteData={siteData}
|
siteData={siteData}
|
||||||
gameProgress={gameProgress}
|
gameProgress={gameProgress}
|
||||||
/>
|
/>
|
||||||
<Rings />
|
<Rings
|
||||||
|
currentSite={currentSite}
|
||||||
|
activeLevel={activeLevel}
|
||||||
|
activateAllRings={props.shouldIntro ? props.introFinished : true}
|
||||||
|
/>
|
||||||
</a.group>
|
</a.group>
|
||||||
</a.group>
|
</a.group>
|
||||||
</a.group>
|
</a.group>
|
|
@ -1,8 +1,8 @@
|
||||||
import React, {useEffect, useMemo} from "react";
|
import React, { useEffect, useMemo } from "react";
|
||||||
import Node from "../Node";
|
import Node from "./Node";
|
||||||
import node_positions from "../../../resources/node_positions.json";
|
import node_positions from "../../../../resources/node_positions.json";
|
||||||
import { useNodeStore } from "../../../store";
|
import { useNodeStore } from "../../../../store";
|
||||||
import { isNodeVisible } from "../../../core/nodeSelector";
|
import { isNodeVisible } from "../../../../core/nodeSelector";
|
||||||
import { NodesProps } from "../Site";
|
import { NodesProps } from "../Site";
|
||||||
|
|
||||||
const ActiveLevelNodes = (props: NodesProps) => {
|
const ActiveLevelNodes = (props: NodesProps) => {
|
||||||
|
@ -13,9 +13,6 @@ const ActiveLevelNodes = (props: NodesProps) => {
|
||||||
[props]
|
[props]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log("sex")
|
|
||||||
})
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{Object.entries(activeLevelNodes).map((node: [string, any]) => {
|
{Object.entries(activeLevelNodes).map((node: [string, any]) => {
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { memo, useMemo } from "react";
|
import React, { memo, useMemo } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import lofTexture from "../../static/sprite/gray_ring_lof.png";
|
import lofTexture from "../../../../static/sprite/gray_ring_lof.png";
|
||||||
import holeTexture from "../../static/sprite/hole.png";
|
import holeTexture from "../../../../static/sprite/hole.png";
|
||||||
import lifeTexture from "../../static/sprite/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 = {
|
||||||
|
@ -20,7 +20,7 @@ const GrayRing = memo((props: GrayRingProps) => {
|
||||||
uniform.hole = { type: "t", value: holeTex };
|
uniform.hole = { type: "t", value: holeTex };
|
||||||
uniform.life = { type: "t", value: lifeTex };
|
uniform.life = { type: "t", value: lifeTex };
|
||||||
|
|
||||||
return uniform
|
return uniform;
|
||||||
}, [holeTex, lifeTex, lofTex]);
|
}, [holeTex, lifeTex, lofTex]);
|
||||||
|
|
||||||
const vertexShader = `
|
const vertexShader = `
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useMemo } from "react";
|
import React, { useMemo } from "react";
|
||||||
import node_positions from "../../../resources/node_positions.json";
|
import node_positions from "../../../../resources/node_positions.json";
|
||||||
import Node from "../Node";
|
import Node from "./Node";
|
||||||
import { isNodeVisible } from "../../../core/nodeSelector";
|
import { isNodeVisible } from "../../../../core/nodeSelector";
|
||||||
import { NodesProps } from "../Site";
|
import { NodesProps } from "../Site";
|
||||||
|
|
||||||
const InactiveLevelNodes = (props: NodesProps) => {
|
const InactiveLevelNodes = (props: NodesProps) => {
|
|
@ -2,22 +2,22 @@ import React, { useEffect, useMemo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import Cou from "../../static/sprite/Cou.png";
|
import Cou from "../../../../static/sprite/Cou.png";
|
||||||
import CouActive from "../../static/sprite/Cou_active.png";
|
import CouActive from "../../../../static/sprite/Cou_active.png";
|
||||||
import Dc from "../../static/sprite/Dc.png";
|
import Dc from "../../../../static/sprite/Dc.png";
|
||||||
import DcActive from "../../static/sprite/Dc_active.png";
|
import DcActive from "../../../../static/sprite/Dc_active.png";
|
||||||
import SSkn from "../../static/sprite/SSkn.png";
|
import SSkn from "../../../../static/sprite/SSkn.png";
|
||||||
import SSKnActive from "../../static/sprite/SSkn_active.png";
|
import SSKnActive from "../../../../static/sprite/SSkn_active.png";
|
||||||
import Tda from "../../static/sprite/Tda.png";
|
import Tda from "../../../../static/sprite/Tda.png";
|
||||||
import TdaActive from "../../static/sprite/Tda_active.png";
|
import TdaActive from "../../../../static/sprite/Tda_active.png";
|
||||||
import Dia from "../../static/sprite/Dia.png";
|
import Dia from "../../../../static/sprite/Dia.png";
|
||||||
import DiaActive from "../../static/sprite/Dia_active.png";
|
import DiaActive from "../../../../static/sprite/Dia_active.png";
|
||||||
import Lda from "../../static/sprite/Lda.png";
|
import Lda from "../../../../static/sprite/Lda.png";
|
||||||
import LdaActive from "../../static/sprite/Lda_active.png";
|
import LdaActive from "../../../../static/sprite/Lda_active.png";
|
||||||
import MULTI from "../../static/sprite/MULTI.png";
|
import MULTI from "../../../../static/sprite/MULTI.png";
|
||||||
import MULTIActive from "../../static/sprite/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 { useNodeStore } from "../../store";
|
import { useNodeStore } from "../../../../store";
|
||||||
|
|
||||||
type NodeContructorProps = {
|
type NodeContructorProps = {
|
||||||
sprite: string;
|
sprite: string;
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { memo, useEffect, useMemo, useRef } from "react";
|
import React, { memo, useEffect, useMemo, 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/sprite/site_a.png";
|
import siteATex from "../../../../static/sprite/site_a.png";
|
||||||
import siteBTex from "../../static/sprite/site_b.png";
|
import siteBTex from "../../../../static/sprite/site_b.png";
|
||||||
import siteLevelTex from "../../static/sprite/site_levels.png";
|
import siteLevelTex from "../../../../static/sprite/site_levels.png";
|
||||||
|
|
||||||
type PurpleRingProps = {
|
type PurpleRingProps = {
|
||||||
purpleRingPosY: number;
|
purpleRingPosY: number;
|
||||||
|
@ -226,6 +226,7 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
||||||
<mesh
|
<mesh
|
||||||
position={[0, props.purpleRingPosY, 0]}
|
position={[0, props.purpleRingPosY, 0]}
|
||||||
scale={[26, 26, 26]}
|
scale={[26, 26, 26]}
|
||||||
|
renderOrder={1}
|
||||||
ref={purpleRingRef}
|
ref={purpleRingRef}
|
||||||
>
|
>
|
||||||
<cylinderBufferGeometry
|
<cylinderBufferGeometry
|
64
src/components/MainScene/SyncedComponents/Site/Rings.tsx
Normal file
64
src/components/MainScene/SyncedComponents/Site/Rings.tsx
Normal file
|
@ -0,0 +1,64 @@
|
||||||
|
import React, { useMemo } from "react";
|
||||||
|
import level_y_values from "../../../../resources/level_y_values.json";
|
||||||
|
import PurpleRing from "./PurpleRing";
|
||||||
|
import GrayRing from "./GrayRing";
|
||||||
|
import CyanCrystal from "./CyanCrystal";
|
||||||
|
|
||||||
|
type RingsProps = {
|
||||||
|
currentSite: string;
|
||||||
|
activeLevel: string;
|
||||||
|
activateAllRings: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Rings = (props: RingsProps) => {
|
||||||
|
const visibleRings = useMemo(() => {
|
||||||
|
const rings: [string, number][] = [];
|
||||||
|
if (props.activateAllRings) {
|
||||||
|
Object.entries(level_y_values).forEach((levelDataPair) => {
|
||||||
|
rings.push([levelDataPair[0], levelDataPair[1]]);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const activeLevelNr = parseInt(props.activeLevel);
|
||||||
|
const visibleLevels = [
|
||||||
|
(activeLevelNr - 2).toString().padStart(2, "0"),
|
||||||
|
(activeLevelNr - 1).toString().padStart(2, "0"),
|
||||||
|
activeLevelNr.toString().padStart(2, "0"),
|
||||||
|
(activeLevelNr + 1).toString().padStart(2, "0"),
|
||||||
|
(activeLevelNr + 2).toString().padStart(2, "0"),
|
||||||
|
];
|
||||||
|
|
||||||
|
visibleLevels.forEach((level) => {
|
||||||
|
rings.push([
|
||||||
|
level,
|
||||||
|
level_y_values[level as keyof typeof level_y_values],
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return rings;
|
||||||
|
}, [props.activateAllRings, props.activeLevel]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{visibleRings.map((level: [string, number]) => {
|
||||||
|
if (
|
||||||
|
(props.currentSite === "b" && parseInt(level[0]) <= 13) ||
|
||||||
|
props.currentSite === "a"
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<group position={[0, level[1], 0]} key={level[0]}>
|
||||||
|
<PurpleRing
|
||||||
|
purpleRingPosY={0.44}
|
||||||
|
level={level[0]}
|
||||||
|
site={props.currentSite}
|
||||||
|
/>
|
||||||
|
<GrayRing grayRingPosY={-0.29} />
|
||||||
|
<CyanCrystal crystalRingPosY={-0.45} />
|
||||||
|
</group>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Rings;
|
86
src/components/MainScene/SyncedComponents/Starfield.tsx
Normal file
86
src/components/MainScene/SyncedComponents/Starfield.tsx
Normal file
|
@ -0,0 +1,86 @@
|
||||||
|
import React from "react";
|
||||||
|
import Star from "./Starfield/Star";
|
||||||
|
|
||||||
|
type StarfieldProps = {
|
||||||
|
visible: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Starfield = (props: StarfieldProps) => {
|
||||||
|
const LCG = (a: number, c: number, m: number, s: number) => () =>
|
||||||
|
(s = (s * a + c) % m);
|
||||||
|
|
||||||
|
const lcgInstance = LCG(1664525, 1013904223, 2 ** 32, 2);
|
||||||
|
|
||||||
|
const [
|
||||||
|
posesBlueFromRight,
|
||||||
|
posesBlueFromLeft,
|
||||||
|
posesCyanFromRight,
|
||||||
|
posesCyanFromLeft,
|
||||||
|
posesWhiteFromRight,
|
||||||
|
posesWhiteFromLeft,
|
||||||
|
] = [5, 5, 5, 5, 5, 5].map((x) =>
|
||||||
|
Array.from({ length: x }, () => [
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
lcgInstance() / 10000000000 - 10,
|
||||||
|
lcgInstance() / 1000000000,
|
||||||
|
])
|
||||||
|
);
|
||||||
|
|
||||||
|
const [posesBlueFromBottom, posesCyanFromBottom, posesWhiteFromBottom] = [
|
||||||
|
60,
|
||||||
|
60,
|
||||||
|
60,
|
||||||
|
].map((x) =>
|
||||||
|
Array.from({ length: x }, () => [
|
||||||
|
lcgInstance() / 1000000050,
|
||||||
|
lcgInstance() / 100000099 - 10,
|
||||||
|
lcgInstance() / 1000000050,
|
||||||
|
])
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<group position={[0, -1, 2]} visible={props.visible}>
|
||||||
|
<group rotation={[0, 0.75, Math.PI / 2]} position={[-0.7, -1, -5]}>
|
||||||
|
{posesBlueFromLeft.map((poses, idx) => (
|
||||||
|
<Star position={poses} color={"blue"} key={idx} />
|
||||||
|
))}
|
||||||
|
{posesWhiteFromLeft.map((poses, idx) => (
|
||||||
|
<Star position={poses} color={"white"} key={idx} />
|
||||||
|
))}
|
||||||
|
{posesCyanFromLeft.map((poses, idx) => (
|
||||||
|
<Star position={poses} color={"cyan"} key={idx} />
|
||||||
|
))}
|
||||||
|
</group>
|
||||||
|
<group rotation={[0, 2.5, Math.PI / 2]} position={[-0.7, -1, -1]}>
|
||||||
|
{posesBlueFromRight.map((poses, idx) => (
|
||||||
|
<Star position={poses} color={"blue"} key={idx} />
|
||||||
|
))}
|
||||||
|
{posesWhiteFromRight.map((poses, idx) => (
|
||||||
|
<Star position={poses} color={"white"} key={idx} />
|
||||||
|
))}
|
||||||
|
{posesCyanFromRight.map((poses, idx) => (
|
||||||
|
<Star position={poses} color={"cyan"} key={idx} />
|
||||||
|
))}
|
||||||
|
</group>
|
||||||
|
</group>
|
||||||
|
<group
|
||||||
|
position={[-3, -15, -19]}
|
||||||
|
rotation={[Math.PI / 4, 0, 0]}
|
||||||
|
visible={!props.visible}
|
||||||
|
>
|
||||||
|
{posesBlueFromBottom.map((poses, idx) => (
|
||||||
|
<Star position={poses} color={"blue"} key={idx} introStar={true} />
|
||||||
|
))}
|
||||||
|
{posesWhiteFromBottom.map((poses, idx) => (
|
||||||
|
<Star position={poses} color={"white"} key={idx} introStar={true} />
|
||||||
|
))}
|
||||||
|
{posesCyanFromBottom.map((poses, idx) => (
|
||||||
|
<Star position={poses} color={"cyan"} key={idx} introStar={true} />
|
||||||
|
))}
|
||||||
|
</group>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Starfield;
|
|
@ -6,6 +6,7 @@ import { useFrame } from "react-three-fiber";
|
||||||
type StarProps = {
|
type StarProps = {
|
||||||
position: number[];
|
position: number[];
|
||||||
color: string;
|
color: string;
|
||||||
|
introStar?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Star = (props: StarProps) => {
|
const Star = (props: StarProps) => {
|
||||||
|
@ -50,10 +51,14 @@ const Star = (props: StarProps) => {
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (starRef.current) {
|
if (starRef.current) {
|
||||||
|
if (props.introStar) {
|
||||||
|
starRef.current.position.y += 0.2 + amp.current;
|
||||||
|
} else {
|
||||||
if (starRef.current.position.y > 4) {
|
if (starRef.current.position.y > 4) {
|
||||||
starRef.current.position.y = props.position[1];
|
starRef.current.position.y = props.position[1];
|
||||||
}
|
}
|
||||||
starRef.current.position.y += (0.01 + amp.current);
|
starRef.current.position.y += 0.01 + amp.current;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,15 +1,19 @@
|
||||||
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/sprite/orb.png";
|
import orbSprite from "../../../static/sprite/orb.png";
|
||||||
import { useMainSceneStore } from "../../store";
|
import { useMainSceneStore } from "../../../store";
|
||||||
|
|
||||||
// initialize outside the component otherwise it gets overwritten when it rerenders
|
// initialize outside the component otherwise it gets overwritten when it rerenders
|
||||||
let orbIdx = 0;
|
let orbIdx = 0;
|
||||||
let orbDirectionChangeCount = 0;
|
let orbDirectionChangeCount = 0;
|
||||||
let renderOrder = -1;
|
let renderOrder = -1;
|
||||||
|
|
||||||
const YellowOrb = memo((props: { visible: boolean }) => {
|
type YellowOrbProps = {
|
||||||
|
visible: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const YellowOrb = (props: YellowOrbProps) => {
|
||||||
const orbRef = useRef<THREE.Object3D>();
|
const orbRef = useRef<THREE.Object3D>();
|
||||||
const [orbDirection, setOrbDirection] = useState("left");
|
const [orbDirection, setOrbDirection] = useState("left");
|
||||||
const [currentCurve, setCurrentCurve] = useState("first");
|
const [currentCurve, setCurrentCurve] = useState("first");
|
||||||
|
@ -107,7 +111,7 @@ const YellowOrb = memo((props: { visible: boolean }) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, -0.1, 1]} visible={props.visible}>
|
<group position={[0, -0.1, 1]}>
|
||||||
<sprite scale={[0.5, 0.5, 0.5]} ref={orbRef} renderOrder={renderOrder}>
|
<sprite scale={[0.5, 0.5, 0.5]} ref={orbRef} renderOrder={renderOrder}>
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
|
@ -118,6 +122,6 @@ const YellowOrb = memo((props: { visible: boolean }) => {
|
||||||
</sprite>
|
</sprite>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
});
|
};
|
||||||
|
|
||||||
export default YellowOrb;
|
export default YellowOrb;
|
|
@ -6,7 +6,7 @@ import {
|
||||||
useSiteStore,
|
useSiteStore,
|
||||||
} from "../../store";
|
} from "../../store";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { LevelType, SiteType } from "../MainScene/Site";
|
import { LevelType, SiteType } from "../MainScene/SyncedComponents/Site";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../resources/site_a.json";
|
||||||
import site_b from "../../resources/site_b.json";
|
import site_b from "../../resources/site_b.json";
|
||||||
import dummy from "../../static/sprite/dummy.png";
|
import dummy from "../../static/sprite/dummy.png";
|
||||||
|
|
|
@ -15,7 +15,7 @@ import {
|
||||||
useSiteStore,
|
useSiteStore,
|
||||||
} from "../../store";
|
} from "../../store";
|
||||||
import t from "../../static/webvtt/test.vtt";
|
import t from "../../static/webvtt/test.vtt";
|
||||||
import { SiteType } from "../MainScene/Site";
|
import { SiteType } from "../MainScene/SyncedComponents/Site";
|
||||||
|
|
||||||
const MediaPlayer = () => {
|
const MediaPlayer = () => {
|
||||||
const [mediaSource, setMediaSource] = useState<any>();
|
const [mediaSource, setMediaSource] = useState<any>();
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { useSpring, a } from "@react-spring/three";
|
||||||
import word_position_states from "../../../resources/word_position_states.json";
|
import word_position_states from "../../../resources/word_position_states.json";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import site_a from "../../../resources/site_a.json";
|
import site_a from "../../../resources/site_a.json";
|
||||||
import { SiteType } from "../../MainScene/Site";
|
import { SiteType } from "../../MainScene/SyncedComponents/Site";
|
||||||
import site_b from "../../../resources/site_b.json";
|
import site_b from "../../../resources/site_b.json";
|
||||||
|
|
||||||
type RightSideProps = {
|
type RightSideProps = {
|
||||||
|
|
|
@ -3,7 +3,7 @@ import React, { useEffect, useRef } from "react";
|
||||||
import { GreenTextState, useGreenTextStore } from "../../store";
|
import { GreenTextState, useGreenTextStore } from "../../store";
|
||||||
import MediumLetter from "./MediumLetter";
|
import MediumLetter from "./MediumLetter";
|
||||||
|
|
||||||
const GreenTextRenderer = (props: { visible?: boolean }) => {
|
const GreenTextRenderer = () => {
|
||||||
const greenTextActive = useGreenTextStore((state) => state.active);
|
const greenTextActive = useGreenTextStore((state) => state.active);
|
||||||
|
|
||||||
const transformRef = useRef(useGreenTextStore.getState().transformState);
|
const transformRef = useRef(useGreenTextStore.getState().transformState);
|
||||||
|
@ -34,7 +34,7 @@ const GreenTextRenderer = (props: { visible?: boolean }) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, 0, 10]} visible={props.visible}>
|
<group position={[0, 0, 10]}>
|
||||||
<a.group
|
<a.group
|
||||||
position-x={greenTextPosX}
|
position-x={greenTextPosX}
|
||||||
position-y={transformRef.current.posY}
|
position-y={transformRef.current.posY}
|
||||||
|
@ -42,11 +42,7 @@ const GreenTextRenderer = (props: { visible?: boolean }) => {
|
||||||
scale={[0.02, 0.035, 0.02]}
|
scale={[0.02, 0.035, 0.02]}
|
||||||
>
|
>
|
||||||
{textArrRef.current.map((letter, idx) => (
|
{textArrRef.current.map((letter, idx) => (
|
||||||
<MediumLetter
|
<MediumLetter letter={letter} letterIdx={idx} key={idx} />
|
||||||
letter={letter}
|
|
||||||
letterIdx={idx}
|
|
||||||
key={idx}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</a.group>
|
</a.group>
|
||||||
</group>
|
</group>
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { BigTextState, useBigTextStore } from "../../store";
|
||||||
import { a, useSpring, useTrail } from "@react-spring/three";
|
import { a, useSpring, useTrail } from "@react-spring/three";
|
||||||
import BigLetter from "./BigLetter";
|
import BigLetter from "./BigLetter";
|
||||||
|
|
||||||
const YellowTextRenderer = (props: { visible?: boolean }) => {
|
const YellowTextRenderer = () => {
|
||||||
const disableTrail = useBigTextStore((state) => state.disableTrail);
|
const disableTrail = useBigTextStore((state) => state.disableTrail);
|
||||||
const transformState = useBigTextStore((state) => state.transformState);
|
const transformState = useBigTextStore((state) => state.transformState);
|
||||||
|
|
||||||
|
@ -41,7 +41,7 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, 0, 10]} visible={props.visible && visible}>
|
<group position={[0, 0, 10]} visible={visible}>
|
||||||
{disableTrail
|
{disableTrail
|
||||||
? textArrRef.current.map((letter, idx) => (
|
? textArrRef.current.map((letter, idx) => (
|
||||||
<a.group
|
<a.group
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
import node_huds from "../../resources/node_huds.json";
|
import node_huds from "../../resources/node_huds.json";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../resources/site_a.json";
|
||||||
import { SiteType } from "../../components/MainScene/Site";
|
import { SiteType } from "../../components/MainScene/SyncedComponents/Site";
|
||||||
import { useGreenTextStore, useSiteStore } from "../../store";
|
import { useGreenTextStore, useSiteStore } from "../../store";
|
||||||
import site_b from "../../resources/site_b.json";
|
import site_b from "../../resources/site_b.json";
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,6 @@ import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
import { useLevelStore, useSiteSaveStore } from "../../store";
|
import { useLevelStore, useSiteSaveStore } from "../../store";
|
||||||
|
|
||||||
|
|
||||||
const LevelManager = (props: StateManagerProps) => {
|
const LevelManager = (props: StateManagerProps) => {
|
||||||
const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
|
const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
|
||||||
const siteASaveState = useSiteSaveStore((state) => state.a);
|
const siteASaveState = useSiteSaveStore((state) => state.a);
|
||||||
|
@ -28,9 +27,9 @@ const LevelManager = (props: StateManagerProps) => {
|
||||||
case "pause_change_select":
|
case "pause_change_select":
|
||||||
return {
|
return {
|
||||||
action: setActiveLevel,
|
action: setActiveLevel,
|
||||||
value: [
|
value:
|
||||||
newSite === "a" ? siteASaveState.level : siteBSaveState.level,
|
newSite === "a" ? siteASaveState.level : siteBSaveState.level,
|
||||||
],
|
delay: 0,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -65,14 +65,9 @@ const SiteManager = (props: StateManagerProps) => {
|
||||||
value: [newSite],
|
value: [newSite],
|
||||||
actionDelay: 0,
|
actionDelay: 0,
|
||||||
};
|
};
|
||||||
case "throw_node_media":
|
|
||||||
case "throw_node_gate":
|
|
||||||
case "throw_node_sskn":
|
|
||||||
case "throw_node_tak":
|
|
||||||
return { action: setIntroAnim, value: [false], actionDelay: 0 };
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[changeSite, setIntroAnim, setTransformState]
|
[changeSite, setTransformState]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -3,7 +3,7 @@ import node_huds from "../../resources/node_huds.json";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../resources/site_a.json";
|
||||||
import site_b from "../../resources/site_b.json";
|
import site_b from "../../resources/site_b.json";
|
||||||
import { useBigTextStore, useSiteStore } from "../../store";
|
import { useBigTextStore, useSiteStore } from "../../store";
|
||||||
import { SiteType } from "../../components/MainScene/Site";
|
import { SiteType } from "../../components/MainScene/SyncedComponents/Site";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
|
|
||||||
const YellowTextManager = (props: StateManagerProps) => {
|
const YellowTextManager = (props: StateManagerProps) => {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import site_a from "../resources/site_a.json";
|
import site_a from "../resources/site_a.json";
|
||||||
import site_b from "../resources/site_b.json";
|
import site_b from "../resources/site_b.json";
|
||||||
import nodeSelector, { getNodeHudId, getNodeId } from "./nodeSelector";
|
import nodeSelector, { getNodeHudId, getNodeId } from "./nodeSelector";
|
||||||
import { SiteType } from "../components/MainScene/Site";
|
import { SiteType } from "../components/MainScene/SyncedComponents/Site";
|
||||||
|
|
||||||
const handleMainSceneEvent = (gameContext: any) => {
|
const handleMainSceneEvent = (gameContext: any) => {
|
||||||
let event;
|
let event;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import node_matrices from "../resources/node_matrices.json";
|
import node_matrices from "../resources/node_matrices.json";
|
||||||
import site_a from "../resources/site_a.json";
|
import site_a from "../resources/site_a.json";
|
||||||
import site_b from "../resources/site_b.json";
|
import site_b from "../resources/site_b.json";
|
||||||
import { SiteType } from "../components/MainScene/Site";
|
import { SiteType } from "../components/MainScene/SyncedComponents/Site";
|
||||||
import unlocked_nodes from "../resources/initial_progress.json";
|
import unlocked_nodes from "../resources/initial_progress.json";
|
||||||
import level_y_values from "../resources/level_y_values.json";
|
import level_y_values from "../resources/level_y_values.json";
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,18 @@
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { useSceneStore } from "../store";
|
import { useSceneStore, useSiteStore } from "../store";
|
||||||
|
|
||||||
const ChangeDiscScene = () => {
|
const ChangeDiscScene = () => {
|
||||||
const setScene = useSceneStore((state) => state.setScene);
|
const setScene = useSceneStore((state) => state.setScene);
|
||||||
|
const currentSite = useSiteStore((state) => state.currentSite);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (currentSite === "a") {
|
||||||
document.getElementsByTagName("canvas")[0].className =
|
document.getElementsByTagName("canvas")[0].className =
|
||||||
"change-disc-scene-background";
|
"change-disc-scene-a-background";
|
||||||
|
} else if (currentSite === "b") {
|
||||||
|
document.getElementsByTagName("canvas")[0].className =
|
||||||
|
"change-disc-scene-b-background";
|
||||||
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setScene("main");
|
setScene("main");
|
||||||
|
@ -15,7 +22,7 @@ const ChangeDiscScene = () => {
|
||||||
document.getElementsByTagName("canvas")[0].className =
|
document.getElementsByTagName("canvas")[0].className =
|
||||||
"main-scene-background";
|
"main-scene-background";
|
||||||
};
|
};
|
||||||
}, [setScene]);
|
}, [currentSite, setScene]);
|
||||||
|
|
||||||
return <></>;
|
return <></>;
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,49 +1,44 @@
|
||||||
import { a } from "@react-spring/three";
|
import { a } from "@react-spring/three";
|
||||||
import { OrbitControls } from "@react-three/drei";
|
import { OrbitControls } from "@react-three/drei";
|
||||||
import React, { Suspense, useMemo } from "react";
|
import React, { Suspense, useEffect, useMemo } from "react";
|
||||||
import Site from "../components/MainScene/Site";
|
import Site from "../components/MainScene/SyncedComponents/Site";
|
||||||
import Lain from "../components/MainScene/Lain";
|
import Lain from "../components/MainScene/Lain";
|
||||||
import Preloader from "../components/Preloader";
|
import Preloader from "../components/Preloader";
|
||||||
import GrayPlanes from "../components/MainScene/GrayPlanes";
|
import MiddleRing from "../components/MainScene/SyncedComponents/MiddleRing";
|
||||||
import MiddleRing from "../components/MainScene/MiddleRing";
|
|
||||||
import { useMainSceneStore } from "../store";
|
import { useMainSceneStore } from "../store";
|
||||||
import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
|
|
||||||
import HUD from "../components/MainScene/HUD";
|
|
||||||
import YellowOrb from "../components/MainScene/YellowOrb";
|
|
||||||
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
|
||||||
import LevelSelection from "../components/MainScene/LevelSelection";
|
|
||||||
import Pause from "../components/MainScene/PauseSubscene/Pause";
|
import Pause from "../components/MainScene/PauseSubscene/Pause";
|
||||||
import Starfield from "../components/MainScene/Starfield/Starfield";
|
import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader";
|
||||||
|
|
||||||
const MainScene = () => {
|
const MainScene = () => {
|
||||||
const currentSubscene = useMainSceneStore((state) => state.subscene);
|
const currentSubscene = useMainSceneStore((state) => state.subscene);
|
||||||
|
const shouldIntro = useMainSceneStore((state) => state.intro);
|
||||||
|
|
||||||
const isPaused = useMemo(() => currentSubscene === "pause", [
|
const isPaused = useMemo(() => currentSubscene === "pause", [
|
||||||
currentSubscene,
|
currentSubscene,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.getElementsByTagName("body")[0].className = "main-body";
|
||||||
|
return () => {
|
||||||
|
document.getElementsByTagName("body")[0].className = "";
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<a.group>
|
<a.group>
|
||||||
<Preloader />
|
<Preloader />
|
||||||
<Site />
|
|
||||||
<HUD visible={!isPaused} />
|
|
||||||
<GreenTextRenderer visible={!isPaused} />
|
|
||||||
<YellowTextRenderer visible={!isPaused} />
|
|
||||||
<YellowOrb visible={!isPaused} />
|
|
||||||
<GrayPlanes visible={!isPaused} />
|
|
||||||
<MiddleRing />
|
|
||||||
<LevelSelection visible={!isPaused} />
|
|
||||||
<Pause visible={isPaused} />
|
<Pause visible={isPaused} />
|
||||||
<Starfield visible={!isPaused} />
|
<SyncedComponentLoader paused={isPaused} shouldIntro={shouldIntro} />
|
||||||
|
{/*<MiddleRing />*/}
|
||||||
<OrbitControls />
|
<OrbitControls />
|
||||||
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
||||||
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
|
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
|
||||||
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
|
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
|
||||||
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
|
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
|
||||||
</a.group>
|
</a.group>
|
||||||
<Lain />
|
<Lain shouldIntro={shouldIntro} />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</perspectiveCamera>
|
</perspectiveCamera>
|
||||||
);
|
);
|
||||||
|
|
|
@ -10,7 +10,7 @@ import { OrbitControls } from "@react-three/drei";
|
||||||
import Images from "../components/MediaScene/Images";
|
import Images from "../components/MediaScene/Images";
|
||||||
import MediumLetter from "../components/TextRenderer/MediumLetter";
|
import MediumLetter from "../components/TextRenderer/MediumLetter";
|
||||||
import site_a from "../resources/site_a.json";
|
import site_a from "../resources/site_a.json";
|
||||||
import { SiteType } from "../components/MainScene/Site";
|
import { SiteType } from "../components/MainScene/SyncedComponents/Site";
|
||||||
import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator";
|
import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator";
|
||||||
import site_b from "../resources/site_b.json";
|
import site_b from "../resources/site_b.json";
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue