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