mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
made boot state a bit better, still wip
This commit is contained in:
parent
a4b42ebee2
commit
c522cfd48c
13 changed files with 216 additions and 218 deletions
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import React, { useRef } from "react";
|
||||
import authorizeHeaderUnderline from "../../static/sprite/authorize_header_underline.png";
|
||||
import authorizeGlass from "../../static/sprite/authorize_glass.png";
|
||||
import authorizeGlassUnderline from "../../static/sprite/authorize_glass_underline.png";
|
||||
|
@ -37,6 +37,12 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
|||
|
||||
const backgroundLetterRef = useRef<THREE.Object3D>();
|
||||
|
||||
useFrame(() => {
|
||||
if (backgroundLetterRef.current) {
|
||||
// backgroundLetterRef.current.position.x += 0.01
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{props.visible ? (
|
||||
|
@ -73,6 +79,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
|||
map={authorizeGlassTex}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
</sprite>
|
||||
<sprite
|
||||
|
@ -84,6 +91,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
|||
map={authorizeOrangeSquareTex}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
</sprite>
|
||||
|
||||
|
@ -96,23 +104,25 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
|||
map={authorizeGlassUnderlineTex}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
</sprite>
|
||||
|
||||
<mesh
|
||||
scale={[4, 1.28, 0]}
|
||||
position={[-1.06, 0.3, -0.3]}
|
||||
rotation={[-1, 0, -0.3]}
|
||||
renderOrder={-1}
|
||||
ref={backgroundLetterRef}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
<meshBasicMaterial
|
||||
map={authorizeInactiveLettersTex}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
/>
|
||||
</mesh>
|
||||
<group position={[-1.15, 0.4, 0.3]} rotation={[-0.8, 0, -0.3]}>
|
||||
<mesh
|
||||
scale={[4, 1.28, 0]}
|
||||
renderOrder={-1}
|
||||
position={[-0.45, -0.6, 0]}
|
||||
ref={backgroundLetterRef}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
<meshBasicMaterial
|
||||
map={authorizeInactiveLettersTex}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
|
|
|
@ -7,10 +7,10 @@ import yes from "../../static/sprite/Yes.png";
|
|||
import no from "../../static/sprite/No.png";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import { useBootStore } from "../../store";
|
||||
|
||||
type BootLoadDataProps = {
|
||||
visible: boolean;
|
||||
activeBootElement: string;
|
||||
};
|
||||
|
||||
const BootLoadData = (props: BootLoadDataProps) => {
|
||||
|
@ -30,8 +30,6 @@ const BootLoadData = (props: BootLoadDataProps) => {
|
|||
const yesTex = useLoader(THREE.TextureLoader, yes);
|
||||
const noTex = useLoader(THREE.TextureLoader, no);
|
||||
|
||||
const activeBootElement = useBootStore((state) => state.activeBootElement);
|
||||
|
||||
return (
|
||||
<>
|
||||
{props.visible ? (
|
||||
|
@ -65,7 +63,7 @@ const BootLoadData = (props: BootLoadDataProps) => {
|
|||
scale={[0.7, 0.3, 0]}
|
||||
renderOrder={2}
|
||||
position={
|
||||
activeBootElement === "load_data_yes"
|
||||
props.activeBootElement === "load_data_yes"
|
||||
? [-1.2, -0.2, 0]
|
||||
: [1.2, -0.2, 0]
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useMemo } from "react";
|
||||
import React, { useEffect, useMemo } from "react";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import authorizeActive from "../../static/sprite/authorize_user_active.png";
|
||||
import authorizeInactive from "../../static/sprite/authorize_user_inactive.png";
|
||||
|
@ -6,18 +6,16 @@ import loadDataActive from "../../static/sprite/load_data_active.png";
|
|||
import loadDataInactive from "../../static/sprite/load_data_inactive.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { useBootStore } from "../../store";
|
||||
import authorizeUserHeader from "../../static/sprite/authorize_user_scene_header.png";
|
||||
import loadDataHeader from "../../static/sprite/load_data_header.png";
|
||||
|
||||
type BootMainMenuProps = {
|
||||
visible: boolean;
|
||||
activeSubScene: string;
|
||||
activeBootElement: string;
|
||||
};
|
||||
|
||||
const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
||||
const activeBootElement = useBootStore((state) => state.activeBootElement);
|
||||
|
||||
const authorizeActiveTex = useLoader(THREE.TextureLoader, authorizeActive);
|
||||
const authorizeInactiveTex = useLoader(
|
||||
THREE.TextureLoader,
|
||||
|
@ -41,17 +39,17 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
|||
} else {
|
||||
return {
|
||||
texture:
|
||||
activeBootElement === "load_data"
|
||||
props.activeBootElement === "load_data"
|
||||
? loadDataActiveTex
|
||||
: loadDataInactiveTex,
|
||||
position: { x: 0, y: -0.5 },
|
||||
};
|
||||
}
|
||||
}, [
|
||||
activeBootElement,
|
||||
loadDataActiveTex,
|
||||
loadDataHeaderTex,
|
||||
loadDataInactiveTex,
|
||||
props.activeBootElement,
|
||||
props.activeSubScene,
|
||||
]);
|
||||
|
||||
|
@ -66,17 +64,17 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
|||
return {
|
||||
scale: [1.8, 0.3, 0],
|
||||
texture:
|
||||
activeBootElement === "authorize_user"
|
||||
props.activeBootElement === "authorize_user"
|
||||
? authorizeActiveTex
|
||||
: authorizeInactiveTex,
|
||||
position: { x: 0, y: 0.5 },
|
||||
};
|
||||
}
|
||||
}, [
|
||||
activeBootElement,
|
||||
authorizeActiveTex,
|
||||
authorizeInactiveTex,
|
||||
authorizeUserHeaderTex,
|
||||
props.activeBootElement,
|
||||
props.activeSubScene,
|
||||
]);
|
||||
|
||||
|
|
|
@ -2,74 +2,70 @@ import React, { createRef, MutableRefObject, useMemo } from "react";
|
|||
import * as THREE from "three";
|
||||
import { useFrame } from "react-three-fiber";
|
||||
import AudioVisualizerColumn from "./AudioVisualizerColumn";
|
||||
import { useMediaStore } from "../../../store";
|
||||
|
||||
const AudioVisualizer = () => {
|
||||
const analyser = useMemo(() => {
|
||||
const listener = new THREE.AudioListener();
|
||||
const analyser = useMediaStore((state) => state.audioAnalyser);
|
||||
|
||||
const audio = new THREE.Audio(listener);
|
||||
audio.setMediaElementSource(
|
||||
document.getElementById("media") as HTMLMediaElement
|
||||
);
|
||||
|
||||
return new THREE.AudioAnalyser(audio, 2048);
|
||||
}, []);
|
||||
|
||||
const columnRefs = useMemo(() => {
|
||||
return Array.from({ length: 15 }, () => [
|
||||
createRef<THREE.Object3D>(),
|
||||
createRef<THREE.Object3D>(),
|
||||
createRef<THREE.Object3D>(),
|
||||
createRef<THREE.Object3D>(),
|
||||
]);
|
||||
}, []);
|
||||
const columnRefs = useMemo(
|
||||
() =>
|
||||
Array.from({ length: 15 }, () => [
|
||||
createRef<THREE.Object3D>(),
|
||||
createRef<THREE.Object3D>(),
|
||||
createRef<THREE.Object3D>(),
|
||||
createRef<THREE.Object3D>(),
|
||||
]),
|
||||
[]
|
||||
);
|
||||
|
||||
useFrame(() => {
|
||||
const frequencyData = analyser.getFrequencyData();
|
||||
if (analyser) {
|
||||
const frequencyData = analyser.getFrequencyData();
|
||||
|
||||
columnRefs.forEach((refArray, idx) => {
|
||||
const ref1 = refArray[0];
|
||||
const ref2 = refArray[1];
|
||||
const ref3 = refArray[2];
|
||||
const ref4 = refArray[3];
|
||||
columnRefs.forEach((refArray, idx) => {
|
||||
const ref1 = refArray[0];
|
||||
const ref2 = refArray[1];
|
||||
const ref3 = refArray[2];
|
||||
const ref4 = refArray[3];
|
||||
|
||||
// we up it by 1.2 just so it becomes a bit more noticable, otherwise
|
||||
// the visualizer is a bit too "calm"
|
||||
const currentFrequency = frequencyData[32 * idx] * 1.2;
|
||||
// we up it by 1.2 just so it becomes a bit more noticable, otherwise
|
||||
// the visualizer is a bit too "calm"
|
||||
const currentFrequency = frequencyData[32 * idx] * 1.2;
|
||||
|
||||
switch (true) {
|
||||
case currentFrequency >= 255:
|
||||
ref1.current!.visible = true;
|
||||
ref2.current!.visible = true;
|
||||
ref3.current!.visible = true;
|
||||
ref4.current!.visible = true;
|
||||
break;
|
||||
case currentFrequency >= 192:
|
||||
ref1.current!.visible = true;
|
||||
ref2.current!.visible = true;
|
||||
ref3.current!.visible = true;
|
||||
ref4.current!.visible = false;
|
||||
break;
|
||||
case currentFrequency >= 128:
|
||||
ref1.current!.visible = true;
|
||||
ref2.current!.visible = true;
|
||||
ref3.current!.visible = false;
|
||||
ref4.current!.visible = false;
|
||||
break;
|
||||
case currentFrequency >= 64:
|
||||
ref1.current!.visible = true;
|
||||
ref2.current!.visible = false;
|
||||
ref3.current!.visible = false;
|
||||
ref4.current!.visible = false;
|
||||
break;
|
||||
default:
|
||||
ref1.current!.visible = false;
|
||||
ref2.current!.visible = false;
|
||||
ref3.current!.visible = false;
|
||||
ref4.current!.visible = false;
|
||||
break;
|
||||
}
|
||||
});
|
||||
switch (true) {
|
||||
case currentFrequency >= 255:
|
||||
ref1.current!.visible = true;
|
||||
ref2.current!.visible = true;
|
||||
ref3.current!.visible = true;
|
||||
ref4.current!.visible = true;
|
||||
break;
|
||||
case currentFrequency >= 192:
|
||||
ref1.current!.visible = true;
|
||||
ref2.current!.visible = true;
|
||||
ref3.current!.visible = true;
|
||||
ref4.current!.visible = false;
|
||||
break;
|
||||
case currentFrequency >= 128:
|
||||
ref1.current!.visible = true;
|
||||
ref2.current!.visible = true;
|
||||
ref3.current!.visible = false;
|
||||
ref4.current!.visible = false;
|
||||
break;
|
||||
case currentFrequency >= 64:
|
||||
ref1.current!.visible = true;
|
||||
ref2.current!.visible = false;
|
||||
ref3.current!.visible = false;
|
||||
ref4.current!.visible = false;
|
||||
break;
|
||||
default:
|
||||
ref1.current!.visible = false;
|
||||
ref2.current!.visible = false;
|
||||
ref3.current!.visible = false;
|
||||
ref4.current!.visible = false;
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
|
@ -32,6 +32,7 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
|
|||
scale={[0.4, 0.4, 0.4]}
|
||||
position={[-5.2, 3.8, 0]}
|
||||
renderOrder={10}
|
||||
visible={false}
|
||||
ref={ref1}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
|
@ -47,6 +48,7 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
|
|||
scale={[0.4, 0.4, 0.4]}
|
||||
position={[-4.65, 3.8, 0]}
|
||||
ref={ref2}
|
||||
visible={false}
|
||||
renderOrder={5}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
|
@ -63,6 +65,7 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
|
|||
scale={[0.4, 0.4, 0.4]}
|
||||
position={[-4.1, 3.8, 0]}
|
||||
ref={ref3}
|
||||
visible={false}
|
||||
renderOrder={5}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
|
@ -78,6 +81,7 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
|
|||
scale={[0.4, 0.4, 0.4]}
|
||||
position={[-3.55, 3.8, 0]}
|
||||
renderOrder={10}
|
||||
visible={false}
|
||||
ref={ref4}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
|
|
|
@ -35,8 +35,6 @@ const MediaPlayer = () => {
|
|||
<video
|
||||
width="800"
|
||||
height="600"
|
||||
controls
|
||||
autoPlay
|
||||
id="media"
|
||||
ref={videoRef}
|
||||
style={{ display: currentScene === "media" ? "block" : "none" }}
|
||||
|
|
|
@ -3,49 +3,42 @@ import { StateManagerProps } from "./EventManager";
|
|||
import { useBootStore } from "../../store";
|
||||
|
||||
const BootManager = (props: StateManagerProps) => {
|
||||
const setActiveBootElement = useBootStore(
|
||||
(state) => state.setActiveBootElement
|
||||
const toggleComponentMatrixIdx = useBootStore(
|
||||
(state) => state.toggleComponentMatrixIdx
|
||||
);
|
||||
const setBootSubscene = useBootStore((state) => state.setSubscene);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(event: string) => {
|
||||
switch (event) {
|
||||
case "main_menu_down":
|
||||
return {
|
||||
action: setActiveBootElement,
|
||||
value: "load_data",
|
||||
};
|
||||
case "main_menu_up":
|
||||
return {
|
||||
action: setActiveBootElement,
|
||||
value: "authorize_user",
|
||||
action: toggleComponentMatrixIdx,
|
||||
value: "main_menu",
|
||||
};
|
||||
case "load_data_left":
|
||||
return {
|
||||
action: setActiveBootElement,
|
||||
value: "load_data_yes",
|
||||
};
|
||||
case "load_data_right":
|
||||
return {
|
||||
action: setActiveBootElement,
|
||||
value: "load_data_no",
|
||||
};
|
||||
case "authorize_user_back":
|
||||
case "select_authorize_user":
|
||||
return {
|
||||
action: setActiveBootElement,
|
||||
value: "authorize_user",
|
||||
};
|
||||
case "load_data_no":
|
||||
return {
|
||||
action: setActiveBootElement,
|
||||
action: toggleComponentMatrixIdx,
|
||||
value: "load_data",
|
||||
};
|
||||
case "select_load_data":
|
||||
return { action: setActiveBootElement, value: "load_data_yes" };
|
||||
case "authorize_user_back":
|
||||
case "load_data_no_select":
|
||||
return {
|
||||
action: setBootSubscene,
|
||||
value: "main_menu",
|
||||
};
|
||||
case "authorize_user_select":
|
||||
return {
|
||||
action: setBootSubscene,
|
||||
value: "authorize_user",
|
||||
};
|
||||
case "load_data_select":
|
||||
return { action: setBootSubscene, value: "load_data" };
|
||||
}
|
||||
},
|
||||
[setActiveBootElement]
|
||||
[setBootSubscene, toggleComponentMatrixIdx]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
@ -11,7 +11,6 @@ import {
|
|||
useMediaStore,
|
||||
useSceneStore,
|
||||
useSiteStore,
|
||||
useSubsceneStore,
|
||||
useSSknStore,
|
||||
} from "../../store";
|
||||
import GreenTextManager from "./GreenTextManager";
|
||||
|
@ -23,7 +22,6 @@ import MediaImageManager from "./MediaImageManager";
|
|||
import computeAction from "../computeAction";
|
||||
import LevelManager from "./LevelManager";
|
||||
import BootManager from "./BootManager";
|
||||
import SubSceneManager from "./SubSceneManager";
|
||||
import SSknComponentManager from "./SSknComponentManager";
|
||||
|
||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||
|
@ -54,7 +52,7 @@ export type StateManagerProps = {
|
|||
export type GameContext = {
|
||||
keyPress?: string;
|
||||
scene: string;
|
||||
subscene: string;
|
||||
bootSubscene: string;
|
||||
nodeMatrixIndices: { rowIdx: number; colIdx: number };
|
||||
currentLevel: string;
|
||||
siteRotIdx: string;
|
||||
|
@ -65,7 +63,6 @@ export type GameContext = {
|
|||
|
||||
const EventManager = () => {
|
||||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
const currentSubscene = useSubsceneStore((state) => state.activeSubscene);
|
||||
|
||||
// main scene
|
||||
const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
|
||||
|
@ -90,7 +87,6 @@ const EventManager = () => {
|
|||
);
|
||||
|
||||
// sskn scene
|
||||
|
||||
const ssknComponentMatrixIdx = useSSknStore(
|
||||
(state) => state.componentMatrixIdx
|
||||
);
|
||||
|
@ -101,7 +97,16 @@ const EventManager = () => {
|
|||
);
|
||||
|
||||
// boot scene
|
||||
const activeBootElement = useBootStore((state) => state.activeBootElement);
|
||||
const currentBootSubscene = useBootStore((state) => state.subscene);
|
||||
const activeBootElement = useBootStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
state.componentMatrix[currentBootSubscene][
|
||||
state.componentMatrixIndices[currentBootSubscene]
|
||||
],
|
||||
[currentBootSubscene]
|
||||
)
|
||||
);
|
||||
|
||||
const [eventState, setEventState] = useState<any>();
|
||||
|
||||
|
@ -110,7 +115,7 @@ const EventManager = () => {
|
|||
const gameContext: GameContext = useMemo(
|
||||
() => ({
|
||||
scene: currentScene,
|
||||
subscene: currentSubscene,
|
||||
bootSubscene: currentBootSubscene,
|
||||
siteRotIdx: siteRotIdx,
|
||||
nodeMatrixIndices: nodeMatrixIndices,
|
||||
currentLevel: currentLevel,
|
||||
|
@ -120,7 +125,7 @@ const EventManager = () => {
|
|||
}),
|
||||
[
|
||||
currentScene,
|
||||
currentSubscene,
|
||||
currentBootSubscene,
|
||||
siteRotIdx,
|
||||
nodeMatrixIndices,
|
||||
currentLevel,
|
||||
|
@ -168,7 +173,6 @@ const EventManager = () => {
|
|||
<MediaImageManager eventState={eventState!} />
|
||||
<LevelManager eventState={eventState!} />
|
||||
<BootManager eventState={eventState!} />
|
||||
<SubSceneManager eventState={eventState!} />
|
||||
<SSknComponentManager eventState={eventState!} />
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "./EventManager";
|
||||
import { useMediaStore } from "../../store";
|
||||
import * as THREE from "three";
|
||||
|
||||
const MediaComponentManager = (props: StateManagerProps) => {
|
||||
const toggleSide = useMediaStore((state) => state.toggleSide);
|
||||
|
@ -15,10 +16,24 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
|||
(state) => state.resetComponentMatrixIndices
|
||||
);
|
||||
|
||||
const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
|
||||
|
||||
const playMedia = useCallback(() => {
|
||||
const mediaElement = document.getElementById("media") as HTMLMediaElement;
|
||||
if (mediaElement) mediaElement.play().then((r) => console.log(r));
|
||||
}, []);
|
||||
|
||||
const listener = new THREE.AudioListener();
|
||||
const audio = new THREE.Audio(listener);
|
||||
|
||||
audio.setMediaElementSource(
|
||||
document.getElementById("media") as HTMLMediaElement
|
||||
);
|
||||
|
||||
setAudioAnalyser(new THREE.AudioAnalyser(audio, 2048));
|
||||
|
||||
if (mediaElement) {
|
||||
mediaElement.play();
|
||||
}
|
||||
}, [setAudioAnalyser]);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(event: string) => {
|
||||
|
|
|
@ -1,50 +0,0 @@
|
|||
import { useCallback, useEffect } from "react";
|
||||
import { StateManagerProps } from "./EventManager";
|
||||
import { useSubsceneStore } from "../../store";
|
||||
|
||||
const SubSceneManager = (props: StateManagerProps) => {
|
||||
const setActiveSubscene = useSubsceneStore(
|
||||
(state) => state.setActiveSubScene
|
||||
);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(event: string) => {
|
||||
switch (event) {
|
||||
case "authorize_user_back":
|
||||
return {
|
||||
action: setActiveSubscene,
|
||||
value: "main_menu",
|
||||
};
|
||||
case "select_authorize_user":
|
||||
return { action: setActiveSubscene, value: "authorize_user" };
|
||||
case "select_load_data":
|
||||
return {
|
||||
action: setActiveSubscene,
|
||||
value: "load_data",
|
||||
};
|
||||
case "select_load_data_no":
|
||||
return {
|
||||
action: setActiveSubscene,
|
||||
value: "main_menu",
|
||||
};
|
||||
}
|
||||
},
|
||||
[setActiveSubscene]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const eventAction = props.eventState.event;
|
||||
|
||||
const dispatchedObject = dispatchObject(eventAction);
|
||||
|
||||
if (dispatchedObject) {
|
||||
dispatchedObject.action(dispatchedObject.value);
|
||||
}
|
||||
}
|
||||
}, [props.eventState, dispatchObject]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default SubSceneManager;
|
|
@ -4,7 +4,7 @@ const handleBootEvent = (gameContext: GameContext) => {
|
|||
const keyPress = gameContext.keyPress;
|
||||
|
||||
const activeBootElement = gameContext.activeBootElement;
|
||||
const currentSubscene = gameContext.subscene;
|
||||
const currentSubscene = gameContext.bootSubscene;
|
||||
|
||||
switch (keyPress) {
|
||||
case "down":
|
||||
|
@ -14,7 +14,7 @@ const handleBootEvent = (gameContext: GameContext) => {
|
|||
case "back":
|
||||
return { event: `${currentSubscene}_${keyPress}` };
|
||||
case "select":
|
||||
return { event: `select_${activeBootElement}` };
|
||||
return { event: `${activeBootElement}_${keyPress}` };
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -1,13 +1,22 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import BootAccela from "../components/Boot/BootAccela";
|
||||
import BootAnimation from "../components/Boot/BootAnimation";
|
||||
import BootMainMenuComponents from "../components/Boot/BootMainMenuComponents";
|
||||
import { useSubsceneStore } from "../store";
|
||||
import { useBootStore } from "../store";
|
||||
import BootAuthorizeUser from "../components/Boot/BootAuthorizeUser";
|
||||
import BootLoadData from "../components/Boot/BootLoadData";
|
||||
|
||||
const BootScene = () => {
|
||||
const activeSubscene = useSubsceneStore((state) => state.activeSubscene);
|
||||
const activeSubscene = useBootStore((state) => state.subscene);
|
||||
const activeBootElement = useBootStore(
|
||||
useCallback(
|
||||
(state) =>
|
||||
state.componentMatrix[activeSubscene][
|
||||
state.componentMatrixIndices[activeSubscene]
|
||||
],
|
||||
[activeSubscene]
|
||||
)
|
||||
);
|
||||
|
||||
const [accelaVisible, setAccelaVisible] = useState(true);
|
||||
const [mainMenuVisible, setMainMenuVisible] = useState(false);
|
||||
|
@ -26,16 +35,17 @@ const BootScene = () => {
|
|||
return (
|
||||
<perspectiveCamera position-z={3}>
|
||||
<BootAccela visible={accelaVisible} />
|
||||
<BootAnimation
|
||||
visible={!accelaVisible}
|
||||
activeSubScene={activeSubscene}
|
||||
/>
|
||||
<BootAnimation visible={!accelaVisible} activeSubScene={activeSubscene} />
|
||||
<BootMainMenuComponents
|
||||
visible={mainMenuVisible}
|
||||
activeSubScene={activeSubscene}
|
||||
activeBootElement={activeBootElement}
|
||||
/>
|
||||
<BootAuthorizeUser visible={activeSubscene === "authorize_user"} />
|
||||
<BootLoadData visible={activeSubscene === "load_data"} />
|
||||
<BootLoadData
|
||||
visible={activeSubscene === "load_data"}
|
||||
activeBootElement={activeBootElement}
|
||||
/>
|
||||
</perspectiveCamera>
|
||||
);
|
||||
};
|
||||
|
|
84
src/store.ts
84
src/store.ts
|
@ -1,5 +1,6 @@
|
|||
import create from "zustand";
|
||||
import { combine } from "zustand/middleware";
|
||||
import * as THREE from "three";
|
||||
|
||||
type SceneState = {
|
||||
currentScene: string;
|
||||
|
@ -114,17 +115,6 @@ type MediaWordState = {
|
|||
resetWordPositionDataStructIdx: () => void;
|
||||
};
|
||||
|
||||
type MediaState = {
|
||||
mediaPercentageElapsed: number;
|
||||
activeMediaComponent: string;
|
||||
setActiveMediaComponent: (to: string) => void;
|
||||
lastActiveLeftSideElement: string;
|
||||
setLastActiveLeftSideElement: (to: string) => void;
|
||||
lastActiveRightSideElement: string;
|
||||
setLastActiveRightSideElement: (to: string) => void;
|
||||
setPercentageElapsed: (to: number) => void;
|
||||
};
|
||||
|
||||
export type TextRendererState = {
|
||||
yellowText: string;
|
||||
yellowTextPosY: number;
|
||||
|
@ -158,16 +148,6 @@ type ImageState = {
|
|||
};
|
||||
};
|
||||
|
||||
type SubsceneState = {
|
||||
activeSubscene: string;
|
||||
setActiveSubScene: (to: string) => void;
|
||||
};
|
||||
|
||||
type MainMenuState = {
|
||||
activeBootElement: string;
|
||||
setActiveBootElement: (to: string) => void;
|
||||
};
|
||||
|
||||
type GateState = {
|
||||
gateLvl: number;
|
||||
incrementGateLvl: () => void;
|
||||
|
@ -315,6 +295,7 @@ export const useLevelStore = create<LevelState>((set) => ({
|
|||
export const useMediaStore = create(
|
||||
combine(
|
||||
{
|
||||
audioAnalyser: undefined,
|
||||
mediaPercentageElapsed: 0,
|
||||
componentMatrix: [
|
||||
["play", "exit"],
|
||||
|
@ -372,6 +353,8 @@ export const useMediaStore = create(
|
|||
})),
|
||||
setPercentageElapsed: (to: number) =>
|
||||
set(() => ({ mediaPercentageElapsed: to })),
|
||||
setAudioAnalyser: (to: THREE.AudioAnalyser) =>
|
||||
set(() => ({ audioAnalyser: to })),
|
||||
})
|
||||
)
|
||||
);
|
||||
|
@ -459,19 +442,58 @@ export const useSSknStore = create<SSknState>((set) => ({
|
|||
}));
|
||||
|
||||
export const useSceneStore = create<SceneState>((set) => ({
|
||||
currentScene: "sskn",
|
||||
currentScene: "boot",
|
||||
setScene: (to) => set(() => ({ currentScene: to })),
|
||||
}));
|
||||
|
||||
export const useSubsceneStore = create<SubsceneState>((set) => ({
|
||||
activeSubscene: "authorize_user",
|
||||
setActiveSubScene: (to) => set(() => ({ activeSubscene: to })),
|
||||
}));
|
||||
|
||||
export const useBootStore = create<MainMenuState>((set) => ({
|
||||
activeBootElement: "load_data_yes",
|
||||
setActiveBootElement: (to: string) => set(() => ({ activeBootElement: to })),
|
||||
}));
|
||||
export const useBootStore = create(
|
||||
combine(
|
||||
{
|
||||
componentMatrix: {
|
||||
main_menu: ["authorize_user", "load_data"],
|
||||
load_data: ["load_data_yes", "load_data_no"],
|
||||
authorize_user: ["authorize_user_letters"],
|
||||
},
|
||||
authorizeUserLetterMatrix: {
|
||||
xIndices: [
|
||||
3.35,
|
||||
3.05,
|
||||
2.75,
|
||||
2.45,
|
||||
2.15,
|
||||
1.85,
|
||||
1.55,
|
||||
1.25,
|
||||
0.75,
|
||||
0.45,
|
||||
0.15,
|
||||
-0.15,
|
||||
-0.45,
|
||||
],
|
||||
},
|
||||
componentMatrixIndices: {
|
||||
// 0 or 1
|
||||
main_menu: 0,
|
||||
// 0 or 1
|
||||
load_data: 0,
|
||||
// only 0 (depends on external dataset)
|
||||
authorize_user: 0,
|
||||
},
|
||||
// main_menu, load_data or authorize_user
|
||||
subscene: "authorize_user",
|
||||
} as any,
|
||||
(set) => ({
|
||||
toggleComponentMatrixIdx: (subscene: string) =>
|
||||
set((state) => ({
|
||||
componentMatrixIndices: {
|
||||
...state.componentMatrixIndices,
|
||||
[subscene]: Number(!state.componentMatrixIndices[subscene]),
|
||||
},
|
||||
})),
|
||||
setSubscene: (to: string) => set(() => ({ subscene: to })),
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
export const useImageStore = create(
|
||||
combine(
|
||||
|
|
Loading…
Reference in a new issue