mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
added more stuff to load data subscene
This commit is contained in:
parent
556a758e24
commit
d260ad98a6
10 changed files with 236 additions and 59 deletions
|
@ -169,6 +169,7 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
lofPosX: lofPosX,
|
lofPosX: lofPosX,
|
||||||
lofPosY: lofPosY,
|
lofPosY: lofPosY,
|
||||||
lofOpacity: props.activeSubScene === "main_menu" ? 1 : 0,
|
lofOpacity: props.activeSubScene === "main_menu" ? 1 : 0,
|
||||||
|
graySquareOpacity: props.activeSubScene === "main_menu" ? 1 : 0,
|
||||||
config: { duration: 500 },
|
config: { duration: 500 },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -190,7 +191,18 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
opacity={animationState.lofOpacity}
|
opacity={animationState.lofOpacity}
|
||||||
/>
|
/>
|
||||||
</a.sprite>
|
</a.sprite>
|
||||||
{props.visible && props.activeSubScene === "main_menu" ? (
|
<a.sprite
|
||||||
|
scale={[0.2, 0.2, 0]}
|
||||||
|
position-y={animationState.graySquarePosY}
|
||||||
|
>
|
||||||
|
<a.spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={bootGraySquareTex}
|
||||||
|
ref={graySquareRef}
|
||||||
|
opacity={animationState.graySquareOpacity}
|
||||||
|
/>
|
||||||
|
</a.sprite>
|
||||||
|
{props.visible && props.activeSubScene !== "authorize_user" ? (
|
||||||
<>
|
<>
|
||||||
{/*we have two of each to create looping effect*/}
|
{/*we have two of each to create looping effect*/}
|
||||||
<a.sprite
|
<a.sprite
|
||||||
|
@ -304,17 +316,6 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
opacity={bootState.bootOpacity}
|
opacity={bootState.bootOpacity}
|
||||||
/>
|
/>
|
||||||
</sprite>
|
</sprite>
|
||||||
|
|
||||||
<a.sprite
|
|
||||||
scale={[0.2, 0.2, 0]}
|
|
||||||
position-y={animationState.graySquarePosY}
|
|
||||||
>
|
|
||||||
<spriteMaterial
|
|
||||||
attach="material"
|
|
||||||
map={bootGraySquareTex}
|
|
||||||
ref={graySquareRef}
|
|
||||||
/>
|
|
||||||
</a.sprite>
|
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
|
|
107
src/components/Boot/BootLoadData.tsx
Normal file
107
src/components/Boot/BootLoadData.tsx
Normal file
|
@ -0,0 +1,107 @@
|
||||||
|
import React from "react";
|
||||||
|
import loadDataUnderline from "../../static/sprite/load_data_header_underline.png";
|
||||||
|
import loadDataQuestionContainer from "../../static/sprite/load_data_question_container.png";
|
||||||
|
import loadDataAnswerContainer from "../../static/sprite/load_data_answer_container.png";
|
||||||
|
import areYouSure from "../../static/sprite/are_you_sure.png";
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
|
||||||
|
const BootLoadData = (props: BootLoadDataProps) => {
|
||||||
|
const loadDataUnderlineTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
loadDataUnderline
|
||||||
|
);
|
||||||
|
const loadDataQuestionContainerTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
loadDataQuestionContainer
|
||||||
|
);
|
||||||
|
const loadDataAnswerContainerTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
loadDataAnswerContainer
|
||||||
|
);
|
||||||
|
const areYouSureTex = useLoader(THREE.TextureLoader, areYouSure);
|
||||||
|
const yesTex = useLoader(THREE.TextureLoader, yes);
|
||||||
|
const noTex = useLoader(THREE.TextureLoader, no);
|
||||||
|
|
||||||
|
const activeLoadDataElement = useBootStore(
|
||||||
|
(state) => state.activeLoadDataElement
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{props.visible ? (
|
||||||
|
<>
|
||||||
|
<sprite scale={[4.1, 0.3, 0]} renderOrder={2} position={[0, 0.2, 0]}>
|
||||||
|
<spriteMaterial
|
||||||
|
map={loadDataQuestionContainerTex}
|
||||||
|
attach="material"
|
||||||
|
transparent={true}
|
||||||
|
opacity={0.6}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
|
||||||
|
<sprite scale={[2, 0.24, 0]} renderOrder={3} position={[0, 0.19, 0]}>
|
||||||
|
<spriteMaterial
|
||||||
|
map={areYouSureTex}
|
||||||
|
attach="material"
|
||||||
|
transparent={true}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
|
||||||
|
<sprite
|
||||||
|
scale={[0.5, 0.19, 0]}
|
||||||
|
renderOrder={3}
|
||||||
|
position={[-1.2, -0.2, 0]}
|
||||||
|
>
|
||||||
|
<spriteMaterial map={yesTex} attach="material" transparent={true} />
|
||||||
|
</sprite>
|
||||||
|
|
||||||
|
<sprite
|
||||||
|
scale={[0.7, 0.3, 0]}
|
||||||
|
renderOrder={2}
|
||||||
|
position={
|
||||||
|
activeLoadDataElement === "yes" ? [-1.2, -0.2, 0] : [1.2, -0.2, 0]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
map={loadDataAnswerContainerTex}
|
||||||
|
attach="material"
|
||||||
|
transparent={true}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
|
||||||
|
<sprite
|
||||||
|
scale={[0.4, 0.19, 0]}
|
||||||
|
renderOrder={3}
|
||||||
|
position={[1.2, -0.2, 0]}
|
||||||
|
>
|
||||||
|
<spriteMaterial map={noTex} attach="material" transparent={true} />
|
||||||
|
</sprite>
|
||||||
|
|
||||||
|
<sprite
|
||||||
|
scale={[3.5, 0.01, 0]}
|
||||||
|
position={[-0.5, -1.15, 0]}
|
||||||
|
renderOrder={2}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
map={loadDataUnderlineTex}
|
||||||
|
attach="material"
|
||||||
|
transparent={true}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BootLoadData;
|
|
@ -6,8 +6,9 @@ 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 { useBootMainMenuStore } from "../../store";
|
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";
|
||||||
|
|
||||||
type BootMainMenuProps = {
|
type BootMainMenuProps = {
|
||||||
visible: boolean;
|
visible: boolean;
|
||||||
|
@ -15,10 +16,10 @@ type BootMainMenuProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
||||||
const activeMainMenuElement = useBootMainMenuStore(
|
const activeMainMenuElement = useBootStore(
|
||||||
(state) => state.activeMainMenuElement
|
(state) => state.activeMainMenuElement
|
||||||
);
|
);
|
||||||
const authorizeUserPos = useBootMainMenuStore(
|
const authorizeUserPos = useBootStore(
|
||||||
(state) => state.authorizeUserPos
|
(state) => state.authorizeUserPos
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -34,11 +35,17 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
||||||
|
|
||||||
const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive);
|
const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive);
|
||||||
const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive);
|
const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive);
|
||||||
|
const loadDataHeaderTex = useLoader(THREE.TextureLoader, loadDataHeader);
|
||||||
|
|
||||||
|
const loadDataPos = useBootStore((state) => state.loadDataPos);
|
||||||
|
|
||||||
const mainMenuAnimationState = useSpring({
|
const mainMenuAnimationState = useSpring({
|
||||||
authorizeUserPosX: authorizeUserPos.x,
|
authorizeUserPosX: authorizeUserPos.x,
|
||||||
authorizeUserPosY: authorizeUserPos.y,
|
authorizeUserPosY: authorizeUserPos.y,
|
||||||
loadDataOpacity: props.activeSubScene === "main_menu" ? 1 : 0,
|
authorizeUserOpacity: props.activeSubScene !== "load_data" ? 1 : 0,
|
||||||
|
loadDataOpacity: props.activeSubScene !== "authorize_user" ? 1 : 0,
|
||||||
|
loadDataPosX: loadDataPos.x,
|
||||||
|
loadDataPosY: loadDataPos.y,
|
||||||
config: { duration: 500 },
|
config: { duration: 500 },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -62,6 +69,26 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
||||||
props.activeSubScene,
|
props.activeSubScene,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const loadDataTextState = useMemo(() => {
|
||||||
|
if (props.activeSubScene === "load_data") {
|
||||||
|
return { scale: [1.4, 0.16, 0], texture: loadDataHeaderTex };
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
scale: [1.4, 0.3, 0],
|
||||||
|
texture:
|
||||||
|
activeMainMenuElement === "load_data"
|
||||||
|
? loadDataActiveTex
|
||||||
|
: loadDataInactiveTex,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
activeMainMenuElement,
|
||||||
|
loadDataActiveTex,
|
||||||
|
loadDataHeaderTex,
|
||||||
|
loadDataInactiveTex,
|
||||||
|
props.activeSubScene,
|
||||||
|
]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{props.visible ? (
|
{props.visible ? (
|
||||||
|
@ -72,25 +99,23 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
||||||
position-x={mainMenuAnimationState.authorizeUserPosX}
|
position-x={mainMenuAnimationState.authorizeUserPosX}
|
||||||
position-y={mainMenuAnimationState.authorizeUserPosY}
|
position-y={mainMenuAnimationState.authorizeUserPosY}
|
||||||
>
|
>
|
||||||
<spriteMaterial
|
<a.spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={authorizeUserTextState.texture}
|
map={authorizeUserTextState.texture}
|
||||||
transparent={true}
|
transparent={true}
|
||||||
|
opacity={mainMenuAnimationState.authorizeUserOpacity}
|
||||||
/>
|
/>
|
||||||
</a.sprite>
|
</a.sprite>
|
||||||
|
|
||||||
<a.sprite
|
<a.sprite
|
||||||
scale={[1.4, 0.3, 0]}
|
scale={loadDataTextState.scale as [number, number, number]}
|
||||||
renderOrder={1}
|
renderOrder={1}
|
||||||
position={[0, -0.5, 0]}
|
position-x={mainMenuAnimationState.loadDataPosX}
|
||||||
|
position-y={mainMenuAnimationState.loadDataPosY}
|
||||||
>
|
>
|
||||||
<a.spriteMaterial
|
<a.spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={
|
map={loadDataTextState.texture}
|
||||||
activeMainMenuElement === "load_data"
|
|
||||||
? loadDataActiveTex
|
|
||||||
: loadDataInactiveTex
|
|
||||||
}
|
|
||||||
transparent={true}
|
transparent={true}
|
||||||
opacity={mainMenuAnimationState.loadDataOpacity}
|
opacity={mainMenuAnimationState.loadDataOpacity}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,35 +1,56 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
import { useBootMainMenuStore } from "../../store";
|
import { useBootStore } from "../../store";
|
||||||
|
|
||||||
const MainMenuManager = (props: StateManagerProps) => {
|
const BootManager = (props: StateManagerProps) => {
|
||||||
const setActiveMainMenuElement = useBootMainMenuStore(
|
const setActiveMainMenuElement = useBootStore(
|
||||||
(state) => state.setActiveMainMenuElement
|
(state) => state.setActiveMainMenuElement
|
||||||
);
|
);
|
||||||
const setAuthorizeUserPos = useBootMainMenuStore(
|
const setActiveLoadDataElement = useBootStore(
|
||||||
|
(state) => state.setActiveLoadDataElement
|
||||||
|
);
|
||||||
|
const setAuthorizeUserPos = useBootStore(
|
||||||
(state) => state.setAuthorizeUserPos
|
(state) => state.setAuthorizeUserPos
|
||||||
);
|
);
|
||||||
|
const setLoadDataPos = useBootStore((state) => state.setLoadDataPos);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(event: string) => {
|
(event: string) => {
|
||||||
const dispatcherObjects = {
|
const dispatcherObjects = {
|
||||||
switch_to_load_data: {
|
main_menu_down: {
|
||||||
action: setActiveMainMenuElement,
|
action: setActiveMainMenuElement,
|
||||||
value: "load_data",
|
value: "load_data",
|
||||||
},
|
},
|
||||||
switch_to_authorize_user: {
|
main_menu_up: {
|
||||||
action: setActiveMainMenuElement,
|
action: setActiveMainMenuElement,
|
||||||
value: "authorize_user",
|
value: "authorize_user",
|
||||||
},
|
},
|
||||||
|
load_data_left: {
|
||||||
|
action: setActiveLoadDataElement,
|
||||||
|
value: "yes",
|
||||||
|
},
|
||||||
|
load_data_right: {
|
||||||
|
action: setActiveLoadDataElement,
|
||||||
|
value: "no",
|
||||||
|
},
|
||||||
select_authorize_user: {
|
select_authorize_user: {
|
||||||
action: setAuthorizeUserPos,
|
action: setAuthorizeUserPos,
|
||||||
value: { x: 1.13, y: 1.2 },
|
value: { x: 1.13, y: 1.2 },
|
||||||
},
|
},
|
||||||
|
select_load_data: {
|
||||||
|
action: setLoadDataPos,
|
||||||
|
value: { x: -1.13, y: -1 },
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
},
|
},
|
||||||
[setActiveMainMenuElement, setAuthorizeUserPos]
|
[
|
||||||
|
setActiveLoadDataElement,
|
||||||
|
setActiveMainMenuElement,
|
||||||
|
setAuthorizeUserPos,
|
||||||
|
setLoadDataPos,
|
||||||
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -45,4 +66,4 @@ const MainMenuManager = (props: StateManagerProps) => {
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default MainMenuManager;
|
export default BootManager;
|
|
@ -6,11 +6,12 @@ import BlueOrbManager from "./BlueOrbManager";
|
||||||
import BlueOrbHUDManager from "./BlueOrbHUDManager";
|
import BlueOrbHUDManager from "./BlueOrbHUDManager";
|
||||||
import {
|
import {
|
||||||
useBlueOrbStore,
|
useBlueOrbStore,
|
||||||
useBootMainMenuStore,
|
useBootStore,
|
||||||
useLevelStore,
|
useLevelStore,
|
||||||
useMediaStore,
|
useMediaStore,
|
||||||
useSceneStore,
|
useSceneStore,
|
||||||
useSiteStore,
|
useSiteStore,
|
||||||
|
useSubsceneStore,
|
||||||
} from "../../store";
|
} from "../../store";
|
||||||
import GreenTextManager from "./GreenTextManager";
|
import GreenTextManager from "./GreenTextManager";
|
||||||
import MediaComponentManager from "./MediaComponentManager";
|
import MediaComponentManager from "./MediaComponentManager";
|
||||||
|
@ -21,7 +22,7 @@ import YellowTextManager from "./YellowTextManager";
|
||||||
import MediaImageManager from "./MediaImageManager";
|
import MediaImageManager from "./MediaImageManager";
|
||||||
import computeAction from "../computeAction";
|
import computeAction from "../computeAction";
|
||||||
import LevelManager from "./LevelManager";
|
import LevelManager from "./LevelManager";
|
||||||
import MainMenuManager from "./MainMenuManager";
|
import BootManager from "./BootManager";
|
||||||
import SubSceneManager from "./SubSceneManager";
|
import SubSceneManager from "./SubSceneManager";
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
|
@ -50,6 +51,7 @@ export type StateManagerProps = {
|
||||||
export type GameContext = {
|
export type GameContext = {
|
||||||
keyPress?: string;
|
keyPress?: string;
|
||||||
scene: string;
|
scene: string;
|
||||||
|
subscene: string;
|
||||||
blueOrbMatrixIndices: { rowIdx: number; colIdx: number };
|
blueOrbMatrixIndices: { rowIdx: number; colIdx: number };
|
||||||
currentLevel: string;
|
currentLevel: string;
|
||||||
siteRotIdx: string;
|
siteRotIdx: string;
|
||||||
|
@ -59,6 +61,7 @@ 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 blueOrbMatrixIndices = useBlueOrbStore(
|
const blueOrbMatrixIndices = useBlueOrbStore(
|
||||||
|
@ -73,7 +76,7 @@ const EventManager = () => {
|
||||||
);
|
);
|
||||||
|
|
||||||
// boot scene
|
// boot scene
|
||||||
const activeMainMenuElement = useBootMainMenuStore(
|
const activeMainMenuElement = useBootStore(
|
||||||
(state) => state.activeMainMenuElement
|
(state) => state.activeMainMenuElement
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -84,6 +87,7 @@ const EventManager = () => {
|
||||||
const gameContext: GameContext = useMemo(
|
const gameContext: GameContext = useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
scene: currentScene,
|
scene: currentScene,
|
||||||
|
subscene: currentSubscene,
|
||||||
siteRotIdx: siteRotIdx,
|
siteRotIdx: siteRotIdx,
|
||||||
blueOrbMatrixIndices: blueOrbMatrixIndices,
|
blueOrbMatrixIndices: blueOrbMatrixIndices,
|
||||||
currentLevel: currentLevel,
|
currentLevel: currentLevel,
|
||||||
|
@ -96,6 +100,7 @@ const EventManager = () => {
|
||||||
blueOrbMatrixIndices,
|
blueOrbMatrixIndices,
|
||||||
currentLevel,
|
currentLevel,
|
||||||
currentScene,
|
currentScene,
|
||||||
|
currentSubscene,
|
||||||
siteRotIdx,
|
siteRotIdx,
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
@ -138,7 +143,7 @@ const EventManager = () => {
|
||||||
<YellowTextManager eventState={eventState!} />
|
<YellowTextManager eventState={eventState!} />
|
||||||
<MediaImageManager eventState={eventState!} />
|
<MediaImageManager eventState={eventState!} />
|
||||||
<LevelManager eventState={eventState!} />
|
<LevelManager eventState={eventState!} />
|
||||||
<MainMenuManager eventState={eventState!} />
|
<BootManager eventState={eventState!} />
|
||||||
<SubSceneManager eventState={eventState!} />
|
<SubSceneManager eventState={eventState!} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,24 +1,29 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
import { useBootStore } from "../../store";
|
import { useSubsceneStore } from "../../store";
|
||||||
|
|
||||||
const SubSceneManager = (props: StateManagerProps) => {
|
const SubSceneManager = (props: StateManagerProps) => {
|
||||||
const setActiveBootSubScene = useBootStore(
|
const setActiveSubscene = useSubsceneStore(
|
||||||
(state) => state.setActiveBootSubScene
|
(state) => state.setActiveSubScene
|
||||||
);
|
);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(event: string) => {
|
(event: string) => {
|
||||||
const dispatcherObjects = {
|
const dispatcherObjects = {
|
||||||
select_authorize_user: {
|
select_authorize_user: {
|
||||||
action: setActiveBootSubScene,
|
action: setActiveSubscene,
|
||||||
value: "authorize_user",
|
value: "authorize_user",
|
||||||
delay: 0,
|
delay: 0,
|
||||||
},
|
},
|
||||||
|
select_load_data: {
|
||||||
|
action: setActiveSubscene,
|
||||||
|
value: "load_data",
|
||||||
|
delay: 0,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
},
|
},
|
||||||
[setActiveBootSubScene]
|
[setActiveSubscene]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -1,18 +1,20 @@
|
||||||
import { GameContext } from "./StateManagers/EventManager";
|
import { GameContext } from "./StateManagers/EventManager";
|
||||||
|
|
||||||
const handleBootMainMenuEvent = (gameContext: GameContext) => {
|
const handleBootEvent = (gameContext: GameContext) => {
|
||||||
const keyPress = gameContext.keyPress;
|
const keyPress = gameContext.keyPress;
|
||||||
|
|
||||||
const activeMainMenuElement = gameContext.activeMainMenuElement;
|
const activeMainMenuElement = gameContext.activeMainMenuElement;
|
||||||
|
const currentSubscene = gameContext.subscene;
|
||||||
|
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "down":
|
case "down":
|
||||||
return { event: "switch_to_load_data" };
|
|
||||||
case "up":
|
case "up":
|
||||||
return { event: "switch_to_authorize_user" };
|
case "left":
|
||||||
|
case "right":
|
||||||
|
return { event: `${currentSubscene}_${keyPress}` };
|
||||||
case "select":
|
case "select":
|
||||||
return { event: `select_${activeMainMenuElement}` };
|
return { event: `select_${activeMainMenuElement}` };
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default handleBootMainMenuEvent;
|
export default handleBootEvent;
|
|
@ -1,7 +1,7 @@
|
||||||
import { GameContext } from "./StateManagers/EventManager";
|
import { GameContext } from "./StateManagers/EventManager";
|
||||||
import handleMainSceneEvent from "./mainSceneEventHandler";
|
import handleMainSceneEvent from "./mainSceneEventHandler";
|
||||||
import handleMediaSceneEvent from "./mediaSceneEventHandler";
|
import handleMediaSceneEvent from "./mediaSceneEventHandler";
|
||||||
import handleBootMainMenuEvent from "./bootMainMenuEventHandler";
|
import handleBootMainMenuEvent from "./bootEventHandler";
|
||||||
|
|
||||||
const computeAction = (gameContext: GameContext) => {
|
const computeAction = (gameContext: GameContext) => {
|
||||||
switch (gameContext.scene) {
|
switch (gameContext.scene) {
|
||||||
|
|
|
@ -2,11 +2,12 @@ import React, { 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 { useBootStore } from "../store";
|
import { useSubsceneStore } from "../store";
|
||||||
import BootAuthorizeUser from "../components/Boot/BootAuthorizeUser";
|
import BootAuthorizeUser from "../components/Boot/BootAuthorizeUser";
|
||||||
|
import BootLoadData from "../components/Boot/BootLoadData";
|
||||||
|
|
||||||
const BootScene = () => {
|
const BootScene = () => {
|
||||||
const activeBootSubScene = useBootStore((state) => state.activeBootSubScene);
|
const activeSubscene = useSubsceneStore((state) => state.activeSubscene);
|
||||||
|
|
||||||
const [accelaVisible, setAccelaVisible] = useState(true);
|
const [accelaVisible, setAccelaVisible] = useState(true);
|
||||||
const [mainMenuVisible, setMainMenuVisible] = useState(false);
|
const [mainMenuVisible, setMainMenuVisible] = useState(false);
|
||||||
|
@ -27,13 +28,14 @@ const BootScene = () => {
|
||||||
<BootAccela visible={accelaVisible} />
|
<BootAccela visible={accelaVisible} />
|
||||||
<BootAnimation
|
<BootAnimation
|
||||||
visible={!accelaVisible}
|
visible={!accelaVisible}
|
||||||
activeSubScene={activeBootSubScene}
|
activeSubScene={activeSubscene}
|
||||||
/>
|
/>
|
||||||
<BootMainMenuComponents
|
<BootMainMenuComponents
|
||||||
visible={mainMenuVisible}
|
visible={mainMenuVisible}
|
||||||
activeSubScene={activeBootSubScene}
|
activeSubScene={activeSubscene}
|
||||||
/>
|
/>
|
||||||
<BootAuthorizeUser visible={activeBootSubScene === "authorize_user"} />
|
<BootAuthorizeUser visible={activeSubscene === "authorize_user"} />
|
||||||
|
<BootLoadData visible={activeSubscene === "load_data"} />
|
||||||
</perspectiveCamera>
|
</perspectiveCamera>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
25
src/store.ts
25
src/store.ts
|
@ -158,16 +158,20 @@ type ImageState = {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
type BootState = {
|
type SubsceneState = {
|
||||||
activeBootSubScene: string;
|
activeSubscene: string;
|
||||||
setActiveBootSubScene: (to: string) => void;
|
setActiveSubScene: (to: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type MainMenuState = {
|
type MainMenuState = {
|
||||||
activeMainMenuElement: string;
|
activeMainMenuElement: string;
|
||||||
authorizeUserPos: { x: number; y: number };
|
authorizeUserPos: { x: number; y: number };
|
||||||
|
loadDataPos: { x: number; y: number };
|
||||||
setAuthorizeUserPos: (to: { x: number; y: number }) => void;
|
setAuthorizeUserPos: (to: { x: number; y: number }) => void;
|
||||||
setActiveMainMenuElement: (to: string) => void;
|
setActiveMainMenuElement: (to: string) => void;
|
||||||
|
setLoadDataPos: (to: { x: number; y: number }) => void;
|
||||||
|
activeLoadDataElement: string;
|
||||||
|
setActiveLoadDataElement: (to: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useTextRendererStore = create<TextRendererState>((set) => ({
|
export const useTextRendererStore = create<TextRendererState>((set) => ({
|
||||||
|
@ -395,20 +399,25 @@ export const useSceneStore = create<SceneState>((set) => ({
|
||||||
setScene: (to) => set(() => ({ currentScene: to })),
|
setScene: (to) => set(() => ({ currentScene: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useBootStore = create<BootState>((set) => ({
|
export const useSubsceneStore = create<SubsceneState>((set) => ({
|
||||||
activeBootSubScene: "authorize_user",
|
activeSubscene: "load_data",
|
||||||
setActiveBootSubScene: (to) => set(() => ({ activeBootSubScene: to })),
|
setActiveSubScene: (to) => set(() => ({ activeSubscene: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useBootMainMenuStore = create<MainMenuState>((set) => ({
|
export const useBootStore = create<MainMenuState>((set) => ({
|
||||||
activeMainMenuElement: "authorize_user",
|
activeMainMenuElement: "authorize_user",
|
||||||
authorizeUserPos: { x: 0, y: 0.5 },
|
authorizeUserPos: { x: 0, y: 0.5 },
|
||||||
|
loadDataPos: { x: 0, y: -0.5 },
|
||||||
setActiveMainMenuElement: (to: string) =>
|
setActiveMainMenuElement: (to: string) =>
|
||||||
set(() => ({ activeMainMenuElement: to })),
|
set(() => ({ activeMainMenuElement: to })),
|
||||||
setAuthorizeUserPos: (to: { x: number; y: number }) =>
|
setAuthorizeUserPos: (to) =>
|
||||||
set(() => ({
|
set(() => ({
|
||||||
authorizeUserPos: to,
|
authorizeUserPos: to,
|
||||||
})),
|
})),
|
||||||
|
setLoadDataPos: (to) => set(() => ({ loadDataPos: to })),
|
||||||
|
activeLoadDataElement: "yes",
|
||||||
|
setActiveLoadDataElement: (to: string) =>
|
||||||
|
set(() => ({ activeLoadDataElement: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useImageStore = create(
|
export const useImageStore = create(
|
||||||
|
|
Loading…
Reference in a new issue