mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
authorize user clean up
This commit is contained in:
parent
7d3bc001f4
commit
46d9c421c8
13 changed files with 382 additions and 187 deletions
|
@ -150,7 +150,7 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
|
|
||||||
setBackgroundFloatingTextShown(true);
|
setBackgroundFloatingTextShown(true);
|
||||||
//4200
|
//4200
|
||||||
}, 0);
|
}, 4200);
|
||||||
}
|
}
|
||||||
}, [bootBackgroundTextTex, currentBootStatusTextTex.offset, props.visible]);
|
}, [bootBackgroundTextTex, currentBootStatusTextTex.offset, props.visible]);
|
||||||
|
|
||||||
|
@ -179,7 +179,7 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
const sndDistortedBackgroundTextRef = useRef<THREE.Object3D>();
|
const sndDistortedBackgroundTextRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<group visible={props.visible}>
|
||||||
<a.sprite
|
<a.sprite
|
||||||
scale={[1.2, 0.4, 0]}
|
scale={[1.2, 0.4, 0]}
|
||||||
position-x={animationState.lofPosX}
|
position-x={animationState.lofPosX}
|
||||||
|
@ -202,7 +202,7 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
opacity={animationState.graySquareOpacity}
|
opacity={animationState.graySquareOpacity}
|
||||||
/>
|
/>
|
||||||
</a.sprite>
|
</a.sprite>
|
||||||
{props.visible && props.activeSubScene !== "authorize_user" ? (
|
{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
|
||||||
|
@ -276,7 +276,7 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
opacity={bootState.bootOpacity}
|
opacity={bootState.bootOpacity}
|
||||||
/>
|
/>
|
||||||
</sprite>
|
</sprite>
|
||||||
<sprite scale={[0.2, 0.2, 0]} position={[0, -0.8, 0]}>
|
<sprite scale={[0.2, 0.2, 0]} position={[0, -0.8, 0]} renderOrder={-1}>
|
||||||
<a.spriteMaterial
|
<a.spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={bootPurpleSquareTex}
|
map={bootPurpleSquareTex}
|
||||||
|
@ -320,7 +320,7 @@ const BootAnimation = (props: BootAnimationProps) => {
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
)}
|
)}
|
||||||
</>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useCallback, useMemo, useRef } from "react";
|
import React, { useMemo } 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";
|
||||||
|
@ -6,9 +6,9 @@ import authorizeOrangeSquare from "../../static/sprite/authorize_orange_square.p
|
||||||
import authorizeStartToFinish from "../../static/sprite/authorize_start_to_finish.png";
|
import authorizeStartToFinish from "../../static/sprite/authorize_start_to_finish.png";
|
||||||
import authorizeInactiveLetters from "../../static/sprite/authorize_inactive_letters.png";
|
import authorizeInactiveLetters from "../../static/sprite/authorize_inactive_letters.png";
|
||||||
import authorizeActiveLetters from "../../static/sprite/authorize_active_letters.png";
|
import authorizeActiveLetters from "../../static/sprite/authorize_active_letters.png";
|
||||||
import { useFrame, 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 { useAuthorizeUserStore, useBootStore } from "../../store";
|
||||||
import { OrbitControls } from "@react-three/drei";
|
import { OrbitControls } from "@react-three/drei";
|
||||||
|
|
||||||
type BootAuthorizeUserProps = {
|
type BootAuthorizeUserProps = {
|
||||||
|
@ -42,8 +42,10 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
||||||
authorizeActiveLetters
|
authorizeActiveLetters
|
||||||
);
|
);
|
||||||
|
|
||||||
const backgroundLettersPos = useBootStore((state) => state.bgLettersPos);
|
const backgroundLettersPos = useAuthorizeUserStore(
|
||||||
const activeLetterTextureOffset = useBootStore(
|
(state) => state.bgLettersPos
|
||||||
|
);
|
||||||
|
const activeLetterTextureOffset = useAuthorizeUserStore(
|
||||||
(state) => state.activeLetterTextureOffset
|
(state) => state.activeLetterTextureOffset
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -57,10 +59,6 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
||||||
return authorizeActiveLettersTex;
|
return authorizeActiveLettersTex;
|
||||||
}, [activeLetterTextureOffset, authorizeActiveLettersTex]);
|
}, [activeLetterTextureOffset, authorizeActiveLettersTex]);
|
||||||
|
|
||||||
const t = useBootStore(
|
|
||||||
(state) => state.componentMatrixIndices.authorize_user
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<OrbitControls />
|
<OrbitControls />
|
||||||
|
|
|
@ -10,7 +10,7 @@ import { useLoader } from "react-three-fiber";
|
||||||
|
|
||||||
type BootLoadDataProps = {
|
type BootLoadDataProps = {
|
||||||
visible: boolean;
|
visible: boolean;
|
||||||
activeBootElement: string;
|
activeBootElement: any;
|
||||||
};
|
};
|
||||||
|
|
||||||
const BootLoadData = (props: BootLoadDataProps) => {
|
const BootLoadData = (props: BootLoadDataProps) => {
|
||||||
|
|
|
@ -12,7 +12,7 @@ import loadDataHeader from "../../static/sprite/load_data_header.png";
|
||||||
type BootMainMenuProps = {
|
type BootMainMenuProps = {
|
||||||
visible: boolean;
|
visible: boolean;
|
||||||
activeSubScene: string;
|
activeSubScene: string;
|
||||||
activeBootElement: string;
|
activeBootElement: any;
|
||||||
};
|
};
|
||||||
|
|
||||||
const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
const BootMainMenuComponents = (props: BootMainMenuProps) => {
|
||||||
|
|
64
src/core/StateManagers/BootAuthorizeUserManager.tsx
Normal file
64
src/core/StateManagers/BootAuthorizeUserManager.tsx
Normal file
|
@ -0,0 +1,64 @@
|
||||||
|
import { useCallback, useEffect } from "react";
|
||||||
|
import { StateManagerProps } from "./EventManager";
|
||||||
|
import { useAuthorizeUserStore, useBootStore } from "../../store";
|
||||||
|
|
||||||
|
const BootAuthorizeUserManager = (props: StateManagerProps) => {
|
||||||
|
const setActiveLetterTextureOffset = useAuthorizeUserStore(
|
||||||
|
(state) => state.setActiveLetterTexOffset
|
||||||
|
);
|
||||||
|
const setBgLettersPos = useAuthorizeUserStore(
|
||||||
|
(state) => state.setBgLettersPos
|
||||||
|
);
|
||||||
|
|
||||||
|
const updateAuthorizeUser = useCallback(
|
||||||
|
(
|
||||||
|
newBgLettersPos: { x: number; y: number },
|
||||||
|
newActiveLetterTexOffset: { x: number; y: number }
|
||||||
|
) => {
|
||||||
|
setActiveLetterTextureOffset(newActiveLetterTexOffset);
|
||||||
|
setBgLettersPos(newBgLettersPos);
|
||||||
|
},
|
||||||
|
[setActiveLetterTextureOffset, setBgLettersPos]
|
||||||
|
);
|
||||||
|
|
||||||
|
const dispatchObject = useCallback(
|
||||||
|
(
|
||||||
|
event: string,
|
||||||
|
newBgLettersPos: { x: number; y: number },
|
||||||
|
newActiveLetterTexOffset: { x: number; y: number }
|
||||||
|
) => {
|
||||||
|
switch (event) {
|
||||||
|
case "authorize_user_left":
|
||||||
|
case "authorize_user_up":
|
||||||
|
case "authorize_user_down":
|
||||||
|
case "authorize_user_right":
|
||||||
|
return {
|
||||||
|
action: updateAuthorizeUser,
|
||||||
|
value: [newBgLettersPos, newActiveLetterTexOffset],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[updateAuthorizeUser]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.eventState) {
|
||||||
|
const eventAction = props.eventState.event;
|
||||||
|
const newBgLettersPos = props.eventState.newBgLettersPos;
|
||||||
|
const newActiveLetterTexOffset =
|
||||||
|
props.eventState.newActiveLetterTexOffset;
|
||||||
|
|
||||||
|
const dispatchedObject = dispatchObject(
|
||||||
|
eventAction,
|
||||||
|
newBgLettersPos,
|
||||||
|
newActiveLetterTexOffset
|
||||||
|
);
|
||||||
|
if (dispatchedObject) {
|
||||||
|
dispatchedObject.action.apply(null, dispatchedObject.value as any);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [dispatchObject, props.eventState]);
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BootAuthorizeUserManager;
|
|
@ -2,29 +2,29 @@ import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
import { useBootStore } from "../../store";
|
import { useBootStore } from "../../store";
|
||||||
|
|
||||||
const BootManager = (props: StateManagerProps) => {
|
const BootComponentManager = (props: StateManagerProps) => {
|
||||||
const toggleComponentMatrixIdx = useBootStore(
|
const toggleComponentMatrixIdx = useBootStore(
|
||||||
(state) => state.toggleComponentMatrixIdx
|
(state) => state.toggleComponentMatrixIdx
|
||||||
);
|
);
|
||||||
const setBootSubscene = useBootStore((state) => state.setSubscene);
|
const setAuthorizeUserMatrixIdx = useBootStore(
|
||||||
const moveAuthorizeUserLetters = useBootStore(
|
(state) => state.setAuthorizeUserMatrixIdx
|
||||||
(state) => state.moveAuthorizeUserLetters
|
|
||||||
);
|
);
|
||||||
|
const setBootSubscene = useBootStore((state) => state.setSubscene);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(event: string) => {
|
(
|
||||||
|
event: string,
|
||||||
|
activeSubscene: string,
|
||||||
|
newAuthorizeUserMatrixIdx: number
|
||||||
|
) => {
|
||||||
switch (event) {
|
switch (event) {
|
||||||
case "main_menu_down":
|
case "main_menu_down":
|
||||||
case "main_menu_up":
|
case "main_menu_up":
|
||||||
return {
|
|
||||||
action: toggleComponentMatrixIdx,
|
|
||||||
value: "main_menu",
|
|
||||||
};
|
|
||||||
case "load_data_left":
|
case "load_data_left":
|
||||||
case "load_data_right":
|
case "load_data_right":
|
||||||
return {
|
return {
|
||||||
action: toggleComponentMatrixIdx,
|
action: toggleComponentMatrixIdx,
|
||||||
value: "load_data",
|
value: activeSubscene,
|
||||||
};
|
};
|
||||||
case "authorize_user_back":
|
case "authorize_user_back":
|
||||||
case "load_data_no_select":
|
case "load_data_no_select":
|
||||||
|
@ -38,43 +38,39 @@ const BootManager = (props: StateManagerProps) => {
|
||||||
value: "authorize_user",
|
value: "authorize_user",
|
||||||
};
|
};
|
||||||
case "authorize_user_right":
|
case "authorize_user_right":
|
||||||
return {
|
|
||||||
action: moveAuthorizeUserLetters,
|
|
||||||
value: "right",
|
|
||||||
};
|
|
||||||
case "authorize_user_left":
|
|
||||||
return {
|
|
||||||
action: moveAuthorizeUserLetters,
|
|
||||||
value: "left",
|
|
||||||
};
|
|
||||||
case "authorize_user_up":
|
case "authorize_user_up":
|
||||||
return {
|
case "authorize_user_left":
|
||||||
action: moveAuthorizeUserLetters,
|
|
||||||
value: "up",
|
|
||||||
};
|
|
||||||
case "authorize_user_down":
|
case "authorize_user_down":
|
||||||
return {
|
return {
|
||||||
action: moveAuthorizeUserLetters,
|
action: setAuthorizeUserMatrixIdx,
|
||||||
value: "down",
|
value: newAuthorizeUserMatrixIdx,
|
||||||
};
|
};
|
||||||
case "load_data_select":
|
case "load_data_select":
|
||||||
return { action: setBootSubscene, value: "load_data" };
|
return { action: setBootSubscene, value: "load_data" };
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[moveAuthorizeUserLetters, setBootSubscene, toggleComponentMatrixIdx]
|
[setAuthorizeUserMatrixIdx, setBootSubscene, toggleComponentMatrixIdx]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const eventAction = props.eventState.event;
|
const eventAction = props.eventState.event;
|
||||||
|
const newAuthorizeUserMatrixIdx =
|
||||||
|
props.eventState.newAuthorizeUserMatrixIdx;
|
||||||
|
const activeSubscene = props.eventState.subscene;
|
||||||
|
|
||||||
|
const dispatchedObject = dispatchObject(
|
||||||
|
eventAction,
|
||||||
|
activeSubscene,
|
||||||
|
newAuthorizeUserMatrixIdx
|
||||||
|
);
|
||||||
|
|
||||||
const dispatchedObject = dispatchObject(eventAction);
|
|
||||||
if (dispatchedObject) {
|
if (dispatchedObject) {
|
||||||
dispatchedObject.action(dispatchedObject.value as any);
|
dispatchedObject.action(dispatchedObject.value as never);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [dispatchObject, props.eventState]);
|
}, [dispatchObject, props.eventState]);
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BootManager;
|
export default BootComponentManager;
|
|
@ -5,6 +5,7 @@ import LainManager from "./LainManager";
|
||||||
import NodeManager from "./NodeManager";
|
import NodeManager from "./NodeManager";
|
||||||
import NodeHUDManager from "./NodeHUDManager";
|
import NodeHUDManager from "./NodeHUDManager";
|
||||||
import {
|
import {
|
||||||
|
useAuthorizeUserStore,
|
||||||
useBootStore,
|
useBootStore,
|
||||||
useLevelStore,
|
useLevelStore,
|
||||||
useMediaStore,
|
useMediaStore,
|
||||||
|
@ -20,12 +21,13 @@ import MediaWordManager from "./MediaWordManager";
|
||||||
import SceneManager from "./SceneManager";
|
import SceneManager from "./SceneManager";
|
||||||
import YellowTextManager from "./YellowTextManager";
|
import YellowTextManager from "./YellowTextManager";
|
||||||
import LevelManager from "./LevelManager";
|
import LevelManager from "./LevelManager";
|
||||||
import BootManager from "./BootManager";
|
import BootComponentManager from "./BootComponentManager";
|
||||||
import SSknComponentManager from "./SSknComponentManager";
|
import SSknComponentManager from "./SSknComponentManager";
|
||||||
import handleMainSceneEvent from "../mainSceneEventHandler";
|
import handleMainSceneEvent from "../mainSceneEventHandler";
|
||||||
import handleMediaSceneEvent from "../mediaSceneEventHandler";
|
import handleMediaSceneEvent from "../mediaSceneEventHandler";
|
||||||
import handleBootEvent from "../bootEventHandler";
|
import handleBootEvent from "../bootEventHandler";
|
||||||
import handleSSknSceneEvent from "../ssknSceneEventHandler";
|
import handleSSknSceneEvent from "../ssknSceneEventHandler";
|
||||||
|
import BootAuthorizeUserManager from "./BootAuthorizeUserManager";
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
const keyCodeAssocs = {
|
const keyCodeAssocs = {
|
||||||
|
@ -88,13 +90,27 @@ const EventManager = () => {
|
||||||
const activeBootElement = useBootStore(
|
const activeBootElement = useBootStore(
|
||||||
useCallback(
|
useCallback(
|
||||||
(state) =>
|
(state) =>
|
||||||
state.componentMatrix[currentBootSubscene][
|
state.componentMatrix[
|
||||||
state.componentMatrixIndices[currentBootSubscene]
|
currentBootSubscene as keyof typeof state.componentMatrix
|
||||||
|
][
|
||||||
|
state.componentMatrixIndices[
|
||||||
|
currentBootSubscene as keyof typeof state.componentMatrixIndices
|
||||||
|
]
|
||||||
],
|
],
|
||||||
[currentBootSubscene]
|
[currentBootSubscene]
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const authorizeUserBgLettersPos = useAuthorizeUserStore(
|
||||||
|
(state) => state.bgLettersPos
|
||||||
|
);
|
||||||
|
const authorizeUserActiveLetterTexOffset = useAuthorizeUserStore(
|
||||||
|
(state) => state.activeLetterTextureOffset
|
||||||
|
);
|
||||||
|
const authorizeUserMatrixIdx = useBootStore(
|
||||||
|
(state) => state.componentMatrixIndices.authorize_user
|
||||||
|
);
|
||||||
|
|
||||||
const [eventState, setEventState] = useState<any>();
|
const [eventState, setEventState] = useState<any>();
|
||||||
|
|
||||||
const [inputCooldown, setInputCooldown] = useState(false);
|
const [inputCooldown, setInputCooldown] = useState(false);
|
||||||
|
@ -111,8 +127,7 @@ const EventManager = () => {
|
||||||
case "main":
|
case "main":
|
||||||
event = handleMainSceneEvent({
|
event = handleMainSceneEvent({
|
||||||
keyPress: keyPress,
|
keyPress: keyPress,
|
||||||
siteRotY: siteTransformState.rotY,
|
siteTransformState: siteTransformState,
|
||||||
sitePosY: siteTransformState.posY,
|
|
||||||
nodeMatrixIndices: nodeMatrixIndices,
|
nodeMatrixIndices: nodeMatrixIndices,
|
||||||
activeLevel: activeLevel,
|
activeLevel: activeLevel,
|
||||||
});
|
});
|
||||||
|
@ -127,8 +142,12 @@ const EventManager = () => {
|
||||||
break;
|
break;
|
||||||
case "boot":
|
case "boot":
|
||||||
event = handleBootEvent({
|
event = handleBootEvent({
|
||||||
|
keyPress: keyPress,
|
||||||
bootSubscene: currentBootSubscene,
|
bootSubscene: currentBootSubscene,
|
||||||
activeBootElement: activeBootElement,
|
activeBootElement: activeBootElement,
|
||||||
|
authorizeUserBgLettersPos: authorizeUserBgLettersPos,
|
||||||
|
authorizeUserActiveLetterTexOffset: authorizeUserActiveLetterTexOffset,
|
||||||
|
authorizeUserMatrixIdx: authorizeUserMatrixIdx,
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case "gate":
|
case "gate":
|
||||||
|
@ -153,8 +172,9 @@ const EventManager = () => {
|
||||||
currentScene,
|
currentScene,
|
||||||
inputCooldown,
|
inputCooldown,
|
||||||
nodeMatrixIndices,
|
nodeMatrixIndices,
|
||||||
siteTransformState.posY,
|
rightSideComponentIdx,
|
||||||
siteTransformState.rotY,
|
siteTransformState,
|
||||||
|
wordPosStateIdx,
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -179,8 +199,9 @@ const EventManager = () => {
|
||||||
<SceneManager eventState={eventState!} />
|
<SceneManager eventState={eventState!} />
|
||||||
<YellowTextManager eventState={eventState!} />
|
<YellowTextManager eventState={eventState!} />
|
||||||
<LevelManager eventState={eventState!} />
|
<LevelManager eventState={eventState!} />
|
||||||
<BootManager eventState={eventState!} />
|
<BootComponentManager eventState={eventState!} />
|
||||||
<SSknComponentManager eventState={eventState!} />
|
<SSknComponentManager eventState={eventState!} />
|
||||||
|
<BootAuthorizeUserManager eventState={eventState!} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
78
src/core/authorizeUserEventHandler.ts
Normal file
78
src/core/authorizeUserEventHandler.ts
Normal file
|
@ -0,0 +1,78 @@
|
||||||
|
const handleAuthorizeUserEvent = (gameContext: any) => {
|
||||||
|
const keyPress = gameContext.keyPress;
|
||||||
|
|
||||||
|
const bgLettersPos = gameContext.bgLettersPos;
|
||||||
|
const activeLetterTexOffset = gameContext.activeLetterTexOffset;
|
||||||
|
const matrixIdx = gameContext.matrixIdx;
|
||||||
|
|
||||||
|
const currentSubscene = "authorize_user";
|
||||||
|
|
||||||
|
switch (keyPress) {
|
||||||
|
case "left":
|
||||||
|
const utmostLeftIndices = [0, 13, 26, 39, 52];
|
||||||
|
if (utmostLeftIndices.includes(matrixIdx)) {
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
event: `${currentSubscene}_${keyPress}`,
|
||||||
|
newBgLettersPos: { x: bgLettersPos.x + 0.3, y: bgLettersPos.y },
|
||||||
|
newActiveLetterTexOffset: {
|
||||||
|
x: activeLetterTexOffset.x - 0.0775,
|
||||||
|
y: activeLetterTexOffset.y,
|
||||||
|
},
|
||||||
|
newAuthorizeUserMatrixIdx: matrixIdx - 1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case "right":
|
||||||
|
const utmostRightIndices = [12, 25, 38, 51, 64];
|
||||||
|
if (utmostRightIndices.includes(matrixIdx)) {
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
event: `${currentSubscene}_${keyPress}`,
|
||||||
|
newBgLettersPos: { x: bgLettersPos.x - 0.3, y: bgLettersPos.y },
|
||||||
|
newActiveLetterTexOffset: {
|
||||||
|
x: activeLetterTexOffset.x + 0.0775,
|
||||||
|
y: activeLetterTexOffset.y,
|
||||||
|
},
|
||||||
|
newAuthorizeUserMatrixIdx: matrixIdx + 1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case "down":
|
||||||
|
const utmostLowIndices = Array.from(new Array(13), (x, i) => i + 52);
|
||||||
|
if (utmostLowIndices.includes(matrixIdx)) {
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
event: `${currentSubscene}_${keyPress}`,
|
||||||
|
newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y + 0.25 },
|
||||||
|
newActiveLetterTexOffset: {
|
||||||
|
x: activeLetterTexOffset.x,
|
||||||
|
y: activeLetterTexOffset.y - 0.2,
|
||||||
|
},
|
||||||
|
newAuthorizeUserMatrixIdx: matrixIdx + 13,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case "up":
|
||||||
|
const utmostHighIndices = Array.from(new Array(13), (x, i) => i);
|
||||||
|
if (utmostHighIndices.includes(matrixIdx)) {
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
event: `${currentSubscene}_${keyPress}`,
|
||||||
|
newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y - 0.25 },
|
||||||
|
newActiveLetterTexOffset: {
|
||||||
|
x: activeLetterTexOffset.x,
|
||||||
|
y: activeLetterTexOffset.y + 0.2,
|
||||||
|
},
|
||||||
|
newAuthorizeUserMatrixIdx: matrixIdx - 13,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
case "back": {
|
||||||
|
return { event: "authorize_user_back" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default handleAuthorizeUserEvent;
|
|
@ -1,21 +1,39 @@
|
||||||
|
import handleAuthorizeUserEvent from "./authorizeUserEventHandler";
|
||||||
|
|
||||||
const handleBootEvent = (gameContext: any) => {
|
const handleBootEvent = (gameContext: any) => {
|
||||||
const keyPress = gameContext.keyPress;
|
const keyPress = gameContext.keyPress;
|
||||||
|
|
||||||
const activeBootElement = gameContext.activeBootElement;
|
const activeBootElement = gameContext.activeBootElement;
|
||||||
const currentSubscene = gameContext.bootSubscene;
|
const currentSubscene = gameContext.bootSubscene;
|
||||||
|
const authorizeUserBgLettersPos = gameContext.authorizeUserBgLettersPos;
|
||||||
|
const authorizeUserActiveLetterTexOffset =
|
||||||
|
gameContext.authorizeUserActiveLetterTexOffset;
|
||||||
|
const authorizeUserMatrixIdx = gameContext.authorizeUserMatrixIdx;
|
||||||
|
|
||||||
|
if (currentSubscene === "authorize_user") {
|
||||||
|
return handleAuthorizeUserEvent({
|
||||||
|
keyPress: keyPress,
|
||||||
|
bgLettersPos: authorizeUserBgLettersPos,
|
||||||
|
activeLetterTexOffset: authorizeUserActiveLetterTexOffset,
|
||||||
|
matrixIdx: authorizeUserMatrixIdx,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "down":
|
case "down":
|
||||||
case "up":
|
case "up":
|
||||||
case "left":
|
case "left":
|
||||||
case "right":
|
case "right":
|
||||||
case "back":
|
case "back":
|
||||||
return { event: `${currentSubscene}_${keyPress}` };
|
return {
|
||||||
|
event: `${currentSubscene}_${keyPress}`,
|
||||||
|
subscene: currentSubscene,
|
||||||
|
};
|
||||||
case "select":
|
case "select":
|
||||||
switch (currentSubscene) {
|
return {
|
||||||
case "authorize_user":
|
event: `${activeBootElement}_${keyPress}`,
|
||||||
|
subscene: currentSubscene,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
return { event: `${activeBootElement}_${keyPress}` };
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -28,8 +28,8 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
let newNodeColIdx = gameContext.nodeMatrixIndices.colIdx;
|
let newNodeColIdx = gameContext.nodeMatrixIndices.colIdx;
|
||||||
let newNodeRowIdx = gameContext.nodeMatrixIndices.rowIdx;
|
let newNodeRowIdx = gameContext.nodeMatrixIndices.rowIdx;
|
||||||
let newLevel = gameContext.activeLevel;
|
let newLevel = gameContext.activeLevel;
|
||||||
let newSiteRotY = gameContext.siteRotY;
|
let newSiteRotY = gameContext.siteTransformState.rotY;
|
||||||
let newSitePosY = gameContext.sitePosY;
|
let newSitePosY = gameContext.siteTransformState.posY;
|
||||||
let newScene = gameContext.scene;
|
let newScene = gameContext.scene;
|
||||||
|
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
|
|
69
src/resources/authorize_user_letters.json
Normal file
69
src/resources/authorize_user_letters.json
Normal file
|
@ -0,0 +1,69 @@
|
||||||
|
{
|
||||||
|
"letters": [
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
2,
|
||||||
|
3,
|
||||||
|
4,
|
||||||
|
5,
|
||||||
|
6,
|
||||||
|
7,
|
||||||
|
8,
|
||||||
|
9,
|
||||||
|
10,
|
||||||
|
11,
|
||||||
|
12,
|
||||||
|
13,
|
||||||
|
14,
|
||||||
|
15,
|
||||||
|
16,
|
||||||
|
17,
|
||||||
|
18,
|
||||||
|
19,
|
||||||
|
20,
|
||||||
|
21,
|
||||||
|
22,
|
||||||
|
23,
|
||||||
|
24,
|
||||||
|
25,
|
||||||
|
26,
|
||||||
|
27,
|
||||||
|
28,
|
||||||
|
29,
|
||||||
|
30,
|
||||||
|
31,
|
||||||
|
32,
|
||||||
|
33,
|
||||||
|
34,
|
||||||
|
35,
|
||||||
|
36,
|
||||||
|
37,
|
||||||
|
38,
|
||||||
|
39,
|
||||||
|
40,
|
||||||
|
41,
|
||||||
|
42,
|
||||||
|
43,
|
||||||
|
44,
|
||||||
|
45,
|
||||||
|
46,
|
||||||
|
47,
|
||||||
|
48,
|
||||||
|
49,
|
||||||
|
50,
|
||||||
|
51,
|
||||||
|
52,
|
||||||
|
53,
|
||||||
|
54,
|
||||||
|
55,
|
||||||
|
56,
|
||||||
|
57,
|
||||||
|
58,
|
||||||
|
59,
|
||||||
|
60,
|
||||||
|
61,
|
||||||
|
62,
|
||||||
|
63,
|
||||||
|
64
|
||||||
|
]
|
||||||
|
}
|
|
@ -11,8 +11,12 @@ const BootScene = () => {
|
||||||
const activeBootElement = useBootStore(
|
const activeBootElement = useBootStore(
|
||||||
useCallback(
|
useCallback(
|
||||||
(state) =>
|
(state) =>
|
||||||
state.componentMatrix[activeSubscene][
|
state.componentMatrix[
|
||||||
state.componentMatrixIndices[activeSubscene]
|
activeSubscene as keyof typeof state.componentMatrix
|
||||||
|
][
|
||||||
|
state.componentMatrixIndices[
|
||||||
|
activeSubscene as keyof typeof state.componentMatrixIndices
|
||||||
|
]
|
||||||
],
|
],
|
||||||
[activeSubscene]
|
[activeSubscene]
|
||||||
)
|
)
|
||||||
|
@ -25,11 +29,11 @@ const BootScene = () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setAccelaVisible(false);
|
setAccelaVisible(false);
|
||||||
// 2000
|
// 2000
|
||||||
}, 0);
|
}, 2000);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setMainMenuVisible(true);
|
setMainMenuVisible(true);
|
||||||
//6200
|
//6200
|
||||||
}, 0);
|
}, 6200);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
171
src/store.ts
171
src/store.ts
|
@ -1,6 +1,7 @@
|
||||||
import create from "zustand";
|
import create from "zustand";
|
||||||
import { combine } from "zustand/middleware";
|
import { combine } from "zustand/middleware";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
import authorize_user_letters from "./resources/authorize_user_letters.json";
|
||||||
|
|
||||||
type SceneState = {
|
type SceneState = {
|
||||||
currentScene: string;
|
currentScene: string;
|
||||||
|
@ -92,6 +93,35 @@ export type YellowTextState = {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type BootState = {
|
||||||
|
componentMatrix: {
|
||||||
|
main_menu: [string, string];
|
||||||
|
load_data: [string, string];
|
||||||
|
authorize_user: number[];
|
||||||
|
};
|
||||||
|
componentMatrixIndices: {
|
||||||
|
// 0 or 1
|
||||||
|
main_menu: number;
|
||||||
|
// 0 or 1
|
||||||
|
load_data: number;
|
||||||
|
authorize_user: number;
|
||||||
|
};
|
||||||
|
subscene: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AuthorizeUserState = {
|
||||||
|
bgLettersPos: {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
};
|
||||||
|
activeLetterTextureOffset: {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
};
|
||||||
|
setBgLettersPos: (to: { x: number; y: number }) => void;
|
||||||
|
setActiveLetterTexOffset: (to: { x: number; y: number }) => void;
|
||||||
|
};
|
||||||
|
|
||||||
export type GreenTextState = {
|
export type GreenTextState = {
|
||||||
text: string;
|
text: string;
|
||||||
transformState: {
|
transformState: {
|
||||||
|
@ -351,24 +381,11 @@ export const useSSknStore = create<SSknState>((set) => ({
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useSceneStore = create<SceneState>((set) => ({
|
export const useSceneStore = create<SceneState>((set) => ({
|
||||||
currentScene: "media",
|
currentScene: "polytan",
|
||||||
setScene: (to) => set(() => ({ currentScene: to })),
|
setScene: (to) => set(() => ({ currentScene: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useBootStore = create(
|
export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
|
||||||
combine(
|
|
||||||
{
|
|
||||||
componentMatrix: {
|
|
||||||
main_menu: ["authorize_user", "load_data"],
|
|
||||||
load_data: ["load_data_yes", "load_data_no"],
|
|
||||||
authorize_user: [
|
|
||||||
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
|
|
||||||
[14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26],
|
|
||||||
[27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39],
|
|
||||||
[39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51],
|
|
||||||
[51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
bgLettersPos: {
|
bgLettersPos: {
|
||||||
x: 3.35,
|
x: 3.35,
|
||||||
y: -0.7,
|
y: -0.7,
|
||||||
|
@ -377,120 +394,50 @@ export const useBootStore = create(
|
||||||
x: 0,
|
x: 0,
|
||||||
y: -0.2,
|
y: -0.2,
|
||||||
},
|
},
|
||||||
|
setBgLettersPos: (to: { x: number; y: number }) =>
|
||||||
|
set(() => ({ bgLettersPos: to })),
|
||||||
|
setActiveLetterTexOffset: (to: { x: number; y: number }) =>
|
||||||
|
set(() => ({ activeLetterTextureOffset: 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.letters,
|
||||||
|
},
|
||||||
componentMatrixIndices: {
|
componentMatrixIndices: {
|
||||||
// 0 or 1
|
// 0 or 1
|
||||||
main_menu: 0,
|
main_menu: 0,
|
||||||
// 0 or 1
|
// 0 or 1
|
||||||
load_data: 0,
|
load_data: 0,
|
||||||
authorize_user: {
|
authorize_user: 0,
|
||||||
row: 0,
|
|
||||||
col: 0,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
// main_menu, load_data or authorize_user
|
// main_menu, load_data or authorize_user
|
||||||
subscene: "authorize_user",
|
subscene: "main_menu",
|
||||||
} as any,
|
} as BootState,
|
||||||
(set) => ({
|
(set) => ({
|
||||||
|
setSubscene: (to: string) => set(() => ({ subscene: to })),
|
||||||
toggleComponentMatrixIdx: (subscene: string) =>
|
toggleComponentMatrixIdx: (subscene: string) =>
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
componentMatrixIndices: {
|
componentMatrixIndices: {
|
||||||
...state.componentMatrixIndices,
|
...state.componentMatrixIndices,
|
||||||
[subscene]: Number(!state.componentMatrixIndices[subscene]),
|
[subscene]: Number(
|
||||||
|
!state.componentMatrixIndices[
|
||||||
|
subscene as keyof typeof state.componentMatrixIndices
|
||||||
|
]
|
||||||
|
),
|
||||||
},
|
},
|
||||||
})),
|
})),
|
||||||
setSubscene: (to: string) => set(() => ({ subscene: to })),
|
setAuthorizeUserMatrixIdx: (to: number) =>
|
||||||
moveAuthorizeUserLetters: (direction: string) =>
|
set((state) => ({
|
||||||
set((state) => {
|
|
||||||
let initialPos = state.bgLettersPos;
|
|
||||||
let initialActiveLetterTextureOffset =
|
|
||||||
state.activeLetterTextureOffset;
|
|
||||||
let initialLetterRowIdx =
|
|
||||||
state.componentMatrixIndices.authorize_user.row;
|
|
||||||
let initialLetterColIdx =
|
|
||||||
state.componentMatrixIndices.authorize_user.col;
|
|
||||||
|
|
||||||
let axis: string;
|
|
||||||
let finalPosVal: number;
|
|
||||||
let finalTextureOffsetVal: number;
|
|
||||||
let finalLetterRowIdx: number;
|
|
||||||
let finalLetterColIdx: number;
|
|
||||||
|
|
||||||
switch (direction) {
|
|
||||||
case "right":
|
|
||||||
axis = "x";
|
|
||||||
if (initialPos.x - 0.3 < -0.25) {
|
|
||||||
finalPosVal = -0.25;
|
|
||||||
finalLetterRowIdx = 12;
|
|
||||||
finalTextureOffsetVal = 0.93;
|
|
||||||
} else {
|
|
||||||
finalPosVal = initialPos.x - 0.3;
|
|
||||||
finalLetterRowIdx = initialLetterRowIdx + 1;
|
|
||||||
finalTextureOffsetVal =
|
|
||||||
initialActiveLetterTextureOffset.x + 0.0775;
|
|
||||||
}
|
|
||||||
finalLetterColIdx = initialLetterColIdx;
|
|
||||||
break;
|
|
||||||
case "left":
|
|
||||||
axis = "x";
|
|
||||||
if (initialPos.x + 0.3 > 3.35) {
|
|
||||||
finalPosVal = 3.35;
|
|
||||||
finalLetterRowIdx = 0;
|
|
||||||
finalTextureOffsetVal = 0;
|
|
||||||
} else {
|
|
||||||
finalPosVal = initialPos.x + 0.3;
|
|
||||||
finalTextureOffsetVal =
|
|
||||||
initialActiveLetterTextureOffset.x - 0.0775;
|
|
||||||
finalLetterRowIdx = initialLetterRowIdx - 1;
|
|
||||||
}
|
|
||||||
finalLetterColIdx = initialLetterColIdx;
|
|
||||||
break;
|
|
||||||
case "up":
|
|
||||||
axis = "y";
|
|
||||||
if (initialPos.y - 0.25 < -0.7) {
|
|
||||||
finalPosVal = -0.7;
|
|
||||||
finalLetterColIdx = 0;
|
|
||||||
finalTextureOffsetVal = -0.2;
|
|
||||||
} else {
|
|
||||||
finalPosVal = initialPos.y - 0.25;
|
|
||||||
finalTextureOffsetVal =
|
|
||||||
initialActiveLetterTextureOffset.y + 0.2;
|
|
||||||
finalLetterColIdx = initialLetterColIdx - 1;
|
|
||||||
}
|
|
||||||
finalLetterRowIdx = initialLetterRowIdx;
|
|
||||||
break;
|
|
||||||
case "down":
|
|
||||||
axis = "y";
|
|
||||||
if (initialPos.y + 0.25 > 0.3) {
|
|
||||||
finalPosVal = 0.3;
|
|
||||||
finalLetterColIdx = 4;
|
|
||||||
finalTextureOffsetVal = -1;
|
|
||||||
} else {
|
|
||||||
finalPosVal = initialPos.y + 0.25;
|
|
||||||
finalTextureOffsetVal =
|
|
||||||
initialActiveLetterTextureOffset.y - 0.2;
|
|
||||||
finalLetterColIdx = initialLetterColIdx + 1;
|
|
||||||
}
|
|
||||||
finalLetterRowIdx = initialLetterRowIdx;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
bgLettersPos: {
|
|
||||||
...state.bgLettersPos,
|
|
||||||
[axis!]: finalPosVal!,
|
|
||||||
},
|
|
||||||
activeLetterTextureOffset: {
|
|
||||||
...state.activeLetterTextureOffset,
|
|
||||||
[axis!]: finalTextureOffsetVal!,
|
|
||||||
},
|
|
||||||
componentMatrixIndices: {
|
componentMatrixIndices: {
|
||||||
...state.componentMatrixIndices,
|
...state.componentMatrixIndices,
|
||||||
authorize_user: {
|
authorize_user: to,
|
||||||
row: finalLetterRowIdx!,
|
|
||||||
col: finalLetterColIdx!,
|
|
||||||
},
|
},
|
||||||
},
|
})),
|
||||||
};
|
|
||||||
}),
|
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue