mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
merging media and main stores, optimized pause a bit
This commit is contained in:
ad044
parent
c771fe2e33
commit
751f8793e1
31 changed files with 951 additions and 1019 deletions
|
|
@ -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 { useMediaStore } from "../store";
|
||||
import { useMainSceneStore } from "../store";
|
||||
import { LainConstructor } from "./MainScene/Lain";
|
||||
|
||||
type LainTaKProps = {
|
||||
|
|
@ -39,12 +39,12 @@ const LainSpeak = (props: LainTaKProps) => {
|
|||
/>
|
||||
);
|
||||
|
||||
const analyser = useMediaStore((state) => state.audioAnalyser);
|
||||
const analyser = useMainSceneStore((state) => state.audioAnalyser);
|
||||
|
||||
const mouthRef = useRef<THREE.SpriteMaterial>();
|
||||
useFrame(() => {
|
||||
if (analyser) {
|
||||
const freq = parseInt(analyser.getAverageFrequency());
|
||||
const freq = parseInt(String(analyser.getAverageFrequency()));
|
||||
|
||||
if (mouthRef.current) {
|
||||
if (freq >= 50) {
|
||||
|
|
|
|||
|
|
@ -2,12 +2,15 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|||
import * as THREE from "three";
|
||||
import PauseSquare from "./PauseSquare";
|
||||
import StaticBigLetter from "../../TextRenderer/StaticBigLetter";
|
||||
import { usePauseStore } from "../../../store";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import MainSceneEventManager from "../../../core/StateManagers/MainSceneEventManager";
|
||||
|
||||
const Pause = (props: { visible: boolean }) => {
|
||||
const exit = usePauseStore((state) => state.exitAnimation);
|
||||
type PauseProps = {
|
||||
paused: boolean;
|
||||
};
|
||||
|
||||
const Pause = (props: PauseProps) => {
|
||||
const exit = useMainSceneStore((state) => state.pauseExitAnimation);
|
||||
const [showActiveComponent, setShowActiveComponent] = useState(false);
|
||||
const [animation, setAnimation] = useState(false);
|
||||
const [intro, setIntro] = useState(true);
|
||||
|
|
@ -22,12 +25,13 @@ const Pause = (props: { visible: boolean }) => {
|
|||
[wordFont]
|
||||
);
|
||||
|
||||
const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
|
||||
const activeComponent = usePauseStore(
|
||||
const activeComponent = useMainSceneStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
showActiveComponent ? state.componentMatrix[componentMatrixIdx] : "",
|
||||
[componentMatrixIdx, showActiveComponent]
|
||||
showActiveComponent
|
||||
? state.pauseComponentMatrix[state.pauseComponentMatrixIdx]
|
||||
: "",
|
||||
[showActiveComponent]
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -58,7 +62,7 @@ const Pause = (props: { visible: boolean }) => {
|
|||
setAnimation(false);
|
||||
setIntro(true);
|
||||
setShowActiveComponent(false);
|
||||
if (props.visible) {
|
||||
if (props.paused) {
|
||||
setTimeout(() => {
|
||||
setAnimation(true);
|
||||
}, 1000);
|
||||
|
|
@ -67,285 +71,291 @@ const Pause = (props: { visible: boolean }) => {
|
|||
setIntro(false);
|
||||
}, 3500);
|
||||
}
|
||||
}, [props.visible]);
|
||||
}, [props.paused]);
|
||||
|
||||
return animation ? (
|
||||
<group position={[-0.85, -0.7, 0]} scale={[0.85, 0.85, 0]}>
|
||||
{[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
|
||||
[0, 1, 2, 3, 4, 5, 6].map((col: number) => {
|
||||
if (rowIdx === 5 && col > 0 && col < 5) {
|
||||
return col === 1 ? (
|
||||
<React.Fragment key={`Lfragment`}>
|
||||
<StaticBigLetter
|
||||
color={"white"}
|
||||
letter={"L"}
|
||||
letterIdx={col}
|
||||
position={[0.35, 1.8, 0]}
|
||||
scale={[0.25, 0.25, 0.25]}
|
||||
active={!(activeComponent === "load")}
|
||||
key={"whiteL"}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={"whiteLsquare"}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
active={!(activeComponent === "load")}
|
||||
key={`${rowIdx}${col}L`}
|
||||
intro={intro}
|
||||
return (
|
||||
<>
|
||||
{animation && (
|
||||
<group position={[-0.85, -0.7, 0]} scale={[0.85, 0.85, 0]}>
|
||||
{[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
|
||||
[0, 1, 2, 3, 4, 5, 6].map((col: number) => {
|
||||
if (rowIdx === 5 && col > 0 && col < 5) {
|
||||
return col === 1 ? (
|
||||
<React.Fragment key={`Lfragment`}>
|
||||
<StaticBigLetter
|
||||
color={"white"}
|
||||
letter={"L"}
|
||||
letterIdx={col}
|
||||
position={[0.35, 1.8, 0]}
|
||||
scale={[0.25, 0.25, 0.25]}
|
||||
active={!(activeComponent === "load")}
|
||||
key={"whiteL"}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={"whiteLsquare"}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
active={!(activeComponent === "load")}
|
||||
key={`${rowIdx}${col}L`}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 4 && col > 4 && col < 7) {
|
||||
return col === 5 ? (
|
||||
<React.Fragment key={"AFragment"}>
|
||||
<StaticBigLetter
|
||||
color={"white"}
|
||||
letter={"A"}
|
||||
letterIdx={col}
|
||||
position={[1.78, 1.43, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={!(activeComponent === "about")}
|
||||
key={"whiteA"}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={"whiteAsquare"}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
active={!(activeComponent === "about")}
|
||||
key={`${rowIdx}${col}A`}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 3 && col > 2 && col < 7) {
|
||||
return col === 3 ? (
|
||||
<React.Fragment key={"CFragment"}>
|
||||
<StaticBigLetter
|
||||
color={"white"}
|
||||
letter={"C"}
|
||||
letterIdx={col}
|
||||
position={[1.05, 1.07, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={!(activeComponent === "change")}
|
||||
key={"whiteC"}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={"whiteCsquare"}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
active={!(activeComponent === "change")}
|
||||
key={`${rowIdx}${col}C`}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 1 && col > 0 && col < 5) {
|
||||
return col === 1 ? (
|
||||
<React.Fragment key={"Sfragment"}>
|
||||
<StaticBigLetter
|
||||
color={"white"}
|
||||
letter={"S"}
|
||||
letterIdx={col}
|
||||
position={[0.35, 0.35, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={!(activeComponent === "save")}
|
||||
key={"whiteS"}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={"whiteSsquare"}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
active={!(activeComponent === "save")}
|
||||
key={`${rowIdx}${col}S`}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 0 && col > 4 && col < 7) {
|
||||
return col === 5 ? (
|
||||
<React.Fragment key={"Efragment"}>
|
||||
<StaticBigLetter
|
||||
color={"white"}
|
||||
letter={"E"}
|
||||
letterIdx={col}
|
||||
position={[1.78, 0, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={!(activeComponent === "exit")}
|
||||
key={"whiteE"}
|
||||
rowIdx={1}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={"whiteEsquare"}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
active={!(activeComponent === "exit")}
|
||||
key={`${rowIdx}${col}E`}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={`${rowIdx}${col}r`}
|
||||
active={true}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})
|
||||
)}
|
||||
{"Load".split("").map((letter, idx) => (
|
||||
<StaticBigLetter
|
||||
color={idx > 0 ? "yellow" : "orange"}
|
||||
letter={letter}
|
||||
letterIdx={idx}
|
||||
key={idx}
|
||||
position={[0.35 + idx / 2.8, 1.8, 0]}
|
||||
scale={[0.25, 0.25, 0.25]}
|
||||
active={activeComponent === "load"}
|
||||
/>
|
||||
))}
|
||||
|
||||
{"About".split("").map((letter, idx) => (
|
||||
<StaticBigLetter
|
||||
color={idx > 0 ? "yellow" : "orange"}
|
||||
letter={letter}
|
||||
letterIdx={idx}
|
||||
position={[1.78 + idx / 2.8, 1.43, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={activeComponent === "about"}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
|
||||
{"Change".split("").map((letter, idx) => (
|
||||
<StaticBigLetter
|
||||
color={idx > 0 ? "yellow" : "orange"}
|
||||
letter={letter}
|
||||
letterIdx={idx}
|
||||
position={[1.05 + idx / 2.8, 1.07, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={activeComponent === "change"}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
|
||||
{"Save".split("").map((letter, idx) => (
|
||||
<StaticBigLetter
|
||||
color={idx > 0 ? "yellow" : "orange"}
|
||||
letter={letter}
|
||||
letterIdx={idx}
|
||||
position={[0.35 + idx / 2.8, 0.35, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={activeComponent === "save"}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
|
||||
{"Exit".split("").map((letter, idx) => (
|
||||
<StaticBigLetter
|
||||
color={idx > 0 ? "yellow" : "orange"}
|
||||
letter={letter}
|
||||
letterIdx={idx}
|
||||
position={[1.78 + idx / 2.8, 0, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
key={idx}
|
||||
active={activeComponent === "exit"}
|
||||
/>
|
||||
))}
|
||||
|
||||
<group visible={!exit}>
|
||||
<sprite
|
||||
position={[0.5, -0.8, 0]}
|
||||
scale={[3, 1, 0]}
|
||||
renderOrder={100}
|
||||
>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
color={0x000000}
|
||||
opacity={0.8}
|
||||
depthTest={false}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 4 && col > 4 && col < 7) {
|
||||
return col === 5 ? (
|
||||
<React.Fragment key={"AFragment"}>
|
||||
<StaticBigLetter
|
||||
color={"white"}
|
||||
letter={"A"}
|
||||
letterIdx={col}
|
||||
position={[1.78, 1.43, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={!(activeComponent === "about")}
|
||||
key={"whiteA"}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={"whiteAsquare"}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
active={!(activeComponent === "about")}
|
||||
key={`${rowIdx}${col}A`}
|
||||
intro={intro}
|
||||
</sprite>
|
||||
<mesh
|
||||
scale={[0.08, 0.07, 0]}
|
||||
position={[-0.2, -0.6, 0]}
|
||||
renderOrder={101}
|
||||
>
|
||||
<textGeometry
|
||||
attach="geometry"
|
||||
args={["Application Version 1.0", config]}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 3 && col > 2 && col < 7) {
|
||||
return col === 3 ? (
|
||||
<React.Fragment key={"CFragment"}>
|
||||
<StaticBigLetter
|
||||
color={"white"}
|
||||
letter={"C"}
|
||||
letterIdx={col}
|
||||
position={[1.05, 1.07, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={!(activeComponent === "change")}
|
||||
key={"whiteC"}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={"whiteCsquare"}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
active={!(activeComponent === "change")}
|
||||
key={`${rowIdx}${col}C`}
|
||||
intro={intro}
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
color={0x00ba7c}
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 1 && col > 0 && col < 5) {
|
||||
return col === 1 ? (
|
||||
<React.Fragment key={"Sfragment"}>
|
||||
<StaticBigLetter
|
||||
color={"white"}
|
||||
letter={"S"}
|
||||
letterIdx={col}
|
||||
position={[0.35, 0.35, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={!(activeComponent === "save")}
|
||||
key={"whiteS"}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={"whiteSsquare"}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
active={!(activeComponent === "save")}
|
||||
key={`${rowIdx}${col}S`}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else if (rowIdx === 0 && col > 4 && col < 7) {
|
||||
return col === 5 ? (
|
||||
<React.Fragment key={"Efragment"}>
|
||||
<StaticBigLetter
|
||||
color={"white"}
|
||||
letter={"E"}
|
||||
letterIdx={col}
|
||||
position={[1.78, 0, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={!(activeComponent === "exit")}
|
||||
key={"whiteE"}
|
||||
rowIdx={1}
|
||||
colIdx={col}
|
||||
intro={intro}
|
||||
/>
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={"whiteEsquare"}
|
||||
shouldDisappear={true}
|
||||
intro={intro}
|
||||
/>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
active={!(activeComponent === "exit")}
|
||||
key={`${rowIdx}${col}E`}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<PauseSquare
|
||||
geometry={squareGeoms[row][col]}
|
||||
rowIdx={rowIdx}
|
||||
colIdx={col}
|
||||
key={`${rowIdx}${col}r`}
|
||||
active={true}
|
||||
intro={intro}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})
|
||||
</mesh>
|
||||
</group>
|
||||
</group>
|
||||
)}
|
||||
{"Load".split("").map((letter, idx) => (
|
||||
<StaticBigLetter
|
||||
color={idx > 0 ? "yellow" : "orange"}
|
||||
letter={letter}
|
||||
letterIdx={idx}
|
||||
key={idx}
|
||||
position={[0.35 + idx / 2.8, 1.8, 0]}
|
||||
scale={[0.25, 0.25, 0.25]}
|
||||
active={activeComponent === "load"}
|
||||
/>
|
||||
))}
|
||||
|
||||
{"About".split("").map((letter, idx) => (
|
||||
<StaticBigLetter
|
||||
color={idx > 0 ? "yellow" : "orange"}
|
||||
letter={letter}
|
||||
letterIdx={idx}
|
||||
position={[1.78 + idx / 2.8, 1.43, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={activeComponent === "about"}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
|
||||
{"Change".split("").map((letter, idx) => (
|
||||
<StaticBigLetter
|
||||
color={idx > 0 ? "yellow" : "orange"}
|
||||
letter={letter}
|
||||
letterIdx={idx}
|
||||
position={[1.05 + idx / 2.8, 1.07, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={activeComponent === "change"}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
|
||||
{"Save".split("").map((letter, idx) => (
|
||||
<StaticBigLetter
|
||||
color={idx > 0 ? "yellow" : "orange"}
|
||||
letter={letter}
|
||||
letterIdx={idx}
|
||||
position={[0.35 + idx / 2.8, 0.35, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
active={activeComponent === "save"}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
|
||||
{"Exit".split("").map((letter, idx) => (
|
||||
<StaticBigLetter
|
||||
color={idx > 0 ? "yellow" : "orange"}
|
||||
letter={letter}
|
||||
letterIdx={idx}
|
||||
position={[1.78 + idx / 2.8, 0, 0]}
|
||||
scale={[0.25, 0.25, 0]}
|
||||
key={idx}
|
||||
active={activeComponent === "exit"}
|
||||
/>
|
||||
))}
|
||||
|
||||
<group visible={!exit}>
|
||||
<sprite position={[0.5, -0.8, 0]} scale={[3, 1, 0]} renderOrder={100}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
color={0x000000}
|
||||
opacity={0.8}
|
||||
depthTest={false}
|
||||
/>
|
||||
</sprite>
|
||||
<mesh
|
||||
scale={[0.08, 0.07, 0]}
|
||||
position={[-0.2, -0.6, 0]}
|
||||
renderOrder={101}
|
||||
>
|
||||
<textGeometry
|
||||
attach="geometry"
|
||||
args={["Application Version 1.0", config]}
|
||||
/>
|
||||
<meshBasicMaterial
|
||||
attach="material"
|
||||
color={0x00ba7c}
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
</group>
|
||||
) : (
|
||||
<></>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { useMemo } from "react";
|
||||
import React, { useMemo, memo } from "react";
|
||||
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 { usePauseStore } from "../../../store";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
|
||||
type PauseSquareProps = {
|
||||
colIdx: number;
|
||||
|
|
@ -14,8 +14,8 @@ type PauseSquareProps = {
|
|||
intro?: boolean;
|
||||
};
|
||||
|
||||
const PauseSquare = (props: PauseSquareProps) => {
|
||||
const exitAnimation = usePauseStore((state) => state.exitAnimation);
|
||||
const PauseSquare = memo((props: PauseSquareProps) => {
|
||||
const exitAnimation = useMainSceneStore((state) => state.pauseExitAnimation);
|
||||
|
||||
const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
|
||||
|
||||
|
|
@ -109,6 +109,6 @@ const PauseSquare = (props: PauseSquareProps) => {
|
|||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default PauseSquare;
|
||||
|
|
|
|||
|
|
@ -52,7 +52,6 @@ const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => {
|
|||
shouldIntro={props.shouldIntro}
|
||||
introFinished={introFinished}
|
||||
/>
|
||||
<Pause visible={props.paused} />
|
||||
<Site shouldIntro={props.shouldIntro} introFinished={introFinished} />
|
||||
<MainSceneEventManager
|
||||
loaded={props.shouldIntro ? introFinished : true}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useMemo } from "react";
|
||||
import React, { useMemo, memo } from "react";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import bigHud from "../../../static/sprite/big_hud.png";
|
||||
|
|
@ -10,7 +10,6 @@ import boringHudMirrored from "../../../static/sprite/long_hud_boring_mirrored.p
|
|||
import { a, useSpring } from "@react-spring/three";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import MediumLetter from "../../TextRenderer/MediumLetter";
|
||||
import { NodeDataType } from "./Site";
|
||||
|
||||
export type HUDType = {
|
||||
mirrored: number;
|
||||
|
|
@ -33,7 +32,7 @@ export type HUDType = {
|
|||
};
|
||||
};
|
||||
|
||||
const HUD = () => {
|
||||
const HUD = memo(() => {
|
||||
const greenText = useMainSceneStore((state) =>
|
||||
state.activeNode.title.split("")
|
||||
);
|
||||
|
|
@ -155,6 +154,6 @@ const HUD = () => {
|
|||
</a.group>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default HUD;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React, { useCallback, useEffect, useMemo } from "react";
|
||||
import React, { useCallback } from "react";
|
||||
import level_selection_font from "../../../static/sprite/select_level_font.png";
|
||||
import verticalHud from "../../../static/sprite/select_level_hud_vertical.png";
|
||||
import horizontalHud from "../../../static/sprite/select_level_hud_horizontal.png";
|
||||
import levelSelectionText from "../../../static/sprite/select_level_text.png";
|
||||
import upArrow from "../../../static/sprite/select_level_up_arrow.png";
|
||||
import downArrow from "../../../static/sprite/select_level_down_arrow.png";
|
||||
import { useLevelSelectionStore } from "../../../store";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
|
|
@ -24,16 +24,16 @@ const LevelSelection = () => {
|
|||
const upArrowTex = useLoader(THREE.TextureLoader, upArrow);
|
||||
const downArrowTex = useLoader(THREE.TextureLoader, downArrow);
|
||||
|
||||
const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel)
|
||||
const toggled = useMainSceneStore(
|
||||
useCallback((state) => Number(state.subscene === "level_selection"), [])
|
||||
);
|
||||
|
||||
const selectedLevel = useMainSceneStore((state) => state.selectedLevel)
|
||||
.toString()
|
||||
.padStart(2, "0");
|
||||
|
||||
const levelSelectionToggled = useLevelSelectionStore(
|
||||
(state) => state.levelSelectionToggled
|
||||
);
|
||||
|
||||
const { levelSelectionToggle } = useSpring({
|
||||
levelSelectionToggle: levelSelectionToggled,
|
||||
levelSelectionToggle: toggled,
|
||||
config: { duration: 500 },
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import React, { useMemo } from "react";
|
||||
import React, { useMemo, memo } from "react";
|
||||
import Node from "./Node";
|
||||
import node_positions from "../../../../resources/node_positions.json";
|
||||
import { useMainSceneStore } 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 = () => {
|
||||
const ActiveLevelNodes = memo(() => {
|
||||
const activeNodeId = useMainSceneStore((state) => state.activeNode.id);
|
||||
|
||||
const gameProgress = useMainSceneStore((state) => state.gameProgress);
|
||||
|
|
@ -26,28 +27,28 @@ const ActiveLevelNodes = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{Object.entries(visibleNodes).map((node: [string, any]) => {
|
||||
if (isNodeVisible(node[1], gameProgress)) {
|
||||
{Object.values(visibleNodes).map((node: NodeDataType) => {
|
||||
if (isNodeVisible(node, gameProgress)) {
|
||||
return (
|
||||
<Node
|
||||
nodeName={node[1].node_name}
|
||||
nodeName={node.node_name}
|
||||
position={
|
||||
node_positions[node[0].substr(2) as keyof typeof node_positions]
|
||||
node_positions[node.id.substr(2) as keyof typeof node_positions]
|
||||
.position
|
||||
}
|
||||
rotation={
|
||||
node_positions[node[0].substr(2) as keyof typeof node_positions]
|
||||
node_positions[node.id.substr(2) as keyof typeof node_positions]
|
||||
.rotation
|
||||
}
|
||||
key={node[1].node_name}
|
||||
active={node[0] === activeNodeId}
|
||||
level={node[0].substr(0, 2)}
|
||||
key={node.node_name}
|
||||
active={node.id === activeNodeId}
|
||||
level={node.id.substr(0, 2)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default ActiveLevelNodes;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useMemo } from "react";
|
||||
import React, { useMemo, memo } from "react";
|
||||
import Node from "./Node";
|
||||
import node_positions from "../../../../resources/node_positions.json";
|
||||
import { useMainSceneStore } from "../../../../store";
|
||||
|
|
@ -6,7 +6,7 @@ import { isNodeVisible } from "../../../../core/nodeSelector";
|
|||
import site_a from "../../../../resources/site_a.json";
|
||||
import site_b from "../../../../resources/site_b.json";
|
||||
|
||||
const InactiveLevelNodes = () => {
|
||||
const InactiveLevelNodes = memo(() => {
|
||||
const gameProgress = useMainSceneStore((state) => state.gameProgress);
|
||||
|
||||
const currentSite = useMainSceneStore((state) => state.activeSite);
|
||||
|
|
@ -57,6 +57,6 @@ const InactiveLevelNodes = () => {
|
|||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default InactiveLevelNodes;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useMemo } from "react";
|
||||
import React, { useMemo, memo } from "react";
|
||||
import level_y_values from "../../../../resources/level_y_values.json";
|
||||
import PurpleRing from "./PurpleRing";
|
||||
import GrayRing from "./GrayRing";
|
||||
|
|
@ -9,7 +9,7 @@ type RingsProps = {
|
|||
activateAllRings: boolean;
|
||||
};
|
||||
|
||||
const Rings = (props: RingsProps) => {
|
||||
const Rings = memo((props: RingsProps) => {
|
||||
const activeLevel = useMainSceneStore((state) => state.activeLevel);
|
||||
const currentSite = useMainSceneStore((state) => state.activeSite);
|
||||
|
||||
|
|
@ -61,6 +61,6 @@ const Rings = (props: RingsProps) => {
|
|||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default Rings;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, memo } from "react";
|
||||
import Star from "./Starfield/Star";
|
||||
|
||||
type StarfieldProps = {
|
||||
|
|
@ -7,7 +7,7 @@ type StarfieldProps = {
|
|||
introFinished: boolean;
|
||||
};
|
||||
|
||||
const Starfield = (props: StarfieldProps) => {
|
||||
const Starfield = memo((props: StarfieldProps) => {
|
||||
const LCG = (a: number, c: number, m: number, s: number) => () =>
|
||||
(s = (s * a + c) % m);
|
||||
|
||||
|
|
@ -128,6 +128,6 @@ const Starfield = (props: StarfieldProps) => {
|
|||
)}
|
||||
</group>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default Starfield;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import React, { createRef, MutableRefObject, useMemo } from "react";
|
|||
import * as THREE from "three";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import AudioVisualizerColumn from "./AudioVisualizerColumn";
|
||||
import { useMediaStore } from "../../../store";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
|
||||
const AudioVisualizer = () => {
|
||||
const analyser = useMediaStore((state) => state.audioAnalyser);
|
||||
const analyser = useMainSceneStore((state) => state.audioAnalyser);
|
||||
|
||||
const columnRefs = useMemo(
|
||||
() =>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
useIdleStore,
|
||||
useMainSceneStore,
|
||||
useMediaStore,
|
||||
useSceneStore,
|
||||
} from "../../store";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {useIdleStore, useMainSceneStore, useSceneStore,} 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);
|
||||
|
|
@ -26,7 +21,7 @@ const Images = () => {
|
|||
|
||||
const dummyTex = useLoader(THREE.TextureLoader, dummy);
|
||||
|
||||
const mediaPercentageElapsed = useMediaStore(
|
||||
const mediaPercentageElapsed = useMainSceneStore(
|
||||
(state) => state.mediaPercentageElapsed
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useMemo, useRef } from "react";
|
||||
import { useMediaStore } from "../../store";
|
||||
import { useMainSceneStore } 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 = useMediaStore(
|
||||
const mediaPercentageElapsed = useMainSceneStore(
|
||||
(state) => state.mediaPercentageElapsed
|
||||
);
|
||||
const loadingBarContainerTex = useLoader(
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import {
|
|||
useEndSceneStore,
|
||||
useIdleStore,
|
||||
useMainSceneStore,
|
||||
useMediaStore,
|
||||
useSceneStore,
|
||||
} from "../../store";
|
||||
import t from "../../static/webvtt/test.vtt";
|
||||
|
|
@ -24,7 +23,7 @@ const MediaPlayer = () => {
|
|||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
const setScene = useSceneStore((state) => state.setScene);
|
||||
|
||||
const setPercentageElapsed = useMediaStore(
|
||||
const setPercentageElapsed = useMainSceneStore(
|
||||
(state) => state.setPercentageElapsed
|
||||
);
|
||||
|
||||
|
|
@ -53,7 +52,10 @@ const MediaPlayer = () => {
|
|||
|
||||
const updateTime = useCallback(() => {
|
||||
(requestRef.current as any) = requestAnimationFrame(updateTime);
|
||||
if (videoRef.current) {
|
||||
if (
|
||||
videoRef.current &&
|
||||
["media", "idle_media", "tak", "end"].includes(currentScene)
|
||||
) {
|
||||
const timeElapsed = videoRef.current.currentTime;
|
||||
const duration = videoRef.current.duration;
|
||||
const percentageElapsed = Math.floor((timeElapsed / duration) * 100);
|
||||
|
|
|
|||
|
|
@ -5,157 +5,154 @@ import * as THREE from "three";
|
|||
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 } from "react";
|
||||
import { usePauseStore } from "../../store";
|
||||
import React, { useMemo, memo } from "react";
|
||||
import { useMainSceneStore } from "../../store";
|
||||
|
||||
const StaticBigLetter = (props: {
|
||||
color: string;
|
||||
letter: string;
|
||||
letterIdx: number;
|
||||
position: number[];
|
||||
scale: number[];
|
||||
active: boolean;
|
||||
rowIdx?: number;
|
||||
colIdx?: number;
|
||||
intro?: boolean;
|
||||
}) => {
|
||||
const exitAnimation = usePauseStore((state) => state.exitAnimation);
|
||||
const StaticBigLetter = memo(
|
||||
(props: {
|
||||
color: string;
|
||||
letter: string;
|
||||
letterIdx: number;
|
||||
position: number[];
|
||||
scale: number[];
|
||||
active: boolean;
|
||||
rowIdx?: number;
|
||||
colIdx?: number;
|
||||
intro?: boolean;
|
||||
}) => {
|
||||
const exitAnimation = useMainSceneStore(
|
||||
(state) => state.pauseExitAnimation
|
||||
);
|
||||
|
||||
const colorToTexture = (color: string) => {
|
||||
const colorTexture = {
|
||||
orange: orangeFont,
|
||||
yellow: yellowFont,
|
||||
white: whiteFont,
|
||||
};
|
||||
return colorTexture[color as keyof typeof colorTexture];
|
||||
};
|
||||
const tex = useMemo(() => {
|
||||
switch (props.color) {
|
||||
case "white":
|
||||
return whiteFont;
|
||||
case "yellow":
|
||||
return yellowFont;
|
||||
default:
|
||||
return orangeFont;
|
||||
}
|
||||
}, [props.color]);
|
||||
|
||||
// first letter in big font is always orange in this case so make it orange if so. else,
|
||||
// run through the function.
|
||||
const color =
|
||||
props.letterIdx === 0 ? orangeFont : colorToTexture(props.color);
|
||||
const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, tex);
|
||||
|
||||
const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, color);
|
||||
const lineYOffset = useMemo(() => {
|
||||
const lineOne = "ABCDEFGHIJKLMNOPQ";
|
||||
const lineTwo = "RSTUVWXYZ01234567";
|
||||
const lineThree = "89abcdefghijklmnopqrs";
|
||||
|
||||
// i have yet to figure out a genrealizable way of
|
||||
// calculating the y offset, this shit will do for now
|
||||
// also, we dont have all the lines since i dont need them yet.
|
||||
// also, baseline offsets dont work properly since i dont need them yet either
|
||||
// should be trivial to calculate though, im just lazy
|
||||
const getLineNum = (letter: string) => {
|
||||
const lineOne = "ABCDEFGHIJKLMNOPQ";
|
||||
const lineTwo = "RSTUVWXYZ01234567";
|
||||
const lineThree = "89abcdefghijklmnopqrs";
|
||||
let lineNum: number;
|
||||
if (props.letter === " ") {
|
||||
lineNum = 5;
|
||||
} else {
|
||||
if (lineOne.includes(props.letter)) {
|
||||
lineNum = 1;
|
||||
} else if (lineTwo.includes(props.letter)) {
|
||||
lineNum = 2;
|
||||
} else if (lineThree.includes(props.letter)) {
|
||||
lineNum = 3;
|
||||
} else {
|
||||
lineNum = 4;
|
||||
}
|
||||
}
|
||||
|
||||
if (letter === " ") return 5;
|
||||
const offsets = {
|
||||
1: 0.884,
|
||||
2: 0.765,
|
||||
3: 0.648,
|
||||
4: 0.47,
|
||||
5: 1,
|
||||
};
|
||||
return offsets[lineNum as keyof typeof offsets];
|
||||
}, [props.letter]);
|
||||
|
||||
if (lineOne.includes(letter)) {
|
||||
return 1;
|
||||
} else if (lineTwo.includes(letter)) {
|
||||
return 2;
|
||||
} else if (lineThree.includes(letter)) {
|
||||
return 3;
|
||||
} else {
|
||||
return 4;
|
||||
}
|
||||
};
|
||||
const letterData = useMemo(
|
||||
() =>
|
||||
orange_font_json.glyphs[
|
||||
props.letter as keyof typeof orange_font_json.glyphs
|
||||
],
|
||||
[props.letter]
|
||||
);
|
||||
|
||||
const lineYOffsets = useMemo(
|
||||
() => ({
|
||||
1: 0.884,
|
||||
2: 0.765,
|
||||
3: 0.648,
|
||||
4: 0.47,
|
||||
5: 1,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
const geom = useMemo(() => {
|
||||
const geometry = new THREE.PlaneBufferGeometry();
|
||||
|
||||
const letterData =
|
||||
orange_font_json.glyphs[
|
||||
props.letter as keyof typeof orange_font_json.glyphs
|
||||
];
|
||||
const uvAttribute = geometry.attributes.uv;
|
||||
|
||||
const geom = useMemo(() => {
|
||||
const geometry = new THREE.PlaneBufferGeometry();
|
||||
for (let i = 0; i < uvAttribute.count; i++) {
|
||||
let u = uvAttribute.getX(i);
|
||||
let v = uvAttribute.getY(i);
|
||||
|
||||
const uvAttribute = geometry.attributes.uv;
|
||||
u = (u * letterData[2]) / 256 + letterData[0] / 256;
|
||||
|
||||
for (let i = 0; i < uvAttribute.count; i++) {
|
||||
let u = uvAttribute.getX(i);
|
||||
let v = uvAttribute.getY(i);
|
||||
v = (v * letterData[3]) / 136 + lineYOffset - letterData[4] / 136;
|
||||
|
||||
u = (u * letterData[2]) / 256 + letterData[0] / 256;
|
||||
uvAttribute.setXY(i, u, v);
|
||||
}
|
||||
return geometry;
|
||||
}, [letterData, lineYOffset]);
|
||||
|
||||
v =
|
||||
(v * letterData[3]) / 136 +
|
||||
lineYOffsets[getLineNum(props.letter)] -
|
||||
letterData[4] / 136;
|
||||
const exitAnimValue = useMemo(() => {
|
||||
let col = 0;
|
||||
let row = 0;
|
||||
if (props.colIdx && props.rowIdx) {
|
||||
if (props.colIdx < 3) col = -1;
|
||||
else if (props.colIdx > 3) col = 1;
|
||||
|
||||
uvAttribute.setXY(i, u, v);
|
||||
}
|
||||
return geometry;
|
||||
}, [letterData, lineYOffsets, props.letter]);
|
||||
if (props.rowIdx < 3) row = -1;
|
||||
else if (props.rowIdx > 3) row = 1;
|
||||
|
||||
const getExitAnimValue = useMemo(() => {
|
||||
let col = 0;
|
||||
let row = 0;
|
||||
if (props.colIdx && props.rowIdx) {
|
||||
if (props.colIdx < 3) col = -1;
|
||||
else if (props.colIdx > 3) col = 1;
|
||||
return { row, col };
|
||||
}
|
||||
}, [props.colIdx, props.rowIdx]);
|
||||
|
||||
if (props.rowIdx < 3) row = -1;
|
||||
else if (props.rowIdx > 3) row = 1;
|
||||
const initialState = useSpring({
|
||||
posX:
|
||||
props.position[0] +
|
||||
(exitAnimValue ? exitAnimValue.col * (exitAnimation ? 2.2 : 0) : 0),
|
||||
posY:
|
||||
-letterData[4] / 50 +
|
||||
props.position[1] +
|
||||
(exitAnimValue ? exitAnimValue.row * (exitAnimation ? 2.2 : 0) : 0),
|
||||
rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI,
|
||||
rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2,
|
||||
config: { duration: 500 },
|
||||
});
|
||||
|
||||
return { row, col };
|
||||
}
|
||||
}, [props.colIdx, props.rowIdx]);
|
||||
const introState = useSpring({
|
||||
rotX: 0,
|
||||
rotY: 0,
|
||||
from: { rotX: Math.PI, rotY: Math.PI * 2 },
|
||||
delay: (props.rowIdx! + props.colIdx!) * 100 + 500,
|
||||
config: { duration: 200 },
|
||||
});
|
||||
|
||||
const initialState = useSpring({
|
||||
posX:
|
||||
props.position[0] +
|
||||
(getExitAnimValue ? getExitAnimValue.col * (exitAnimation ? 2.2 : 0) : 0),
|
||||
posY:
|
||||
-letterData[4] / 50 +
|
||||
props.position[1] +
|
||||
(getExitAnimValue ? getExitAnimValue.row * (exitAnimation ? 2.2 : 0) : 0),
|
||||
rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI,
|
||||
rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2,
|
||||
config: { duration: 500 },
|
||||
});
|
||||
|
||||
const introState = useSpring({
|
||||
rotX: 0,
|
||||
rotY: 0,
|
||||
from: { rotX: Math.PI, rotY: Math.PI * 2 },
|
||||
delay: (props.rowIdx! + props.colIdx!) * 100 + 500,
|
||||
config: { duration: 200 },
|
||||
});
|
||||
|
||||
return (
|
||||
<a.mesh
|
||||
position={[
|
||||
props.position[0],
|
||||
-letterData[4] / 50 + props.position[1],
|
||||
props.position[2],
|
||||
]}
|
||||
position-x={initialState.posX}
|
||||
position-y={initialState.posY}
|
||||
scale={props.scale as [number, number, number]}
|
||||
geometry={geom}
|
||||
rotation-x={props.intro ? introState.rotX : initialState.rotX}
|
||||
rotation-y={props.intro ? introState.rotY : initialState.rotY}
|
||||
renderOrder={100}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
map={colorTexture}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
side={THREE.FrontSide}
|
||||
depthTest={false}
|
||||
/>
|
||||
</a.mesh>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<a.mesh
|
||||
position={[
|
||||
props.position[0],
|
||||
-letterData[4] / 50 + props.position[1],
|
||||
props.position[2],
|
||||
]}
|
||||
position-x={initialState.posX}
|
||||
position-y={initialState.posY}
|
||||
scale={props.scale as [number, number, number]}
|
||||
geometry={geom}
|
||||
rotation-x={props.intro ? introState.rotX : initialState.rotX}
|
||||
rotation-y={props.intro ? introState.rotY : initialState.rotY}
|
||||
renderOrder={100}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
map={colorTexture}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
side={THREE.FrontSide}
|
||||
depthTest={false}
|
||||
/>
|
||||
</a.mesh>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default StaticBigLetter;
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
|
|||
const textRef = useRef(useMainSceneStore.getState().bigText.split(""));
|
||||
|
||||
const [trail, set] = useTrail(textRef.current.length, () => ({
|
||||
posX: 0,
|
||||
posY: 0,
|
||||
posX: useMainSceneStore.getState().bigTextPos[0],
|
||||
posY: useMainSceneStore.getState().bigTextPos[1],
|
||||
config: { duration: 280 },
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,39 +1,4 @@
|
|||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import SiteManager from "./MainSceneManagers/SiteManager";
|
||||
import MiddleRingManager from "./MainSceneManagers/MiddleRingManager";
|
||||
import LainManager from "./MainSceneManagers/LainManager";
|
||||
import NodeManager from "./MainSceneManagers/NodeManager";
|
||||
import NodeHUDManager from "./MainSceneManagers/NodeHUDManager";
|
||||
import {
|
||||
useAuthorizeUserStore,
|
||||
useBootStore,
|
||||
useLevelSelectionStore,
|
||||
useMainSceneStore,
|
||||
useMediaStore,
|
||||
useMediaWordStore,
|
||||
usePauseStore,
|
||||
useSceneStore,
|
||||
useSSknStore,
|
||||
} from "../../store";
|
||||
import MediaComponentManager from "./MediaSceneManagers/MediaComponentManager";
|
||||
import SceneManager from "./GameManagers/SceneManager";
|
||||
import BigTextManager from "./MainSceneManagers/BigTextManager";
|
||||
import LevelManager from "./MainSceneManagers/LevelManager";
|
||||
import BootComponentManager from "./BootSceneManagers/BootComponentManager";
|
||||
import SSknComponentManager from "./SSknSceneManagers/SSknComponentManager";
|
||||
import handleMainSceneEvent from "../mainSceneEventHandler";
|
||||
import handleMediaSceneEvent from "../mediaSceneEventHandler";
|
||||
import handleBootEvent from "../bootEventHandler";
|
||||
import handleSSknSceneEvent from "../ssknSceneEventHandler";
|
||||
import BootAuthorizeUserManager from "./BootSceneManagers/BootAuthorizeUserManager";
|
||||
import LevelSelectionManager from "./MainSceneManagers/LevelSelectionManager";
|
||||
import SubsceneManager from "./GameManagers/SubsceneManager";
|
||||
import PauseComponentManager from "./MainSceneManagers/PauseComponentManager";
|
||||
import MediaYellowTextManager from "./MediaSceneManagers/MediaYellowTextManager";
|
||||
import GameSaver from "./GameManagers/GameSaver";
|
||||
import GameLoader from "./GameManagers/GameLoader";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import IdleManager from "./MainSceneManagers/IdleManager";
|
||||
import React from "react";
|
||||
|
||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||
const keyCodeAssocs = {
|
||||
|
|
@ -55,242 +20,6 @@ export type StateManagerProps = {
|
|||
};
|
||||
|
||||
const EventManager = () => {
|
||||
// const currentScene = useSceneStore((state) => state.currentScene);
|
||||
//
|
||||
// // main scene
|
||||
// const currentSite = useSiteStore((state) => state.currentSite);
|
||||
// // const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||
// // const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
|
||||
// const siteTransformState = useSiteStore((state) => state.transformState);
|
||||
// const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||
// const mainSubscene = useMainSceneStore((state) => state.subscene);
|
||||
// const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel);
|
||||
// const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
|
||||
// const activePauseComponent = usePauseStore(
|
||||
// useCallback((state) => state.componentMatrix[pauseMatrixIdx], [
|
||||
// pauseMatrixIdx,
|
||||
// ])
|
||||
// );
|
||||
// // const gameProgress = useNodeStore((state) => state.gameProgress);
|
||||
//
|
||||
// // media scene
|
||||
// const mediaComponentMatrixIndices = useMediaStore(
|
||||
// (state) => state.componentMatrixIndices
|
||||
// );
|
||||
//
|
||||
// const activeMediaComponent = useMediaStore(
|
||||
// useCallback(
|
||||
// (state) =>
|
||||
// state.componentMatrix[mediaComponentMatrixIndices.sideIdx][
|
||||
// mediaComponentMatrixIndices.sideIdx === 0
|
||||
// ? mediaComponentMatrixIndices.leftSideIdx
|
||||
// : mediaComponentMatrixIndices.rightSideIdx
|
||||
// ],
|
||||
// [mediaComponentMatrixIndices]
|
||||
// )
|
||||
// );
|
||||
// const rightSideComponentIdx = useMediaStore(
|
||||
// (state) => state.componentMatrixIndices.rightSideIdx
|
||||
// );
|
||||
//
|
||||
// const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx);
|
||||
//
|
||||
// // sskn scene
|
||||
// const ssknComponentMatrixIdx = useSSknStore(
|
||||
// (state) => state.componentMatrixIdx
|
||||
// );
|
||||
// const activeSSknComponent = useSSknStore(
|
||||
// useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [
|
||||
// ssknComponentMatrixIdx,
|
||||
// ])
|
||||
// );
|
||||
//
|
||||
// // boot scene
|
||||
// const currentBootSubscene = useBootStore((state) => state.subscene);
|
||||
// const activeBootElement = useBootStore(
|
||||
// useCallback(
|
||||
// (state) =>
|
||||
// state.componentMatrix[
|
||||
// currentBootSubscene as keyof typeof state.componentMatrix
|
||||
// ][
|
||||
// state.componentMatrixIndices[
|
||||
// currentBootSubscene as keyof typeof state.componentMatrixIndices
|
||||
// ]
|
||||
// ],
|
||||
// [currentBootSubscene]
|
||||
// )
|
||||
// );
|
||||
//
|
||||
// const authorizeUserBgLettersPos = useAuthorizeUserStore(
|
||||
// (state) => state.bgLettersPos
|
||||
// );
|
||||
// const authorizeUserActiveLetterTexOffset = useAuthorizeUserStore(
|
||||
// (state) => state.activeLetterTextureOffset
|
||||
// );
|
||||
// const authorizeUserMatrixIdx = useBootStore(
|
||||
// (state) => state.componentMatrixIndices.authorize_user
|
||||
// );
|
||||
//
|
||||
// const [eventState, setEventState] = useState<any>();
|
||||
//
|
||||
// const [inputCooldown, setInputCooldown] = useState(false);
|
||||
//
|
||||
// const timePassedSinceLastKeyPress = useRef(-1);
|
||||
//
|
||||
// useFrame(() => {
|
||||
// const now = Date.now();
|
||||
// if (
|
||||
// timePassedSinceLastKeyPress.current > -1 &&
|
||||
// mainSubscene !== "pause" &&
|
||||
// mainSubscene !== "level_selection" &&
|
||||
// currentScene === "main"
|
||||
// ) {
|
||||
// if (now > timePassedSinceLastKeyPress.current + 10000) {
|
||||
// const moves = [
|
||||
// "prayer",
|
||||
// "touch_sleeve",
|
||||
// "thinking",
|
||||
// "stretch_2",
|
||||
// "stretch",
|
||||
// "spin",
|
||||
// "scratch_head",
|
||||
// "blush",
|
||||
// "hands_behind_head",
|
||||
// "hands_on_hips",
|
||||
// "hands_on_hips_2",
|
||||
// "hands_together",
|
||||
// "lean_forward",
|
||||
// "lean_left",
|
||||
// "lean_right",
|
||||
// "look_around",
|
||||
// "play_with_hair",
|
||||
// ];
|
||||
//
|
||||
// const event = moves[Math.floor(Math.random() * moves.length)];
|
||||
// setEventState({ event: event });
|
||||
// timePassedSinceLastKeyPress.current = now - 2500;
|
||||
// }
|
||||
// if (now > timePassedSinceLastKeyPress.current + 5000) {
|
||||
// setEventState({
|
||||
// event: "play_idle_media",
|
||||
// scene: "idle_media",
|
||||
// site: currentSite,
|
||||
// });
|
||||
// timePassedSinceLastKeyPress.current = -1;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// const handleKeyPress = useCallback(
|
||||
// (event) => {
|
||||
// const { keyCode } = event;
|
||||
//
|
||||
// const keyPress = getKeyCodeAssociation(keyCode);
|
||||
//
|
||||
// if (keyPress && !inputCooldown) {
|
||||
// let event;
|
||||
// switch (currentScene) {
|
||||
// case "main":
|
||||
// timePassedSinceLastKeyPress.current = Date.now() + 2500;
|
||||
// event = handleMainSceneEvent({
|
||||
// mainSubscene: mainSubscene,
|
||||
// keyPress: keyPress,
|
||||
// siteTransformState: siteTransformState,
|
||||
// // activeNodeId: activeNodeId,
|
||||
// // nodeMatrixIndices: nodeMatrixIndices,
|
||||
// activeLevel: activeLevel,
|
||||
// selectedLevel: selectedLevel,
|
||||
// pauseMatrixIdx: pauseMatrixIdx,
|
||||
// activePauseComponent: activePauseComponent,
|
||||
// // gameProgress: gameProgress,
|
||||
// currentSite: currentSite,
|
||||
// });
|
||||
// break;
|
||||
// case "media":
|
||||
// case "idle_media":
|
||||
// event = handleMediaSceneEvent({
|
||||
// keyPress: keyPress,
|
||||
// activeMediaComponent: activeMediaComponent,
|
||||
// wordPosStateIdx: wordPosStateIdx,
|
||||
// rightSideComponentIdx: rightSideComponentIdx,
|
||||
// });
|
||||
// break;
|
||||
// case "boot":
|
||||
// event = handleBootEvent({
|
||||
// keyPress: keyPress,
|
||||
// bootSubscene: currentBootSubscene,
|
||||
// activeBootElement: activeBootElement,
|
||||
// authorizeUserBgLettersPos: authorizeUserBgLettersPos,
|
||||
// authorizeUserActiveLetterTexOffset: authorizeUserActiveLetterTexOffset,
|
||||
// authorizeUserMatrixIdx: authorizeUserMatrixIdx,
|
||||
// });
|
||||
// break;
|
||||
// case "gate":
|
||||
// event = { event: "exit_gate" };
|
||||
// break;
|
||||
// case "sskn":
|
||||
// event = handleSSknSceneEvent({
|
||||
// keyPress: keyPress,
|
||||
// activeSSknComponent: activeSSknComponent,
|
||||
// });
|
||||
// break;
|
||||
// }
|
||||
// setEventState(event);
|
||||
// }
|
||||
// },
|
||||
// [
|
||||
// inputCooldown,
|
||||
// currentScene,
|
||||
// mainSubscene,
|
||||
// siteTransformState,
|
||||
// activeLevel,
|
||||
// selectedLevel,
|
||||
// pauseMatrixIdx,
|
||||
// activePauseComponent,
|
||||
// currentSite,
|
||||
// activeMediaComponent,
|
||||
// wordPosStateIdx,
|
||||
// rightSideComponentIdx,
|
||||
// currentBootSubscene,
|
||||
// activeBootElement,
|
||||
// authorizeUserBgLettersPos,
|
||||
// authorizeUserActiveLetterTexOffset,
|
||||
// authorizeUserMatrixIdx,
|
||||
// activeSSknComponent,
|
||||
// ]
|
||||
// );
|
||||
//
|
||||
// useEffect(() => {
|
||||
// window.addEventListener("keydown", handleKeyPress);
|
||||
//
|
||||
// return () => {
|
||||
// window.removeEventListener("keydown", handleKeyPress);
|
||||
// };
|
||||
// }, [handleKeyPress]);
|
||||
//
|
||||
// return (
|
||||
// <>
|
||||
// <NodeManager eventState={eventState!} />
|
||||
// <NodeHUDManager eventState={eventState!} />
|
||||
// <SiteManager eventState={eventState!} />
|
||||
// <LainManager eventState={eventState!} />
|
||||
// <MiddleRingManager eventState={eventState!} />
|
||||
// <MediaComponentManager eventState={eventState!} />
|
||||
// <SceneManager eventState={eventState!} />
|
||||
// <BigTextManager eventState={eventState!} />
|
||||
// <LevelManager eventState={eventState!} />
|
||||
// <BootComponentManager eventState={eventState!} />
|
||||
// <SSknComponentManager eventState={eventState!} />
|
||||
// <BootAuthorizeUserManager eventState={eventState!} />
|
||||
// <LevelSelectionManager eventState={eventState!} />
|
||||
// <SubsceneManager eventState={eventState!} />
|
||||
// <PauseComponentManager eventState={eventState!} />
|
||||
// <MediaYellowTextManager eventState={eventState!} />
|
||||
// <GameSaver eventState={eventState!} />
|
||||
// <GameLoader eventState={eventState!} />
|
||||
// <IdleManager eventState={eventState!} />
|
||||
// </>
|
||||
// );
|
||||
return <></>;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
useLevelSelectionStore,
|
||||
useMainSceneStore,
|
||||
usePauseStore,
|
||||
} from "../../store";
|
||||
import { useMainSceneStore } from "../../store";
|
||||
import handleMainSceneEvent from "../mainSceneEventHandler";
|
||||
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||
import NodeManager from "./MainSceneManagers/NodeManager";
|
||||
|
|
@ -37,10 +33,12 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
|
|||
const sitePosY = useMainSceneStore((state) => state.sitePos[1]);
|
||||
const activeLevel = useMainSceneStore((state) => state.activeLevel);
|
||||
const mainSubscene = useMainSceneStore((state) => state.subscene);
|
||||
const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel);
|
||||
const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
|
||||
const activePauseComponent = usePauseStore(
|
||||
useCallback((state) => state.componentMatrix[pauseMatrixIdx], [
|
||||
const selectedLevel = useMainSceneStore((state) => state.selectedLevel);
|
||||
const pauseMatrixIdx = useMainSceneStore(
|
||||
(state) => state.pauseComponentMatrixIdx
|
||||
);
|
||||
const activePauseComponent = useMainSceneStore(
|
||||
useCallback((state) => state.pauseComponentMatrix[pauseMatrixIdx], [
|
||||
pauseMatrixIdx,
|
||||
])
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,37 +1,22 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useLevelSelectionStore } from "../../../store";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
|
||||
const LevelSelectionManager = (props: StateManagerProps) => {
|
||||
const toggleLevelSelection = useLevelSelectionStore(
|
||||
(state) => state.toggleLevelSelection
|
||||
);
|
||||
const setSelectedLevel = useLevelSelectionStore(
|
||||
(state) => state.setSelectedLevel
|
||||
);
|
||||
const setSelectedLevel = useMainSceneStore((state) => state.setSelectedLevel);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string; selectedLevelIdx: number }) => {
|
||||
switch (eventState.event) {
|
||||
case "toggle_level_selection":
|
||||
case "level_selection_back":
|
||||
return {
|
||||
action: toggleLevelSelection,
|
||||
};
|
||||
case "level_selection_up":
|
||||
case "level_selection_down":
|
||||
return {
|
||||
action: setSelectedLevel,
|
||||
value: eventState.selectedLevelIdx,
|
||||
};
|
||||
case "select_level_up":
|
||||
case "select_level_down":
|
||||
return {
|
||||
action: toggleLevelSelection,
|
||||
};
|
||||
}
|
||||
},
|
||||
[setSelectedLevel, toggleLevelSelection]
|
||||
[setSelectedLevel]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -37,14 +37,11 @@ const MiddleRingManager = (props: any) => {
|
|||
|
||||
const moveDown = useCallback(() => {
|
||||
// make noise appear again
|
||||
setTimeout(() => {
|
||||
setNoiseAmp(0.06);
|
||||
}, 800);
|
||||
|
||||
// disable rotation of the ring
|
||||
setTimeout(() => {
|
||||
setNoiseAmp(0.06);
|
||||
setRotating(false);
|
||||
}, 700);
|
||||
}, 800);
|
||||
|
||||
setTimeout(() => {
|
||||
setPos([0, 1.39, 0]);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { usePauseStore } from "../../../store";
|
||||
import { useMainSceneStore } from "../../../store";
|
||||
|
||||
const PauseComponentManager = (props: StateManagerProps) => {
|
||||
const setComponentMatrixIdx = usePauseStore(
|
||||
(state) => state.setComponentMatrixIdx
|
||||
const setComponentMatrixIdx = useMainSceneStore(
|
||||
(state) => state.setPauseComponentMatrixIdx
|
||||
);
|
||||
const setExitAnimation = useMainSceneStore(
|
||||
(state) => state.setPauseExitAnimation
|
||||
);
|
||||
const setExitAnimation = usePauseStore((state) => state.setExitAnimation);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(eventState: { event: string; pauseMatrixIdx: number }) => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useMediaStore, useMediaWordStore } from "../../store";
|
||||
import { useMainSceneStore, useMediaWordStore } from "../../store";
|
||||
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||
import SceneManager from "./GameManagers/SceneManager";
|
||||
import handleMediaSceneEvent from "../mediaSceneEventHandler";
|
||||
|
|
@ -8,23 +8,20 @@ import MediaYellowTextManager from "./MediaSceneManagers/MediaYellowTextManager"
|
|||
|
||||
const MediaSceneEventManager = () => {
|
||||
// all the possible context needed to calculate new state
|
||||
const mediaComponentMatrixIndices = useMediaStore(
|
||||
(state) => state.componentMatrixIndices
|
||||
);
|
||||
|
||||
const activeMediaComponent = useMediaStore(
|
||||
const activeMediaComponent = useMainSceneStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
state.componentMatrix[mediaComponentMatrixIndices.sideIdx][
|
||||
mediaComponentMatrixIndices.sideIdx === 0
|
||||
? mediaComponentMatrixIndices.leftSideIdx
|
||||
: mediaComponentMatrixIndices.rightSideIdx
|
||||
state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
|
||||
state.mediaComponentMatrixIndices.sideIdx === 0
|
||||
? state.mediaComponentMatrixIndices.leftSideIdx
|
||||
: state.mediaComponentMatrixIndices.rightSideIdx
|
||||
],
|
||||
[mediaComponentMatrixIndices]
|
||||
[]
|
||||
)
|
||||
);
|
||||
const rightSideComponentIdx = useMediaStore(
|
||||
(state) => state.componentMatrixIndices.rightSideIdx
|
||||
|
||||
const rightSideComponentIdx = useMainSceneStore(
|
||||
(state) => state.mediaComponentMatrixIndices.rightSideIdx
|
||||
);
|
||||
|
||||
const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx);
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useMediaStore, useMediaWordStore } from "../../../store";
|
||||
import { useMainSceneStore, useMediaWordStore } from "../../../store";
|
||||
import * as THREE from "three";
|
||||
|
||||
const MediaComponentManager = (props: StateManagerProps) => {
|
||||
const toggleSide = useMediaStore((state) => state.toggleSide);
|
||||
const setLeftComponentMatrixIdx = useMediaStore(
|
||||
(state) => state.setLeftComponentMatrixIdx
|
||||
const toggleSide = useMainSceneStore((state) => state.toggleMediaSide);
|
||||
const setLeftComponentMatrixIdx = useMainSceneStore(
|
||||
(state) => state.setMediaLeftComponentMatrixIdx
|
||||
);
|
||||
const setRightComponentMatrixIdx = useMediaStore(
|
||||
(state) => state.setRightComponentMatrixIdx
|
||||
const setRightComponentMatrixIdx = useMainSceneStore(
|
||||
(state) => state.setMediaRightComponentMatrixIdx
|
||||
);
|
||||
const setWordPosStateIdx = useMediaWordStore((state) => state.setPosStateIdx);
|
||||
|
||||
const resetComponentMatrixIndices = useMediaStore(
|
||||
(state) => state.resetComponentMatrixIndices
|
||||
const resetComponentMatrixIndices = useMainSceneStore(
|
||||
(state) => state.resetMediaComponentMatrixIndices
|
||||
);
|
||||
const resetWordPosStateIdx = useMediaWordStore(
|
||||
(state) => state.resetPosStateIdx
|
||||
);
|
||||
|
||||
const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
|
||||
const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
|
||||
|
||||
const playMedia = useCallback(() => {
|
||||
const mediaElement = document.getElementById("media") as HTMLMediaElement;
|
||||
|
|
@ -46,7 +46,7 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
|||
}, []);
|
||||
|
||||
const updateRightSide = useCallback(
|
||||
(newRightSideComponentIdx: number, newWordPosStateIdx: number) => {
|
||||
(newRightSideComponentIdx: 0 | 1 | 2, newWordPosStateIdx: number) => {
|
||||
setRightComponentMatrixIdx(newRightSideComponentIdx);
|
||||
setWordPosStateIdx(newWordPosStateIdx);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "../EventManager";
|
||||
import { useMediaStore, useSSknStore } from "../../../store";
|
||||
import { useSSknStore } from "../../../store";
|
||||
|
||||
const SSknComponentManager = (props: StateManagerProps) => {
|
||||
const toggleComponentMatrixIdx = useSSknStore(
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,14 +1,11 @@
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import EndCylinder from "../components/EndScene/EndCylinder";
|
||||
import EndSphere from "../components/EndScene/EndSphere";
|
||||
import LainSpeak from "../components/LainSpeak";
|
||||
import { useEndSceneStore, useMediaStore } from "../store";
|
||||
import { useEndSceneStore, useMainSceneStore } from "../store";
|
||||
import EndSelectionScreen from "../components/EndScene/EndSelectionScreen";
|
||||
|
||||
const EndScene = () => {
|
||||
const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
|
||||
const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
|
||||
|
||||
const mediaPlayedCount = useEndSceneStore((state) => state.mediaPlayedCount);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
import { a } from "@react-spring/three";
|
||||
import { OrbitControls } from "@react-three/drei";
|
||||
import React, { Suspense, useEffect, useMemo } from "react";
|
||||
import Site from "../components/MainScene/SyncedComponents/Site";
|
||||
import Lain from "../components/MainScene/Lain";
|
||||
import Preloader from "../components/Preloader";
|
||||
import MiddleRing from "../components/MainScene/SyncedComponents/MiddleRing";
|
||||
import { useMainSceneStore } from "../store";
|
||||
import Pause from "../components/MainScene/PauseSubscene/Pause";
|
||||
import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader";
|
||||
import LevelSelection from "../components/MainScene/SyncedComponents/LevelSelection";
|
||||
import NodeExplosion from "../components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion";
|
||||
import NodeRip from "../components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip";
|
||||
|
||||
const MainScene = () => {
|
||||
const currentSubscene = useMainSceneStore((state) => state.subscene);
|
||||
|
|
@ -31,6 +27,7 @@ const MainScene = () => {
|
|||
<a.group>
|
||||
<Preloader />
|
||||
<LevelSelection />
|
||||
<Pause paused={isPaused} />
|
||||
<SyncedComponentLoader paused={isPaused} shouldIntro={shouldIntro} />
|
||||
<OrbitControls />
|
||||
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useCallback, useEffect } from "react";
|
||||
import { useMainSceneStore, useMediaStore } from "../store";
|
||||
import { useMainSceneStore } from "../store";
|
||||
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
||||
import RightSide from "../components/MediaScene/Selectables/RightSide";
|
||||
import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
|
||||
|
|
@ -12,10 +12,6 @@ import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextA
|
|||
import MediaSceneEventManager from "../core/StateManagers/MediaSceneEventManager";
|
||||
|
||||
const MediaScene = () => {
|
||||
const mediaComponentMatrixIndices = useMediaStore(
|
||||
(state) => state.componentMatrixIndices
|
||||
);
|
||||
|
||||
const activeNodeName = useMainSceneStore((state) =>
|
||||
state.activeNode.node_name.split("")
|
||||
);
|
||||
|
|
@ -23,15 +19,15 @@ const MediaScene = () => {
|
|||
(state) => state.activeNode.media_file
|
||||
);
|
||||
|
||||
const activeMediaComponent = useMediaStore(
|
||||
const activeMediaComponent = useMainSceneStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
state.componentMatrix[mediaComponentMatrixIndices.sideIdx][
|
||||
mediaComponentMatrixIndices.sideIdx === 0
|
||||
? mediaComponentMatrixIndices.leftSideIdx
|
||||
: mediaComponentMatrixIndices.rightSideIdx
|
||||
state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
|
||||
state.mediaComponentMatrixIndices.sideIdx === 0
|
||||
? state.mediaComponentMatrixIndices.leftSideIdx
|
||||
: state.mediaComponentMatrixIndices.rightSideIdx
|
||||
],
|
||||
[mediaComponentMatrixIndices]
|
||||
[]
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -48,7 +44,7 @@ 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 activeMediaComponent={activeMediaComponent!} />
|
||||
<group position={[0, 0.5, -3]}>
|
||||
<MediaLoadingBar />
|
||||
<NodeNameContainer />
|
||||
|
|
@ -61,7 +57,7 @@ const MediaScene = () => {
|
|||
<MediaYellowTextAnimator />
|
||||
|
||||
<group visible={activeNodeMedia.includes("XA")}>
|
||||
<RightSide activeMediaComponent={activeMediaComponent} />
|
||||
<RightSide activeMediaComponent={activeMediaComponent!} />
|
||||
<Lof />
|
||||
<AudioVisualizer />
|
||||
<Images />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useCallback } from "react";
|
|||
import SSknIcon from "../components/SSknScene/SSknIcon";
|
||||
import SSknBackground from "../components/SSknScene/SSknBackground";
|
||||
import SSknHUD from "../components/SSknScene/SSknHUD";
|
||||
import { useMediaStore, useSSknStore } from "../store";
|
||||
import { useSSknStore } from "../store";
|
||||
import SSknSceneManager from "../core/StateManagers/SSknSceneManager";
|
||||
|
||||
const SSknScene = () => {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import LainSpeak from "../components/LainSpeak";
|
||||
import * as THREE from "three";
|
||||
import { useMediaStore, useSceneStore } from "../store";
|
||||
import { useMainSceneStore, useSceneStore } from "../store";
|
||||
|
||||
const TaKScene = () => {
|
||||
const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
|
||||
const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
|
||||
const setScene = useSceneStore((state) => state.setScene);
|
||||
|
||||
const [isIntro, setIsIntro] = useState(true);
|
||||
const [isOutro, setIsOutro] = useState(false);
|
||||
|
||||
const percentageElapsed = useMediaStore(
|
||||
const percentageElapsed = useMainSceneStore(
|
||||
(state) => state.mediaPercentageElapsed
|
||||
);
|
||||
|
||||
|
|
|
|||
164
src/store.ts
164
src/store.ts
|
|
@ -1,8 +1,6 @@
|
|||
import create from "zustand";
|
||||
import { combine } from "zustand/middleware";
|
||||
import * as THREE from "three";
|
||||
import site_a from "./resources/site_a.json";
|
||||
import site_b from "./resources/site_b.json";
|
||||
import authorize_user_letters from "./resources/authorize_user_letters.json";
|
||||
import game_progress from "./resources/initial_progress.json";
|
||||
import { HUDType } from "./components/MainScene/SyncedComponents/HUD";
|
||||
|
|
@ -40,21 +38,6 @@ type SiteSaveState = {
|
|||
};
|
||||
};
|
||||
|
||||
type PauseState = {
|
||||
exitAnimation: boolean;
|
||||
componentMatrix: string[];
|
||||
componentMatrixIdx: number;
|
||||
setComponentMatrixIdx: (to: number) => void;
|
||||
setExitAnimation: (to: boolean) => void;
|
||||
};
|
||||
|
||||
type LevelSelectionState = {
|
||||
selectedLevel: number;
|
||||
levelSelectionToggled: number;
|
||||
setSelectedLevel: (to: number) => void;
|
||||
toggleLevelSelection: () => void;
|
||||
};
|
||||
|
||||
type SceneState = {
|
||||
currentScene: string;
|
||||
setScene: (to: string) => void;
|
||||
|
|
@ -179,62 +162,6 @@ export const useIdleStore = create<IdleState>((set) => ({
|
|||
setImages: (to) => set(() => ({ images: to })),
|
||||
}));
|
||||
|
||||
export const useMediaStore = create(
|
||||
combine(
|
||||
{
|
||||
audioAnalyser: undefined,
|
||||
mediaPercentageElapsed: 0,
|
||||
componentMatrix: [
|
||||
["play", "exit"],
|
||||
["fstWord", "sndWord", "thirdWord"],
|
||||
],
|
||||
componentMatrixIndices: {
|
||||
// 0 or 1 (left/right)
|
||||
sideIdx: 0,
|
||||
// 0 or 1 ("play" or "exit")
|
||||
leftSideIdx: 0,
|
||||
// 0 or 1 or 2 ("fstWord", "sndWord" or "thirdWord")
|
||||
rightSideIdx: 0,
|
||||
},
|
||||
} as MediaState,
|
||||
(set) => ({
|
||||
toggleSide: () =>
|
||||
set((state) => ({
|
||||
componentMatrixIndices: {
|
||||
...state.componentMatrixIndices,
|
||||
sideIdx: Number(!state.componentMatrixIndices.sideIdx),
|
||||
},
|
||||
})),
|
||||
setLeftComponentMatrixIdx: (to: number) =>
|
||||
set((state) => ({
|
||||
componentMatrixIndices: {
|
||||
...state.componentMatrixIndices,
|
||||
leftSideIdx: to,
|
||||
},
|
||||
})),
|
||||
setRightComponentMatrixIdx: (to: number) =>
|
||||
set((state) => ({
|
||||
componentMatrixIndices: {
|
||||
...state.componentMatrixIndices,
|
||||
rightSideIdx: to,
|
||||
},
|
||||
})),
|
||||
resetComponentMatrixIndices: () =>
|
||||
set(() => ({
|
||||
componentMatrixIndices: {
|
||||
sideIdx: 0,
|
||||
leftSideIdx: 0,
|
||||
rightSideIdx: 0,
|
||||
},
|
||||
})),
|
||||
setPercentageElapsed: (to: number) =>
|
||||
set(() => ({ mediaPercentageElapsed: to })),
|
||||
setAudioAnalyser: (to: THREE.AudioAnalyser) =>
|
||||
set(() => ({ audioAnalyser: to })),
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
export const useMediaWordStore = create<MediaWordState>((set) => ({
|
||||
posStateIdx: 1,
|
||||
setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
|
||||
|
|
@ -252,7 +179,7 @@ export const useSSknStore = create<SSknState>((set) => ({
|
|||
}));
|
||||
|
||||
export const useSceneStore = create<SceneState>((set) => ({
|
||||
currentScene: "main",
|
||||
currentScene: "media",
|
||||
setScene: (to) => set(() => ({ currentScene: to })),
|
||||
}));
|
||||
|
||||
|
|
@ -331,6 +258,16 @@ type MainSceneState = {
|
|||
pauseComponentMatrix: [string, string, string, string, string];
|
||||
pauseComponentMatrixIdx: number;
|
||||
pauseExitAnimation: boolean;
|
||||
|
||||
// media/media scene
|
||||
audioAnalyser: undefined | THREE.AudioAnalyser;
|
||||
mediaPercentageElapsed: number;
|
||||
mediaComponentMatrix: [[string, string], [string, string, string]];
|
||||
mediaComponentMatrixIndices: {
|
||||
sideIdx: 0 | 1;
|
||||
leftSideIdx: 0 | 1;
|
||||
rightSideIdx: 0 | 1 | 2;
|
||||
};
|
||||
};
|
||||
|
||||
export const useMainSceneStore = create(
|
||||
|
|
@ -349,7 +286,7 @@ export const useMainSceneStore = create(
|
|||
bigText: "Tda028",
|
||||
bigTextVisible: true,
|
||||
bigTextColor: "yellow",
|
||||
bigTextPos: [-0.35, 0.23, 0],
|
||||
bigTextPos: [-0.35, 0.23, -8.7],
|
||||
bigTextXOffset: 0,
|
||||
|
||||
// hud
|
||||
|
|
@ -377,6 +314,7 @@ export const useMainSceneStore = create(
|
|||
|
||||
// nodes
|
||||
activeNode: {
|
||||
id: "0422",
|
||||
image_table_indices: {
|
||||
"1": "93",
|
||||
"2": "356",
|
||||
|
|
@ -435,12 +373,27 @@ export const useMainSceneStore = create(
|
|||
|
||||
// level selection
|
||||
selectedLevel: 4,
|
||||
levelSelectionToggled: false,
|
||||
|
||||
// pause
|
||||
pauseComponentMatrix: ["load", "about", "change", "save", "exit"],
|
||||
pauseComponentMatrixIdx: 2,
|
||||
pauseExitAnimation: false,
|
||||
|
||||
// media / media scene
|
||||
audioAnalyser: undefined,
|
||||
mediaPercentageElapsed: 0,
|
||||
mediaComponentMatrix: [
|
||||
["play", "exit"],
|
||||
["fstWord", "sndWord", "thirdWord"],
|
||||
],
|
||||
mediaComponentMatrixIndices: {
|
||||
// 0 or 1 (left/right)
|
||||
sideIdx: 0,
|
||||
// 0 or 1 ("play" or "exit")
|
||||
leftSideIdx: 0,
|
||||
// 0 or 1 or 2 ("fstWord", "sndWord" or "thirdWord")
|
||||
rightSideIdx: 0,
|
||||
},
|
||||
} as MainSceneState,
|
||||
(set) => ({
|
||||
// subscene setters
|
||||
|
|
@ -511,16 +464,49 @@ export const useMainSceneStore = create(
|
|||
|
||||
// level selection setters
|
||||
setSelectedLevel: (to: number) => set(() => ({ selectedLevel: to })),
|
||||
toggleLevelSelection: () =>
|
||||
set((state) => ({
|
||||
levelSelectionToggled: !state.levelSelectionToggled,
|
||||
})),
|
||||
|
||||
// pause setters
|
||||
setPauseComponentMatrixIdx: (to: number) =>
|
||||
set(() => ({ pauseComponentMatrixIdx: to })),
|
||||
setPauseExitAnimation: (to: boolean) =>
|
||||
set(() => ({ pauseExitAnimation: to })),
|
||||
|
||||
// media/media scene setters
|
||||
toggleMediaSide: () =>
|
||||
set((state) => ({
|
||||
mediaComponentMatrixIndices: {
|
||||
...state.mediaComponentMatrixIndices,
|
||||
sideIdx: Number(!state.mediaComponentMatrixIndices.sideIdx) as
|
||||
| 0
|
||||
| 1,
|
||||
},
|
||||
})),
|
||||
setMediaLeftComponentMatrixIdx: (to: 0 | 1) =>
|
||||
set((state) => ({
|
||||
mediaComponentMatrixIndices: {
|
||||
...state.mediaComponentMatrixIndices,
|
||||
leftSideIdx: to,
|
||||
},
|
||||
})),
|
||||
setMediaRightComponentMatrixIdx: (to: 0 | 1 | 2) =>
|
||||
set((state) => ({
|
||||
mediaComponentMatrixIndices: {
|
||||
...state.mediaComponentMatrixIndices,
|
||||
rightSideIdx: to,
|
||||
},
|
||||
})),
|
||||
resetMediaComponentMatrixIndices: () =>
|
||||
set(() => ({
|
||||
mediaComponentMatrixIndices: {
|
||||
sideIdx: 0,
|
||||
leftSideIdx: 0,
|
||||
rightSideIdx: 0,
|
||||
},
|
||||
})),
|
||||
setPercentageElapsed: (to: number) =>
|
||||
set(() => ({ mediaPercentageElapsed: to })),
|
||||
setAudioAnalyser: (to: THREE.AudioAnalyser) =>
|
||||
set(() => ({ audioAnalyser: to })),
|
||||
})
|
||||
)
|
||||
);
|
||||
|
|
@ -583,24 +569,6 @@ export const useGateStore = create<GateState>((set) => ({
|
|||
incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
|
||||
}));
|
||||
|
||||
export const useLevelSelectionStore = create<LevelSelectionState>((set) => ({
|
||||
selectedLevel: 4,
|
||||
levelSelectionToggled: 0,
|
||||
setSelectedLevel: (to) => set(() => ({ selectedLevel: to })),
|
||||
toggleLevelSelection: () =>
|
||||
set((state) => ({
|
||||
levelSelectionToggled: Number(!state.levelSelectionToggled),
|
||||
})),
|
||||
}));
|
||||
|
||||
export const usePauseStore = create<PauseState>((set) => ({
|
||||
componentMatrix: ["load", "about", "change", "save", "exit"],
|
||||
componentMatrixIdx: 2,
|
||||
exitAnimation: false,
|
||||
setComponentMatrixIdx: (to) => set(() => ({ componentMatrixIdx: to })),
|
||||
setExitAnimation: (to) => set(() => ({ exitAnimation: to })),
|
||||
}));
|
||||
|
||||
export const useSiteSaveStore = create(
|
||||
combine(
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue