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

almost done refactoring the store

Browse source
This commit is contained in:
ad044 2021-01-24 20:43:38 +04:00
parent 751f8793e1
commit 5e804c51a0
67 changed files with 535 additions and 630 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/App.tsx
View file

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

2
src/components/Boot/BootAuthorizeUser.tsx
View file

@ -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 = {

4
src/components/LainSpeak.tsx
View file

@ -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(() => {

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

@ -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 = {

6
src/components/MainScene/PauseSubscene/Pause.tsx
View file

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

4
src/components/MainScene/PauseSubscene/PauseSquare.tsx
View file

@ -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
src/components/MainScene/SyncedComponents/HUD.tsx
View file

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

8
src/components/MainScene/SyncedComponents/LevelSelection.tsx
View file

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

14
src/components/MainScene/SyncedComponents/MiddleRing.tsx
View file

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

8
src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx
View file

@ -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,
}));

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

@ -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],

10
src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx
View file

@ -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],

8
src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx
View file

@ -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 = {};

4
src/components/MainScene/SyncedComponents/Site/Node.tsx
View file

@ -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],

6
src/components/MainScene/SyncedComponents/Site/NodeAnimations.tsx
View file

@ -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
src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion.tsx
View file

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

4
src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx
View file

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

4
src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip.tsx
View file

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

6
src/components/MainScene/SyncedComponents/Site/Rings.tsx
View file

@ -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
src/components/MainScene/SyncedComponents/YellowOrb.tsx
View file

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

10
src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx
View file

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

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

@ -1,27 +1,27 @@
import React, {useEffect, useState} from "react";
import {useIdleStore, useMainSceneStore, useSceneStore,} from "../../store";
import {a, useSpring} from "@react-spring/three";
import React, { useEffect, useState } from "react";
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";
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
);

8
src/components/MediaScene/Lof.tsx
View file

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

4
src/components/MediaScene/MediaLoadingBar.tsx
View file

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

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

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

31
src/components/MediaScene/Selectables/LeftSide.tsx
View file

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

6
src/components/MediaScene/Selectables/LeftSide/Cube.tsx
View file

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

8
src/components/MediaScene/Selectables/LeftSide/TriangularPrism.tsx
View file

@ -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);
@ -33,7 +33,7 @@ const TriangularPrism = (props: ShapeProps) => {
return (
<mesh
scale={[0.45/2, 0.5/2, 0.45/2]}
scale={[0.45 / 2, 0.5 / 2, 0.45 / 2]}
position={props.position as [number, number, number]}
rotation-y={0.15}
rotation-z={-0.02}
@ -46,6 +46,6 @@ const TriangularPrism = (props: ShapeProps) => {
/>
</mesh>
);
};
});
export default TriangularPrism;

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

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

6
src/components/SSknScene/SSknBackground.tsx
View file

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

7
src/components/SSknScene/SSknHUD.tsx
View file

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

6
src/components/SSknScene/SSknIcon.tsx
View file

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

72
src/components/TextRenderer/MediaYellowTextAnimator.tsx
View file

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

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

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

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

@ -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],
}));

2
src/core/StateManagers/BootSceneManagers/BootAuthorizeUserManager.tsx
View file

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

15
src/core/StateManagers/BootSceneManagers/BootComponentManager.tsx
View file

@ -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(() => {

16
src/core/StateManagers/GameManagers/GameLoader.tsx
View file

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

6
src/core/StateManagers/GameManagers/SceneManager.tsx
View file

@ -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 }) => {

8
src/core/StateManagers/GameManagers/SubsceneManager.tsx
View file

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

24
src/core/StateManagers/MainSceneEventManager.tsx
View file

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

12
src/core/StateManagers/MainSceneManagers/BigTextManager.tsx
View file

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

6
src/core/StateManagers/MainSceneManagers/IdleManager.tsx
View file

@ -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) => {

4
src/core/StateManagers/MainSceneManagers/LainManager.tsx
View file

@ -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 }) => {

4
src/core/StateManagers/MainSceneManagers/LevelManager.tsx
View file

@ -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 }) => {

4
src/core/StateManagers/MainSceneManagers/LevelSelectionManager.tsx
View file

@ -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 }) => {

16
src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx
View file

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

6
src/core/StateManagers/MainSceneManagers/NodeHUDManager.tsx
View file

@ -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) => {

12
src/core/StateManagers/MainSceneManagers/NodeManager.tsx
View file

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

6
src/core/StateManagers/MainSceneManagers/PauseComponentManager.tsx
View file

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

8
src/core/StateManagers/MainSceneManagers/SiteManager.tsx
View file

@ -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 }) => {

12
src/core/StateManagers/MediaSceneEventManager.tsx
View file

@ -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!} />
</>
);
};

20
src/core/StateManagers/MediaSceneManagers/MediaComponentManager.tsx
View file

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

69
src/core/StateManagers/MediaSceneManagers/MediaYellowTextManager.tsx
View file

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

14
src/core/StateManagers/SSknSceneManager.tsx
View file

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

29
src/core/StateManagers/SSknSceneManagers/SSknComponentManager.tsx
View file

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

15
src/scenes/BootScene.tsx
View file

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

6
src/scenes/ChangeDiscScene.tsx
View file

@ -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") {

8
src/scenes/EndScene.tsx
View file

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

4
src/scenes/GateScene.tsx
View file

@ -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(() => {

4
src/scenes/IdleMediaScene.tsx
View file

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

6
src/scenes/MainScene.tsx
View file

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

37
src/scenes/MediaScene.tsx
View file

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

6
src/scenes/PolytanScene.tsx
View file

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

16
src/scenes/SSknScene.tsx
View file

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

8
src/scenes/TaKScene.tsx
View file

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

@ -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;
};
// 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 useMainSceneStore = create(
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;