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

intro anim works properly now, changed structure a bit

Browse source
This commit is contained in:
ad044 2020-12-27 21:42:42 +04:00
parent e19ad4548b
commit 79a4808012
34 changed files with 364 additions and 238 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/App.tsx
View file

@ -15,12 +15,9 @@ import ChangeDiscScene from "./scenes/ChangeDiscScene";
const App = () => {
const currentScene = useSceneStore((state) => state.currentScene);
useEffect(() => {
document.title = "< index >";
document.getElementsByTagName("body")[0].className = "main-body";
return () => {
document.getElementsByTagName("body")[0].className = "";
};
}, []);
const dispatchScene = useMemo(() => {

26
src/components/MainScene/Lain.tsx
View file

@ -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 * as THREE from "three";
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 lainAnimationDispatch = {
@ -126,14 +130,28 @@ const Lain = () => {
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 (
<Suspense fallback={null}>
<sprite scale={[4.5, 4.5, 4.5]} position={[0, -0.15, 0]}>
{
{stopIntroAnim ? (
lainAnimationDispatch[
lainMoveState as keyof typeof lainAnimationDispatch
]
}
) : (
<LainIntro />
)}
</sprite>
</Suspense>
);

35
src/components/MainScene/Site/Rings.tsx
View file

@ -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;

57
src/components/MainScene/Starfield/Starfield.tsx
View file

@ -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
View 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;

10
src/components/MainScene/GrayPlanes.tsx → src/components/MainScene/SyncedComponents/GrayPlanes.tsx
View file

@ -2,7 +2,7 @@ import React, { createRef, memo, RefObject, useRef } from "react";
import * as THREE from "three";
import { useFrame } from "react-three-fiber";
const GrayPlanes = memo((props: { visible: boolean }) => {
const GrayPlanes = () => {
const grayPlaneGroupRef = useRef<THREE.Object3D>();
const grayPlanePoses = [
@ -29,11 +29,7 @@ const GrayPlanes = memo((props: { visible: boolean }) => {
return (
// separate wrapper group to make it rotate around [0,0,0]
<group
position={[0.1, 0, -2]}
ref={grayPlaneGroupRef}
visible={props.visible}
>
<group position={[0.1, 0, -2]} ref={grayPlaneGroupRef}>
{grayPlaneRefs.map((ref, idx: number) => {
return (
<mesh
@ -55,6 +51,6 @@ const GrayPlanes = memo((props: { visible: boolean }) => {
})}
</group>
);
});
};
export default GrayPlanes;

22
src/components/MainScene/HUD.tsx → src/components/MainScene/SyncedComponents/HUD.tsx
View file

@ -1,17 +1,17 @@
import React, { memo } from "react";
import { useLoader } from "react-three-fiber";
import * as THREE from "three";
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 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 } from "@react-spring/three";
import { useHudStore } from "../../store";
import node_huds from "../../resources/node_huds.json";
import { useHudStore } from "../../../store";
import node_huds from "../../../resources/node_huds.json";
const HUD = memo((props: { visible: boolean }) => {
const HUD = () => {
const active = useHudStore((state) => state.active);
const id = useHudStore((state) => state.id);
@ -82,7 +82,7 @@ const HUD = memo((props: { visible: boolean }) => {
);
return (
<group visible={props.visible} position={[0, 0, 10]}>
<group position={[0, 0, 10]}>
<a.sprite
position-x={longHUDPosX}
position-y={currentHud!.long.position[1]}
@ -127,6 +127,6 @@ const HUD = memo((props: { visible: boolean }) => {
</a.sprite>
</group>
);
});
};
export default HUD;

18
src/components/MainScene/LevelSelection.tsx → src/components/MainScene/SyncedComponents/LevelSelection.tsx
View file

@ -1,16 +1,16 @@
import React, { useCallback, useEffect, useMemo } from "react";
import level_selection_font from "../../static/sprite/select_level_font.png";
import verticalHud from "../../static/sprite/select_level_hud_vertical.png";
import horizontalHud from "../../static/sprite/select_level_hud_horizontal.png";
import levelSelectionText from "../../static/sprite/select_level_text.png";
import upArrow from "../../static/sprite/select_level_up_arrow.png";
import downArrow from "../../static/sprite/select_level_down_arrow.png";
import { useLevelSelectionStore } from "../../store";
import level_selection_font from "../../../static/sprite/select_level_font.png";
import verticalHud from "../../../static/sprite/select_level_hud_vertical.png";
import horizontalHud from "../../../static/sprite/select_level_hud_horizontal.png";
import levelSelectionText from "../../../static/sprite/select_level_text.png";
import upArrow from "../../../static/sprite/select_level_up_arrow.png";
import downArrow from "../../../static/sprite/select_level_down_arrow.png";
import { useLevelSelectionStore } from "../../../store";
import { useLoader } from "react-three-fiber";
import * as THREE from "three";
import { a, useSpring } from "@react-spring/three";
const LevelSelection = (props: { visible: boolean }) => {
const LevelSelection = () => {
const levelSelectionFontTex = useLoader(
THREE.TextureLoader,
level_selection_font
@ -57,7 +57,7 @@ const LevelSelection = (props: { visible: boolean }) => {
}, []);
return (
<group visible={props.visible}>
<group>
<a.group position-y={verticalHudPosY} renderOrder={5}>
<mesh
scale={[0.3, 0.4, 0]}

4
src/components/MainScene/MiddleRing.tsx → src/components/MainScene/SyncedComponents/MiddleRing.tsx
View file

@ -1,9 +1,9 @@
import React, { useMemo, useRef } from "react";
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 { a, useSpring } from "@react-spring/three";
import { useMiddleRingStore } from "../../store";
import { useMiddleRingStore } from "../../../store";
const MiddleRing = () => {
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);

43
src/components/MainScene/Site.tsx → src/components/MainScene/SyncedComponents/Site.tsx
View file

@ -1,19 +1,17 @@
import React, {
memo,
Suspense,
useCallback,
useEffect,
useMemo,
useState,
} from "react";
import React, { Suspense, useMemo } from "react";
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 InactiveLevelNodes from "./Site/InactiveLevelNodes";
import Rings from "./Site/Rings";
import site_a from "../../resources/site_a.json";
import site_b from "../../resources/site_b.json";
import game_progress from "../../resources/initial_progress.json";
import site_a from "../../../resources/site_a.json";
import site_b from "../../../resources/site_b.json";
import game_progress from "../../../resources/initial_progress.json";
export type NodeDataType = {
image_table_indices: { 1: string; 2: string; 3: string };
@ -45,9 +43,13 @@ export type NodesProps = {
gameProgress: typeof game_progress;
};
const Site = () => {
type SiteProps = {
shouldIntro: boolean;
introFinished: boolean;
};
const Site = (props: SiteProps) => {
const siteTransformState = useSiteStore((state) => state.transformState);
const introAnim = useSiteStore((state) => state.introAnim);
const siteState = useSpring({
siteRotY: siteTransformState.rotY,
@ -59,8 +61,11 @@ const Site = () => {
const introSiteState = useSpring({
posZ: 0,
rotX: 0,
from: { posZ: introAnim ? -7 : 0, rotX: introAnim ? Math.PI / 2 : 0 },
config: { duration: 3900 },
from: {
posZ: props.shouldIntro ? -10 : 0,
rotX: props.shouldIntro ? Math.PI / 2 : 0,
},
config: { duration: 3400 },
});
const gameProgress = useNodeStore((state) => state.gameProgress);
@ -96,7 +101,11 @@ const Site = () => {
siteData={siteData}
gameProgress={gameProgress}
/>
<Rings />
<Rings
currentSite={currentSite}
activeLevel={activeLevel}
activateAllRings={props.shouldIntro ? props.introFinished : true}
/>
</a.group>
</a.group>
</a.group>

13
src/components/MainScene/Site/ActiveLevelNodes.tsx → src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx
View file

@ -1,8 +1,8 @@
import React, {useEffect, useMemo} from "react";
import Node from "../Node";
import node_positions from "../../../resources/node_positions.json";
import { useNodeStore } from "../../../store";
import { isNodeVisible } from "../../../core/nodeSelector";
import React, { useEffect, useMemo } from "react";
import Node from "./Node";
import node_positions from "../../../../resources/node_positions.json";
import { useNodeStore } from "../../../../store";
import { isNodeVisible } from "../../../../core/nodeSelector";
import { NodesProps } from "../Site";
const ActiveLevelNodes = (props: NodesProps) => {
@ -13,9 +13,6 @@ const ActiveLevelNodes = (props: NodesProps) => {
[props]
);
useEffect(() => {
console.log("sex")
})
return (
<>
{Object.entries(activeLevelNodes).map((node: [string, any]) => {

0
src/components/MainScene/CyanCrystal.tsx → src/components/MainScene/SyncedComponents/Site/CyanCrystal.tsx
View file

8
src/components/MainScene/GrayRing.tsx → src/components/MainScene/SyncedComponents/Site/GrayRing.tsx
View file

@ -1,8 +1,8 @@
import React, { memo, useMemo } from "react";
import * as THREE from "three";
import lofTexture from "../../static/sprite/gray_ring_lof.png";
import holeTexture from "../../static/sprite/hole.png";
import lifeTexture from "../../static/sprite/life.png";
import lofTexture from "../../../../static/sprite/gray_ring_lof.png";
import holeTexture from "../../../../static/sprite/hole.png";
import lifeTexture from "../../../../static/sprite/life.png";
import { useLoader } from "react-three-fiber";
type GrayRingProps = {
@ -20,7 +20,7 @@ const GrayRing = memo((props: GrayRingProps) => {
uniform.hole = { type: "t", value: holeTex };
uniform.life = { type: "t", value: lifeTex };
return uniform
return uniform;
}, [holeTex, lifeTex, lofTex]);
const vertexShader = `

6
src/components/MainScene/Site/InactiveLevelNodes.tsx → src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx
View file

@ -1,7 +1,7 @@
import React, { useMemo } from "react";
import node_positions from "../../../resources/node_positions.json";
import Node from "../Node";
import { isNodeVisible } from "../../../core/nodeSelector";
import node_positions from "../../../../resources/node_positions.json";
import Node from "./Node";
import { isNodeVisible } from "../../../../core/nodeSelector";
import { NodesProps } from "../Site";
const InactiveLevelNodes = (props: NodesProps) => {

32
src/components/MainScene/Node.tsx → src/components/MainScene/SyncedComponents/Site/Node.tsx
View file

@ -2,22 +2,22 @@ import React, { useEffect, useMemo, useRef } from "react";
import { useFrame, useLoader } from "react-three-fiber";
import { a, useSpring } from "@react-spring/three";
import * as THREE from "three";
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 { useNodeStore } from "../../store";
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 { useNodeStore } from "../../../../store";
type NodeContructorProps = {
sprite: string;

7
src/components/MainScene/PurpleRing.tsx → src/components/MainScene/SyncedComponents/Site/PurpleRing.tsx
View file

@ -1,9 +1,9 @@
import React, { memo, useEffect, useMemo, useRef } from "react";
import { useFrame, useLoader } from "react-three-fiber";
import * as THREE from "three";
import siteATex from "../../static/sprite/site_a.png";
import siteBTex from "../../static/sprite/site_b.png";
import siteLevelTex from "../../static/sprite/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;
@ -226,6 +226,7 @@ const PurpleRing = memo((props: PurpleRingProps) => {
<mesh
position={[0, props.purpleRingPosY, 0]}
scale={[26, 26, 26]}
renderOrder={1}
ref={purpleRingRef}
>
<cylinderBufferGeometry

64
src/components/MainScene/SyncedComponents/Site/Rings.tsx Normal file
View 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
View 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;

11
src/components/MainScene/Starfield/Star.tsx → src/components/MainScene/SyncedComponents/Starfield/Star.tsx
View file

@ -6,6 +6,7 @@ import { useFrame } from "react-three-fiber";
type StarProps = {
position: number[];
color: string;
introStar?: boolean;
};
const Star = (props: StarProps) => {
@ -50,10 +51,14 @@ const Star = (props: StarProps) => {
useFrame(() => {
if (starRef.current) {
if (starRef.current.position.y > 4) {
starRef.current.position.y = props.position[1];
if (props.introStar) {
starRef.current.position.y += 0.2 + amp.current;
} else {
if (starRef.current.position.y > 4) {
starRef.current.position.y = props.position[1];
}
starRef.current.position.y += 0.01 + amp.current;
}
starRef.current.position.y += (0.01 + amp.current);
}
});

14
src/components/MainScene/YellowOrb.tsx → src/components/MainScene/SyncedComponents/YellowOrb.tsx
View file

@ -1,15 +1,19 @@
import React, { memo, useRef, useState } from "react";
import { useFrame, useLoader } from "react-three-fiber";
import * as THREE from "three";
import orbSprite from "../../static/sprite/orb.png";
import { useMainSceneStore } from "../../store";
import orbSprite from "../../../static/sprite/orb.png";
import { useMainSceneStore } from "../../../store";
// initialize outside the component otherwise it gets overwritten when it rerenders
let orbIdx = 0;
let orbDirectionChangeCount = 0;
let renderOrder = -1;
const YellowOrb = memo((props: { visible: boolean }) => {
type YellowOrbProps = {
visible: boolean;
}
const YellowOrb = (props: YellowOrbProps) => {
const orbRef = useRef<THREE.Object3D>();
const [orbDirection, setOrbDirection] = useState("left");
const [currentCurve, setCurrentCurve] = useState("first");
@ -107,7 +111,7 @@ const YellowOrb = memo((props: { visible: boolean }) => {
});
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}>
<spriteMaterial
attach="material"
@ -118,6 +122,6 @@ const YellowOrb = memo((props: { visible: boolean }) => {
</sprite>
</group>
);
});
};
export default YellowOrb;

2
src/components/MediaScene/Images.tsx
View file

@ -6,7 +6,7 @@ import {
useSiteStore,
} from "../../store";
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_b from "../../resources/site_b.json";
import dummy from "../../static/sprite/dummy.png";

2
src/components/MediaScene/MediaPlayer.tsx
View file

@ -15,7 +15,7 @@ import {
useSiteStore,
} from "../../store";
import t from "../../static/webvtt/test.vtt";
import { SiteType } from "../MainScene/Site";
import { SiteType } from "../MainScene/SyncedComponents/Site";
const MediaPlayer = () => {
const [mediaSource, setMediaSource] = useState<any>();

2
src/components/MediaScene/Selectables/RightSide.tsx
View file

@ -5,7 +5,7 @@ import { useSpring, a } from "@react-spring/three";
import word_position_states from "../../../resources/word_position_states.json";
import * as THREE from "three";
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";
type RightSideProps = {

10
src/components/TextRenderer/GreenTextRenderer.tsx
View file

@ -3,7 +3,7 @@ import React, { useEffect, useRef } from "react";
import { GreenTextState, useGreenTextStore } from "../../store";
import MediumLetter from "./MediumLetter";
const GreenTextRenderer = (props: { visible?: boolean }) => {
const GreenTextRenderer = () => {
const greenTextActive = useGreenTextStore((state) => state.active);
const transformRef = useRef(useGreenTextStore.getState().transformState);
@ -34,7 +34,7 @@ const GreenTextRenderer = (props: { visible?: boolean }) => {
);
return (
<group position={[0, 0, 10]} visible={props.visible}>
<group position={[0, 0, 10]}>
<a.group
position-x={greenTextPosX}
position-y={transformRef.current.posY}
@ -42,11 +42,7 @@ const GreenTextRenderer = (props: { visible?: boolean }) => {
scale={[0.02, 0.035, 0.02]}
>
{textArrRef.current.map((letter, idx) => (
<MediumLetter
letter={letter}
letterIdx={idx}
key={idx}
/>
<MediumLetter letter={letter} letterIdx={idx} key={idx} />
))}
</a.group>
</group>

4
src/components/TextRenderer/YellowTextRenderer.tsx
View file

@ -3,7 +3,7 @@ import { BigTextState, useBigTextStore } from "../../store";
import { a, useSpring, useTrail } from "@react-spring/three";
import BigLetter from "./BigLetter";
const YellowTextRenderer = (props: { visible?: boolean }) => {
const YellowTextRenderer = () => {
const disableTrail = useBigTextStore((state) => state.disableTrail);
const transformState = useBigTextStore((state) => state.transformState);
@ -41,7 +41,7 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
);
return (
<group position={[0, 0, 10]} visible={props.visible && visible}>
<group position={[0, 0, 10]} visible={visible}>
{disableTrail
? textArrRef.current.map((letter, idx) => (
<a.group

2
src/core/StateManagers/GreenTextManager.tsx
View file

@ -2,7 +2,7 @@ import { useCallback, useEffect } from "react";
import { StateManagerProps } from "./EventManager";
import node_huds from "../../resources/node_huds.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 site_b from "../../resources/site_b.json";

5
src/core/StateManagers/LevelManager.tsx
View file

@ -2,7 +2,6 @@ import { useCallback, useEffect } from "react";
import { StateManagerProps } from "./EventManager";
import { useLevelStore, useSiteSaveStore } from "../../store";
const LevelManager = (props: StateManagerProps) => {
const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
const siteASaveState = useSiteSaveStore((state) => state.a);
@ -28,9 +27,9 @@ const LevelManager = (props: StateManagerProps) => {
case "pause_change_select":
return {
action: setActiveLevel,
value: [
value:
newSite === "a" ? siteASaveState.level : siteBSaveState.level,
],
delay: 0,
};
}
},

7
src/core/StateManagers/SiteManager.tsx
View file

@ -65,14 +65,9 @@ const SiteManager = (props: StateManagerProps) => {
value: [newSite],
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(() => {

2
src/core/StateManagers/YellowTextManager.tsx
View file

@ -3,7 +3,7 @@ import node_huds from "../../resources/node_huds.json";
import site_a from "../../resources/site_a.json";
import site_b from "../../resources/site_b.json";
import { useBigTextStore, useSiteStore } from "../../store";
import { SiteType } from "../../components/MainScene/Site";
import { SiteType } from "../../components/MainScene/SyncedComponents/Site";
import { StateManagerProps } from "./EventManager";
const YellowTextManager = (props: StateManagerProps) => {

2
src/core/mainSceneEventHandler.ts
View file

@ -1,7 +1,7 @@
import site_a from "../resources/site_a.json";
import site_b from "../resources/site_b.json";
import nodeSelector, { getNodeHudId, getNodeId } from "./nodeSelector";
import { SiteType } from "../components/MainScene/Site";
import { SiteType } from "../components/MainScene/SyncedComponents/Site";
const handleMainSceneEvent = (gameContext: any) => {
let event;

2
src/core/nodeSelector.ts
View file

@ -1,7 +1,7 @@
import node_matrices from "../resources/node_matrices.json";
import site_a from "../resources/site_a.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 level_y_values from "../resources/level_y_values.json";

15
src/scenes/ChangeDiscScene.tsx
View file

@ -1,11 +1,18 @@
import React, { useEffect } from "react";
import { useSceneStore } from "../store";
import { useSceneStore, useSiteStore } from "../store";
const ChangeDiscScene = () => {
const setScene = useSceneStore((state) => state.setScene);
const currentSite = useSiteStore((state) => state.currentSite);
useEffect(() => {
document.getElementsByTagName("canvas")[0].className =
"change-disc-scene-background";
if (currentSite === "a") {
document.getElementsByTagName("canvas")[0].className =
"change-disc-scene-a-background";
} else if (currentSite === "b") {
document.getElementsByTagName("canvas")[0].className =
"change-disc-scene-b-background";
}
setTimeout(() => {
setScene("main");
@ -15,7 +22,7 @@ const ChangeDiscScene = () => {
document.getElementsByTagName("canvas")[0].className =
"main-scene-background";
};
}, [setScene]);
}, [currentSite, setScene]);
return <></>;
};

35
src/scenes/MainScene.tsx
View file

@ -1,49 +1,44 @@
import { a } from "@react-spring/three";
import { OrbitControls } from "@react-three/drei";
import React, { Suspense, useMemo } from "react";
import Site from "../components/MainScene/Site";
import React, { Suspense, useEffect, useMemo } from "react";
import Site from "../components/MainScene/SyncedComponents/Site";
import Lain from "../components/MainScene/Lain";
import Preloader from "../components/Preloader";
import GrayPlanes from "../components/MainScene/GrayPlanes";
import MiddleRing from "../components/MainScene/MiddleRing";
import MiddleRing from "../components/MainScene/SyncedComponents/MiddleRing";
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 Starfield from "../components/MainScene/Starfield/Starfield";
import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader";
const MainScene = () => {
const currentSubscene = useMainSceneStore((state) => state.subscene);
const shouldIntro = useMainSceneStore((state) => state.intro);
const isPaused = useMemo(() => currentSubscene === "pause", [
currentSubscene,
]);
useEffect(() => {
document.getElementsByTagName("body")[0].className = "main-body";
return () => {
document.getElementsByTagName("body")[0].className = "";
};
}, []);
return (
<perspectiveCamera position-z={3}>
<Suspense fallback={null}>
<a.group>
<Preloader />
<Site />
<HUD visible={!isPaused} />
<GreenTextRenderer visible={!isPaused} />
<YellowTextRenderer visible={!isPaused} />
<YellowOrb visible={!isPaused} />
<GrayPlanes visible={!isPaused} />
<MiddleRing />
<LevelSelection visible={!isPaused} />
<Pause visible={isPaused} />
<Starfield visible={!isPaused} />
<SyncedComponentLoader paused={isPaused} shouldIntro={shouldIntro} />
{/*<MiddleRing />*/}
<OrbitControls />
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
<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} />
</a.group>
<Lain />
<Lain shouldIntro={shouldIntro} />
</Suspense>
</perspectiveCamera>
);

2
src/scenes/MediaScene.tsx
View file

@ -10,7 +10,7 @@ import { OrbitControls } from "@react-three/drei";
import Images from "../components/MediaScene/Images";
import MediumLetter from "../components/TextRenderer/MediumLetter";
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 site_b from "../resources/site_b.json";