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:
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 mouth2 from "../static/sprite/mouth_2.png";
|
||||||
import mouth3 from "../static/sprite/mouth_3.png";
|
import mouth3 from "../static/sprite/mouth_3.png";
|
||||||
import mouth4 from "../static/sprite/mouth_4.png";
|
import mouth4 from "../static/sprite/mouth_4.png";
|
||||||
import { useMediaStore } from "../store";
|
import { useMainSceneStore } from "../store";
|
||||||
import { LainConstructor } from "./MainScene/Lain";
|
import { LainConstructor } from "./MainScene/Lain";
|
||||||
|
|
||||||
type LainTaKProps = {
|
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>();
|
const mouthRef = useRef<THREE.SpriteMaterial>();
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (analyser) {
|
if (analyser) {
|
||||||
const freq = parseInt(analyser.getAverageFrequency());
|
const freq = parseInt(String(analyser.getAverageFrequency()));
|
||||||
|
|
||||||
if (mouthRef.current) {
|
if (mouthRef.current) {
|
||||||
if (freq >= 50) {
|
if (freq >= 50) {
|
||||||
|
|
|
@ -2,12 +2,15 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import PauseSquare from "./PauseSquare";
|
import PauseSquare from "./PauseSquare";
|
||||||
import StaticBigLetter from "../../TextRenderer/StaticBigLetter";
|
import StaticBigLetter from "../../TextRenderer/StaticBigLetter";
|
||||||
import { usePauseStore } from "../../../store";
|
import { useMainSceneStore } from "../../../store";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import MainSceneEventManager from "../../../core/StateManagers/MainSceneEventManager";
|
|
||||||
|
|
||||||
const Pause = (props: { visible: boolean }) => {
|
type PauseProps = {
|
||||||
const exit = usePauseStore((state) => state.exitAnimation);
|
paused: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Pause = (props: PauseProps) => {
|
||||||
|
const exit = useMainSceneStore((state) => state.pauseExitAnimation);
|
||||||
const [showActiveComponent, setShowActiveComponent] = useState(false);
|
const [showActiveComponent, setShowActiveComponent] = useState(false);
|
||||||
const [animation, setAnimation] = useState(false);
|
const [animation, setAnimation] = useState(false);
|
||||||
const [intro, setIntro] = useState(true);
|
const [intro, setIntro] = useState(true);
|
||||||
|
@ -22,12 +25,13 @@ const Pause = (props: { visible: boolean }) => {
|
||||||
[wordFont]
|
[wordFont]
|
||||||
);
|
);
|
||||||
|
|
||||||
const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
|
const activeComponent = useMainSceneStore(
|
||||||
const activeComponent = usePauseStore(
|
|
||||||
useCallback(
|
useCallback(
|
||||||
(state) =>
|
(state) =>
|
||||||
showActiveComponent ? state.componentMatrix[componentMatrixIdx] : "",
|
showActiveComponent
|
||||||
[componentMatrixIdx, showActiveComponent]
|
? state.pauseComponentMatrix[state.pauseComponentMatrixIdx]
|
||||||
|
: "",
|
||||||
|
[showActiveComponent]
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -58,7 +62,7 @@ const Pause = (props: { visible: boolean }) => {
|
||||||
setAnimation(false);
|
setAnimation(false);
|
||||||
setIntro(true);
|
setIntro(true);
|
||||||
setShowActiveComponent(false);
|
setShowActiveComponent(false);
|
||||||
if (props.visible) {
|
if (props.paused) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setAnimation(true);
|
setAnimation(true);
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
@ -67,285 +71,291 @@ const Pause = (props: { visible: boolean }) => {
|
||||||
setIntro(false);
|
setIntro(false);
|
||||||
}, 3500);
|
}, 3500);
|
||||||
}
|
}
|
||||||
}, [props.visible]);
|
}, [props.paused]);
|
||||||
|
|
||||||
return animation ? (
|
return (
|
||||||
<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) =>
|
{animation && (
|
||||||
[0, 1, 2, 3, 4, 5, 6].map((col: number) => {
|
<group position={[-0.85, -0.7, 0]} scale={[0.85, 0.85, 0]}>
|
||||||
if (rowIdx === 5 && col > 0 && col < 5) {
|
{[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
|
||||||
return col === 1 ? (
|
[0, 1, 2, 3, 4, 5, 6].map((col: number) => {
|
||||||
<React.Fragment key={`Lfragment`}>
|
if (rowIdx === 5 && col > 0 && col < 5) {
|
||||||
<StaticBigLetter
|
return col === 1 ? (
|
||||||
color={"white"}
|
<React.Fragment key={`Lfragment`}>
|
||||||
letter={"L"}
|
<StaticBigLetter
|
||||||
letterIdx={col}
|
color={"white"}
|
||||||
position={[0.35, 1.8, 0]}
|
letter={"L"}
|
||||||
scale={[0.25, 0.25, 0.25]}
|
letterIdx={col}
|
||||||
active={!(activeComponent === "load")}
|
position={[0.35, 1.8, 0]}
|
||||||
key={"whiteL"}
|
scale={[0.25, 0.25, 0.25]}
|
||||||
rowIdx={rowIdx}
|
active={!(activeComponent === "load")}
|
||||||
colIdx={col}
|
key={"whiteL"}
|
||||||
intro={intro}
|
rowIdx={rowIdx}
|
||||||
/>
|
colIdx={col}
|
||||||
<PauseSquare
|
intro={intro}
|
||||||
geometry={squareGeoms[row][col]}
|
/>
|
||||||
rowIdx={rowIdx}
|
<PauseSquare
|
||||||
colIdx={col}
|
geometry={squareGeoms[row][col]}
|
||||||
key={"whiteLsquare"}
|
rowIdx={rowIdx}
|
||||||
shouldDisappear={true}
|
colIdx={col}
|
||||||
intro={intro}
|
key={"whiteLsquare"}
|
||||||
/>
|
shouldDisappear={true}
|
||||||
</React.Fragment>
|
intro={intro}
|
||||||
) : (
|
/>
|
||||||
<PauseSquare
|
</React.Fragment>
|
||||||
geometry={squareGeoms[row][col]}
|
) : (
|
||||||
rowIdx={rowIdx}
|
<PauseSquare
|
||||||
colIdx={col}
|
geometry={squareGeoms[row][col]}
|
||||||
active={!(activeComponent === "load")}
|
rowIdx={rowIdx}
|
||||||
key={`${rowIdx}${col}L`}
|
colIdx={col}
|
||||||
intro={intro}
|
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}
|
||||||
/>
|
/>
|
||||||
);
|
</sprite>
|
||||||
} else if (rowIdx === 4 && col > 4 && col < 7) {
|
<mesh
|
||||||
return col === 5 ? (
|
scale={[0.08, 0.07, 0]}
|
||||||
<React.Fragment key={"AFragment"}>
|
position={[-0.2, -0.6, 0]}
|
||||||
<StaticBigLetter
|
renderOrder={101}
|
||||||
color={"white"}
|
>
|
||||||
letter={"A"}
|
<textGeometry
|
||||||
letterIdx={col}
|
attach="geometry"
|
||||||
position={[1.78, 1.43, 0]}
|
args={["Application Version 1.0", config]}
|
||||||
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}
|
|
||||||
/>
|
/>
|
||||||
);
|
<meshBasicMaterial
|
||||||
} else if (rowIdx === 3 && col > 2 && col < 7) {
|
attach="material"
|
||||||
return col === 3 ? (
|
color={0x00ba7c}
|
||||||
<React.Fragment key={"CFragment"}>
|
transparent={true}
|
||||||
<StaticBigLetter
|
depthTest={false}
|
||||||
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}
|
|
||||||
/>
|
/>
|
||||||
);
|
</mesh>
|
||||||
} else if (rowIdx === 1 && col > 0 && col < 5) {
|
</group>
|
||||||
return col === 1 ? (
|
</group>
|
||||||
<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}
|
|
||||||
/>
|
|
||||||
</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 * as THREE from "three";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import pauseGrayBoxes from "../../../static/sprite/pause_gray_boxes.png";
|
import pauseGrayBoxes from "../../../static/sprite/pause_gray_boxes.png";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { usePauseStore } from "../../../store";
|
import { useMainSceneStore } from "../../../store";
|
||||||
|
|
||||||
type PauseSquareProps = {
|
type PauseSquareProps = {
|
||||||
colIdx: number;
|
colIdx: number;
|
||||||
|
@ -14,8 +14,8 @@ type PauseSquareProps = {
|
||||||
intro?: boolean;
|
intro?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const PauseSquare = (props: PauseSquareProps) => {
|
const PauseSquare = memo((props: PauseSquareProps) => {
|
||||||
const exitAnimation = usePauseStore((state) => state.exitAnimation);
|
const exitAnimation = useMainSceneStore((state) => state.pauseExitAnimation);
|
||||||
|
|
||||||
const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
|
const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
|
||||||
|
|
||||||
|
@ -109,6 +109,6 @@ const PauseSquare = (props: PauseSquareProps) => {
|
||||||
</group>
|
</group>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
|
|
||||||
export default PauseSquare;
|
export default PauseSquare;
|
||||||
|
|
|
@ -52,7 +52,6 @@ const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => {
|
||||||
shouldIntro={props.shouldIntro}
|
shouldIntro={props.shouldIntro}
|
||||||
introFinished={introFinished}
|
introFinished={introFinished}
|
||||||
/>
|
/>
|
||||||
<Pause visible={props.paused} />
|
|
||||||
<Site shouldIntro={props.shouldIntro} introFinished={introFinished} />
|
<Site shouldIntro={props.shouldIntro} introFinished={introFinished} />
|
||||||
<MainSceneEventManager
|
<MainSceneEventManager
|
||||||
loaded={props.shouldIntro ? introFinished : true}
|
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 { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import bigHud from "../../../static/sprite/big_hud.png";
|
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 { a, useSpring } from "@react-spring/three";
|
||||||
import { useMainSceneStore } from "../../../store";
|
import { useMainSceneStore } from "../../../store";
|
||||||
import MediumLetter from "../../TextRenderer/MediumLetter";
|
import MediumLetter from "../../TextRenderer/MediumLetter";
|
||||||
import { NodeDataType } from "./Site";
|
|
||||||
|
|
||||||
export type HUDType = {
|
export type HUDType = {
|
||||||
mirrored: number;
|
mirrored: number;
|
||||||
|
@ -33,7 +32,7 @@ export type HUDType = {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const HUD = () => {
|
const HUD = memo(() => {
|
||||||
const greenText = useMainSceneStore((state) =>
|
const greenText = useMainSceneStore((state) =>
|
||||||
state.activeNode.title.split("")
|
state.activeNode.title.split("")
|
||||||
);
|
);
|
||||||
|
@ -155,6 +154,6 @@ const HUD = () => {
|
||||||
</a.group>
|
</a.group>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
|
|
||||||
export default HUD;
|
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 level_selection_font from "../../../static/sprite/select_level_font.png";
|
||||||
import verticalHud from "../../../static/sprite/select_level_hud_vertical.png";
|
import verticalHud from "../../../static/sprite/select_level_hud_vertical.png";
|
||||||
import horizontalHud from "../../../static/sprite/select_level_hud_horizontal.png";
|
import horizontalHud from "../../../static/sprite/select_level_hud_horizontal.png";
|
||||||
import levelSelectionText from "../../../static/sprite/select_level_text.png";
|
import levelSelectionText from "../../../static/sprite/select_level_text.png";
|
||||||
import upArrow from "../../../static/sprite/select_level_up_arrow.png";
|
import upArrow from "../../../static/sprite/select_level_up_arrow.png";
|
||||||
import downArrow from "../../../static/sprite/select_level_down_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 { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
|
@ -24,16 +24,16 @@ const LevelSelection = () => {
|
||||||
const upArrowTex = useLoader(THREE.TextureLoader, upArrow);
|
const upArrowTex = useLoader(THREE.TextureLoader, upArrow);
|
||||||
const downArrowTex = useLoader(THREE.TextureLoader, downArrow);
|
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()
|
.toString()
|
||||||
.padStart(2, "0");
|
.padStart(2, "0");
|
||||||
|
|
||||||
const levelSelectionToggled = useLevelSelectionStore(
|
|
||||||
(state) => state.levelSelectionToggled
|
|
||||||
);
|
|
||||||
|
|
||||||
const { levelSelectionToggle } = useSpring({
|
const { levelSelectionToggle } = useSpring({
|
||||||
levelSelectionToggle: levelSelectionToggled,
|
levelSelectionToggle: toggled,
|
||||||
config: { duration: 500 },
|
config: { duration: 500 },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
import React, { useMemo } from "react";
|
import React, { useMemo, memo } from "react";
|
||||||
import Node from "./Node";
|
import Node from "./Node";
|
||||||
import node_positions from "../../../../resources/node_positions.json";
|
import node_positions from "../../../../resources/node_positions.json";
|
||||||
import { useMainSceneStore } from "../../../../store";
|
import { useMainSceneStore } from "../../../../store";
|
||||||
import { isNodeVisible } from "../../../../core/nodeSelector";
|
import { isNodeVisible } from "../../../../core/nodeSelector";
|
||||||
import site_a from "../../../../resources/site_a.json";
|
import site_a from "../../../../resources/site_a.json";
|
||||||
import site_b from "../../../../resources/site_b.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 activeNodeId = useMainSceneStore((state) => state.activeNode.id);
|
||||||
|
|
||||||
const gameProgress = useMainSceneStore((state) => state.gameProgress);
|
const gameProgress = useMainSceneStore((state) => state.gameProgress);
|
||||||
|
@ -26,28 +27,28 @@ const ActiveLevelNodes = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{Object.entries(visibleNodes).map((node: [string, any]) => {
|
{Object.values(visibleNodes).map((node: NodeDataType) => {
|
||||||
if (isNodeVisible(node[1], gameProgress)) {
|
if (isNodeVisible(node, gameProgress)) {
|
||||||
return (
|
return (
|
||||||
<Node
|
<Node
|
||||||
nodeName={node[1].node_name}
|
nodeName={node.node_name}
|
||||||
position={
|
position={
|
||||||
node_positions[node[0].substr(2) as keyof typeof node_positions]
|
node_positions[node.id.substr(2) as keyof typeof node_positions]
|
||||||
.position
|
.position
|
||||||
}
|
}
|
||||||
rotation={
|
rotation={
|
||||||
node_positions[node[0].substr(2) as keyof typeof node_positions]
|
node_positions[node.id.substr(2) as keyof typeof node_positions]
|
||||||
.rotation
|
.rotation
|
||||||
}
|
}
|
||||||
key={node[1].node_name}
|
key={node.node_name}
|
||||||
active={node[0] === activeNodeId}
|
active={node.id === activeNodeId}
|
||||||
level={node[0].substr(0, 2)}
|
level={node.id.substr(0, 2)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
})}
|
})}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
|
|
||||||
export default ActiveLevelNodes;
|
export default ActiveLevelNodes;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useMemo } from "react";
|
import React, { useMemo, memo } from "react";
|
||||||
import Node from "./Node";
|
import Node from "./Node";
|
||||||
import node_positions from "../../../../resources/node_positions.json";
|
import node_positions from "../../../../resources/node_positions.json";
|
||||||
import { useMainSceneStore } from "../../../../store";
|
import { useMainSceneStore } from "../../../../store";
|
||||||
|
@ -6,7 +6,7 @@ import { isNodeVisible } from "../../../../core/nodeSelector";
|
||||||
import site_a from "../../../../resources/site_a.json";
|
import site_a from "../../../../resources/site_a.json";
|
||||||
import site_b from "../../../../resources/site_b.json";
|
import site_b from "../../../../resources/site_b.json";
|
||||||
|
|
||||||
const InactiveLevelNodes = () => {
|
const InactiveLevelNodes = memo(() => {
|
||||||
const gameProgress = useMainSceneStore((state) => state.gameProgress);
|
const gameProgress = useMainSceneStore((state) => state.gameProgress);
|
||||||
|
|
||||||
const currentSite = useMainSceneStore((state) => state.activeSite);
|
const currentSite = useMainSceneStore((state) => state.activeSite);
|
||||||
|
@ -57,6 +57,6 @@ const InactiveLevelNodes = () => {
|
||||||
})}
|
})}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
|
|
||||||
export default 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 level_y_values from "../../../../resources/level_y_values.json";
|
||||||
import PurpleRing from "./PurpleRing";
|
import PurpleRing from "./PurpleRing";
|
||||||
import GrayRing from "./GrayRing";
|
import GrayRing from "./GrayRing";
|
||||||
|
@ -9,7 +9,7 @@ type RingsProps = {
|
||||||
activateAllRings: boolean;
|
activateAllRings: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Rings = (props: RingsProps) => {
|
const Rings = memo((props: RingsProps) => {
|
||||||
const activeLevel = useMainSceneStore((state) => state.activeLevel);
|
const activeLevel = useMainSceneStore((state) => state.activeLevel);
|
||||||
const currentSite = useMainSceneStore((state) => state.activeSite);
|
const currentSite = useMainSceneStore((state) => state.activeSite);
|
||||||
|
|
||||||
|
@ -61,6 +61,6 @@ const Rings = (props: RingsProps) => {
|
||||||
})}
|
})}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
|
|
||||||
export default Rings;
|
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";
|
import Star from "./Starfield/Star";
|
||||||
|
|
||||||
type StarfieldProps = {
|
type StarfieldProps = {
|
||||||
|
@ -7,7 +7,7 @@ type StarfieldProps = {
|
||||||
introFinished: boolean;
|
introFinished: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Starfield = (props: StarfieldProps) => {
|
const Starfield = memo((props: StarfieldProps) => {
|
||||||
const LCG = (a: number, c: number, m: number, s: number) => () =>
|
const LCG = (a: number, c: number, m: number, s: number) => () =>
|
||||||
(s = (s * a + c) % m);
|
(s = (s * a + c) % m);
|
||||||
|
|
||||||
|
@ -128,6 +128,6 @@ const Starfield = (props: StarfieldProps) => {
|
||||||
)}
|
)}
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
|
|
||||||
export default Starfield;
|
export default Starfield;
|
||||||
|
|
|
@ -2,10 +2,10 @@ import React, { createRef, MutableRefObject, useMemo } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import AudioVisualizerColumn from "./AudioVisualizerColumn";
|
import AudioVisualizerColumn from "./AudioVisualizerColumn";
|
||||||
import { useMediaStore } from "../../../store";
|
import { useMainSceneStore } from "../../../store";
|
||||||
|
|
||||||
const AudioVisualizer = () => {
|
const AudioVisualizer = () => {
|
||||||
const analyser = useMediaStore((state) => state.audioAnalyser);
|
const analyser = useMainSceneStore((state) => state.audioAnalyser);
|
||||||
|
|
||||||
const columnRefs = useMemo(
|
const columnRefs = useMemo(
|
||||||
() =>
|
() =>
|
||||||
|
|
|
@ -1,14 +1,9 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, {useEffect, useState} from "react";
|
||||||
import {
|
import {useIdleStore, useMainSceneStore, useSceneStore,} from "../../store";
|
||||||
useIdleStore,
|
import {a, useSpring} from "@react-spring/three";
|
||||||
useMainSceneStore,
|
|
||||||
useMediaStore,
|
|
||||||
useSceneStore,
|
|
||||||
} from "../../store";
|
|
||||||
import { a, useSpring } from "@react-spring/three";
|
|
||||||
import dummy from "../../static/sprite/dummy.png";
|
import dummy from "../../static/sprite/dummy.png";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useLoader } from "react-three-fiber";
|
import {useLoader} from "react-three-fiber";
|
||||||
|
|
||||||
const Images = () => {
|
const Images = () => {
|
||||||
const idleNodeImages = useIdleStore((state) => state.images);
|
const idleNodeImages = useIdleStore((state) => state.images);
|
||||||
|
@ -26,7 +21,7 @@ const Images = () => {
|
||||||
|
|
||||||
const dummyTex = useLoader(THREE.TextureLoader, dummy);
|
const dummyTex = useLoader(THREE.TextureLoader, dummy);
|
||||||
|
|
||||||
const mediaPercentageElapsed = useMediaStore(
|
const mediaPercentageElapsed = useMainSceneStore(
|
||||||
(state) => state.mediaPercentageElapsed
|
(state) => state.mediaPercentageElapsed
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useMemo, useRef } from "react";
|
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 loadingBarContainer from "../../static/sprite/media_loading_bar_container.png";
|
||||||
import loadingBar from "../../static/sprite/media_loading_bar.png";
|
import loadingBar from "../../static/sprite/media_loading_bar.png";
|
||||||
import loadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.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";
|
import * as THREE from "three";
|
||||||
|
|
||||||
const MediaLoadingBar = () => {
|
const MediaLoadingBar = () => {
|
||||||
const mediaPercentageElapsed = useMediaStore(
|
const mediaPercentageElapsed = useMainSceneStore(
|
||||||
(state) => state.mediaPercentageElapsed
|
(state) => state.mediaPercentageElapsed
|
||||||
);
|
);
|
||||||
const loadingBarContainerTex = useLoader(
|
const loadingBarContainerTex = useLoader(
|
||||||
|
|
|
@ -10,7 +10,6 @@ import {
|
||||||
useEndSceneStore,
|
useEndSceneStore,
|
||||||
useIdleStore,
|
useIdleStore,
|
||||||
useMainSceneStore,
|
useMainSceneStore,
|
||||||
useMediaStore,
|
|
||||||
useSceneStore,
|
useSceneStore,
|
||||||
} from "../../store";
|
} from "../../store";
|
||||||
import t from "../../static/webvtt/test.vtt";
|
import t from "../../static/webvtt/test.vtt";
|
||||||
|
@ -24,7 +23,7 @@ const MediaPlayer = () => {
|
||||||
const currentScene = useSceneStore((state) => state.currentScene);
|
const currentScene = useSceneStore((state) => state.currentScene);
|
||||||
const setScene = useSceneStore((state) => state.setScene);
|
const setScene = useSceneStore((state) => state.setScene);
|
||||||
|
|
||||||
const setPercentageElapsed = useMediaStore(
|
const setPercentageElapsed = useMainSceneStore(
|
||||||
(state) => state.setPercentageElapsed
|
(state) => state.setPercentageElapsed
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -53,7 +52,10 @@ const MediaPlayer = () => {
|
||||||
|
|
||||||
const updateTime = useCallback(() => {
|
const updateTime = useCallback(() => {
|
||||||
(requestRef.current as any) = requestAnimationFrame(updateTime);
|
(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 timeElapsed = videoRef.current.currentTime;
|
||||||
const duration = videoRef.current.duration;
|
const duration = videoRef.current.duration;
|
||||||
const percentageElapsed = Math.floor((timeElapsed / duration) * 100);
|
const percentageElapsed = Math.floor((timeElapsed / duration) * 100);
|
||||||
|
|
|
@ -5,157 +5,154 @@ import * as THREE from "three";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import React, { useMemo } from "react";
|
import React, { useMemo, memo } from "react";
|
||||||
import { usePauseStore } from "../../store";
|
import { useMainSceneStore } from "../../store";
|
||||||
|
|
||||||
const StaticBigLetter = (props: {
|
const StaticBigLetter = memo(
|
||||||
color: string;
|
(props: {
|
||||||
letter: string;
|
color: string;
|
||||||
letterIdx: number;
|
letter: string;
|
||||||
position: number[];
|
letterIdx: number;
|
||||||
scale: number[];
|
position: number[];
|
||||||
active: boolean;
|
scale: number[];
|
||||||
rowIdx?: number;
|
active: boolean;
|
||||||
colIdx?: number;
|
rowIdx?: number;
|
||||||
intro?: boolean;
|
colIdx?: number;
|
||||||
}) => {
|
intro?: boolean;
|
||||||
const exitAnimation = usePauseStore((state) => state.exitAnimation);
|
}) => {
|
||||||
|
const exitAnimation = useMainSceneStore(
|
||||||
|
(state) => state.pauseExitAnimation
|
||||||
|
);
|
||||||
|
|
||||||
const colorToTexture = (color: string) => {
|
const tex = useMemo(() => {
|
||||||
const colorTexture = {
|
switch (props.color) {
|
||||||
orange: orangeFont,
|
case "white":
|
||||||
yellow: yellowFont,
|
return whiteFont;
|
||||||
white: whiteFont,
|
case "yellow":
|
||||||
};
|
return yellowFont;
|
||||||
return colorTexture[color as keyof typeof colorTexture];
|
default:
|
||||||
};
|
return orangeFont;
|
||||||
|
}
|
||||||
|
}, [props.color]);
|
||||||
|
|
||||||
// first letter in big font is always orange in this case so make it orange if so. else,
|
const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, tex);
|
||||||
// run through the function.
|
|
||||||
const color =
|
|
||||||
props.letterIdx === 0 ? orangeFont : colorToTexture(props.color);
|
|
||||||
|
|
||||||
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
|
let lineNum: number;
|
||||||
// calculating the y offset, this shit will do for now
|
if (props.letter === " ") {
|
||||||
// also, we dont have all the lines since i dont need them yet.
|
lineNum = 5;
|
||||||
// also, baseline offsets dont work properly since i dont need them yet either
|
} else {
|
||||||
// should be trivial to calculate though, im just lazy
|
if (lineOne.includes(props.letter)) {
|
||||||
const getLineNum = (letter: string) => {
|
lineNum = 1;
|
||||||
const lineOne = "ABCDEFGHIJKLMNOPQ";
|
} else if (lineTwo.includes(props.letter)) {
|
||||||
const lineTwo = "RSTUVWXYZ01234567";
|
lineNum = 2;
|
||||||
const lineThree = "89abcdefghijklmnopqrs";
|
} 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)) {
|
const letterData = useMemo(
|
||||||
return 1;
|
() =>
|
||||||
} else if (lineTwo.includes(letter)) {
|
orange_font_json.glyphs[
|
||||||
return 2;
|
props.letter as keyof typeof orange_font_json.glyphs
|
||||||
} else if (lineThree.includes(letter)) {
|
],
|
||||||
return 3;
|
[props.letter]
|
||||||
} else {
|
);
|
||||||
return 4;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const lineYOffsets = useMemo(
|
const geom = useMemo(() => {
|
||||||
() => ({
|
const geometry = new THREE.PlaneBufferGeometry();
|
||||||
1: 0.884,
|
|
||||||
2: 0.765,
|
|
||||||
3: 0.648,
|
|
||||||
4: 0.47,
|
|
||||||
5: 1,
|
|
||||||
}),
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const letterData =
|
const uvAttribute = geometry.attributes.uv;
|
||||||
orange_font_json.glyphs[
|
|
||||||
props.letter as keyof typeof orange_font_json.glyphs
|
|
||||||
];
|
|
||||||
|
|
||||||
const geom = useMemo(() => {
|
for (let i = 0; i < uvAttribute.count; i++) {
|
||||||
const geometry = new THREE.PlaneBufferGeometry();
|
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++) {
|
v = (v * letterData[3]) / 136 + lineYOffset - letterData[4] / 136;
|
||||||
let u = uvAttribute.getX(i);
|
|
||||||
let v = uvAttribute.getY(i);
|
|
||||||
|
|
||||||
u = (u * letterData[2]) / 256 + letterData[0] / 256;
|
uvAttribute.setXY(i, u, v);
|
||||||
|
}
|
||||||
|
return geometry;
|
||||||
|
}, [letterData, lineYOffset]);
|
||||||
|
|
||||||
v =
|
const exitAnimValue = useMemo(() => {
|
||||||
(v * letterData[3]) / 136 +
|
let col = 0;
|
||||||
lineYOffsets[getLineNum(props.letter)] -
|
let row = 0;
|
||||||
letterData[4] / 136;
|
if (props.colIdx && props.rowIdx) {
|
||||||
|
if (props.colIdx < 3) col = -1;
|
||||||
|
else if (props.colIdx > 3) col = 1;
|
||||||
|
|
||||||
uvAttribute.setXY(i, u, v);
|
if (props.rowIdx < 3) row = -1;
|
||||||
}
|
else if (props.rowIdx > 3) row = 1;
|
||||||
return geometry;
|
|
||||||
}, [letterData, lineYOffsets, props.letter]);
|
|
||||||
|
|
||||||
const getExitAnimValue = useMemo(() => {
|
return { row, col };
|
||||||
let col = 0;
|
}
|
||||||
let row = 0;
|
}, [props.colIdx, props.rowIdx]);
|
||||||
if (props.colIdx && props.rowIdx) {
|
|
||||||
if (props.colIdx < 3) col = -1;
|
|
||||||
else if (props.colIdx > 3) col = 1;
|
|
||||||
|
|
||||||
if (props.rowIdx < 3) row = -1;
|
const initialState = useSpring({
|
||||||
else if (props.rowIdx > 3) row = 1;
|
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 };
|
const introState = useSpring({
|
||||||
}
|
rotX: 0,
|
||||||
}, [props.colIdx, props.rowIdx]);
|
rotY: 0,
|
||||||
|
from: { rotX: Math.PI, rotY: Math.PI * 2 },
|
||||||
|
delay: (props.rowIdx! + props.colIdx!) * 100 + 500,
|
||||||
|
config: { duration: 200 },
|
||||||
|
});
|
||||||
|
|
||||||
const initialState = useSpring({
|
return (
|
||||||
posX:
|
<a.mesh
|
||||||
props.position[0] +
|
position={[
|
||||||
(getExitAnimValue ? getExitAnimValue.col * (exitAnimation ? 2.2 : 0) : 0),
|
props.position[0],
|
||||||
posY:
|
-letterData[4] / 50 + props.position[1],
|
||||||
-letterData[4] / 50 +
|
props.position[2],
|
||||||
props.position[1] +
|
]}
|
||||||
(getExitAnimValue ? getExitAnimValue.row * (exitAnimation ? 2.2 : 0) : 0),
|
position-x={initialState.posX}
|
||||||
rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI,
|
position-y={initialState.posY}
|
||||||
rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2,
|
scale={props.scale as [number, number, number]}
|
||||||
config: { duration: 500 },
|
geometry={geom}
|
||||||
});
|
rotation-x={props.intro ? introState.rotX : initialState.rotX}
|
||||||
|
rotation-y={props.intro ? introState.rotY : initialState.rotY}
|
||||||
const introState = useSpring({
|
renderOrder={100}
|
||||||
rotX: 0,
|
>
|
||||||
rotY: 0,
|
<meshBasicMaterial
|
||||||
from: { rotX: Math.PI, rotY: Math.PI * 2 },
|
map={colorTexture}
|
||||||
delay: (props.rowIdx! + props.colIdx!) * 100 + 500,
|
attach="material"
|
||||||
config: { duration: 200 },
|
transparent={true}
|
||||||
});
|
side={THREE.FrontSide}
|
||||||
|
depthTest={false}
|
||||||
return (
|
/>
|
||||||
<a.mesh
|
</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;
|
export default StaticBigLetter;
|
||||||
|
|
|
@ -11,8 +11,8 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
|
||||||
const textRef = useRef(useMainSceneStore.getState().bigText.split(""));
|
const textRef = useRef(useMainSceneStore.getState().bigText.split(""));
|
||||||
|
|
||||||
const [trail, set] = useTrail(textRef.current.length, () => ({
|
const [trail, set] = useTrail(textRef.current.length, () => ({
|
||||||
posX: 0,
|
posX: useMainSceneStore.getState().bigTextPos[0],
|
||||||
posY: 0,
|
posY: useMainSceneStore.getState().bigTextPos[1],
|
||||||
config: { duration: 280 },
|
config: { duration: 280 },
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
|
@ -1,39 +1,4 @@
|
||||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
import React 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";
|
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
const keyCodeAssocs = {
|
const keyCodeAssocs = {
|
||||||
|
@ -55,242 +20,6 @@ export type StateManagerProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const EventManager = () => {
|
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 <></>;
|
return <></>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||||
import {
|
import { useMainSceneStore } from "../../store";
|
||||||
useLevelSelectionStore,
|
|
||||||
useMainSceneStore,
|
|
||||||
usePauseStore,
|
|
||||||
} from "../../store";
|
|
||||||
import handleMainSceneEvent from "../mainSceneEventHandler";
|
import handleMainSceneEvent from "../mainSceneEventHandler";
|
||||||
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||||
import NodeManager from "./MainSceneManagers/NodeManager";
|
import NodeManager from "./MainSceneManagers/NodeManager";
|
||||||
|
@ -37,10 +33,12 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
|
||||||
const sitePosY = useMainSceneStore((state) => state.sitePos[1]);
|
const sitePosY = useMainSceneStore((state) => state.sitePos[1]);
|
||||||
const activeLevel = useMainSceneStore((state) => state.activeLevel);
|
const activeLevel = useMainSceneStore((state) => state.activeLevel);
|
||||||
const mainSubscene = useMainSceneStore((state) => state.subscene);
|
const mainSubscene = useMainSceneStore((state) => state.subscene);
|
||||||
const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel);
|
const selectedLevel = useMainSceneStore((state) => state.selectedLevel);
|
||||||
const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
|
const pauseMatrixIdx = useMainSceneStore(
|
||||||
const activePauseComponent = usePauseStore(
|
(state) => state.pauseComponentMatrixIdx
|
||||||
useCallback((state) => state.componentMatrix[pauseMatrixIdx], [
|
);
|
||||||
|
const activePauseComponent = useMainSceneStore(
|
||||||
|
useCallback((state) => state.pauseComponentMatrix[pauseMatrixIdx], [
|
||||||
pauseMatrixIdx,
|
pauseMatrixIdx,
|
||||||
])
|
])
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,37 +1,22 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
import { useLevelSelectionStore } from "../../../store";
|
import { useMainSceneStore } from "../../../store";
|
||||||
|
|
||||||
const LevelSelectionManager = (props: StateManagerProps) => {
|
const LevelSelectionManager = (props: StateManagerProps) => {
|
||||||
const toggleLevelSelection = useLevelSelectionStore(
|
const setSelectedLevel = useMainSceneStore((state) => state.setSelectedLevel);
|
||||||
(state) => state.toggleLevelSelection
|
|
||||||
);
|
|
||||||
const setSelectedLevel = useLevelSelectionStore(
|
|
||||||
(state) => state.setSelectedLevel
|
|
||||||
);
|
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(eventState: { event: string; selectedLevelIdx: number }) => {
|
(eventState: { event: string; selectedLevelIdx: number }) => {
|
||||||
switch (eventState.event) {
|
switch (eventState.event) {
|
||||||
case "toggle_level_selection":
|
|
||||||
case "level_selection_back":
|
|
||||||
return {
|
|
||||||
action: toggleLevelSelection,
|
|
||||||
};
|
|
||||||
case "level_selection_up":
|
case "level_selection_up":
|
||||||
case "level_selection_down":
|
case "level_selection_down":
|
||||||
return {
|
return {
|
||||||
action: setSelectedLevel,
|
action: setSelectedLevel,
|
||||||
value: eventState.selectedLevelIdx,
|
value: eventState.selectedLevelIdx,
|
||||||
};
|
};
|
||||||
case "select_level_up":
|
|
||||||
case "select_level_down":
|
|
||||||
return {
|
|
||||||
action: toggleLevelSelection,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[setSelectedLevel, toggleLevelSelection]
|
[setSelectedLevel]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -37,14 +37,11 @@ const MiddleRingManager = (props: any) => {
|
||||||
|
|
||||||
const moveDown = useCallback(() => {
|
const moveDown = useCallback(() => {
|
||||||
// make noise appear again
|
// make noise appear again
|
||||||
setTimeout(() => {
|
|
||||||
setNoiseAmp(0.06);
|
|
||||||
}, 800);
|
|
||||||
|
|
||||||
// disable rotation of the ring
|
// disable rotation of the ring
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
setNoiseAmp(0.06);
|
||||||
setRotating(false);
|
setRotating(false);
|
||||||
}, 700);
|
}, 800);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setPos([0, 1.39, 0]);
|
setPos([0, 1.39, 0]);
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
import { usePauseStore } from "../../../store";
|
import { useMainSceneStore } from "../../../store";
|
||||||
|
|
||||||
const PauseComponentManager = (props: StateManagerProps) => {
|
const PauseComponentManager = (props: StateManagerProps) => {
|
||||||
const setComponentMatrixIdx = usePauseStore(
|
const setComponentMatrixIdx = useMainSceneStore(
|
||||||
(state) => state.setComponentMatrixIdx
|
(state) => state.setPauseComponentMatrixIdx
|
||||||
|
);
|
||||||
|
const setExitAnimation = useMainSceneStore(
|
||||||
|
(state) => state.setPauseExitAnimation
|
||||||
);
|
);
|
||||||
const setExitAnimation = usePauseStore((state) => state.setExitAnimation);
|
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(eventState: { event: string; pauseMatrixIdx: number }) => {
|
(eventState: { event: string; pauseMatrixIdx: number }) => {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
import { useMediaStore, useMediaWordStore } from "../../store";
|
import { useMainSceneStore, useMediaWordStore } from "../../store";
|
||||||
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||||
import SceneManager from "./GameManagers/SceneManager";
|
import SceneManager from "./GameManagers/SceneManager";
|
||||||
import handleMediaSceneEvent from "../mediaSceneEventHandler";
|
import handleMediaSceneEvent from "../mediaSceneEventHandler";
|
||||||
|
@ -8,23 +8,20 @@ import MediaYellowTextManager from "./MediaSceneManagers/MediaYellowTextManager"
|
||||||
|
|
||||||
const MediaSceneEventManager = () => {
|
const MediaSceneEventManager = () => {
|
||||||
// all the possible context needed to calculate new state
|
// all the possible context needed to calculate new state
|
||||||
const mediaComponentMatrixIndices = useMediaStore(
|
const activeMediaComponent = useMainSceneStore(
|
||||||
(state) => state.componentMatrixIndices
|
|
||||||
);
|
|
||||||
|
|
||||||
const activeMediaComponent = useMediaStore(
|
|
||||||
useCallback(
|
useCallback(
|
||||||
(state) =>
|
(state) =>
|
||||||
state.componentMatrix[mediaComponentMatrixIndices.sideIdx][
|
state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
|
||||||
mediaComponentMatrixIndices.sideIdx === 0
|
state.mediaComponentMatrixIndices.sideIdx === 0
|
||||||
? mediaComponentMatrixIndices.leftSideIdx
|
? state.mediaComponentMatrixIndices.leftSideIdx
|
||||||
: mediaComponentMatrixIndices.rightSideIdx
|
: state.mediaComponentMatrixIndices.rightSideIdx
|
||||||
],
|
],
|
||||||
[mediaComponentMatrixIndices]
|
[]
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
const rightSideComponentIdx = useMediaStore(
|
|
||||||
(state) => state.componentMatrixIndices.rightSideIdx
|
const rightSideComponentIdx = useMainSceneStore(
|
||||||
|
(state) => state.mediaComponentMatrixIndices.rightSideIdx
|
||||||
);
|
);
|
||||||
|
|
||||||
const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx);
|
const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx);
|
||||||
|
|
|
@ -1,26 +1,26 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
import { useMediaStore, useMediaWordStore } from "../../../store";
|
import { useMainSceneStore, useMediaWordStore } from "../../../store";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
|
||||||
const MediaComponentManager = (props: StateManagerProps) => {
|
const MediaComponentManager = (props: StateManagerProps) => {
|
||||||
const toggleSide = useMediaStore((state) => state.toggleSide);
|
const toggleSide = useMainSceneStore((state) => state.toggleMediaSide);
|
||||||
const setLeftComponentMatrixIdx = useMediaStore(
|
const setLeftComponentMatrixIdx = useMainSceneStore(
|
||||||
(state) => state.setLeftComponentMatrixIdx
|
(state) => state.setMediaLeftComponentMatrixIdx
|
||||||
);
|
);
|
||||||
const setRightComponentMatrixIdx = useMediaStore(
|
const setRightComponentMatrixIdx = useMainSceneStore(
|
||||||
(state) => state.setRightComponentMatrixIdx
|
(state) => state.setMediaRightComponentMatrixIdx
|
||||||
);
|
);
|
||||||
const setWordPosStateIdx = useMediaWordStore((state) => state.setPosStateIdx);
|
const setWordPosStateIdx = useMediaWordStore((state) => state.setPosStateIdx);
|
||||||
|
|
||||||
const resetComponentMatrixIndices = useMediaStore(
|
const resetComponentMatrixIndices = useMainSceneStore(
|
||||||
(state) => state.resetComponentMatrixIndices
|
(state) => state.resetMediaComponentMatrixIndices
|
||||||
);
|
);
|
||||||
const resetWordPosStateIdx = useMediaWordStore(
|
const resetWordPosStateIdx = useMediaWordStore(
|
||||||
(state) => state.resetPosStateIdx
|
(state) => state.resetPosStateIdx
|
||||||
);
|
);
|
||||||
|
|
||||||
const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
|
const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
|
||||||
|
|
||||||
const playMedia = useCallback(() => {
|
const playMedia = useCallback(() => {
|
||||||
const mediaElement = document.getElementById("media") as HTMLMediaElement;
|
const mediaElement = document.getElementById("media") as HTMLMediaElement;
|
||||||
|
@ -46,7 +46,7 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const updateRightSide = useCallback(
|
const updateRightSide = useCallback(
|
||||||
(newRightSideComponentIdx: number, newWordPosStateIdx: number) => {
|
(newRightSideComponentIdx: 0 | 1 | 2, newWordPosStateIdx: number) => {
|
||||||
setRightComponentMatrixIdx(newRightSideComponentIdx);
|
setRightComponentMatrixIdx(newRightSideComponentIdx);
|
||||||
setWordPosStateIdx(newWordPosStateIdx);
|
setWordPosStateIdx(newWordPosStateIdx);
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
import { useMediaStore, useSSknStore } from "../../../store";
|
import { useSSknStore } from "../../../store";
|
||||||
|
|
||||||
const SSknComponentManager = (props: StateManagerProps) => {
|
const SSknComponentManager = (props: StateManagerProps) => {
|
||||||
const toggleComponentMatrixIdx = useSSknStore(
|
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 React, { useEffect, useRef, useState } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import EndCylinder from "../components/EndScene/EndCylinder";
|
import { useEndSceneStore, useMainSceneStore } from "../store";
|
||||||
import EndSphere from "../components/EndScene/EndSphere";
|
|
||||||
import LainSpeak from "../components/LainSpeak";
|
|
||||||
import { useEndSceneStore, useMediaStore } from "../store";
|
|
||||||
import EndSelectionScreen from "../components/EndScene/EndSelectionScreen";
|
import EndSelectionScreen from "../components/EndScene/EndSelectionScreen";
|
||||||
|
|
||||||
const EndScene = () => {
|
const EndScene = () => {
|
||||||
const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
|
const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
|
||||||
|
|
||||||
const mediaPlayedCount = useEndSceneStore((state) => state.mediaPlayedCount);
|
const mediaPlayedCount = useEndSceneStore((state) => state.mediaPlayedCount);
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,12 @@
|
||||||
import { a } from "@react-spring/three";
|
import { a } from "@react-spring/three";
|
||||||
import { OrbitControls } from "@react-three/drei";
|
import { OrbitControls } from "@react-three/drei";
|
||||||
import React, { Suspense, useEffect, useMemo } from "react";
|
import React, { Suspense, useEffect, useMemo } from "react";
|
||||||
import Site from "../components/MainScene/SyncedComponents/Site";
|
|
||||||
import Lain from "../components/MainScene/Lain";
|
import Lain from "../components/MainScene/Lain";
|
||||||
import Preloader from "../components/Preloader";
|
import Preloader from "../components/Preloader";
|
||||||
import MiddleRing from "../components/MainScene/SyncedComponents/MiddleRing";
|
|
||||||
import { useMainSceneStore } from "../store";
|
import { useMainSceneStore } from "../store";
|
||||||
import Pause from "../components/MainScene/PauseSubscene/Pause";
|
import Pause from "../components/MainScene/PauseSubscene/Pause";
|
||||||
import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader";
|
import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader";
|
||||||
import LevelSelection from "../components/MainScene/SyncedComponents/LevelSelection";
|
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 MainScene = () => {
|
||||||
const currentSubscene = useMainSceneStore((state) => state.subscene);
|
const currentSubscene = useMainSceneStore((state) => state.subscene);
|
||||||
|
@ -31,6 +27,7 @@ const MainScene = () => {
|
||||||
<a.group>
|
<a.group>
|
||||||
<Preloader />
|
<Preloader />
|
||||||
<LevelSelection />
|
<LevelSelection />
|
||||||
|
<Pause paused={isPaused} />
|
||||||
<SyncedComponentLoader paused={isPaused} shouldIntro={shouldIntro} />
|
<SyncedComponentLoader paused={isPaused} shouldIntro={shouldIntro} />
|
||||||
<OrbitControls />
|
<OrbitControls />
|
||||||
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import React, { useCallback, useEffect } from "react";
|
||||||
import { useMainSceneStore, useMediaStore } from "../store";
|
import { useMainSceneStore } from "../store";
|
||||||
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
||||||
import RightSide from "../components/MediaScene/Selectables/RightSide";
|
import RightSide from "../components/MediaScene/Selectables/RightSide";
|
||||||
import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
|
import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
|
||||||
|
@ -12,10 +12,6 @@ import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextA
|
||||||
import MediaSceneEventManager from "../core/StateManagers/MediaSceneEventManager";
|
import MediaSceneEventManager from "../core/StateManagers/MediaSceneEventManager";
|
||||||
|
|
||||||
const MediaScene = () => {
|
const MediaScene = () => {
|
||||||
const mediaComponentMatrixIndices = useMediaStore(
|
|
||||||
(state) => state.componentMatrixIndices
|
|
||||||
);
|
|
||||||
|
|
||||||
const activeNodeName = useMainSceneStore((state) =>
|
const activeNodeName = useMainSceneStore((state) =>
|
||||||
state.activeNode.node_name.split("")
|
state.activeNode.node_name.split("")
|
||||||
);
|
);
|
||||||
|
@ -23,15 +19,15 @@ const MediaScene = () => {
|
||||||
(state) => state.activeNode.media_file
|
(state) => state.activeNode.media_file
|
||||||
);
|
);
|
||||||
|
|
||||||
const activeMediaComponent = useMediaStore(
|
const activeMediaComponent = useMainSceneStore(
|
||||||
useCallback(
|
useCallback(
|
||||||
(state) =>
|
(state) =>
|
||||||
state.componentMatrix[mediaComponentMatrixIndices.sideIdx][
|
state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
|
||||||
mediaComponentMatrixIndices.sideIdx === 0
|
state.mediaComponentMatrixIndices.sideIdx === 0
|
||||||
? mediaComponentMatrixIndices.leftSideIdx
|
? state.mediaComponentMatrixIndices.leftSideIdx
|
||||||
: mediaComponentMatrixIndices.rightSideIdx
|
: state.mediaComponentMatrixIndices.rightSideIdx
|
||||||
],
|
],
|
||||||
[mediaComponentMatrixIndices]
|
[]
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -48,7 +44,7 @@ const MediaScene = () => {
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<group position={[0.4, -0.3, 0]}>
|
<group position={[0.4, -0.3, 0]}>
|
||||||
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||||
<LeftSide activeMediaComponent={activeMediaComponent} />
|
<LeftSide activeMediaComponent={activeMediaComponent!} />
|
||||||
<group position={[0, 0.5, -3]}>
|
<group position={[0, 0.5, -3]}>
|
||||||
<MediaLoadingBar />
|
<MediaLoadingBar />
|
||||||
<NodeNameContainer />
|
<NodeNameContainer />
|
||||||
|
@ -61,7 +57,7 @@ const MediaScene = () => {
|
||||||
<MediaYellowTextAnimator />
|
<MediaYellowTextAnimator />
|
||||||
|
|
||||||
<group visible={activeNodeMedia.includes("XA")}>
|
<group visible={activeNodeMedia.includes("XA")}>
|
||||||
<RightSide activeMediaComponent={activeMediaComponent} />
|
<RightSide activeMediaComponent={activeMediaComponent!} />
|
||||||
<Lof />
|
<Lof />
|
||||||
<AudioVisualizer />
|
<AudioVisualizer />
|
||||||
<Images />
|
<Images />
|
||||||
|
|
|
@ -2,7 +2,7 @@ import React, { useCallback } from "react";
|
||||||
import SSknIcon from "../components/SSknScene/SSknIcon";
|
import SSknIcon from "../components/SSknScene/SSknIcon";
|
||||||
import SSknBackground from "../components/SSknScene/SSknBackground";
|
import SSknBackground from "../components/SSknScene/SSknBackground";
|
||||||
import SSknHUD from "../components/SSknScene/SSknHUD";
|
import SSknHUD from "../components/SSknScene/SSknHUD";
|
||||||
import { useMediaStore, useSSknStore } from "../store";
|
import { useSSknStore } from "../store";
|
||||||
import SSknSceneManager from "../core/StateManagers/SSknSceneManager";
|
import SSknSceneManager from "../core/StateManagers/SSknSceneManager";
|
||||||
|
|
||||||
const SSknScene = () => {
|
const SSknScene = () => {
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import LainSpeak from "../components/LainSpeak";
|
import LainSpeak from "../components/LainSpeak";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useMediaStore, useSceneStore } from "../store";
|
import { useMainSceneStore, useSceneStore } from "../store";
|
||||||
|
|
||||||
const TaKScene = () => {
|
const TaKScene = () => {
|
||||||
const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
|
const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
|
||||||
const setScene = useSceneStore((state) => state.setScene);
|
const setScene = useSceneStore((state) => state.setScene);
|
||||||
|
|
||||||
const [isIntro, setIsIntro] = useState(true);
|
const [isIntro, setIsIntro] = useState(true);
|
||||||
const [isOutro, setIsOutro] = useState(false);
|
const [isOutro, setIsOutro] = useState(false);
|
||||||
|
|
||||||
const percentageElapsed = useMediaStore(
|
const percentageElapsed = useMainSceneStore(
|
||||||
(state) => state.mediaPercentageElapsed
|
(state) => state.mediaPercentageElapsed
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
164
src/store.ts
164
src/store.ts
|
@ -1,8 +1,6 @@
|
||||||
import create from "zustand";
|
import create from "zustand";
|
||||||
import { combine } from "zustand/middleware";
|
import { combine } from "zustand/middleware";
|
||||||
import * as THREE from "three";
|
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 authorize_user_letters from "./resources/authorize_user_letters.json";
|
||||||
import game_progress from "./resources/initial_progress.json";
|
import game_progress from "./resources/initial_progress.json";
|
||||||
import { HUDType } from "./components/MainScene/SyncedComponents/HUD";
|
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 = {
|
type SceneState = {
|
||||||
currentScene: string;
|
currentScene: string;
|
||||||
setScene: (to: string) => void;
|
setScene: (to: string) => void;
|
||||||
|
@ -179,62 +162,6 @@ export const useIdleStore = create<IdleState>((set) => ({
|
||||||
setImages: (to) => set(() => ({ images: to })),
|
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) => ({
|
export const useMediaWordStore = create<MediaWordState>((set) => ({
|
||||||
posStateIdx: 1,
|
posStateIdx: 1,
|
||||||
setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
|
setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
|
||||||
|
@ -252,7 +179,7 @@ export const useSSknStore = create<SSknState>((set) => ({
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useSceneStore = create<SceneState>((set) => ({
|
export const useSceneStore = create<SceneState>((set) => ({
|
||||||
currentScene: "main",
|
currentScene: "media",
|
||||||
setScene: (to) => set(() => ({ currentScene: to })),
|
setScene: (to) => set(() => ({ currentScene: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
@ -331,6 +258,16 @@ type MainSceneState = {
|
||||||
pauseComponentMatrix: [string, string, string, string, string];
|
pauseComponentMatrix: [string, string, string, string, string];
|
||||||
pauseComponentMatrixIdx: number;
|
pauseComponentMatrixIdx: number;
|
||||||
pauseExitAnimation: boolean;
|
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(
|
export const useMainSceneStore = create(
|
||||||
|
@ -349,7 +286,7 @@ export const useMainSceneStore = create(
|
||||||
bigText: "Tda028",
|
bigText: "Tda028",
|
||||||
bigTextVisible: true,
|
bigTextVisible: true,
|
||||||
bigTextColor: "yellow",
|
bigTextColor: "yellow",
|
||||||
bigTextPos: [-0.35, 0.23, 0],
|
bigTextPos: [-0.35, 0.23, -8.7],
|
||||||
bigTextXOffset: 0,
|
bigTextXOffset: 0,
|
||||||
|
|
||||||
// hud
|
// hud
|
||||||
|
@ -377,6 +314,7 @@ export const useMainSceneStore = create(
|
||||||
|
|
||||||
// nodes
|
// nodes
|
||||||
activeNode: {
|
activeNode: {
|
||||||
|
id: "0422",
|
||||||
image_table_indices: {
|
image_table_indices: {
|
||||||
"1": "93",
|
"1": "93",
|
||||||
"2": "356",
|
"2": "356",
|
||||||
|
@ -435,12 +373,27 @@ export const useMainSceneStore = create(
|
||||||
|
|
||||||
// level selection
|
// level selection
|
||||||
selectedLevel: 4,
|
selectedLevel: 4,
|
||||||
levelSelectionToggled: false,
|
|
||||||
|
|
||||||
// pause
|
// pause
|
||||||
pauseComponentMatrix: ["load", "about", "change", "save", "exit"],
|
pauseComponentMatrix: ["load", "about", "change", "save", "exit"],
|
||||||
pauseComponentMatrixIdx: 2,
|
pauseComponentMatrixIdx: 2,
|
||||||
pauseExitAnimation: false,
|
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,
|
} as MainSceneState,
|
||||||
(set) => ({
|
(set) => ({
|
||||||
// subscene setters
|
// subscene setters
|
||||||
|
@ -511,16 +464,49 @@ export const useMainSceneStore = create(
|
||||||
|
|
||||||
// level selection setters
|
// level selection setters
|
||||||
setSelectedLevel: (to: number) => set(() => ({ selectedLevel: to })),
|
setSelectedLevel: (to: number) => set(() => ({ selectedLevel: to })),
|
||||||
toggleLevelSelection: () =>
|
|
||||||
set((state) => ({
|
|
||||||
levelSelectionToggled: !state.levelSelectionToggled,
|
|
||||||
})),
|
|
||||||
|
|
||||||
// pause setters
|
// pause setters
|
||||||
setPauseComponentMatrixIdx: (to: number) =>
|
setPauseComponentMatrixIdx: (to: number) =>
|
||||||
set(() => ({ pauseComponentMatrixIdx: to })),
|
set(() => ({ pauseComponentMatrixIdx: to })),
|
||||||
setPauseExitAnimation: (to: boolean) =>
|
setPauseExitAnimation: (to: boolean) =>
|
||||||
set(() => ({ pauseExitAnimation: to })),
|
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 })),
|
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(
|
export const useSiteSaveStore = create(
|
||||||
combine(
|
combine(
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in a new issue