mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
adding authorization scene
This commit is contained in:
parent
81cabd0667
commit
556a758e24
11 changed files with 354 additions and 101 deletions
Binary file not shown.
Before Width: | Height: | Size: 3.7 KiB |
|
@ -14,10 +14,10 @@ import bootBackgroundDistortedTex from "../../static/sprite/distorted_text.png";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { OrbitControls } from "@react-three/drei";
|
|
||||||
|
|
||||||
type BootAnimationProps = {
|
type BootAnimationProps = {
|
||||||
visible: boolean;
|
visible: boolean;
|
||||||
|
activeSubScene: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const BootAnimation = (props: BootAnimationProps) => {
|
const BootAnimation = (props: BootAnimationProps) => {
|
||||||
|
@ -149,7 +149,8 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
setLofPosY(1);
|
setLofPosY(1);
|
||||||
|
|
||||||
setBackgroundFloatingTextShown(true);
|
setBackgroundFloatingTextShown(true);
|
||||||
}, 4200);
|
//4200
|
||||||
|
}, 0);
|
||||||
}
|
}
|
||||||
}, [bootBackgroundTextTex, currentBootStatusTextTex.offset, props.visible]);
|
}, [bootBackgroundTextTex, currentBootStatusTextTex.offset, props.visible]);
|
||||||
|
|
||||||
|
@ -163,11 +164,12 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
config: { duration: 300 },
|
config: { duration: 300 },
|
||||||
});
|
});
|
||||||
|
|
||||||
const positionState = useSpring({
|
const animationState = useSpring({
|
||||||
graySquarePosY: graySquarePosY,
|
graySquarePosY: graySquarePosY,
|
||||||
lofPosX: lofPosX,
|
lofPosX: lofPosX,
|
||||||
lofPosY: lofPosY,
|
lofPosY: lofPosY,
|
||||||
config: { duration: 600 },
|
lofOpacity: props.activeSubScene === "main_menu" ? 1 : 0,
|
||||||
|
config: { duration: 500 },
|
||||||
});
|
});
|
||||||
|
|
||||||
const firstBackgroundTextRef = useRef<THREE.Object3D>();
|
const firstBackgroundTextRef = useRef<THREE.Object3D>();
|
||||||
|
@ -177,7 +179,18 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{props.visible ? (
|
<a.sprite
|
||||||
|
scale={[1.2, 0.4, 0]}
|
||||||
|
position-x={animationState.lofPosX}
|
||||||
|
position-y={animationState.lofPosY}
|
||||||
|
>
|
||||||
|
<a.spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={bootLofTex}
|
||||||
|
opacity={animationState.lofOpacity}
|
||||||
|
/>
|
||||||
|
</a.sprite>
|
||||||
|
{props.visible && props.activeSubScene === "main_menu" ? (
|
||||||
<>
|
<>
|
||||||
{/*we have two of each to create looping effect*/}
|
{/*we have two of each to create looping effect*/}
|
||||||
<a.sprite
|
<a.sprite
|
||||||
|
@ -237,14 +250,6 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
/>
|
/>
|
||||||
</a.sprite>
|
</a.sprite>
|
||||||
</group>
|
</group>
|
||||||
|
|
||||||
<a.sprite
|
|
||||||
scale={[1.2, 0.4, 0]}
|
|
||||||
position-x={positionState.lofPosX}
|
|
||||||
position-y={positionState.lofPosY}
|
|
||||||
>
|
|
||||||
<spriteMaterial attach="material" map={bootLofTex} />
|
|
||||||
</a.sprite>
|
|
||||||
<sprite scale={[2.2, 0.66, 0]} position={[-1.1, -0.8, 0]}>
|
<sprite scale={[2.2, 0.66, 0]} position={[-1.1, -0.8, 0]}>
|
||||||
<a.spriteMaterial
|
<a.spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
|
@ -302,7 +307,7 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
|
|
||||||
<a.sprite
|
<a.sprite
|
||||||
scale={[0.2, 0.2, 0]}
|
scale={[0.2, 0.2, 0]}
|
||||||
position-y={positionState.graySquarePosY}
|
position-y={animationState.graySquarePosY}
|
||||||
>
|
>
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
|
|
121
src/components/Boot/BootAuthorizeUser.tsx
Normal file
121
src/components/Boot/BootAuthorizeUser.tsx
Normal file
|
@ -0,0 +1,121 @@
|
||||||
|
import React 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";
|
||||||
|
import authorizeOrangeSquare from "../../static/sprite/authorize_orange_square.png";
|
||||||
|
import authorizeStartToFinish from "../../static/sprite/authorize_start_to_finish.png";
|
||||||
|
import authorizeInactiveLetters from "../../static/sprite/authorize_inactive_letters.png";
|
||||||
|
import { useLoader } from "react-three-fiber";
|
||||||
|
import * as THREE from "three";
|
||||||
|
|
||||||
|
type BootAuthorizeUserProps = {
|
||||||
|
visible: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
||||||
|
const authorizeHeaderUnderlineTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
authorizeHeaderUnderline
|
||||||
|
);
|
||||||
|
const authorizeGlassTex = useLoader(THREE.TextureLoader, authorizeGlass);
|
||||||
|
const authorizeGlassUnderlineTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
authorizeGlassUnderline
|
||||||
|
);
|
||||||
|
const authorizeOrangeSquareTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
authorizeOrangeSquare
|
||||||
|
);
|
||||||
|
const authorizeStartToFinishTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
authorizeStartToFinish
|
||||||
|
);
|
||||||
|
const authorizeInactiveLettersTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
authorizeInactiveLetters
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{props.visible ? (
|
||||||
|
<>
|
||||||
|
<sprite
|
||||||
|
scale={[3.5, 0.01, 0]}
|
||||||
|
position={[0.5, 1.1, 0]}
|
||||||
|
renderOrder={2}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
map={authorizeHeaderUnderlineTex}
|
||||||
|
attach="material"
|
||||||
|
transparent={true}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
<sprite
|
||||||
|
scale={[2.2 * 0.9, 0.15 * 0.9, 0]}
|
||||||
|
position={[1, 1, 0]}
|
||||||
|
renderOrder={2}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
map={authorizeStartToFinishTex}
|
||||||
|
attach="material"
|
||||||
|
transparent={true}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
|
||||||
|
<sprite
|
||||||
|
scale={[0.85, 0.65, 0]}
|
||||||
|
position={[0.35, -0.1, 0]}
|
||||||
|
renderOrder={3}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
map={authorizeGlassTex}
|
||||||
|
attach="material"
|
||||||
|
transparent={true}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
<sprite
|
||||||
|
scale={[0.2, 0.2, 0]}
|
||||||
|
position={[-0.2, -0.3, 0]}
|
||||||
|
renderOrder={3}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
map={authorizeOrangeSquareTex}
|
||||||
|
attach="material"
|
||||||
|
transparent={true}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
|
||||||
|
<sprite
|
||||||
|
scale={[2, 0.01, 0]}
|
||||||
|
position={[-1.06, -0.42, 0]}
|
||||||
|
renderOrder={2}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
map={authorizeGlassUnderlineTex}
|
||||||
|
attach="material"
|
||||||
|
transparent={true}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
|
||||||
|
<mesh
|
||||||
|
scale={[5*1.5, 1.28*1.5, 0]}
|
||||||
|
position={[-1.06, -0.42, 0]}
|
||||||
|
rotation={[-0.8, 0, -0.3]}
|
||||||
|
renderOrder={-1}
|
||||||
|
>
|
||||||
|
<planeBufferGeometry attach="geometry" />
|
||||||
|
<meshBasicMaterial
|
||||||
|
map={authorizeInactiveLettersTex}
|
||||||
|
attach="material"
|
||||||
|
transparent={true}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BootAuthorizeUser;
|
|
@ -1,71 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { a } from "@react-spring/three";
|
|
||||||
import authorizeActive from "../../static/sprite/authorize_user_active.png";
|
|
||||||
import authorizeInactive from "../../static/sprite/authorize_user_inactive.png";
|
|
||||||
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 { useMainMenuStore } from "../../store";
|
|
||||||
|
|
||||||
type BootMainMenuProps = {
|
|
||||||
visible: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const BootMainMenu = (props: BootMainMenuProps) => {
|
|
||||||
const activeMainMenuElement = useMainMenuStore(
|
|
||||||
(state) => state.activeMainMenuElement
|
|
||||||
);
|
|
||||||
|
|
||||||
const authorizeActiveTex = useLoader(THREE.TextureLoader, authorizeActive);
|
|
||||||
const authorizeInactiveTex = useLoader(
|
|
||||||
THREE.TextureLoader,
|
|
||||||
authorizeInactive
|
|
||||||
);
|
|
||||||
const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive);
|
|
||||||
const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{props.visible ? (
|
|
||||||
<>
|
|
||||||
<a.sprite
|
|
||||||
scale={[1.8, 0.3, 0]}
|
|
||||||
renderOrder={1}
|
|
||||||
position={[0, 0.5, 0]}
|
|
||||||
>
|
|
||||||
<spriteMaterial
|
|
||||||
attach="material"
|
|
||||||
map={
|
|
||||||
activeMainMenuElement === "authorize_user"
|
|
||||||
? authorizeActiveTex
|
|
||||||
: authorizeInactiveTex
|
|
||||||
}
|
|
||||||
transparent={true}
|
|
||||||
/>
|
|
||||||
</a.sprite>
|
|
||||||
|
|
||||||
<a.sprite
|
|
||||||
scale={[1.4, 0.3, 0]}
|
|
||||||
renderOrder={1}
|
|
||||||
position={[0, -0.5, 0]}
|
|
||||||
>
|
|
||||||
<spriteMaterial
|
|
||||||
attach="material"
|
|
||||||
map={
|
|
||||||
activeMainMenuElement === "load_data"
|
|
||||||
? loadDataActiveTex
|
|
||||||
: loadDataInactiveTex
|
|
||||||
}
|
|
||||||
transparent={true}
|
|
||||||
/>
|
|
||||||
</a.sprite>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BootMainMenu;
|
|
106
src/components/Boot/BootMainMenuComponents.tsx
Normal file
106
src/components/Boot/BootMainMenuComponents.tsx
Normal file
|
@ -0,0 +1,106 @@
|
||||||
|
import React, { 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";
|
||||||
|
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 { useBootMainMenuStore } from "../../store";
|
||||||
|
import authorizeUserHeader from "../../static/sprite/authorize_user_scene_header.png";
|
||||||
|
|
||||||
|
type BootMainMenuProps = {
|
||||||
|
visible: boolean;
|
||||||
|
activeSubScene: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
||||||
|
const activeMainMenuElement = useBootMainMenuStore(
|
||||||
|
(state) => state.activeMainMenuElement
|
||||||
|
);
|
||||||
|
const authorizeUserPos = useBootMainMenuStore(
|
||||||
|
(state) => state.authorizeUserPos
|
||||||
|
);
|
||||||
|
|
||||||
|
const authorizeActiveTex = useLoader(THREE.TextureLoader, authorizeActive);
|
||||||
|
const authorizeInactiveTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
authorizeInactive
|
||||||
|
);
|
||||||
|
const authorizeUserHeaderTex = useLoader(
|
||||||
|
THREE.TextureLoader,
|
||||||
|
authorizeUserHeader
|
||||||
|
);
|
||||||
|
|
||||||
|
const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive);
|
||||||
|
const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive);
|
||||||
|
|
||||||
|
const mainMenuAnimationState = useSpring({
|
||||||
|
authorizeUserPosX: authorizeUserPos.x,
|
||||||
|
authorizeUserPosY: authorizeUserPos.y,
|
||||||
|
loadDataOpacity: props.activeSubScene === "main_menu" ? 1 : 0,
|
||||||
|
config: { duration: 500 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const authorizeUserTextState = useMemo(() => {
|
||||||
|
if (props.activeSubScene === "authorize_user") {
|
||||||
|
return { scale: [1.8, 0.16, 0], texture: authorizeUserHeaderTex };
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
scale: [1.8, 0.3, 0],
|
||||||
|
texture:
|
||||||
|
activeMainMenuElement === "authorize_user"
|
||||||
|
? authorizeActiveTex
|
||||||
|
: authorizeInactiveTex,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
activeMainMenuElement,
|
||||||
|
authorizeActiveTex,
|
||||||
|
authorizeInactiveTex,
|
||||||
|
authorizeUserHeaderTex,
|
||||||
|
props.activeSubScene,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{props.visible ? (
|
||||||
|
<>
|
||||||
|
<a.sprite
|
||||||
|
scale={authorizeUserTextState.scale as [number, number, number]}
|
||||||
|
renderOrder={1}
|
||||||
|
position-x={mainMenuAnimationState.authorizeUserPosX}
|
||||||
|
position-y={mainMenuAnimationState.authorizeUserPosY}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={authorizeUserTextState.texture}
|
||||||
|
transparent={true}
|
||||||
|
/>
|
||||||
|
</a.sprite>
|
||||||
|
|
||||||
|
<a.sprite
|
||||||
|
scale={[1.4, 0.3, 0]}
|
||||||
|
renderOrder={1}
|
||||||
|
position={[0, -0.5, 0]}
|
||||||
|
>
|
||||||
|
<a.spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={
|
||||||
|
activeMainMenuElement === "load_data"
|
||||||
|
? loadDataActiveTex
|
||||||
|
: loadDataInactiveTex
|
||||||
|
}
|
||||||
|
transparent={true}
|
||||||
|
opacity={mainMenuAnimationState.loadDataOpacity}
|
||||||
|
/>
|
||||||
|
</a.sprite>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BootMainMenuComponents;
|
|
@ -6,6 +6,7 @@ import BlueOrbManager from "./BlueOrbManager";
|
||||||
import BlueOrbHUDManager from "./BlueOrbHUDManager";
|
import BlueOrbHUDManager from "./BlueOrbHUDManager";
|
||||||
import {
|
import {
|
||||||
useBlueOrbStore,
|
useBlueOrbStore,
|
||||||
|
useBootMainMenuStore,
|
||||||
useLevelStore,
|
useLevelStore,
|
||||||
useMediaStore,
|
useMediaStore,
|
||||||
useSceneStore,
|
useSceneStore,
|
||||||
|
@ -19,9 +20,9 @@ import SceneManager from "./SceneManager";
|
||||||
import YellowTextManager from "./YellowTextManager";
|
import YellowTextManager from "./YellowTextManager";
|
||||||
import MediaImageManager from "./MediaImageManager";
|
import MediaImageManager from "./MediaImageManager";
|
||||||
import computeAction from "../computeAction";
|
import computeAction from "../computeAction";
|
||||||
import available_blue_orbs_on_projection from "../../resources/available_blue_orbs_on_projection.json";
|
|
||||||
import LevelManager from "./LevelManager";
|
import LevelManager from "./LevelManager";
|
||||||
import MainMenuManager from "./MainMenuManager";
|
import MainMenuManager from "./MainMenuManager";
|
||||||
|
import SubSceneManager from "./SubSceneManager";
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
const keyCodeAssocs = {
|
const keyCodeAssocs = {
|
||||||
|
@ -53,6 +54,7 @@ export type GameContext = {
|
||||||
currentLevel: string;
|
currentLevel: string;
|
||||||
siteRotIdx: string;
|
siteRotIdx: string;
|
||||||
activeMediaComponent: string;
|
activeMediaComponent: string;
|
||||||
|
activeMainMenuElement: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const EventManager = () => {
|
const EventManager = () => {
|
||||||
|
@ -70,6 +72,11 @@ const EventManager = () => {
|
||||||
(state) => state.activeMediaComponent
|
(state) => state.activeMediaComponent
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// boot scene
|
||||||
|
const activeMainMenuElement = useBootMainMenuStore(
|
||||||
|
(state) => state.activeMainMenuElement
|
||||||
|
);
|
||||||
|
|
||||||
const [eventState, setEventState] = useState<any>();
|
const [eventState, setEventState] = useState<any>();
|
||||||
|
|
||||||
const [inputCooldown, setInputCooldown] = useState(false);
|
const [inputCooldown, setInputCooldown] = useState(false);
|
||||||
|
@ -81,8 +88,10 @@ const EventManager = () => {
|
||||||
blueOrbMatrixIndices: blueOrbMatrixIndices,
|
blueOrbMatrixIndices: blueOrbMatrixIndices,
|
||||||
currentLevel: currentLevel,
|
currentLevel: currentLevel,
|
||||||
activeMediaComponent: activeMediaComponent,
|
activeMediaComponent: activeMediaComponent,
|
||||||
|
activeMainMenuElement: activeMainMenuElement,
|
||||||
}),
|
}),
|
||||||
[
|
[
|
||||||
|
activeMainMenuElement,
|
||||||
activeMediaComponent,
|
activeMediaComponent,
|
||||||
blueOrbMatrixIndices,
|
blueOrbMatrixIndices,
|
||||||
currentLevel,
|
currentLevel,
|
||||||
|
@ -130,6 +139,7 @@ const EventManager = () => {
|
||||||
<MediaImageManager eventState={eventState!} />
|
<MediaImageManager eventState={eventState!} />
|
||||||
<LevelManager eventState={eventState!} />
|
<LevelManager eventState={eventState!} />
|
||||||
<MainMenuManager eventState={eventState!} />
|
<MainMenuManager eventState={eventState!} />
|
||||||
|
<SubSceneManager eventState={eventState!} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
import { useMainMenuStore } from "../../store";
|
import { useBootMainMenuStore } from "../../store";
|
||||||
|
|
||||||
const MainMenuManager = (props: StateManagerProps) => {
|
const MainMenuManager = (props: StateManagerProps) => {
|
||||||
const setActiveMainMenuElement = useMainMenuStore(
|
const setActiveMainMenuElement = useBootMainMenuStore(
|
||||||
(state) => state.setActiveMainMenuElement
|
(state) => state.setActiveMainMenuElement
|
||||||
);
|
);
|
||||||
|
const setAuthorizeUserPos = useBootMainMenuStore(
|
||||||
|
(state) => state.setAuthorizeUserPos
|
||||||
|
);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(event: string) => {
|
(event: string) => {
|
||||||
|
@ -18,11 +21,15 @@ const MainMenuManager = (props: StateManagerProps) => {
|
||||||
action: setActiveMainMenuElement,
|
action: setActiveMainMenuElement,
|
||||||
value: "authorize_user",
|
value: "authorize_user",
|
||||||
},
|
},
|
||||||
|
select_authorize_user: {
|
||||||
|
action: setAuthorizeUserPos,
|
||||||
|
value: { x: 1.13, y: 1.2 },
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
},
|
},
|
||||||
[setActiveMainMenuElement]
|
[setActiveMainMenuElement, setAuthorizeUserPos]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -31,7 +38,7 @@ const MainMenuManager = (props: StateManagerProps) => {
|
||||||
|
|
||||||
const dispatchedObject = dispatchObject(eventAction);
|
const dispatchedObject = dispatchObject(eventAction);
|
||||||
if (dispatchedObject) {
|
if (dispatchedObject) {
|
||||||
dispatchedObject.action(dispatchedObject.value);
|
dispatchedObject.action(dispatchedObject.value as any);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [dispatchObject, props.eventState]);
|
}, [dispatchObject, props.eventState]);
|
||||||
|
|
41
src/core/StateManagers/SubSceneManager.tsx
Normal file
41
src/core/StateManagers/SubSceneManager.tsx
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
import { useCallback, useEffect } from "react";
|
||||||
|
import { StateManagerProps } from "./EventManager";
|
||||||
|
import { useBootStore } from "../../store";
|
||||||
|
|
||||||
|
const SubSceneManager = (props: StateManagerProps) => {
|
||||||
|
const setActiveBootSubScene = useBootStore(
|
||||||
|
(state) => state.setActiveBootSubScene
|
||||||
|
);
|
||||||
|
|
||||||
|
const dispatchObject = useCallback(
|
||||||
|
(event: string) => {
|
||||||
|
const dispatcherObjects = {
|
||||||
|
select_authorize_user: {
|
||||||
|
action: setActiveBootSubScene,
|
||||||
|
value: "authorize_user",
|
||||||
|
delay: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
|
},
|
||||||
|
[setActiveBootSubScene]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.eventState) {
|
||||||
|
const eventAction = props.eventState.event;
|
||||||
|
|
||||||
|
const dispatchedObject = dispatchObject(eventAction);
|
||||||
|
|
||||||
|
if (dispatchedObject) {
|
||||||
|
setTimeout(() => {
|
||||||
|
dispatchedObject.action(dispatchedObject.value);
|
||||||
|
}, dispatchedObject.delay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [props.eventState, dispatchObject]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SubSceneManager;
|
|
@ -3,11 +3,15 @@ import { GameContext } from "./StateManagers/EventManager";
|
||||||
const handleBootMainMenuEvent = (gameContext: GameContext) => {
|
const handleBootMainMenuEvent = (gameContext: GameContext) => {
|
||||||
const keyPress = gameContext.keyPress;
|
const keyPress = gameContext.keyPress;
|
||||||
|
|
||||||
|
const activeMainMenuElement = gameContext.activeMainMenuElement;
|
||||||
|
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "down":
|
case "down":
|
||||||
return { event: "switch_to_load_data" };
|
return { event: "switch_to_load_data" };
|
||||||
case "up":
|
case "up":
|
||||||
return { event: "switch_to_authorize_user" };
|
return { event: "switch_to_authorize_user" };
|
||||||
|
case "select":
|
||||||
|
return { event: `select_${activeMainMenuElement}` };
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,26 +1,39 @@
|
||||||
import React, { useEffect, useState } from "react";
|
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 BootMainMenu from "../components/Boot/BootMainMenu";
|
import BootMainMenuComponents from "../components/Boot/BootMainMenuComponents";
|
||||||
|
import { useBootStore } from "../store";
|
||||||
|
import BootAuthorizeUser from "../components/Boot/BootAuthorizeUser";
|
||||||
|
|
||||||
const BootScene = () => {
|
const BootScene = () => {
|
||||||
|
const activeBootSubScene = useBootStore((state) => state.activeBootSubScene);
|
||||||
|
|
||||||
const [accelaVisible, setAccelaVisible] = useState(true);
|
const [accelaVisible, setAccelaVisible] = useState(true);
|
||||||
const [mainMenuVisible, setMainMenuVisible] = useState(false);
|
const [mainMenuVisible, setMainMenuVisible] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setAccelaVisible(false);
|
setAccelaVisible(false);
|
||||||
}, 2000);
|
// 2000
|
||||||
|
}, 0);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setMainMenuVisible(true);
|
setMainMenuVisible(true);
|
||||||
}, 6200);
|
//6200
|
||||||
|
}, 0);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<BootAccela visible={accelaVisible} />
|
<BootAccela visible={accelaVisible} />
|
||||||
<BootAnimation visible={!accelaVisible} />
|
<BootAnimation
|
||||||
<BootMainMenu visible={mainMenuVisible} />
|
visible={!accelaVisible}
|
||||||
|
activeSubScene={activeBootSubScene}
|
||||||
|
/>
|
||||||
|
<BootMainMenuComponents
|
||||||
|
visible={mainMenuVisible}
|
||||||
|
activeSubScene={activeBootSubScene}
|
||||||
|
/>
|
||||||
|
<BootAuthorizeUser visible={activeBootSubScene === "authorize_user"} />
|
||||||
</perspectiveCamera>
|
</perspectiveCamera>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
29
src/store.ts
29
src/store.ts
|
@ -1,6 +1,5 @@
|
||||||
import create from "zustand";
|
import create from "zustand";
|
||||||
import { combine } from "zustand/middleware";
|
import { combine } from "zustand/middleware";
|
||||||
import available_blue_orbs_on_projection from "./resources/available_blue_orbs_on_projection.json";
|
|
||||||
|
|
||||||
type SceneState = {
|
type SceneState = {
|
||||||
currentScene: string;
|
currentScene: string;
|
||||||
|
@ -159,10 +158,17 @@ type ImageState = {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
type MainMenuState ={
|
type BootState = {
|
||||||
|
activeBootSubScene: string;
|
||||||
|
setActiveBootSubScene: (to: string) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type MainMenuState = {
|
||||||
activeMainMenuElement: string;
|
activeMainMenuElement: string;
|
||||||
|
authorizeUserPos: { x: number; y: number };
|
||||||
|
setAuthorizeUserPos: (to: { x: number; y: number }) => void;
|
||||||
setActiveMainMenuElement: (to: string) => void;
|
setActiveMainMenuElement: (to: string) => void;
|
||||||
}
|
};
|
||||||
|
|
||||||
export const useTextRendererStore = create<TextRendererState>((set) => ({
|
export const useTextRendererStore = create<TextRendererState>((set) => ({
|
||||||
// yellow text
|
// yellow text
|
||||||
|
@ -389,10 +395,21 @@ export const useSceneStore = create<SceneState>((set) => ({
|
||||||
setScene: (to) => set(() => ({ currentScene: to })),
|
setScene: (to) => set(() => ({ currentScene: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useMainMenuStore = create<MainMenuState>(set=> ({
|
export const useBootStore = create<BootState>((set) => ({
|
||||||
|
activeBootSubScene: "authorize_user",
|
||||||
|
setActiveBootSubScene: (to) => set(() => ({ activeBootSubScene: to })),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const useBootMainMenuStore = create<MainMenuState>((set) => ({
|
||||||
activeMainMenuElement: "authorize_user",
|
activeMainMenuElement: "authorize_user",
|
||||||
setActiveMainMenuElement: (to) => set(() => ({activeMainMenuElement: to}))
|
authorizeUserPos: { x: 0, y: 0.5 },
|
||||||
}))
|
setActiveMainMenuElement: (to: string) =>
|
||||||
|
set(() => ({ activeMainMenuElement: to })),
|
||||||
|
setAuthorizeUserPos: (to: { x: number; y: number }) =>
|
||||||
|
set(() => ({
|
||||||
|
authorizeUserPos: to,
|
||||||
|
})),
|
||||||
|
}));
|
||||||
|
|
||||||
export const useImageStore = create(
|
export const useImageStore = create(
|
||||||
combine(
|
combine(
|
||||||
|
|
Loading…
Reference in a new issue