From 79a48080127607cab78ef91aaeb18fa167128051 Mon Sep 17 00:00:00 2001 From: ad044 Date: Sun, 27 Dec 2020 21:42:42 +0400 Subject: [PATCH] intro anim works properly now, changed structure a bit --- src/App.tsx | 5 +- src/components/MainScene/Lain.tsx | 26 +++++- src/components/MainScene/Site/Rings.tsx | 35 -------- .../MainScene/Starfield/Starfield.tsx | 57 ------------ .../MainScene/SyncedComponentLoader.tsx | 49 +++++++++++ .../{ => SyncedComponents}/GrayPlanes.tsx | 10 +-- .../MainScene/{ => SyncedComponents}/HUD.tsx | 22 ++--- .../{ => SyncedComponents}/LevelSelection.tsx | 18 ++-- .../{ => SyncedComponents}/MiddleRing.tsx | 4 +- .../MainScene/{ => SyncedComponents}/Site.tsx | 43 ++++++---- .../Site/ActiveLevelNodes.tsx | 13 ++- .../Site}/CyanCrystal.tsx | 0 .../{ => SyncedComponents/Site}/GrayRing.tsx | 8 +- .../Site/InactiveLevelNodes.tsx | 6 +- .../{ => SyncedComponents/Site}/Node.tsx | 32 +++---- .../Site}/PurpleRing.tsx | 7 +- .../MainScene/SyncedComponents/Site/Rings.tsx | 64 ++++++++++++++ .../MainScene/SyncedComponents/Starfield.tsx | 86 +++++++++++++++++++ .../{ => SyncedComponents}/Starfield/Star.tsx | 11 ++- .../{ => SyncedComponents}/YellowOrb.tsx | 14 +-- src/components/MediaScene/Images.tsx | 2 +- src/components/MediaScene/MediaPlayer.tsx | 2 +- .../MediaScene/Selectables/RightSide.tsx | 2 +- .../TextRenderer/GreenTextRenderer.tsx | 10 +-- .../TextRenderer/YellowTextRenderer.tsx | 4 +- src/core/StateManagers/GreenTextManager.tsx | 2 +- src/core/StateManagers/LevelManager.tsx | 5 +- src/core/StateManagers/SiteManager.tsx | 7 +- src/core/StateManagers/YellowTextManager.tsx | 2 +- src/core/mainSceneEventHandler.ts | 2 +- src/core/nodeSelector.ts | 2 +- src/scenes/ChangeDiscScene.tsx | 15 +++- src/scenes/MainScene.tsx | 35 ++++---- src/scenes/MediaScene.tsx | 2 +- 34 files changed, 364 insertions(+), 238 deletions(-) delete mode 100644 src/components/MainScene/Site/Rings.tsx delete mode 100644 src/components/MainScene/Starfield/Starfield.tsx create mode 100644 src/components/MainScene/SyncedComponentLoader.tsx rename src/components/MainScene/{ => SyncedComponents}/GrayPlanes.tsx (89%) rename src/components/MainScene/{ => SyncedComponents}/HUD.tsx (84%) rename src/components/MainScene/{ => SyncedComponents}/LevelSelection.tsx (86%) rename src/components/MainScene/{ => SyncedComponents}/MiddleRing.tsx (98%) rename src/components/MainScene/{ => SyncedComponents}/Site.tsx (75%) rename src/components/MainScene/{ => SyncedComponents}/Site/ActiveLevelNodes.tsx (78%) rename src/components/MainScene/{ => SyncedComponents/Site}/CyanCrystal.tsx (100%) rename src/components/MainScene/{ => SyncedComponents/Site}/GrayRing.tsx (96%) rename src/components/MainScene/{ => SyncedComponents}/Site/InactiveLevelNodes.tsx (89%) rename src/components/MainScene/{ => SyncedComponents/Site}/Node.tsx (85%) rename src/components/MainScene/{ => SyncedComponents/Site}/PurpleRing.tsx (97%) create mode 100644 src/components/MainScene/SyncedComponents/Site/Rings.tsx create mode 100644 src/components/MainScene/SyncedComponents/Starfield.tsx rename src/components/MainScene/{ => SyncedComponents}/Starfield/Star.tsx (84%) rename src/components/MainScene/{ => SyncedComponents}/YellowOrb.tsx (92%) diff --git a/src/App.tsx b/src/App.tsx index f0816ea..6309888 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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(() => { diff --git a/src/components/MainScene/Lain.tsx b/src/components/MainScene/Lain.tsx index 634e542..99db237 100644 --- a/src/components/MainScene/Lain.tsx +++ b/src/components/MainScene/Lain.tsx @@ -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: , }; + const [introFinished, setIntroFinished] = useState(false); + + useEffect(() => { + setTimeout(() => { + setIntroFinished(true); + }, 4000); + }, []); + + const stopIntroAnim = useMemo(() => { + return props.shouldIntro ? introFinished : true; + }, [introFinished, props.shouldIntro]); + return ( - { + {stopIntroAnim ? ( lainAnimationDispatch[ lainMoveState as keyof typeof lainAnimationDispatch ] - } + ) : ( + + )} ); diff --git a/src/components/MainScene/Site/Rings.tsx b/src/components/MainScene/Site/Rings.tsx deleted file mode 100644 index 09c5710..0000000 --- a/src/components/MainScene/Site/Rings.tsx +++ /dev/null @@ -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 ( - - - - - - ); - } - })} - - ); -}; - -export default Rings; diff --git a/src/components/MainScene/Starfield/Starfield.tsx b/src/components/MainScene/Starfield/Starfield.tsx deleted file mode 100644 index 38ef618..0000000 --- a/src/components/MainScene/Starfield/Starfield.tsx +++ /dev/null @@ -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 ( - - - {posesBlueFromLeft.map((poses, idx) => ( - - ))} - {posesWhiteFromLeft.map((poses, idx) => ( - - ))} - {posesCyanFromLeft.map((poses, idx) => ( - - ))} - - - {posesBlueFromRight.map((poses, idx) => ( - - ))} - {posesWhiteFromRight.map((poses, idx) => ( - - ))} - {posesCyanFromRight.map((poses, idx) => ( - - ))} - - - ); -}; - -export default Starfield; diff --git a/src/components/MainScene/SyncedComponentLoader.tsx b/src/components/MainScene/SyncedComponentLoader.tsx new file mode 100644 index 0000000..b9e6bf3 --- /dev/null +++ b/src/components/MainScene/SyncedComponentLoader.tsx @@ -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 ( + <> + + + + + + + + + + + + ); +}; + +export default SyncedComponentLoader; diff --git a/src/components/MainScene/GrayPlanes.tsx b/src/components/MainScene/SyncedComponents/GrayPlanes.tsx similarity index 89% rename from src/components/MainScene/GrayPlanes.tsx rename to src/components/MainScene/SyncedComponents/GrayPlanes.tsx index 65111d2..1563485 100644 --- a/src/components/MainScene/GrayPlanes.tsx +++ b/src/components/MainScene/SyncedComponents/GrayPlanes.tsx @@ -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(); const grayPlanePoses = [ @@ -29,11 +29,7 @@ const GrayPlanes = memo((props: { visible: boolean }) => { return ( // separate wrapper group to make it rotate around [0,0,0] - + {grayPlaneRefs.map((ref, idx: number) => { return ( { })} ); -}); +}; export default GrayPlanes; diff --git a/src/components/MainScene/HUD.tsx b/src/components/MainScene/SyncedComponents/HUD.tsx similarity index 84% rename from src/components/MainScene/HUD.tsx rename to src/components/MainScene/SyncedComponents/HUD.tsx index a05d260..e10297a 100644 --- a/src/components/MainScene/HUD.tsx +++ b/src/components/MainScene/SyncedComponents/HUD.tsx @@ -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 ( - + { ); -}); +}; export default HUD; diff --git a/src/components/MainScene/LevelSelection.tsx b/src/components/MainScene/SyncedComponents/LevelSelection.tsx similarity index 86% rename from src/components/MainScene/LevelSelection.tsx rename to src/components/MainScene/SyncedComponents/LevelSelection.tsx index 66e6592..bf09d2b 100644 --- a/src/components/MainScene/LevelSelection.tsx +++ b/src/components/MainScene/SyncedComponents/LevelSelection.tsx @@ -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 ( - + { const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture); diff --git a/src/components/MainScene/Site.tsx b/src/components/MainScene/SyncedComponents/Site.tsx similarity index 75% rename from src/components/MainScene/Site.tsx rename to src/components/MainScene/SyncedComponents/Site.tsx index 97e8ee1..381aa3b 100644 --- a/src/components/MainScene/Site.tsx +++ b/src/components/MainScene/SyncedComponents/Site.tsx @@ -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} /> - + diff --git a/src/components/MainScene/Site/ActiveLevelNodes.tsx b/src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx similarity index 78% rename from src/components/MainScene/Site/ActiveLevelNodes.tsx rename to src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx index 73da4ed..842372d 100644 --- a/src/components/MainScene/Site/ActiveLevelNodes.tsx +++ b/src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx @@ -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]) => { diff --git a/src/components/MainScene/CyanCrystal.tsx b/src/components/MainScene/SyncedComponents/Site/CyanCrystal.tsx similarity index 100% rename from src/components/MainScene/CyanCrystal.tsx rename to src/components/MainScene/SyncedComponents/Site/CyanCrystal.tsx diff --git a/src/components/MainScene/GrayRing.tsx b/src/components/MainScene/SyncedComponents/Site/GrayRing.tsx similarity index 96% rename from src/components/MainScene/GrayRing.tsx rename to src/components/MainScene/SyncedComponents/Site/GrayRing.tsx index b6a9009..d310be3 100644 --- a/src/components/MainScene/GrayRing.tsx +++ b/src/components/MainScene/SyncedComponents/Site/GrayRing.tsx @@ -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 = ` diff --git a/src/components/MainScene/Site/InactiveLevelNodes.tsx b/src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx similarity index 89% rename from src/components/MainScene/Site/InactiveLevelNodes.tsx rename to src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx index 506dc90..36b22b7 100644 --- a/src/components/MainScene/Site/InactiveLevelNodes.tsx +++ b/src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx @@ -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) => { diff --git a/src/components/MainScene/Node.tsx b/src/components/MainScene/SyncedComponents/Site/Node.tsx similarity index 85% rename from src/components/MainScene/Node.tsx rename to src/components/MainScene/SyncedComponents/Site/Node.tsx index 7a4cd63..0f32f97 100644 --- a/src/components/MainScene/Node.tsx +++ b/src/components/MainScene/SyncedComponents/Site/Node.tsx @@ -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; diff --git a/src/components/MainScene/PurpleRing.tsx b/src/components/MainScene/SyncedComponents/Site/PurpleRing.tsx similarity index 97% rename from src/components/MainScene/PurpleRing.tsx rename to src/components/MainScene/SyncedComponents/Site/PurpleRing.tsx index d56f95a..fba2cf9 100644 --- a/src/components/MainScene/PurpleRing.tsx +++ b/src/components/MainScene/SyncedComponents/Site/PurpleRing.tsx @@ -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) => { { + 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 ( + + + + + + ); + } + })} + + ); +}; + +export default Rings; diff --git a/src/components/MainScene/SyncedComponents/Starfield.tsx b/src/components/MainScene/SyncedComponents/Starfield.tsx new file mode 100644 index 0000000..7296591 --- /dev/null +++ b/src/components/MainScene/SyncedComponents/Starfield.tsx @@ -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 ( + <> + + + {posesBlueFromLeft.map((poses, idx) => ( + + ))} + {posesWhiteFromLeft.map((poses, idx) => ( + + ))} + {posesCyanFromLeft.map((poses, idx) => ( + + ))} + + + {posesBlueFromRight.map((poses, idx) => ( + + ))} + {posesWhiteFromRight.map((poses, idx) => ( + + ))} + {posesCyanFromRight.map((poses, idx) => ( + + ))} + + + + {posesBlueFromBottom.map((poses, idx) => ( + + ))} + {posesWhiteFromBottom.map((poses, idx) => ( + + ))} + {posesCyanFromBottom.map((poses, idx) => ( + + ))} + + + ); +}; + +export default Starfield; diff --git a/src/components/MainScene/Starfield/Star.tsx b/src/components/MainScene/SyncedComponents/Starfield/Star.tsx similarity index 84% rename from src/components/MainScene/Starfield/Star.tsx rename to src/components/MainScene/SyncedComponents/Starfield/Star.tsx index 862ca8b..e9c2342 100644 --- a/src/components/MainScene/Starfield/Star.tsx +++ b/src/components/MainScene/SyncedComponents/Starfield/Star.tsx @@ -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); } }); diff --git a/src/components/MainScene/YellowOrb.tsx b/src/components/MainScene/SyncedComponents/YellowOrb.tsx similarity index 92% rename from src/components/MainScene/YellowOrb.tsx rename to src/components/MainScene/SyncedComponents/YellowOrb.tsx index d48d4d4..0cec89f 100644 --- a/src/components/MainScene/YellowOrb.tsx +++ b/src/components/MainScene/SyncedComponents/YellowOrb.tsx @@ -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(); const [orbDirection, setOrbDirection] = useState("left"); const [currentCurve, setCurrentCurve] = useState("first"); @@ -107,7 +111,7 @@ const YellowOrb = memo((props: { visible: boolean }) => { }); return ( - + { ); -}); +}; export default YellowOrb; diff --git a/src/components/MediaScene/Images.tsx b/src/components/MediaScene/Images.tsx index 839c8e2..1e85664 100644 --- a/src/components/MediaScene/Images.tsx +++ b/src/components/MediaScene/Images.tsx @@ -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"; diff --git a/src/components/MediaScene/MediaPlayer.tsx b/src/components/MediaScene/MediaPlayer.tsx index ded00a1..40bc508 100644 --- a/src/components/MediaScene/MediaPlayer.tsx +++ b/src/components/MediaScene/MediaPlayer.tsx @@ -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(); diff --git a/src/components/MediaScene/Selectables/RightSide.tsx b/src/components/MediaScene/Selectables/RightSide.tsx index 620b7c6..e46c664 100644 --- a/src/components/MediaScene/Selectables/RightSide.tsx +++ b/src/components/MediaScene/Selectables/RightSide.tsx @@ -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 = { diff --git a/src/components/TextRenderer/GreenTextRenderer.tsx b/src/components/TextRenderer/GreenTextRenderer.tsx index bf7085f..fcdb1ff 100644 --- a/src/components/TextRenderer/GreenTextRenderer.tsx +++ b/src/components/TextRenderer/GreenTextRenderer.tsx @@ -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 ( - + { scale={[0.02, 0.035, 0.02]} > {textArrRef.current.map((letter, idx) => ( - + ))} diff --git a/src/components/TextRenderer/YellowTextRenderer.tsx b/src/components/TextRenderer/YellowTextRenderer.tsx index 20e23be..73abf53 100644 --- a/src/components/TextRenderer/YellowTextRenderer.tsx +++ b/src/components/TextRenderer/YellowTextRenderer.tsx @@ -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 ( - + {disableTrail ? textArrRef.current.map((letter, idx) => ( { 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, }; } }, diff --git a/src/core/StateManagers/SiteManager.tsx b/src/core/StateManagers/SiteManager.tsx index 1f481cb..6658274 100644 --- a/src/core/StateManagers/SiteManager.tsx +++ b/src/core/StateManagers/SiteManager.tsx @@ -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(() => { diff --git a/src/core/StateManagers/YellowTextManager.tsx b/src/core/StateManagers/YellowTextManager.tsx index 697fc9e..796dd94 100644 --- a/src/core/StateManagers/YellowTextManager.tsx +++ b/src/core/StateManagers/YellowTextManager.tsx @@ -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) => { diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts index 30b0318..d7e58f2 100644 --- a/src/core/mainSceneEventHandler.ts +++ b/src/core/mainSceneEventHandler.ts @@ -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; diff --git a/src/core/nodeSelector.ts b/src/core/nodeSelector.ts index 9e36a89..2e9b847 100644 --- a/src/core/nodeSelector.ts +++ b/src/core/nodeSelector.ts @@ -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"; diff --git a/src/scenes/ChangeDiscScene.tsx b/src/scenes/ChangeDiscScene.tsx index 70ed74c..f59d144 100644 --- a/src/scenes/ChangeDiscScene.tsx +++ b/src/scenes/ChangeDiscScene.tsx @@ -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 <>; }; diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index cddf8fa..4fa93aa 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -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 ( - - - - - - - - - + + {/**/} - + ); diff --git a/src/scenes/MediaScene.tsx b/src/scenes/MediaScene.tsx index 1056f7a..9da01f2 100644 --- a/src/scenes/MediaScene.tsx +++ b/src/scenes/MediaScene.tsx @@ -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";