mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
almost done refactoring the store
This commit is contained in:
parent
751f8793e1
commit
5e804c51a0
67 changed files with 535 additions and 630 deletions
|
@ -4,8 +4,7 @@ import "./static/css/page.css";
|
|||
import { Canvas } from "react-three-fiber";
|
||||
import MediaPlayer from "./components/MediaScene/MediaPlayer";
|
||||
import MediaScene from "./scenes/MediaScene";
|
||||
import EventManager from "./core/StateManagers/EventManager";
|
||||
import { useSceneStore } from "./store";
|
||||
import { useStore } from "./store";
|
||||
import GateScene from "./scenes/GateScene";
|
||||
import BootScene from "./scenes/BootScene";
|
||||
import SSknScene from "./scenes/SSknScene";
|
||||
|
@ -16,7 +15,7 @@ import EndScene from "./scenes/EndScene";
|
|||
import IdleMediaScene from "./scenes/IdleMediaScene";
|
||||
|
||||
const App = () => {
|
||||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
const currentScene = useStore((state) => state.currentScene);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = "< index >";
|
||||
|
|
|
@ -8,7 +8,7 @@ import authorizeInactiveLetters from "../../static/sprite/authorize_inactive_let
|
|||
import authorizeActiveLetters from "../../static/sprite/authorize_active_letters.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { useAuthorizeUserStore, useBootStore } from "../../store";
|
||||
import { useAuthorizeUserStore } from "../../store";
|
||||
import { OrbitControls } from "@react-three/drei";
|
||||
|
||||
type BootAuthorizeUserProps = {
|
||||
|
|
|
@ -7,7 +7,7 @@ import mouth1 from "../static/sprite/mouth_1.png";
|
|||
import mouth2 from "../static/sprite/mouth_2.png";
|
||||
import mouth3 from "../static/sprite/mouth_3.png";
|
||||
import mouth4 from "../static/sprite/mouth_4.png";
|
||||
import { useMainSceneStore } from "../store";
|
||||
import { useStore } from "../store";
|
||||
import { LainConstructor } from "./MainScene/Lain";
|
||||
|
||||
type LainTaKProps = {
|
||||
|
@ -39,7 +39,7 @@ const LainSpeak = (props: LainTaKProps) => {
|
|||
/>
|
||||
);
|
||||
|
||||
const analyser = useMainSceneStore((state) => state.audioAnalyser);
|
||||
const analyser = useStore((state) => state.audioAnalyser);
|
||||
|
||||
const mouthRef = useRef<THREE.SpriteMaterial>();
|
||||
useFrame(() => {
|
||||
|
|
|
@ -32,7 +32,7 @@ import leanRightSpriteSheet from "../../static/sprite/lean_right.png";
|
|||
import lookAroundSpriteSheet from "../../static/sprite/look_around.png";
|
||||
import playWithHairSpriteSheet from "../../static/sprite/play_with_hair.png";
|
||||
|
||||
import { useMainSceneStore } from "../../store";
|
||||
import { useStore } from "../../store";
|
||||
|
||||
type LainConstructorProps = {
|
||||
sprite: string;
|
||||
|
@ -353,7 +353,7 @@ type LainProps = {
|
|||
};
|
||||
|
||||
const Lain = (props: LainProps) => {
|
||||
const lainMoveState = useMainSceneStore((state) => state.lainMoveState);
|
||||
const lainMoveState = useStore((state) => state.lainMoveState);
|
||||
|
||||
const lainAnimationDispatch = useMemo(() => {
|
||||
const anims = {
|
||||
|
|
|
@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|||
import * as THREE from "three";
|
||||
import PauseSquare from "./PauseSquare";
|
||||
import StaticBigLetter from "../../TextRenderer/StaticBigLetter";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
|
||||
type PauseProps = {
|
||||
|
@ -10,7 +10,7 @@ type PauseProps = {
|
|||
};
|
||||
|
||||
const Pause = (props: PauseProps) => {
|
||||
const exit = useMainSceneStore((state) => state.pauseExitAnimation);
|
||||
const exit = useStore((state) => state.pauseExitAnimation);
|
||||
const [showActiveComponent, setShowActiveComponent] = useState(false);
|
||||
const [animation, setAnimation] = useState(false);
|
||||
const [intro, setIntro] = useState(true);
|
||||
|
@ -25,7 +25,7 @@ const Pause = (props: PauseProps) => {
|
|||
[wordFont]
|
||||
);
|
||||
|
||||
const activeComponent = useMainSceneStore(
|
||||
const activeComponent = useStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
showActiveComponent
|
||||
|
|
|
@ -3,7 +3,7 @@ import * as THREE from "three";
|
|||
import { useLoader } from "react-three-fiber";
|
||||
import pauseGrayBoxes from "../../../static/sprite/pause_gray_boxes.png";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
type PauseSquareProps = {
|
||||
colIdx: number;
|
||||
|
@ -15,7 +15,7 @@ type PauseSquareProps = {
|
|||
};
|
||||
|
||||
const PauseSquare = memo((props: PauseSquareProps) => {
|
||||
const exitAnimation = useMainSceneStore((state) => state.pauseExitAnimation);
|
||||
const exitAnimation = useStore((state) => state.pauseExitAnimation);
|
||||
|
||||
const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@ 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 { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
import MediumLetter from "../../TextRenderer/MediumLetter";
|
||||
|
||||
export type HUDType = {
|
||||
|
@ -33,11 +33,11 @@ export type HUDType = {
|
|||
};
|
||||
|
||||
const HUD = memo(() => {
|
||||
const greenText = useMainSceneStore((state) =>
|
||||
const greenText = useStore((state) =>
|
||||
state.activeNode.title.split("")
|
||||
);
|
||||
const active = useMainSceneStore((state) => Number(state.hudActive));
|
||||
const currentHud = useMainSceneStore((state) => state.hud);
|
||||
const active = useStore((state) => Number(state.hudActive));
|
||||
const currentHud = useStore((state) => state.hud);
|
||||
|
||||
const hudElementState = useSpring({
|
||||
bigHUDPositionX: active,
|
||||
|
|
|
@ -5,7 +5,7 @@ import horizontalHud from "../../../static/sprite/select_level_hud_horizontal.pn
|
|||
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 { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
|
@ -24,11 +24,11 @@ const LevelSelection = () => {
|
|||
const upArrowTex = useLoader(THREE.TextureLoader, upArrow);
|
||||
const downArrowTex = useLoader(THREE.TextureLoader, downArrow);
|
||||
|
||||
const toggled = useMainSceneStore(
|
||||
useCallback((state) => Number(state.subscene === "level_selection"), [])
|
||||
const toggled = useStore(
|
||||
useCallback((state) => Number(state.mainSubscene === "level_selection"), [])
|
||||
);
|
||||
|
||||
const selectedLevel = useMainSceneStore((state) => state.selectedLevel)
|
||||
const selectedLevel = useStore((state) => state.selectedLevel)
|
||||
.toString()
|
||||
.padStart(2, "0");
|
||||
|
||||
|
|
|
@ -3,19 +3,19 @@ import { useFrame, useLoader } from "react-three-fiber";
|
|||
import middleRingTexture from "../../../static/sprite/middle_ring_tex.png";
|
||||
import * as THREE from "three";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
import MiddleRingPart from "./MiddleRing/MiddleRingPart";
|
||||
|
||||
const MiddleRing = () => {
|
||||
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
|
||||
|
||||
const pos = useMainSceneStore((state) => state.middleRingPos);
|
||||
const rot = useMainSceneStore((state) => state.middleRingRot);
|
||||
const wobbleAmp = useMainSceneStore((state) => state.middleRingWobbleAmp);
|
||||
const noiseAmp = useMainSceneStore((state) => state.middleRingNoiseAmp);
|
||||
const pos = useStore((state) => state.middleRingPos);
|
||||
const rot = useStore((state) => state.middleRingRot);
|
||||
const wobbleAmp = useStore((state) => state.middleRingWobbleAmp);
|
||||
const noiseAmp = useStore((state) => state.middleRingNoiseAmp);
|
||||
|
||||
const rotating = useMainSceneStore((state) => state.middleRingRotating);
|
||||
const mainRingVisible = useMainSceneStore(
|
||||
const rotating = useStore((state) => state.middleRingRotating);
|
||||
const mainRingVisible = useStore(
|
||||
(state) => !state.fakeMiddleRingVisible
|
||||
);
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@ import middleRingTexture from "../../../../static/sprite/middle_ring_tex.png";
|
|||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { useMainSceneStore } from "../../../../store";
|
||||
import { useStore } from "../../../../store";
|
||||
|
||||
type MiddleRingPartProps = {
|
||||
position: number[];
|
||||
|
@ -21,16 +21,16 @@ const MiddleRingPart = (props: MiddleRingPartProps) => {
|
|||
const [{ posX, posZ }, set] = useSpring(() => ({
|
||||
posX:
|
||||
props.position[0] /
|
||||
useMainSceneStore.getState().middleRingPartSeparatorVal,
|
||||
useStore.getState().middleRingPartSeparatorVal,
|
||||
posZ:
|
||||
props.position[2] /
|
||||
useMainSceneStore.getState().middleRingPartSeparatorVal,
|
||||
useStore.getState().middleRingPartSeparatorVal,
|
||||
|
||||
config: { duration: 600 },
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
useMainSceneStore.subscribe(set, (state) => ({
|
||||
useStore.subscribe(set, (state) => ({
|
||||
posX: props.position[0] / state.middleRingPartSeparatorVal,
|
||||
posZ: props.position[2] / state.middleRingPartSeparatorVal,
|
||||
}));
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Suspense, useEffect, useMemo } from "react";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
import ActiveLevelNodes from "./Site/ActiveLevelNodes";
|
||||
import Rings from "./Site/Rings";
|
||||
import site_a from "../../../resources/site_a.json";
|
||||
|
@ -39,8 +39,8 @@ type SiteProps = {
|
|||
};
|
||||
|
||||
const Site = (props: SiteProps) => {
|
||||
const siteRot = useMainSceneStore((state) => state.siteRot);
|
||||
const sitePos = useMainSceneStore((state) => state.sitePos);
|
||||
const siteRot = useStore((state) => state.siteRot);
|
||||
const sitePos = useStore((state) => state.sitePos);
|
||||
const siteState = useSpring({
|
||||
siteRotX: siteRot[0],
|
||||
siteRotY: siteRot[1],
|
||||
|
|
|
@ -1,24 +1,24 @@
|
|||
import React, { useMemo, memo } from "react";
|
||||
import Node from "./Node";
|
||||
import node_positions from "../../../../resources/node_positions.json";
|
||||
import { useMainSceneStore } from "../../../../store";
|
||||
import { useStore } from "../../../../store";
|
||||
import { isNodeVisible } from "../../../../core/nodeSelector";
|
||||
import site_a from "../../../../resources/site_a.json";
|
||||
import site_b from "../../../../resources/site_b.json";
|
||||
import { NodeDataType } from "../Site";
|
||||
|
||||
const ActiveLevelNodes = memo(() => {
|
||||
const activeNodeId = useMainSceneStore((state) => state.activeNode.id);
|
||||
const activeNodeId = useStore((state) => state.activeNode.id);
|
||||
|
||||
const gameProgress = useMainSceneStore((state) => state.gameProgress);
|
||||
const gameProgress = useStore((state) => state.gameProgress);
|
||||
|
||||
const currentSite = useMainSceneStore((state) => state.activeSite);
|
||||
const currentSite = useStore((state) => state.activeSite);
|
||||
|
||||
const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [
|
||||
currentSite,
|
||||
]);
|
||||
|
||||
const activeLevel = useMainSceneStore((state) => state.activeLevel);
|
||||
const activeLevel = useStore((state) => state.activeLevel);
|
||||
|
||||
const visibleNodes = useMemo(
|
||||
() => siteData[activeLevel as keyof typeof siteData],
|
||||
|
|
|
@ -1,21 +1,21 @@
|
|||
import React, { useMemo, memo } from "react";
|
||||
import Node from "./Node";
|
||||
import node_positions from "../../../../resources/node_positions.json";
|
||||
import { useMainSceneStore } from "../../../../store";
|
||||
import { useStore } from "../../../../store";
|
||||
import { isNodeVisible } from "../../../../core/nodeSelector";
|
||||
import site_a from "../../../../resources/site_a.json";
|
||||
import site_b from "../../../../resources/site_b.json";
|
||||
|
||||
const InactiveLevelNodes = memo(() => {
|
||||
const gameProgress = useMainSceneStore((state) => state.gameProgress);
|
||||
const gameProgress = useStore((state) => state.gameProgress);
|
||||
|
||||
const currentSite = useMainSceneStore((state) => state.activeSite);
|
||||
const currentSite = useStore((state) => state.activeSite);
|
||||
|
||||
const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [
|
||||
currentSite,
|
||||
]);
|
||||
|
||||
const activeLevel = useMainSceneStore((state) => state.activeLevel);
|
||||
const activeLevel = useStore((state) => state.activeLevel);
|
||||
|
||||
const visibleNodes = useMemo(() => {
|
||||
const obj = {};
|
||||
|
|
|
@ -17,7 +17,7 @@ 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 { useMainSceneStore } from "../../../../store";
|
||||
import { useStore } from "../../../../store";
|
||||
|
||||
type NodeContructorProps = {
|
||||
nodeName: string;
|
||||
|
@ -122,7 +122,7 @@ const Node = memo((props: NodeContructorProps) => {
|
|||
}));
|
||||
|
||||
useEffect(() => {
|
||||
useMainSceneStore.subscribe(set, (state) => ({
|
||||
useStore.subscribe(set, (state) => ({
|
||||
activeNodePosX: state.activeNodeState.interactedWith
|
||||
? state.activeNodePos[0]
|
||||
: props.position[0],
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
import React from "react";
|
||||
import { useMainSceneStore } from "../../../../store";
|
||||
import { useStore } from "../../../../store";
|
||||
import NodeExplosion from "./NodeAnimations/NodeExplosion";
|
||||
import NodeRip from "./NodeAnimations/NodeRip";
|
||||
|
||||
const NodeAnimations = () => {
|
||||
const nodeShrinking = useMainSceneStore(
|
||||
const nodeShrinking = useStore(
|
||||
(state) => state.activeNodeState.shrinking
|
||||
);
|
||||
|
||||
const nodeExploding = useMainSceneStore(
|
||||
const nodeExploding = useStore(
|
||||
(state) => state.activeNodeState.exploding
|
||||
);
|
||||
|
||||
|
|
|
@ -4,10 +4,10 @@ import node_explosion_line_positions from "../../../../../resources/node_explosi
|
|||
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import GoldNode from "./NodeExplosion/GoldNode";
|
||||
import { useMainSceneStore } from "../../../../../store";
|
||||
import { useStore } from "../../../../../store";
|
||||
|
||||
const NodeExplosion = () => {
|
||||
const explosionVisible = useMainSceneStore(
|
||||
const explosionVisible = useStore(
|
||||
(state) => state.activeNodeState.exploding
|
||||
);
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@ import Lda from "../../../../../../static/sprite/Lda.png";
|
|||
import LdaGold from "../../../../../../static/sprite/Lda_gold.png";
|
||||
import MULTI from "../../../../../../static/sprite/MULTI.png";
|
||||
import MULTIGold from "../../../../../../static/sprite/MULTI_gold.png";
|
||||
import { useMainSceneStore } from "../../../../../../store";
|
||||
import { useStore } from "../../../../../../store";
|
||||
|
||||
type GLTFResult = GLTF & {
|
||||
nodes: {
|
||||
|
@ -35,7 +35,7 @@ type GoldNodeProps = {
|
|||
const GoldNode = (props: GoldNodeProps) => {
|
||||
const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/goldNode.glb");
|
||||
|
||||
const activeNodeName = useMainSceneStore(
|
||||
const activeNodeName = useStore(
|
||||
(state) => state.activeNode.node_name
|
||||
);
|
||||
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import TriangleNode from "./NodeRip/TriangleNode";
|
||||
import { useMainSceneStore } from "../../../../../store";
|
||||
import { useStore } from "../../../../../store";
|
||||
import RipLine from "./NodeRip/RipLine";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
|
||||
const NodeRip = () => {
|
||||
const nodeShrinking = useMainSceneStore(
|
||||
const nodeShrinking = useStore(
|
||||
(state) => state.activeNodeState.shrinking
|
||||
);
|
||||
const [shouldAnimate, setShouldAnimate] = useState(false);
|
||||
|
|
|
@ -3,15 +3,15 @@ import level_y_values from "../../../../resources/level_y_values.json";
|
|||
import PurpleRing from "./PurpleRing";
|
||||
import GrayRing from "./GrayRing";
|
||||
import CyanCrystal from "./CyanCrystal";
|
||||
import { useMainSceneStore } from "../../../../store";
|
||||
import { useStore } from "../../../../store";
|
||||
|
||||
type RingsProps = {
|
||||
activateAllRings: boolean;
|
||||
};
|
||||
|
||||
const Rings = memo((props: RingsProps) => {
|
||||
const activeLevel = useMainSceneStore((state) => state.activeLevel);
|
||||
const currentSite = useMainSceneStore((state) => state.activeSite);
|
||||
const activeLevel = useStore((state) => state.activeLevel);
|
||||
const currentSite = useStore((state) => state.activeSite);
|
||||
|
||||
const visibleRings = useMemo(() => {
|
||||
const rings: [string, number][] = [];
|
||||
|
|
|
@ -2,7 +2,7 @@ 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 { useStore } from "../../../store";
|
||||
|
||||
// initialize outside the component otherwise it gets overwritten when it rerenders
|
||||
let orbIdx = 0;
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import React, { createRef, MutableRefObject, useMemo } from "react";
|
||||
import React, { createRef, MutableRefObject, useMemo, memo } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import AudioVisualizerColumn from "./AudioVisualizerColumn";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
const AudioVisualizer = () => {
|
||||
const analyser = useMainSceneStore((state) => state.audioAnalyser);
|
||||
const AudioVisualizer = memo(() => {
|
||||
const analyser = useStore((state) => state.audioAnalyser);
|
||||
|
||||
const columnRefs = useMemo(
|
||||
() =>
|
||||
|
@ -84,6 +84,6 @@ const AudioVisualizer = () => {
|
|||
))}
|
||||
</group>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default AudioVisualizer;
|
||||
|
|
|
@ -1,27 +1,27 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import {useIdleStore, useMainSceneStore, useSceneStore,} from "../../store";
|
||||
import { useStore } from "../../store";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import dummy from "../../static/sprite/dummy.png";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
|
||||
const Images = () => {
|
||||
const idleNodeImages = useIdleStore((state) => state.images);
|
||||
const nodeImages = useMainSceneStore(
|
||||
const idleNodeImages = useStore((state) => state.idleImages);
|
||||
const nodeImages = useStore(
|
||||
(state) => state.activeNode.image_table_indices
|
||||
);
|
||||
|
||||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
const currentScene = useStore((state) => state.currentScene);
|
||||
|
||||
const [imageScaleY, setImageScaleY] = useState(3.75);
|
||||
const [sceneImages, setSceneImages] = useState([] as any);
|
||||
const [activeImage, setActiveImage] = useState<THREE.Texture>();
|
||||
|
||||
const currentSite = useMainSceneStore((state) => state.activeSite);
|
||||
const currentSite = useStore((state) => state.activeSite);
|
||||
|
||||
const dummyTex = useLoader(THREE.TextureLoader, dummy);
|
||||
|
||||
const mediaPercentageElapsed = useMainSceneStore(
|
||||
const mediaPercentageElapsed = useStore(
|
||||
(state) => state.mediaPercentageElapsed
|
||||
);
|
||||
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { memo, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import lofSpriteSheet from "../../static/sprite/lof_spritesheet.png";
|
||||
import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
|
||||
|
||||
const Lof = () => {
|
||||
const Lof = memo(() => {
|
||||
const lofTex: any = useLoader(THREE.TextureLoader, lofSpriteSheet);
|
||||
|
||||
const [animator] = useState(() => {
|
||||
|
@ -18,10 +18,10 @@ const Lof = () => {
|
|||
});
|
||||
|
||||
return (
|
||||
<sprite position={[-2, 1.8, -3]} scale={[0.8, 0.8, 0.8]}>
|
||||
<sprite position={[-2, 1.8, 0]} scale={[0.8, 0.8, 0.8]}>
|
||||
<spriteMaterial attach="material" map={lofTex} />
|
||||
</sprite>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default Lof;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useMemo, useRef } from "react";
|
||||
import { useMainSceneStore } from "../../store";
|
||||
import { useStore } from "../../store";
|
||||
import loadingBarContainer from "../../static/sprite/media_loading_bar_container.png";
|
||||
import loadingBar from "../../static/sprite/media_loading_bar.png";
|
||||
import loadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.png";
|
||||
|
@ -12,7 +12,7 @@ import { useFrame, useLoader } from "react-three-fiber";
|
|||
import * as THREE from "three";
|
||||
|
||||
const MediaLoadingBar = () => {
|
||||
const mediaPercentageElapsed = useMainSceneStore(
|
||||
const mediaPercentageElapsed = useStore(
|
||||
(state) => state.mediaPercentageElapsed
|
||||
);
|
||||
const loadingBarContainerTex = useLoader(
|
||||
|
|
|
@ -6,12 +6,7 @@ import React, {
|
|||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import {
|
||||
useEndSceneStore,
|
||||
useIdleStore,
|
||||
useMainSceneStore,
|
||||
useSceneStore,
|
||||
} from "../../store";
|
||||
import { useStore } from "../../store";
|
||||
import t from "../../static/webvtt/test.vtt";
|
||||
import endroll from "../../static/movie/ENDROLL1.STR[0].webm";
|
||||
import xa0001 from "../../static/audio/a/Xa0001.mp4";
|
||||
|
@ -20,34 +15,34 @@ import xa0006 from "../../static/audio/a/Xa0006.mp4";
|
|||
const MediaPlayer = () => {
|
||||
const [mediaSource, setMediaSource] = useState<any>();
|
||||
|
||||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
const setScene = useSceneStore((state) => state.setScene);
|
||||
const currentScene = useStore((state) => state.currentScene);
|
||||
const setScene = useStore((state) => state.setScene);
|
||||
|
||||
const setPercentageElapsed = useMainSceneStore(
|
||||
const setPercentageElapsed = useStore(
|
||||
(state) => state.setPercentageElapsed
|
||||
);
|
||||
|
||||
const idleMedia = useIdleStore((state) => state.media);
|
||||
const nodeMedia = useMainSceneStore((state) => state.activeNode.media_file);
|
||||
const idleMedia = useStore((state) => state.idleMedia);
|
||||
const nodeMedia = useStore((state) => state.activeNode.media_file);
|
||||
|
||||
const triggersFinalVideo = useMainSceneStore(
|
||||
const triggersFinalVideo = useStore(
|
||||
(state) => state.activeNode.triggers_final_video
|
||||
);
|
||||
|
||||
const requestRef = useRef();
|
||||
const videoRef = createRef<HTMLVideoElement>();
|
||||
|
||||
const currentSite = useMainSceneStore((state) => state.activeSite);
|
||||
const currentSite = useStore((state) => state.activeSite);
|
||||
|
||||
// end scene specific stuff
|
||||
const endMediaPlayedCount = useEndSceneStore(
|
||||
(state) => state.mediaPlayedCount
|
||||
const endMediaPlayedCount = useStore(
|
||||
(state) => state.endMediaPlayedCount
|
||||
);
|
||||
const incrementEndMediaPlayedCount = useEndSceneStore(
|
||||
(state) => state.incrementMediaPlayedCount
|
||||
const incrementEndMediaPlayedCount = useStore(
|
||||
(state) => state.incrementEndMediaPlayedCount
|
||||
);
|
||||
const resetEndMediaPlayedCount = useEndSceneStore(
|
||||
(state) => state.resetMediaPlayedCount
|
||||
const resetEndMediaPlayedCount = useStore(
|
||||
(state) => state.resetEndMediaPlayedCount
|
||||
);
|
||||
|
||||
const updateTime = useCallback(() => {
|
||||
|
@ -60,7 +55,7 @@ const MediaPlayer = () => {
|
|||
const duration = videoRef.current.duration;
|
||||
const percentageElapsed = Math.floor((timeElapsed / duration) * 100);
|
||||
|
||||
if (percentageElapsed % 5 === 0) {
|
||||
if (percentageElapsed % 5 === 0 && percentageElapsed !== 0) {
|
||||
setPercentageElapsed(percentageElapsed);
|
||||
if (percentageElapsed === 100) {
|
||||
videoRef.current.currentTime = 0;
|
||||
|
|
|
@ -1,11 +1,8 @@
|
|||
import React, { useMemo } from "react";
|
||||
import React, { useCallback, useMemo, memo } from "react";
|
||||
import TriangularPrism from "./LeftSide/TriangularPrism";
|
||||
import Cube from "./LeftSide/Cube";
|
||||
import { useSpring, a } from "@react-spring/three";
|
||||
|
||||
type LeftSideProps = {
|
||||
activeMediaComponent: string;
|
||||
};
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
export type ShapeProps = {
|
||||
position: number[];
|
||||
|
@ -13,9 +10,25 @@ export type ShapeProps = {
|
|||
active?: boolean;
|
||||
};
|
||||
|
||||
const LeftSide = (props: LeftSideProps) => {
|
||||
const cubesActive = props.activeMediaComponent === "exit";
|
||||
const trianglesActive = props.activeMediaComponent === "play";
|
||||
const LeftSide = memo(() => {
|
||||
const activeMediaComponent = useStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
|
||||
state.mediaComponentMatrixIndices.sideIdx === 0
|
||||
? state.mediaComponentMatrixIndices.leftSideIdx
|
||||
: state.mediaComponentMatrixIndices.rightSideIdx
|
||||
],
|
||||
[]
|
||||
)
|
||||
);
|
||||
|
||||
const cubesActive = useMemo(() => activeMediaComponent === "exit", [
|
||||
activeMediaComponent,
|
||||
]);
|
||||
const trianglesActive = useMemo(() => activeMediaComponent === "play", [
|
||||
activeMediaComponent,
|
||||
]);
|
||||
|
||||
const groupSpringConfig = useMemo(() => ({ duration: 500 }), []);
|
||||
const groupSpringFinalDest = useMemo(
|
||||
|
@ -100,6 +113,6 @@ const LeftSide = (props: LeftSideProps) => {
|
|||
</a.group>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default LeftSide;
|
||||
|
|
|
@ -2,10 +2,10 @@ import { useFrame, useLoader } from "react-three-fiber";
|
|||
import * as THREE from "three";
|
||||
import grayTextureFile from "../../../../static/sprite/gray_box.png";
|
||||
import darkGrayTextureFile from "../../../../static/sprite/dark_gray_box.png";
|
||||
import React, { useRef } from "react";
|
||||
import React, {memo, useRef} from "react";
|
||||
import { ShapeProps } from "../LeftSide";
|
||||
|
||||
const Cube = (props: ShapeProps) => {
|
||||
const Cube = memo((props: ShapeProps) => {
|
||||
const grayTex = useLoader(THREE.TextureLoader, grayTextureFile);
|
||||
const darkGrayTex = useLoader(THREE.TextureLoader, darkGrayTextureFile);
|
||||
|
||||
|
@ -34,6 +34,6 @@ const Cube = (props: ShapeProps) => {
|
|||
/>
|
||||
</mesh>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default Cube;
|
||||
|
|
|
@ -2,7 +2,7 @@ import { useFrame, useLoader } from "react-three-fiber";
|
|||
import * as THREE from "three";
|
||||
import grayTextureFile from "../../../../static/sprite/gray_box.png";
|
||||
import darkGrayTextureFile from "../../../../static/sprite/dark_gray_box.png";
|
||||
import React, { useRef } from "react";
|
||||
import React, { memo, useRef } from "react";
|
||||
import { ShapeProps } from "../LeftSide";
|
||||
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||
|
||||
|
@ -15,7 +15,7 @@ type GLTFResult = GLTF & {
|
|||
};
|
||||
};
|
||||
|
||||
const TriangularPrism = (props: ShapeProps) => {
|
||||
const TriangularPrism = memo((props: ShapeProps) => {
|
||||
const grayTex = useLoader(THREE.TextureLoader, grayTextureFile);
|
||||
const darkGrayTex = useLoader(THREE.TextureLoader, darkGrayTextureFile);
|
||||
|
||||
|
@ -46,6 +46,6 @@ const TriangularPrism = (props: ShapeProps) => {
|
|||
/>
|
||||
</mesh>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default TriangularPrism;
|
||||
|
|
|
@ -1,26 +1,21 @@
|
|||
import React, { useCallback, useMemo } from "react";
|
||||
import { useMainSceneStore, useMediaWordStore } from "../../../store";
|
||||
import React, { memo, useCallback, useMemo } from "react";
|
||||
import { useStore } from "../../../store";
|
||||
import Word from "./RightSide/Word";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import word_position_states from "../../../resources/word_position_states.json";
|
||||
import * as THREE from "three";
|
||||
import Lof from "../Lof";
|
||||
|
||||
type RightSideProps = {
|
||||
activeMediaComponent: string;
|
||||
};
|
||||
const RightSide = memo(() => {
|
||||
const words = useStore((state) => state.activeNode.words);
|
||||
|
||||
const RightSide = (props: RightSideProps) => {
|
||||
const words = useMainSceneStore((state) => state.activeNode.words);
|
||||
|
||||
const posStateIdx = useMediaWordStore(
|
||||
(state) => state.posStateIdx
|
||||
).toString();
|
||||
|
||||
const wordPositionState = useMediaWordStore(
|
||||
const wordPositionState = useStore(
|
||||
useCallback(
|
||||
() =>
|
||||
word_position_states[posStateIdx as keyof typeof word_position_states],
|
||||
[posStateIdx]
|
||||
(state) =>
|
||||
word_position_states[
|
||||
state.mediaWordPosStateIdx.toString() as keyof typeof word_position_states
|
||||
],
|
||||
[]
|
||||
)
|
||||
);
|
||||
|
||||
|
@ -45,8 +40,21 @@ const RightSide = (props: RightSideProps) => {
|
|||
[]
|
||||
);
|
||||
|
||||
const activeMediaComponent = useStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
|
||||
state.mediaComponentMatrixIndices.sideIdx === 0
|
||||
? state.mediaComponentMatrixIndices.leftSideIdx
|
||||
: state.mediaComponentMatrixIndices.rightSideIdx
|
||||
],
|
||||
[]
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<group position={[0, 0, -3]}>
|
||||
<Lof />
|
||||
<a.group
|
||||
position-x={wordPositionStateSpring.crossPosX}
|
||||
position-y={wordPositionStateSpring.crossPosY}
|
||||
|
@ -74,22 +82,22 @@ const RightSide = (props: RightSideProps) => {
|
|||
word={words[1]}
|
||||
posX={wordPositionStateSpring.fstWordPosX}
|
||||
posY={wordPositionStateSpring.fstWordPosY}
|
||||
active={props.activeMediaComponent === "fstWord"}
|
||||
active={activeMediaComponent === "fstWord"}
|
||||
/>
|
||||
<Word
|
||||
word={words[2]}
|
||||
posX={wordPositionStateSpring.sndWordPosX}
|
||||
posY={wordPositionStateSpring.sndWordPosY}
|
||||
active={props.activeMediaComponent === "sndWord"}
|
||||
active={activeMediaComponent === "sndWord"}
|
||||
/>
|
||||
<Word
|
||||
word={words[3]}
|
||||
posX={wordPositionStateSpring.thirdWordPosX}
|
||||
posY={wordPositionStateSpring.thirdWordPosY}
|
||||
active={props.activeMediaComponent === "thirdWord"}
|
||||
active={activeMediaComponent === "thirdWord"}
|
||||
/>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default RightSide;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { memo } from "react";
|
||||
import ssknBackground from "../../static/sprite/sskn_background.png";
|
||||
import ssknBackgroundText from "../../static/sprite/sskn_background_text.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
|
@ -6,7 +6,7 @@ import * as THREE from "three";
|
|||
import ssknTopLabel from "../../static/sprite/sskn_top_label.png";
|
||||
import ssknDango from "../../static/sprite/sskn_dango.png";
|
||||
|
||||
const SSknBackground = () => {
|
||||
const SSknBackground = memo(() => {
|
||||
const ssknBackgroundTex = useLoader(THREE.TextureLoader, ssknBackground);
|
||||
const ssknBackgroundTextTex = useLoader(
|
||||
THREE.TextureLoader,
|
||||
|
@ -41,6 +41,6 @@ const SSknBackground = () => {
|
|||
</sprite>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default SSknBackground;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { memo } from "react";
|
||||
import ssknOk from "../../static/sprite/sskn_ok.png";
|
||||
import ssknOkInactive from "../../static/sprite/sskn_ok_inactive.png";
|
||||
import ssknCancel from "../../static/sprite/sskn_cancel.png";
|
||||
|
@ -8,7 +8,6 @@ import ssknArrow from "../../static/sprite/sskn_arrow.png";
|
|||
import ssknTextWrapper from "../../static/sprite/sskn_text_wrapper.png";
|
||||
import ssknTextWrapperInactive from "../../static/sprite/sskn_text_wrapper_inactive.png";
|
||||
import ssknLine from "../../static/sprite/sskn_line.png";
|
||||
import ssknLoadingBar from "../../static/sprite/SSkn_loading_bar.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import SSknLoadingBar from "./SSknLoadingBar";
|
||||
|
@ -18,7 +17,7 @@ type SSknHUDProps = {
|
|||
loading: boolean;
|
||||
};
|
||||
|
||||
const SSknHUD = (props: SSknHUDProps) => {
|
||||
const SSknHUD = memo((props: SSknHUDProps) => {
|
||||
const ssknOkTex = useLoader(THREE.TextureLoader, ssknOk);
|
||||
const ssknOkInactiveTex = useLoader(THREE.TextureLoader, ssknOkInactive);
|
||||
const ssknCancelTex = useLoader(THREE.TextureLoader, ssknCancel);
|
||||
|
@ -102,6 +101,6 @@ const SSknHUD = (props: SSknHUDProps) => {
|
|||
</sprite>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default SSknHUD;
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import React, { useRef } from "react";
|
||||
import React, { memo, useRef } from "react";
|
||||
import ssknIcon from "../../static/sprite/SSkn_icon.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
const SSknIcon = () => {
|
||||
const SSknIcon = memo(() => {
|
||||
const ssknIconTex = useLoader(THREE.TextureLoader, ssknIcon);
|
||||
const ssknIconRef = useRef<THREE.Object3D>();
|
||||
const ssknIconShadowRef = useRef<THREE.Object3D>();
|
||||
|
@ -49,6 +49,6 @@ const SSknIcon = () => {
|
|||
</mesh>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default SSknIcon;
|
||||
|
|
|
@ -1,31 +1,81 @@
|
|||
import React from "react";
|
||||
import { useMediaBigTextStore } from "../../store";
|
||||
import React, { memo, useCallback, useEffect, useState } from "react";
|
||||
import { useStore } from "../../store";
|
||||
import { a, useTrail } from "@react-spring/three";
|
||||
import BigLetter from "./BigLetter";
|
||||
|
||||
const MediaYellowTextAnimator = () => {
|
||||
const transformState = useMediaBigTextStore((state) => state.transformState);
|
||||
const textArr = useMediaBigTextStore((state) => state.text).split("");
|
||||
const MediaYellowTextAnimator = memo(() => {
|
||||
const [lastLeftComponent, setLastLeftComponent] = useState("play");
|
||||
const [textArr, setTextArr] = useState("Play".split(""));
|
||||
const [posY, setPosY] = useState(0.05);
|
||||
const [xOffset, setXOffset] = useState(0);
|
||||
|
||||
const trail = useTrail(textArr.length, {
|
||||
posX: transformState.posX,
|
||||
posY: transformState.posY,
|
||||
posY: posY,
|
||||
config: { duration: 280 },
|
||||
});
|
||||
|
||||
const activeMediaComponent = useStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
|
||||
state.mediaComponentMatrixIndices.sideIdx === 0
|
||||
? state.mediaComponentMatrixIndices.leftSideIdx
|
||||
: state.mediaComponentMatrixIndices.rightSideIdx
|
||||
],
|
||||
[]
|
||||
)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
(activeMediaComponent === "play" || activeMediaComponent === "exit") &&
|
||||
activeMediaComponent !== lastLeftComponent
|
||||
) {
|
||||
setLastLeftComponent(activeMediaComponent);
|
||||
setXOffset(-1);
|
||||
|
||||
setTimeout(() => {
|
||||
if (activeMediaComponent === "play") {
|
||||
setPosY(0.05);
|
||||
} else {
|
||||
setPosY(-0.08);
|
||||
}
|
||||
}, 400);
|
||||
|
||||
setTimeout(() => {
|
||||
setTextArr(
|
||||
(
|
||||
activeMediaComponent.charAt(0).toUpperCase() +
|
||||
activeMediaComponent.slice(1)
|
||||
).split("")
|
||||
);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
setXOffset(0);
|
||||
}, 1200);
|
||||
}
|
||||
}, [activeMediaComponent, lastLeftComponent]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setLastLeftComponent("play");
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<group position={[0, 0, 10]}>
|
||||
{trail.map(({ posX, posY }, idx) => (
|
||||
{trail.map(({ posY }, idx) => (
|
||||
<a.group
|
||||
key={idx}
|
||||
position-x={posX}
|
||||
position-y={posY}
|
||||
position-x={-0.8}
|
||||
position-z={-8.7}
|
||||
scale={[0.04, 0.06, 0.04]}
|
||||
>
|
||||
<BigLetter
|
||||
color={"yellow"}
|
||||
xOffset={transformState.xOffset}
|
||||
xOffset={xOffset}
|
||||
letter={textArr[idx]}
|
||||
letterIdx={idx}
|
||||
key={idx}
|
||||
|
@ -34,6 +84,6 @@ const MediaYellowTextAnimator = () => {
|
|||
))}
|
||||
</group>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default MediaYellowTextAnimator;
|
||||
|
|
|
@ -6,7 +6,7 @@ import { useLoader } from "react-three-fiber";
|
|||
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import React, { useMemo, memo } from "react";
|
||||
import { useMainSceneStore } from "../../store";
|
||||
import { useStore } from "../../store";
|
||||
|
||||
const StaticBigLetter = memo(
|
||||
(props: {
|
||||
|
@ -20,7 +20,7 @@ const StaticBigLetter = memo(
|
|||
colIdx?: number;
|
||||
intro?: boolean;
|
||||
}) => {
|
||||
const exitAnimation = useMainSceneStore(
|
||||
const exitAnimation = useStore(
|
||||
(state) => state.pauseExitAnimation
|
||||
);
|
||||
|
||||
|
|
|
@ -1,24 +1,24 @@
|
|||
import React, { useEffect, useRef } from "react";
|
||||
import { useMainSceneStore } from "../../store";
|
||||
import { useStore } from "../../store";
|
||||
import { a, useTrail } from "@react-spring/three";
|
||||
import BigLetter from "./BigLetter";
|
||||
|
||||
const YellowTextRenderer = (props: { visible?: boolean }) => {
|
||||
const xOffset = useMainSceneStore((state) => state.bigTextXOffset);
|
||||
const visible = useMainSceneStore((state) => state.bigTextVisible);
|
||||
const color = useMainSceneStore((state) => state.bigTextColor);
|
||||
const xOffset = useStore((state) => state.bigTextXOffset);
|
||||
const visible = useStore((state) => state.bigTextVisible);
|
||||
const color = useStore((state) => state.bigTextColor);
|
||||
|
||||
const textRef = useRef(useMainSceneStore.getState().bigText.split(""));
|
||||
const textRef = useRef(useStore.getState().bigText.split(""));
|
||||
|
||||
const [trail, set] = useTrail(textRef.current.length, () => ({
|
||||
posX: useMainSceneStore.getState().bigTextPos[0],
|
||||
posY: useMainSceneStore.getState().bigTextPos[1],
|
||||
posX: useStore.getState().bigTextPos[0],
|
||||
posY: useStore.getState().bigTextPos[1],
|
||||
config: { duration: 280 },
|
||||
}));
|
||||
|
||||
useEffect(
|
||||
() =>
|
||||
useMainSceneStore.subscribe(
|
||||
useStore.subscribe(
|
||||
(state) => {
|
||||
textRef.current = (state as any).bigText.split("");
|
||||
},
|
||||
|
@ -28,7 +28,7 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
|
|||
);
|
||||
|
||||
useEffect(() => {
|
||||
useMainSceneStore.subscribe(set, (state) => ({
|
||||
useStore.subscribe(set, (state) => ({
|
||||
posX: state.bigTextPos[0],
|
||||
posY: state.bigTextPos[1],
|
||||
}));
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useAuthorizeUserStore, useBootStore } from "../../../store";
|
||||
import { useAuthorizeUserStore } from "../../../store";
|
||||
|
||||
const BootAuthorizeUserManager = (props: StateManagerProps) => {
|
||||
const setActiveLetterTextureOffset = useAuthorizeUserStore(
|
||||
|
|
|
@ -1,13 +1,10 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useBootStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
const BootComponentManager = (props: StateManagerProps) => {
|
||||
const toggleComponentMatrixIdx = useBootStore(
|
||||
(state) => state.toggleComponentMatrixIdx
|
||||
);
|
||||
const setAuthorizeUserMatrixIdx = useBootStore(
|
||||
(state) => state.setAuthorizeUserMatrixIdx
|
||||
const toggleComponentMatrixIdx = useStore(
|
||||
(state) => state.toggleBootComponentMatrixIdx
|
||||
);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
|
@ -29,13 +26,9 @@ const BootComponentManager = (props: StateManagerProps) => {
|
|||
case "authorize_user_up":
|
||||
case "authorize_user_left":
|
||||
case "authorize_user_down":
|
||||
return {
|
||||
action: setAuthorizeUserMatrixIdx,
|
||||
value: newAuthorizeUserMatrixIdx,
|
||||
};
|
||||
}
|
||||
},
|
||||
[setAuthorizeUserMatrixIdx, toggleComponentMatrixIdx]
|
||||
[toggleComponentMatrixIdx]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useMainSceneStore, useSiteSaveStore } from "../../../store";
|
||||
import { useStore, useSiteSaveStore } from "../../../store";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import node_huds from "../../../resources/node_huds.json";
|
||||
import site_a from "../../../resources/site_a.json";
|
||||
|
@ -18,21 +18,21 @@ const GameLoader = (props: StateManagerProps) => {
|
|||
// const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
|
||||
|
||||
// big text setter
|
||||
const setBigTexPos = useMainSceneStore((state) => state.setBigTextPos);
|
||||
const setBigText = useMainSceneStore((state) => state.setBigText);
|
||||
const setBigTexPos = useStore((state) => state.setBigTextPos);
|
||||
const setBigText = useStore((state) => state.setBigText);
|
||||
|
||||
// site setter
|
||||
const setSiteRot = useMainSceneStore((state) => state.setSiteRot);
|
||||
const setCurrentSite = useMainSceneStore((state) => state.setActiveSite);
|
||||
const setSiteRot = useStore((state) => state.setSiteRot);
|
||||
const setCurrentSite = useStore((state) => state.setActiveSite);
|
||||
|
||||
// node setter
|
||||
const setActiveNode = useMainSceneStore((state) => state.setNode);
|
||||
const setNodeMatrixIndices = useMainSceneStore(
|
||||
const setActiveNode = useStore((state) => state.setNode);
|
||||
const setNodeMatrixIndices = useStore(
|
||||
(state) => state.setNodeMatrixIndices
|
||||
);
|
||||
|
||||
// node hud setter
|
||||
const setHud = useMainSceneStore((state) => state.setHud);
|
||||
const setHud = useStore((state) => state.setHud);
|
||||
|
||||
const changeSite = useCallback((site: string) => {
|
||||
// load new site
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useMainSceneStore, useSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
const SceneManager = (props: StateManagerProps) => {
|
||||
const setScene = useSceneStore((state) => state.setScene);
|
||||
const setMainSceneIntro = useMainSceneStore((state) => state.setIntro);
|
||||
const setScene = useStore((state) => state.setScene);
|
||||
const setMainSceneIntro = useStore((state) => state.setIntro);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string; scene: string }) => {
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useBootStore, useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
const SubsceneManager = (props: StateManagerProps) => {
|
||||
const setMainSubscene = useMainSceneStore((state) => state.setSubscene);
|
||||
const setBootSubscene = useBootStore((state) => state.setSubscene);
|
||||
const setMainSubscene = useStore((state) => state.setMainSubscene);
|
||||
const setBootSubscene = useStore((state) => state.setBootSubscene);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string }) => {
|
||||
|
@ -62,7 +62,7 @@ const SubsceneManager = (props: StateManagerProps) => {
|
|||
|
||||
if (dispatchedObject) {
|
||||
setTimeout(() => {
|
||||
dispatchedObject.action(dispatchedObject.value);
|
||||
dispatchedObject.action(dispatchedObject.value as any);
|
||||
}, dispatchedObject.delay);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useMainSceneStore } from "../../store";
|
||||
import { useStore } from "../../store";
|
||||
import handleMainSceneEvent from "../mainSceneEventHandler";
|
||||
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||
import NodeManager from "./MainSceneManagers/NodeManager";
|
||||
|
@ -24,25 +24,25 @@ type MainSceneEventManagerProps = {
|
|||
|
||||
const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
|
||||
// all the possible context needed to calculate new state
|
||||
const currentSite = useMainSceneStore((state) => state.activeSite);
|
||||
const activeNodeId = useMainSceneStore((state) => state.activeNode.id);
|
||||
const nodeMatrixIndices = useMainSceneStore(
|
||||
const currentSite = useStore((state) => state.activeSite);
|
||||
const activeNodeId = useStore((state) => state.activeNode.id);
|
||||
const nodeMatrixIndices = useStore(
|
||||
(state) => state.activeNodeMatrixIndices
|
||||
);
|
||||
const siteRotY = useMainSceneStore((state) => state.siteRot[1]);
|
||||
const sitePosY = useMainSceneStore((state) => state.sitePos[1]);
|
||||
const activeLevel = useMainSceneStore((state) => state.activeLevel);
|
||||
const mainSubscene = useMainSceneStore((state) => state.subscene);
|
||||
const selectedLevel = useMainSceneStore((state) => state.selectedLevel);
|
||||
const pauseMatrixIdx = useMainSceneStore(
|
||||
const siteRotY = useStore((state) => state.siteRot[1]);
|
||||
const sitePosY = useStore((state) => state.sitePos[1]);
|
||||
const activeLevel = useStore((state) => state.activeLevel);
|
||||
const mainSubscene = useStore((state) => state.mainSubscene);
|
||||
const selectedLevel = useStore((state) => state.selectedLevel);
|
||||
const pauseMatrixIdx = useStore(
|
||||
(state) => state.pauseComponentMatrixIdx
|
||||
);
|
||||
const activePauseComponent = useMainSceneStore(
|
||||
const activePauseComponent = useStore(
|
||||
useCallback((state) => state.pauseComponentMatrix[pauseMatrixIdx], [
|
||||
pauseMatrixIdx,
|
||||
])
|
||||
);
|
||||
const gameProgress = useMainSceneStore((state) => state.gameProgress);
|
||||
const gameProgress = useStore((state) => state.gameProgress);
|
||||
|
||||
const timePassedSinceLastKeyPress = useRef(-1);
|
||||
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { HUDType } from "../../../components/MainScene/SyncedComponents/HUD";
|
||||
|
||||
const BigTextManager = (props: StateManagerProps) => {
|
||||
const setText = useMainSceneStore((state) => state.setBigText);
|
||||
const setColor = useMainSceneStore((state) => state.setBigTextColor);
|
||||
const setVisible = useMainSceneStore((state) => state.setBigTextVisible);
|
||||
const setXOffset = useMainSceneStore((state) => state.setBigTextXOffset);
|
||||
const setPos = useMainSceneStore((state) => state.setBigTextPos);
|
||||
const setText = useStore((state) => state.setBigText);
|
||||
const setColor = useStore((state) => state.setBigTextColor);
|
||||
const setVisible = useStore((state) => state.setBigTextVisible);
|
||||
const setXOffset = useStore((state) => state.setBigTextXOffset);
|
||||
const setPos = useStore((state) => state.setBigTextPos);
|
||||
|
||||
const animateYellowTextWithMove = useCallback(
|
||||
(
|
||||
|
|
|
@ -3,11 +3,11 @@ import { StateManagerProps } from "../EventManager";
|
|||
import { SiteType } from "../../../components/MainScene/SyncedComponents/Site";
|
||||
import site_a from "../../../resources/site_a.json";
|
||||
import site_b from "../../../resources/site_b.json";
|
||||
import { useIdleStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
const IdleManager = (props: StateManagerProps) => {
|
||||
const setImages = useIdleStore((state) => state.setImages);
|
||||
const setMedia = useIdleStore((state) => state.setMedia);
|
||||
const setImages = useStore((state) => state.setIdleImages);
|
||||
const setMedia = useStore((state) => state.setIdleMedia);
|
||||
|
||||
const playIdleMedia = useCallback(
|
||||
(site: string) => {
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
|
||||
const LainManager = (props: StateManagerProps) => {
|
||||
const setLainMoveState = useMainSceneStore((state) => state.setLainMoveState);
|
||||
const setLainMoveState = useStore((state) => state.setLainMoveState);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string }) => {
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
const LevelManager = (props: StateManagerProps) => {
|
||||
const setActiveLevel = useMainSceneStore((state) => state.setActiveLevel);
|
||||
const setActiveLevel = useStore((state) => state.setActiveLevel);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string; level: string }) => {
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
const LevelSelectionManager = (props: StateManagerProps) => {
|
||||
const setSelectedLevel = useMainSceneStore((state) => state.setSelectedLevel);
|
||||
const setSelectedLevel = useStore((state) => state.setSelectedLevel);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string; selectedLevelIdx: number }) => {
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
const MiddleRingManager = (props: any) => {
|
||||
const setRot = useMainSceneStore((state) => state.setMiddleRingRot);
|
||||
const setPos = useMainSceneStore((state) => state.setMiddleRingPos);
|
||||
const setRotating = useMainSceneStore((state) => state.setMiddleRingRotating);
|
||||
const setNoiseAmp = useMainSceneStore((state) => state.setMiddleRingNoiseAmp);
|
||||
const setWobbleAmp = useMainSceneStore(
|
||||
const setRot = useStore((state) => state.setMiddleRingRot);
|
||||
const setPos = useStore((state) => state.setMiddleRingPos);
|
||||
const setRotating = useStore((state) => state.setMiddleRingRotating);
|
||||
const setNoiseAmp = useStore((state) => state.setMiddleRingNoiseAmp);
|
||||
const setWobbleAmp = useStore(
|
||||
(state) => state.setMiddleRingWobbleAmp
|
||||
);
|
||||
const setFakeRingVisible = useMainSceneStore(
|
||||
const setFakeRingVisible = useStore(
|
||||
(state) => state.setFakeMiddleRingVisible
|
||||
);
|
||||
const setPartSeparatorVal = useMainSceneStore(
|
||||
const setPartSeparatorVal = useStore(
|
||||
(state) => state.setMiddleRingPartSeparatorVal
|
||||
);
|
||||
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import {HUDType} from "../../../components/MainScene/SyncedComponents/HUD";
|
||||
|
||||
const NodeHUDManager = (props: StateManagerProps) => {
|
||||
const set = useMainSceneStore((state) => state.setHud);
|
||||
const toggleActive = useMainSceneStore((state) => state.toggleHudActive);
|
||||
const set = useStore((state) => state.setHud);
|
||||
const toggleActive = useStore((state) => state.toggleHudActive);
|
||||
|
||||
const moveAndChangeNode = useCallback(
|
||||
(hud: HUDType) => {
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site";
|
||||
|
||||
const NodeManager = (props: StateManagerProps) => {
|
||||
const setActiveNode = useMainSceneStore((state) => state.setNode);
|
||||
const setActiveNodePos = useMainSceneStore((state) => state.setNodePos);
|
||||
const setActiveNodeRot = useMainSceneStore((state) => state.setNodeRot);
|
||||
const setActiveNodeState = useMainSceneStore((state) => state.setNodeState);
|
||||
const setNodeMatrixIndices = useMainSceneStore(
|
||||
const setActiveNode = useStore((state) => state.setNode);
|
||||
const setActiveNodePos = useStore((state) => state.setNodePos);
|
||||
const setActiveNodeRot = useStore((state) => state.setNodeRot);
|
||||
const setActiveNodeState = useStore((state) => state.setNodeState);
|
||||
const setNodeMatrixIndices = useStore(
|
||||
(state) => state.setNodeMatrixIndices
|
||||
);
|
||||
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
const PauseComponentManager = (props: StateManagerProps) => {
|
||||
const setComponentMatrixIdx = useMainSceneStore(
|
||||
const setComponentMatrixIdx = useStore(
|
||||
(state) => state.setPauseComponentMatrixIdx
|
||||
);
|
||||
const setExitAnimation = useMainSceneStore(
|
||||
const setExitAnimation = useStore(
|
||||
(state) => state.setPauseExitAnimation
|
||||
);
|
||||
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
|
||||
const SiteManager = (props: StateManagerProps) => {
|
||||
const setPos = useMainSceneStore((state) => state.setSitePos);
|
||||
const setRot = useMainSceneStore((state) => state.setSiteRot);
|
||||
const setRotX = useMainSceneStore((state) => state.setSiteRotX);
|
||||
const setPos = useStore((state) => state.setSitePos);
|
||||
const setRot = useStore((state) => state.setSiteRot);
|
||||
const setRotX = useStore((state) => state.setSiteRotX);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string; sitePosY: number; siteRotY: number }) => {
|
||||
|
|
|
@ -1,14 +1,13 @@
|
|||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useMainSceneStore, useMediaWordStore } from "../../store";
|
||||
import { useStore } from "../../store";
|
||||
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||
import SceneManager from "./GameManagers/SceneManager";
|
||||
import handleMediaSceneEvent from "../mediaSceneEventHandler";
|
||||
import MediaComponentManager from "./MediaSceneManagers/MediaComponentManager";
|
||||
import MediaYellowTextManager from "./MediaSceneManagers/MediaYellowTextManager";
|
||||
|
||||
const MediaSceneEventManager = () => {
|
||||
// all the possible context needed to calculate new state
|
||||
const activeMediaComponent = useMainSceneStore(
|
||||
const activeMediaComponent = useStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
|
||||
|
@ -20,11 +19,13 @@ const MediaSceneEventManager = () => {
|
|||
)
|
||||
);
|
||||
|
||||
const rightSideComponentIdx = useMainSceneStore(
|
||||
const rightSideComponentIdx = useStore(
|
||||
(state) => state.mediaComponentMatrixIndices.rightSideIdx
|
||||
);
|
||||
|
||||
const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx);
|
||||
const wordPosStateIdx = useStore(
|
||||
(state) => state.mediaWordPosStateIdx
|
||||
);
|
||||
|
||||
const [eventState, setEventState] = useState<any>();
|
||||
|
||||
|
@ -60,7 +61,6 @@ const MediaSceneEventManager = () => {
|
|||
<>
|
||||
<MediaComponentManager eventState={eventState!} />
|
||||
<SceneManager eventState={eventState!} />
|
||||
<MediaYellowTextManager eventState={eventState!} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,26 +1,28 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useMainSceneStore, useMediaWordStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
import * as THREE from "three";
|
||||
|
||||
const MediaComponentManager = (props: StateManagerProps) => {
|
||||
const toggleSide = useMainSceneStore((state) => state.toggleMediaSide);
|
||||
const setLeftComponentMatrixIdx = useMainSceneStore(
|
||||
const toggleSide = useStore((state) => state.toggleMediaSide);
|
||||
const setLeftComponentMatrixIdx = useStore(
|
||||
(state) => state.setMediaLeftComponentMatrixIdx
|
||||
);
|
||||
const setRightComponentMatrixIdx = useMainSceneStore(
|
||||
const setRightComponentMatrixIdx = useStore(
|
||||
(state) => state.setMediaRightComponentMatrixIdx
|
||||
);
|
||||
const setWordPosStateIdx = useMediaWordStore((state) => state.setPosStateIdx);
|
||||
const setWordPosStateIdx = useStore(
|
||||
(state) => state.setMediaWordPosStateIdx
|
||||
);
|
||||
|
||||
const resetComponentMatrixIndices = useMainSceneStore(
|
||||
const resetComponentMatrixIndices = useStore(
|
||||
(state) => state.resetMediaComponentMatrixIndices
|
||||
);
|
||||
const resetWordPosStateIdx = useMediaWordStore(
|
||||
(state) => state.resetPosStateIdx
|
||||
const resetWordPosStateIdx = useStore(
|
||||
(state) => state.resetMediaWordPosStateIdx
|
||||
);
|
||||
|
||||
const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
|
||||
const setAudioAnalyser = useStore((state) => state.setAudioAnalyser);
|
||||
|
||||
const playMedia = useCallback(() => {
|
||||
const mediaElement = document.getElementById("media") as HTMLMediaElement;
|
||||
|
|
|
@ -1,69 +0,0 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { useMediaBigTextStore } from "../../../store";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
|
||||
const MediaYellowTextManager = (props: StateManagerProps) => {
|
||||
const setTransformState = useMediaBigTextStore(
|
||||
(state) => state.setTransformState
|
||||
);
|
||||
|
||||
const setText = useMediaBigTextStore((state) => state.setText);
|
||||
|
||||
const animateMediaYellowText = useCallback(
|
||||
(
|
||||
targetMediaComponentText: string,
|
||||
targetMediaComponentTextPos: number[]
|
||||
) => {
|
||||
// make current text shrink
|
||||
setTransformState(-1, "xOffset");
|
||||
|
||||
setTimeout(() => {
|
||||
setTransformState(targetMediaComponentTextPos[0], "posX");
|
||||
setTransformState(targetMediaComponentTextPos[1], "posY");
|
||||
}, 400);
|
||||
|
||||
setTimeout(() => {
|
||||
setText(targetMediaComponentText);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
// unshrink text
|
||||
setTransformState(0, "xOffset");
|
||||
}, 1200);
|
||||
},
|
||||
[setText, setTransformState]
|
||||
);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string }) => {
|
||||
switch (eventState.event) {
|
||||
case "media_leftside_up":
|
||||
case "throw_node_media":
|
||||
return {
|
||||
action: animateMediaYellowText,
|
||||
value: ["Play", [-0.8, 0.05, 0.6]],
|
||||
};
|
||||
case "media_leftside_down":
|
||||
return {
|
||||
action: animateMediaYellowText,
|
||||
value: ["Exit", [-0.8, -0.08, 0.6]],
|
||||
};
|
||||
}
|
||||
},
|
||||
[animateMediaYellowText]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const dispatchedObject = dispatchObject(props.eventState);
|
||||
|
||||
if (dispatchedObject) {
|
||||
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
|
||||
}
|
||||
}
|
||||
}, [props.eventState, dispatchObject]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default MediaYellowTextManager;
|
|
@ -2,18 +2,16 @@ import React, { useCallback, useEffect, useState } from "react";
|
|||
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||
import SceneManager from "./GameManagers/SceneManager";
|
||||
import handleSSknSceneEvent from "../ssknSceneEventHandler";
|
||||
import { useSSknStore } from "../../store";
|
||||
import { useStore } from "../../store";
|
||||
import SSknComponentManager from "./SSknSceneManagers/SSknComponentManager";
|
||||
|
||||
const SSknSceneManager = () => {
|
||||
// all the possible context needed to calculate new state
|
||||
const ssknComponentMatrixIdx = useSSknStore(
|
||||
(state) => state.componentMatrixIdx
|
||||
);
|
||||
const activeSSknComponent = useSSknStore(
|
||||
useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [
|
||||
ssknComponentMatrixIdx,
|
||||
])
|
||||
const activeSSknComponent = useStore(
|
||||
useCallback(
|
||||
(state) => state.ssknComponentMatrix[state.ssknComponentMatrixIdx],
|
||||
[]
|
||||
)
|
||||
);
|
||||
|
||||
const [eventState, setEventState] = useState<any>();
|
||||
|
|
|
@ -1,19 +1,24 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useSSknStore } from "../../../store";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
const SSknComponentManager = (props: StateManagerProps) => {
|
||||
const toggleComponentMatrixIdx = useSSknStore(
|
||||
(state) => state.toggleComponentMatrixIdx
|
||||
const toggleComponentMatrixIdx = useStore(
|
||||
(state) => state.toggleSSknComponentMatrixIdx
|
||||
);
|
||||
const resetComponentMatrixIdx = useSSknStore(
|
||||
(state) => state.resetComponentMatrixIdx
|
||||
const resetComponentMatrixIdx = useStore(
|
||||
(state) => state.resetSSknComponentMatrixIdx
|
||||
);
|
||||
const toggleLoading = useSSknStore((state) => state.toggleLoading);
|
||||
const setSSknLoading = useStore((state) => state.setSSknLoading);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string }) => {
|
||||
switch (eventState.event) {
|
||||
case "throw_node_sskn":
|
||||
case "rip_node_sskn":
|
||||
return {
|
||||
action: resetComponentMatrixIdx,
|
||||
};
|
||||
case "sskn_ok_down":
|
||||
case "sskn_cancel_up":
|
||||
return {
|
||||
|
@ -21,11 +26,17 @@ const SSknComponentManager = (props: StateManagerProps) => {
|
|||
};
|
||||
case "sskn_ok_select":
|
||||
return {
|
||||
action: toggleLoading,
|
||||
action: setSSknLoading,
|
||||
value: true,
|
||||
};
|
||||
case "sskn_cancel_select":
|
||||
return {
|
||||
action: setSSknLoading,
|
||||
value: false,
|
||||
};
|
||||
}
|
||||
},
|
||||
[toggleComponentMatrixIdx, toggleLoading]
|
||||
[resetComponentMatrixIdx, setSSknLoading, toggleComponentMatrixIdx]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -33,7 +44,7 @@ const SSknComponentManager = (props: StateManagerProps) => {
|
|||
const dispatchedObject = dispatchObject(props.eventState);
|
||||
|
||||
if (dispatchedObject) {
|
||||
dispatchedObject.action();
|
||||
dispatchedObject.action(dispatchedObject.value as any);
|
||||
}
|
||||
}
|
||||
}, [props.eventState, dispatchObject]);
|
||||
|
|
|
@ -2,20 +2,21 @@ import React, { useCallback, useEffect, useState } from "react";
|
|||
import BootAccela from "../components/Boot/BootAccela";
|
||||
import BootAnimation from "../components/Boot/BootAnimation";
|
||||
import BootMainMenuComponents from "../components/Boot/BootMainMenuComponents";
|
||||
import { useBootStore } from "../store";
|
||||
import { useStore } from "../store";
|
||||
import BootAuthorizeUser from "../components/Boot/BootAuthorizeUser";
|
||||
import BootLoadData from "../components/Boot/BootLoadData";
|
||||
|
||||
const BootScene = () => {
|
||||
const activeSubscene = useBootStore((state) => state.subscene);
|
||||
const activeBootElement = useBootStore(
|
||||
const activeSubscene = useStore((state) => state.bootSubscene);
|
||||
|
||||
const activeBootElement = useStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
state.componentMatrix[
|
||||
activeSubscene as keyof typeof state.componentMatrix
|
||||
state.bootComponentMatrix[
|
||||
activeSubscene as keyof typeof state.bootComponentMatrix
|
||||
][
|
||||
state.componentMatrixIndices[
|
||||
activeSubscene as keyof typeof state.componentMatrixIndices
|
||||
state.bootComponentMatrixIndices[
|
||||
activeSubscene as keyof typeof state.bootComponentMatrixIndices
|
||||
]
|
||||
],
|
||||
[activeSubscene]
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { useMainSceneStore, useSceneStore } from "../store";
|
||||
import { useStore } from "../store";
|
||||
|
||||
const ChangeDiscScene = () => {
|
||||
const setScene = useSceneStore((state) => state.setScene);
|
||||
const currentSite = useMainSceneStore((state) => state.activeSite);
|
||||
const setScene = useStore((state) => state.setScene);
|
||||
const currentSite = useStore((state) => state.activeSite);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentSite === "a") {
|
||||
|
|
|
@ -1,13 +1,15 @@
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import { useEndSceneStore, useMainSceneStore } from "../store";
|
||||
import { useStore } from "../store";
|
||||
import EndSelectionScreen from "../components/EndScene/EndSelectionScreen";
|
||||
|
||||
const EndScene = () => {
|
||||
const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
|
||||
const setAudioAnalyser = useStore((state) => state.setAudioAnalyser);
|
||||
|
||||
const mediaPlayedCount = useEndSceneStore((state) => state.mediaPlayedCount);
|
||||
const mediaPlayedCount = useStore(
|
||||
(state) => state.endMediaPlayedCount
|
||||
);
|
||||
|
||||
const mainCylinderRef = useRef<THREE.Object3D>();
|
||||
|
||||
|
|
|
@ -3,11 +3,11 @@ import GateSide from "../components/GateScene/GateSide";
|
|||
import { OrbitControls } from "@react-three/drei";
|
||||
import GateHUD from "../components/GateScene/GateHUD";
|
||||
import GateMiddleObject from "../components/GateScene/GateMiddleObject";
|
||||
import { useGateStore } from "../store";
|
||||
import { useStore } from "../store";
|
||||
import GateSceneManager from "../core/StateManagers/GateSceneManager";
|
||||
|
||||
const GateScene = () => {
|
||||
const gateLvl = useGateStore((state) => state.gateLvl);
|
||||
const gateLvl = useStore((state) => state.gateLvl);
|
||||
const [introAnim, setIntroAnim] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { useIdleStore } from "../store";
|
||||
import { useStore } from "../store";
|
||||
import Images from "../components/MediaScene/Images";
|
||||
|
||||
const IdleMediaScene = () => {
|
||||
const idleMedia = useIdleStore((state) => state.media);
|
||||
const idleMedia = useStore((state) => state.idleMedia);
|
||||
|
||||
useEffect(() => {
|
||||
document.getElementsByTagName("canvas")[0].className =
|
||||
|
|
|
@ -3,14 +3,14 @@ import { OrbitControls } from "@react-three/drei";
|
|||
import React, { Suspense, useEffect, useMemo } from "react";
|
||||
import Lain from "../components/MainScene/Lain";
|
||||
import Preloader from "../components/Preloader";
|
||||
import { useMainSceneStore } from "../store";
|
||||
import { useStore } from "../store";
|
||||
import Pause from "../components/MainScene/PauseSubscene/Pause";
|
||||
import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader";
|
||||
import LevelSelection from "../components/MainScene/SyncedComponents/LevelSelection";
|
||||
|
||||
const MainScene = () => {
|
||||
const currentSubscene = useMainSceneStore((state) => state.subscene);
|
||||
const shouldIntro = useMainSceneStore((state) => state.intro);
|
||||
const currentSubscene = useStore((state) => state.mainSubscene);
|
||||
const shouldIntro = useStore((state) => state.intro);
|
||||
|
||||
const isPaused = useMemo(() => currentSubscene === "pause", [
|
||||
currentSubscene,
|
||||
|
|
|
@ -1,36 +1,32 @@
|
|||
import React, { useCallback, useEffect } from "react";
|
||||
import { useMainSceneStore } from "../store";
|
||||
import React, { useCallback, useEffect, useMemo } from "react";
|
||||
import { useStore } from "../store";
|
||||
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
||||
import RightSide from "../components/MediaScene/Selectables/RightSide";
|
||||
import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
|
||||
import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
|
||||
import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
|
||||
import Lof from "../components/MediaScene/Lof";
|
||||
import Images from "../components/MediaScene/Images";
|
||||
import MediumLetter from "../components/TextRenderer/MediumLetter";
|
||||
import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator";
|
||||
import MediaSceneEventManager from "../core/StateManagers/MediaSceneEventManager";
|
||||
|
||||
const MediaScene = () => {
|
||||
const activeNodeName = useMainSceneStore((state) =>
|
||||
state.activeNode.node_name.split("")
|
||||
);
|
||||
const activeNodeMedia = useMainSceneStore(
|
||||
(state) => state.activeNode.media_file
|
||||
);
|
||||
|
||||
const activeMediaComponent = useMainSceneStore(
|
||||
const nodeNameText = useStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
|
||||
state.mediaComponentMatrixIndices.sideIdx === 0
|
||||
? state.mediaComponentMatrixIndices.leftSideIdx
|
||||
: state.mediaComponentMatrixIndices.rightSideIdx
|
||||
],
|
||||
state.activeNode.node_name
|
||||
.split("")
|
||||
.map((letter: string, idx: number) => (
|
||||
<MediumLetter letter={letter} letterIdx={idx} key={idx} />
|
||||
)),
|
||||
[]
|
||||
)
|
||||
);
|
||||
|
||||
const activeNodeMedia = useStore(
|
||||
(state) => state.activeNode.media_file
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.getElementsByTagName("canvas")[0].className =
|
||||
"media-scene-background";
|
||||
|
@ -44,21 +40,18 @@ const MediaScene = () => {
|
|||
<perspectiveCamera position-z={3}>
|
||||
<group position={[0.4, -0.3, 0]}>
|
||||
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||
<LeftSide activeMediaComponent={activeMediaComponent!} />
|
||||
<LeftSide />
|
||||
<group position={[0, 0.5, -3]}>
|
||||
<MediaLoadingBar />
|
||||
<NodeNameContainer />
|
||||
</group>
|
||||
<group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
|
||||
{activeNodeName.map((letter: string, idx: number) => (
|
||||
<MediumLetter letter={letter} letterIdx={idx} key={idx} />
|
||||
))}
|
||||
{nodeNameText}
|
||||
</group>
|
||||
<MediaYellowTextAnimator />
|
||||
|
||||
<group visible={activeNodeMedia.includes("XA")}>
|
||||
<RightSide activeMediaComponent={activeMediaComponent!} />
|
||||
<Lof />
|
||||
<RightSide />
|
||||
<AudioVisualizer />
|
||||
<Images />
|
||||
</group>
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
import React from "react";
|
||||
import PolytanBear from "../components/PolytanScene/PolytanBear";
|
||||
import PolytanBackground from "../components/PolytanScene/PolytanBackground";
|
||||
import { usePolytanStore } from "../store";
|
||||
import { useStore } from "../store";
|
||||
|
||||
const PolytanScene = () => {
|
||||
const unlockedParts = usePolytanStore((state) => state.unlockedParts);
|
||||
const unlockedParts = useStore(
|
||||
(state) => state.polytanUnlockedParts
|
||||
);
|
||||
|
||||
return (
|
||||
<perspectiveCamera>
|
||||
|
|
|
@ -2,20 +2,18 @@ import React, { useCallback } from "react";
|
|||
import SSknIcon from "../components/SSknScene/SSknIcon";
|
||||
import SSknBackground from "../components/SSknScene/SSknBackground";
|
||||
import SSknHUD from "../components/SSknScene/SSknHUD";
|
||||
import { useSSknStore } from "../store";
|
||||
import { useStore } from "../store";
|
||||
import SSknSceneManager from "../core/StateManagers/SSknSceneManager";
|
||||
|
||||
const SSknScene = () => {
|
||||
const ssknComponentMatrixIdx = useSSknStore(
|
||||
(state) => state.componentMatrixIdx
|
||||
);
|
||||
const activeSSknComponent = useSSknStore(
|
||||
useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [
|
||||
ssknComponentMatrixIdx,
|
||||
])
|
||||
const activeSSknComponent = useStore(
|
||||
useCallback(
|
||||
(state) => state.ssknComponentMatrix[state.ssknComponentMatrixIdx],
|
||||
[]
|
||||
)
|
||||
);
|
||||
|
||||
const loading = useSSknStore((state) => state.loading);
|
||||
const loading = useStore((state) => state.ssknLoading);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import LainSpeak from "../components/LainSpeak";
|
||||
import * as THREE from "three";
|
||||
import { useMainSceneStore, useSceneStore } from "../store";
|
||||
import { useStore } from "../store";
|
||||
|
||||
const TaKScene = () => {
|
||||
const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
|
||||
const setScene = useSceneStore((state) => state.setScene);
|
||||
const setAudioAnalyser = useStore((state) => state.setAudioAnalyser);
|
||||
const setScene = useStore((state) => state.setScene);
|
||||
|
||||
const [isIntro, setIsIntro] = useState(true);
|
||||
const [isOutro, setIsOutro] = useState(false);
|
||||
|
||||
const percentageElapsed = useMainSceneStore(
|
||||
const percentageElapsed = useStore(
|
||||
(state) => state.mediaPercentageElapsed
|
||||
);
|
||||
|
||||
|
|
364
src/store.ts
364
src/store.ts
|
@ -6,19 +6,6 @@ import game_progress from "./resources/initial_progress.json";
|
|||
import { HUDType } from "./components/MainScene/SyncedComponents/HUD";
|
||||
import { NodeDataType } from "./components/MainScene/SyncedComponents/Site";
|
||||
|
||||
type EndState = {
|
||||
mediaPlayedCount: number;
|
||||
incrementMediaPlayedCount: () => void;
|
||||
resetMediaPlayedCount: () => void;
|
||||
};
|
||||
|
||||
type IdleState = {
|
||||
media: any;
|
||||
images: any;
|
||||
setMedia: (to: any) => void;
|
||||
setImages: (to: any) => void;
|
||||
};
|
||||
|
||||
type SiteSaveState = {
|
||||
a: {
|
||||
activeNodeId: string;
|
||||
|
@ -38,152 +25,7 @@ type SiteSaveState = {
|
|||
};
|
||||
};
|
||||
|
||||
type SceneState = {
|
||||
currentScene: string;
|
||||
setScene: (to: string) => void;
|
||||
};
|
||||
|
||||
type MediaWordState = {
|
||||
posStateIdx: number;
|
||||
setPosStateIdx: (to: number) => void;
|
||||
resetPosStateIdx: () => void;
|
||||
};
|
||||
|
||||
export type BigTextState = {
|
||||
visible: boolean;
|
||||
disableTrail: boolean;
|
||||
text: string;
|
||||
color: string;
|
||||
transformState: {
|
||||
posX: number;
|
||||
posY: number;
|
||||
xOffset: number;
|
||||
};
|
||||
};
|
||||
|
||||
export type MediaState = {
|
||||
audioAnalyser: any;
|
||||
mediaPercentageElapsed: number;
|
||||
componentMatrix: [[string, string], [string, string, string]];
|
||||
componentMatrixIndices: {
|
||||
sideIdx: number;
|
||||
leftSideIdx: number;
|
||||
rightSideIdx: number;
|
||||
};
|
||||
};
|
||||
|
||||
export type BootState = {
|
||||
componentMatrix: {
|
||||
main_menu: [string, string];
|
||||
load_data: [string, string];
|
||||
authorize_user: number[];
|
||||
};
|
||||
componentMatrixIndices: {
|
||||
// 0 or 1
|
||||
main_menu: number;
|
||||
// 0 or 1
|
||||
load_data: number;
|
||||
authorize_user: number;
|
||||
};
|
||||
subscene: string;
|
||||
};
|
||||
|
||||
export type AuthorizeUserState = {
|
||||
bgLettersPos: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
activeLetterTextureOffset: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
setBgLettersPos: (to: { x: number; y: number }) => void;
|
||||
setActiveLetterTexOffset: (to: { x: number; y: number }) => void;
|
||||
};
|
||||
|
||||
export type GreenTextState = {
|
||||
text: string;
|
||||
transformState: {
|
||||
posX: { initial: number; final: number };
|
||||
posY: number;
|
||||
xOffset: number;
|
||||
};
|
||||
active: number;
|
||||
};
|
||||
|
||||
type GateState = {
|
||||
gateLvl: number;
|
||||
incrementGateLvl: () => void;
|
||||
};
|
||||
|
||||
type SSknState = {
|
||||
componentMatrix: string[];
|
||||
componentMatrixIdx: number;
|
||||
toggleComponentMatrixIdx: () => void;
|
||||
resetComponentMatrixIdx: () => void;
|
||||
loading: boolean;
|
||||
toggleLoading: () => void;
|
||||
};
|
||||
|
||||
export type MediaBigTextState = {
|
||||
text: string;
|
||||
transformState: {
|
||||
posX: number;
|
||||
posY: number;
|
||||
xOffset: number;
|
||||
};
|
||||
};
|
||||
|
||||
export const useMediaBigTextStore = create(
|
||||
combine(
|
||||
{
|
||||
transformState: {
|
||||
posX: -0.8,
|
||||
posY: 0.05,
|
||||
xOffset: 0,
|
||||
},
|
||||
text: "Play",
|
||||
} as MediaBigTextState,
|
||||
(set) => ({
|
||||
setText: (to: string) => set(() => ({ text: to })),
|
||||
setTransformState: (to: number, at: string) =>
|
||||
set((state) => ({
|
||||
transformState: { ...state.transformState, [at]: to },
|
||||
})),
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
export const useIdleStore = create<IdleState>((set) => ({
|
||||
media: "INS01.STR",
|
||||
// this may be undefined depending on whether or not the media is audio or not
|
||||
images: undefined,
|
||||
setMedia: (to) => set(() => ({ media: to })),
|
||||
setImages: (to) => set(() => ({ images: to })),
|
||||
}));
|
||||
|
||||
export const useMediaWordStore = create<MediaWordState>((set) => ({
|
||||
posStateIdx: 1,
|
||||
setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
|
||||
resetPosStateIdx: () => set(() => ({ posStateIdx: 1 })),
|
||||
}));
|
||||
|
||||
export const useSSknStore = create<SSknState>((set) => ({
|
||||
componentMatrix: ["sskn_ok", "sskn_cancel"],
|
||||
componentMatrixIdx: 0,
|
||||
loading: false,
|
||||
toggleComponentMatrixIdx: () =>
|
||||
set((state) => ({ componentMatrixIdx: Number(!state.componentMatrixIdx) })),
|
||||
resetComponentMatrixIdx: () => set(() => ({ componentMatrixIdx: 0 })),
|
||||
toggleLoading: () => set(() => ({ loading: true })),
|
||||
}));
|
||||
|
||||
export const useSceneStore = create<SceneState>((set) => ({
|
||||
currentScene: "media",
|
||||
setScene: (to) => set(() => ({ currentScene: to })),
|
||||
}));
|
||||
|
||||
export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
|
||||
export const useAuthorizeUserStore = create<any>((set) => ({
|
||||
bgLettersPos: {
|
||||
x: 3.35,
|
||||
y: -0.7,
|
||||
|
@ -198,10 +40,12 @@ export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
|
|||
set(() => ({ activeLetterTextureOffset: to })),
|
||||
}));
|
||||
|
||||
type MainSceneState = {
|
||||
type State = {
|
||||
currentScene: string;
|
||||
|
||||
gameProgress: typeof game_progress;
|
||||
|
||||
subscene: string;
|
||||
mainSubscene: string;
|
||||
|
||||
intro: boolean;
|
||||
|
||||
|
@ -252,32 +96,75 @@ type MainSceneState = {
|
|||
|
||||
// level selection
|
||||
selectedLevel: number;
|
||||
levelSelectionToggled: boolean;
|
||||
|
||||
// pause
|
||||
pauseComponentMatrix: [string, string, string, string, string];
|
||||
pauseComponentMatrix: ["load", "about", "change", "save", "exit"];
|
||||
pauseComponentMatrixIdx: number;
|
||||
pauseExitAnimation: boolean;
|
||||
|
||||
// media/media scene
|
||||
audioAnalyser: undefined | THREE.AudioAnalyser;
|
||||
mediaPercentageElapsed: number;
|
||||
mediaComponentMatrix: [[string, string], [string, string, string]];
|
||||
mediaComponentMatrix: [["play", "exit"], ["fstWord", "sndWord", "thirdWord"]];
|
||||
mediaComponentMatrixIndices: {
|
||||
sideIdx: 0 | 1;
|
||||
leftSideIdx: 0 | 1;
|
||||
rightSideIdx: 0 | 1 | 2;
|
||||
};
|
||||
mediaWordPosStateIdx: number;
|
||||
|
||||
// idle scene
|
||||
idleMedia: string;
|
||||
idleImages: any;
|
||||
|
||||
// sskn scene
|
||||
ssknComponentMatrix: ["sskn_ok", "sskn_cancel"];
|
||||
ssknComponentMatrixIdx: 0 | 1;
|
||||
ssknLoading: boolean;
|
||||
|
||||
// polytan scene
|
||||
polytanUnlockedParts: {
|
||||
body: boolean;
|
||||
head: boolean;
|
||||
leftArm: boolean;
|
||||
rightArm: boolean;
|
||||
leftLeg: boolean;
|
||||
rightLeg: boolean;
|
||||
};
|
||||
|
||||
export const useMainSceneStore = create(
|
||||
// gate scene
|
||||
gateLvl: number;
|
||||
|
||||
// boot scene
|
||||
bootComponentMatrix: {
|
||||
main_menu: ["authorize_user", "load_data"];
|
||||
load_data: ["load_data_yes", "load_data_no"];
|
||||
authorize_user: typeof authorize_user_letters.letters;
|
||||
};
|
||||
bootComponentMatrixIndices: {
|
||||
// 0 or 1
|
||||
main_menu: 0 | 1;
|
||||
// 0 or 1
|
||||
load_data: 0 | 1;
|
||||
authorize_user: 0;
|
||||
};
|
||||
bootSubscene: "main_menu" | "load_data" | "authorize_user";
|
||||
|
||||
// end scene
|
||||
endMediaPlayedCount: number;
|
||||
};
|
||||
|
||||
export const useStore = create(
|
||||
combine(
|
||||
{
|
||||
// scene data
|
||||
currentScene: "main",
|
||||
|
||||
// game progress
|
||||
gameProgress: game_progress,
|
||||
|
||||
// subscene
|
||||
subscene: "site",
|
||||
// main subscene
|
||||
mainSubscene: "site",
|
||||
|
||||
// whether or not to play the intro anim
|
||||
intro: true,
|
||||
|
@ -394,10 +281,55 @@ export const useMainSceneStore = create(
|
|||
// 0 or 1 or 2 ("fstWord", "sndWord" or "thirdWord")
|
||||
rightSideIdx: 0,
|
||||
},
|
||||
} as MainSceneState,
|
||||
mediaWordPosStateIdx: 1,
|
||||
|
||||
// idle scene
|
||||
idleMedia: "INS01.STR",
|
||||
// this may be undefined depending on whether or not the media is audio or not
|
||||
idleImages: undefined,
|
||||
|
||||
// sskn scene
|
||||
ssknComponentMatrix: ["sskn_ok", "sskn_cancel"],
|
||||
ssknComponentMatrixIdx: 0,
|
||||
ssknLoading: false,
|
||||
|
||||
// polytan scene
|
||||
polytanUnlockedParts: {
|
||||
body: true,
|
||||
head: false,
|
||||
leftArm: false,
|
||||
rightArm: false,
|
||||
leftLeg: false,
|
||||
rightLeg: false,
|
||||
},
|
||||
|
||||
// gate scene
|
||||
gateLvl: 4,
|
||||
|
||||
// boot scene
|
||||
bootComponentMatrix: {
|
||||
main_menu: ["authorize_user", "load_data"],
|
||||
load_data: ["load_data_yes", "load_data_no"],
|
||||
authorize_user: authorize_user_letters.letters,
|
||||
},
|
||||
bootComponentMatrixIndices: {
|
||||
// 0 or 1
|
||||
main_menu: 0,
|
||||
// 0 or 1
|
||||
load_data: 0,
|
||||
authorize_user: 0,
|
||||
},
|
||||
bootSubscene: "main_menu",
|
||||
|
||||
// end scene
|
||||
endMediaPlayedCount: 0,
|
||||
} as State,
|
||||
(set) => ({
|
||||
// subscene setters
|
||||
setSubscene: (to: string) => set(() => ({ subscene: to })),
|
||||
// scene data setters
|
||||
setScene: (to: string) => set(() => ({ currentScene: to })),
|
||||
|
||||
// main subscene setter
|
||||
setMainSubscene: (to: string) => set(() => ({ mainSubscene: to })),
|
||||
|
||||
// intro setters
|
||||
setIntro: (to: boolean) => set(() => ({ intro: to })),
|
||||
|
@ -507,68 +439,53 @@ export const useMainSceneStore = create(
|
|||
set(() => ({ mediaPercentageElapsed: to })),
|
||||
setAudioAnalyser: (to: THREE.AudioAnalyser) =>
|
||||
set(() => ({ audioAnalyser: to })),
|
||||
})
|
||||
)
|
||||
);
|
||||
setMediaWordPosStateIdx: (to: number) =>
|
||||
set(() => ({ mediaWordPosStateIdx: to })),
|
||||
resetMediaWordPosStateIdx: () => set(() => ({ mediaWordPosStateIdx: 1 })),
|
||||
|
||||
export const useBootStore = create(
|
||||
combine(
|
||||
{
|
||||
componentMatrix: {
|
||||
main_menu: ["authorize_user", "load_data"],
|
||||
load_data: ["load_data_yes", "load_data_no"],
|
||||
authorize_user: authorize_user_letters.letters,
|
||||
},
|
||||
componentMatrixIndices: {
|
||||
// 0 or 1
|
||||
main_menu: 0,
|
||||
// 0 or 1
|
||||
load_data: 0,
|
||||
authorize_user: 0,
|
||||
},
|
||||
// main_menu, load_data or authorize_user
|
||||
subscene: "main_menu",
|
||||
} as BootState,
|
||||
(set) => ({
|
||||
setSubscene: (to: string) => set(() => ({ subscene: to })),
|
||||
toggleComponentMatrixIdx: (subscene: string) =>
|
||||
// idle media setters
|
||||
setIdleMedia: (to: any) => set(() => ({ idleMedia: to })),
|
||||
setIdleImages: (to: any) => set(() => ({ idleImages: to })),
|
||||
|
||||
// sskn scene setters
|
||||
toggleSSknComponentMatrixIdx: () =>
|
||||
set((state) => ({
|
||||
componentMatrixIndices: {
|
||||
...state.componentMatrixIndices,
|
||||
ssknComponentMatrixIdx: Number(!state.ssknComponentMatrixIdx) as
|
||||
| 0
|
||||
| 1,
|
||||
})),
|
||||
resetSSknComponentMatrixIdx: () =>
|
||||
set(() => ({ ssknComponentMatrixIdx: 0 })),
|
||||
setSSknLoading: (to: boolean) => set(() => ({ ssknLoading: to })),
|
||||
|
||||
// gate scene setters
|
||||
incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
|
||||
|
||||
// boot scene setters
|
||||
setBootSubscene: (to: "load_data" | "authorize_user" | "main_menu") =>
|
||||
set(() => ({ bootSubscene: to })),
|
||||
toggleBootComponentMatrixIdx: (subscene: "load_data" | "main_menu") =>
|
||||
set((state) => ({
|
||||
bootComponentMatrixIndices: {
|
||||
...state.bootComponentMatrixIndices,
|
||||
[subscene]: Number(
|
||||
!state.componentMatrixIndices[
|
||||
subscene as keyof typeof state.componentMatrixIndices
|
||||
!state.bootComponentMatrixIndices[
|
||||
subscene as keyof typeof state.bootComponentMatrixIndices
|
||||
]
|
||||
),
|
||||
},
|
||||
})),
|
||||
setAuthorizeUserMatrixIdx: (to: number) =>
|
||||
|
||||
// end scene setters
|
||||
incrementEndMediaPlayedCount: () =>
|
||||
set((state) => ({
|
||||
componentMatrixIndices: {
|
||||
...state.componentMatrixIndices,
|
||||
authorize_user: to,
|
||||
},
|
||||
endMediaPlayedCount: state.endMediaPlayedCount + 1,
|
||||
})),
|
||||
resetEndMediaPlayedCount: () => set(() => ({ endMediaPlayedCount: 0 })),
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
export const usePolytanStore = create<any>((set) => ({
|
||||
unlockedParts: {
|
||||
body: true,
|
||||
head: false,
|
||||
leftArm: false,
|
||||
rightArm: false,
|
||||
leftLeg: false,
|
||||
rightLeg: false,
|
||||
},
|
||||
}));
|
||||
|
||||
export const useGateStore = create<GateState>((set) => ({
|
||||
gateLvl: 4,
|
||||
incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
|
||||
}));
|
||||
|
||||
export const useSiteSaveStore = create(
|
||||
combine(
|
||||
{
|
||||
|
@ -609,12 +526,5 @@ export const useSiteSaveStore = create(
|
|||
)
|
||||
);
|
||||
|
||||
export const useEndSceneStore = create<EndState>((set) => ({
|
||||
mediaPlayedCount: 0,
|
||||
incrementMediaPlayedCount: () =>
|
||||
set((state) => ({ mediaPlayedCount: state.mediaPlayedCount + 1 })),
|
||||
resetMediaPlayedCount: () => set(() => ({ mediaPlayedCount: 0 })),
|
||||
}));
|
||||
|
||||
export const getMainSceneContext = () =>
|
||||
useMainSceneStore.getState().activeNode;
|
||||
useStore.getState().activeNode;
|
||||
|
|
Loading…
Reference in a new issue