mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
fixed part of user authorization
This commit is contained in:
parent
6292e452b5
commit
42b5857f8a
15 changed files with 217 additions and 274 deletions
|
@ -44,78 +44,33 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
||||||
authorizeActiveLetters
|
authorizeActiveLetters
|
||||||
);
|
);
|
||||||
|
|
||||||
const letterIdx = useStore((state) => state.authorizeUserLetterIdx);
|
|
||||||
const subscene = useStore((state) => state.bootSubscene);
|
const subscene = useStore((state) => state.bootSubscene);
|
||||||
const prevData = usePrevious({ letterIdx, subscene });
|
const authorizeUserMatrixIndices = useStore(
|
||||||
|
(state) => state.authorizeUserMatrixIndices
|
||||||
|
);
|
||||||
|
|
||||||
const bgLettersRef = useRef<THREE.Object3D>();
|
const bgLettersRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
const activeLetterMap = useMemo(() => {
|
const activeLetterMap = useMemo(() => {
|
||||||
activeLettersTex.wrapT = activeLettersTex.wrapS = THREE.RepeatWrapping;
|
activeLettersTex.wrapT = activeLettersTex.wrapS = THREE.RepeatWrapping;
|
||||||
activeLettersTex.repeat.set(0.06, 0.2);
|
activeLettersTex.repeat.set(0.06, 0.2);
|
||||||
activeLettersTex.offset.x = 0;
|
activeLettersTex.offset.x = 0.0775 * authorizeUserMatrixIndices.colIdx;
|
||||||
activeLettersTex.offset.y = -0.2;
|
activeLettersTex.offset.y = -0.2 - 0.2 * authorizeUserMatrixIndices.rowIdx;
|
||||||
return activeLettersTex;
|
return activeLettersTex;
|
||||||
}, [activeLettersTex]);
|
}, [
|
||||||
|
activeLettersTex,
|
||||||
useEffect(() => {
|
authorizeUserMatrixIndices.colIdx,
|
||||||
if (prevData?.subscene === "main_menu" && subscene === "authorize_user") {
|
authorizeUserMatrixIndices.rowIdx,
|
||||||
activeLetterMap.offset.x = 0;
|
]);
|
||||||
activeLetterMap.offset.y = -0.2;
|
|
||||||
}
|
|
||||||
}, [subscene, prevData?.subscene, activeLetterMap.offset]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (bgLettersRef.current) {
|
if (bgLettersRef.current) {
|
||||||
//down
|
bgLettersRef.current.position.y =
|
||||||
if (prevData!.letterIdx + 13 === letterIdx) {
|
-0.7 + 0.25 * authorizeUserMatrixIndices.rowIdx;
|
||||||
bgLettersRef.current.position.y += 0.25;
|
bgLettersRef.current.position.x =
|
||||||
activeLetterMap.offset.y -= 0.2;
|
3.35 - 0.3 * authorizeUserMatrixIndices.colIdx;
|
||||||
// down skip
|
|
||||||
} else if (letterIdx === prevData!.letterIdx + 26) {
|
|
||||||
bgLettersRef.current.position.y += 0.5;
|
|
||||||
activeLetterMap.offset.y -= 0.4;
|
|
||||||
} else if (letterIdx === prevData!.letterIdx + 52) {
|
|
||||||
bgLettersRef.current.position.y += 1;
|
|
||||||
activeLetterMap.offset.y -= 0.8;
|
|
||||||
}
|
}
|
||||||
// up
|
}, [authorizeUserMatrixIndices.colIdx, authorizeUserMatrixIndices.rowIdx]);
|
||||||
else if (letterIdx === prevData!.letterIdx - 13) {
|
|
||||||
bgLettersRef.current.position.y -= 0.25;
|
|
||||||
activeLetterMap.offset.y += 0.2;
|
|
||||||
// up skip
|
|
||||||
} else if (letterIdx === prevData!.letterIdx - 26) {
|
|
||||||
bgLettersRef.current.position.y -= 0.5;
|
|
||||||
activeLetterMap.offset.y += 0.4;
|
|
||||||
} else if (letterIdx === prevData!.letterIdx - 52) {
|
|
||||||
bgLettersRef.current.position.y -= 1;
|
|
||||||
activeLetterMap.offset.y += 0.8;
|
|
||||||
}
|
|
||||||
// left
|
|
||||||
else if (letterIdx === prevData!.letterIdx - 1) {
|
|
||||||
bgLettersRef.current.position.x += 0.3;
|
|
||||||
activeLetterMap.offset.x -= 0.0775;
|
|
||||||
}
|
|
||||||
// left skip
|
|
||||||
else if (letterIdx === prevData!.letterIdx - 2) {
|
|
||||||
bgLettersRef.current.position.x += 0.6;
|
|
||||||
activeLetterMap.offset.x -= 0.155;
|
|
||||||
}
|
|
||||||
// right
|
|
||||||
else if (letterIdx === prevData!.letterIdx + 1) {
|
|
||||||
bgLettersRef.current.position.x -= 0.3;
|
|
||||||
activeLetterMap.offset.x += 0.0775;
|
|
||||||
} else if (letterIdx === prevData!.letterIdx + 2) {
|
|
||||||
bgLettersRef.current.position.x -= 0.6;
|
|
||||||
activeLetterMap.offset.x += 0.155;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
activeLetterMap.offset.x = 0;
|
|
||||||
activeLetterMap.offset.y = -0.2;
|
|
||||||
};
|
|
||||||
}, [activeLetterMap.offset, letterIdx, prevData]);
|
|
||||||
|
|
||||||
const playerName = useStore((state) => state.playerName.split(""));
|
const playerName = useStore((state) => state.playerName.split(""));
|
||||||
|
|
||||||
|
|
|
@ -67,6 +67,7 @@ const GateMiddleObject = (props: GateMiddleObjectProps) => {
|
||||||
}
|
}
|
||||||
posX={item.posX}
|
posX={item.posX}
|
||||||
posY={item.posY}
|
posY={item.posY}
|
||||||
|
key={idx}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</a.group>
|
</a.group>
|
||||||
|
|
|
@ -57,24 +57,27 @@ const Images = () => {
|
||||||
}, [currentScene, activeSite, idleNodeImages, nodeImages]);
|
}, [currentScene, activeSite, idleNodeImages, nodeImages]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadNewImage = (imgIdx: number) => {
|
let timer: ReturnType<typeof setTimeout>;
|
||||||
setImageScaleY(0);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
textureLoader.load(sceneImages[imgIdx].default, setActiveImage);
|
|
||||||
setImageScaleY(3.75);
|
|
||||||
}, 300);
|
|
||||||
};
|
|
||||||
|
|
||||||
(async () => {
|
|
||||||
if (mediaPercentageElapsed === 0 && sceneImages[0]) {
|
if (mediaPercentageElapsed === 0 && sceneImages[0]) {
|
||||||
textureLoader.load(sceneImages[0].default, setActiveImage);
|
textureLoader.load(sceneImages[0].default, setActiveImage);
|
||||||
} else if (mediaPercentageElapsed === 35 && sceneImages[1]) {
|
} else if (mediaPercentageElapsed === 35 && sceneImages[1]) {
|
||||||
loadNewImage(1);
|
setImageScaleY(0);
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
textureLoader.load(sceneImages[1].default, setActiveImage);
|
||||||
|
setImageScaleY(3.75);
|
||||||
|
}, 300);
|
||||||
} else if (mediaPercentageElapsed === 70 && sceneImages[2]) {
|
} else if (mediaPercentageElapsed === 70 && sceneImages[2]) {
|
||||||
loadNewImage(2);
|
setImageScaleY(0);
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
textureLoader.load(sceneImages[1].default, setActiveImage);
|
||||||
|
setImageScaleY(3.75);
|
||||||
|
}, 300);
|
||||||
}
|
}
|
||||||
})();
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
};
|
||||||
}, [mediaPercentageElapsed, sceneImages, textureLoader]);
|
}, [mediaPercentageElapsed, sceneImages, textureLoader]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useCallback, useEffect, useMemo, useRef } from "react";
|
import React, { useCallback, useEffect, useRef } from "react";
|
||||||
import {
|
import {
|
||||||
getBootSceneContext,
|
getBootSceneContext,
|
||||||
getEndSceneContext,
|
getEndSceneContext,
|
||||||
|
@ -15,8 +15,11 @@ import handleBootSceneInput from "../core/input-handlers/handleBootSceneInput";
|
||||||
import handleEndSceneInput from "../core/input-handlers/handleEndSceneInput";
|
import handleEndSceneInput from "../core/input-handlers/handleEndSceneInput";
|
||||||
import handleEvent from "../core/handleEvent";
|
import handleEvent from "../core/handleEvent";
|
||||||
import { GameEvent } from "../types/types";
|
import { GameEvent } from "../types/types";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { MouseEvent, useLoader } from "react-three-fiber";
|
||||||
import circleButton from "../static/sprites/controller/circle.png";
|
import circleButton from "../static/sprites/controller/circle.png";
|
||||||
|
import squareButton from "../static/sprites/controller/square.png";
|
||||||
|
import triangleButton from "../static/sprites/controller/triangle.png";
|
||||||
|
import crossButton from "../static/sprites/controller/cross.png";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useGesture } from "react-use-gesture";
|
import { useGesture } from "react-use-gesture";
|
||||||
import IdleManager from "./IdleManager";
|
import IdleManager from "./IdleManager";
|
||||||
|
@ -26,6 +29,9 @@ const InputHandler = () => {
|
||||||
const inputCooldown = useStore((state) => state.inputCooldown);
|
const inputCooldown = useStore((state) => state.inputCooldown);
|
||||||
|
|
||||||
const circleButtonTex = useLoader(THREE.TextureLoader, circleButton);
|
const circleButtonTex = useLoader(THREE.TextureLoader, circleButton);
|
||||||
|
const crossButtonTex = useLoader(THREE.TextureLoader, crossButton);
|
||||||
|
const squareButtonTex = useLoader(THREE.TextureLoader, squareButton);
|
||||||
|
const triangleButtonTex = useLoader(THREE.TextureLoader, triangleButton);
|
||||||
|
|
||||||
const timeSinceLastKeyPress = useRef(-1);
|
const timeSinceLastKeyPress = useRef(-1);
|
||||||
|
|
||||||
|
@ -132,6 +138,13 @@ const InputHandler = () => {
|
||||||
[handleKeyPress]
|
[handleKeyPress]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const handleVirtualButtonPress = useCallback(
|
||||||
|
(event: MouseEvent) => {
|
||||||
|
handleKeyPress(event.object.name);
|
||||||
|
},
|
||||||
|
[handleKeyPress]
|
||||||
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
window.addEventListener("keydown", handleKeyBoardEvent);
|
window.addEventListener("keydown", handleKeyBoardEvent);
|
||||||
|
|
||||||
|
@ -152,6 +165,65 @@ const InputHandler = () => {
|
||||||
<sprite scale={[10, 10, 0]} renderOrder={99999} {...bind()}>
|
<sprite scale={[10, 10, 0]} renderOrder={99999} {...bind()}>
|
||||||
<spriteMaterial attach="material" opacity={0} depthTest={false} />
|
<spriteMaterial attach="material" opacity={0} depthTest={false} />
|
||||||
</sprite>
|
</sprite>
|
||||||
|
|
||||||
|
<group scale={[0.8, 0.8, 0]} position={[3.5, -2, 0]}>
|
||||||
|
<sprite
|
||||||
|
scale={[1.5, 1.5, 0]}
|
||||||
|
position={[1, 0, 0]}
|
||||||
|
renderOrder={99999}
|
||||||
|
onClick={handleVirtualButtonPress}
|
||||||
|
name={"CIRCLE"}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={circleButtonTex}
|
||||||
|
depthTest={false}
|
||||||
|
opacity={0.8}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
<sprite
|
||||||
|
scale={[1.5, 1.5, 0]}
|
||||||
|
position={[0, -1, 0]}
|
||||||
|
renderOrder={99999}
|
||||||
|
onClick={handleVirtualButtonPress}
|
||||||
|
name={"CROSS"}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={crossButtonTex}
|
||||||
|
depthTest={false}
|
||||||
|
opacity={0.8}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
<sprite
|
||||||
|
scale={[1.5, 1.5, 0]}
|
||||||
|
position={[0, 1, 0]}
|
||||||
|
renderOrder={99999}
|
||||||
|
onClick={handleVirtualButtonPress}
|
||||||
|
name={"TRIANGLE"}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={triangleButtonTex}
|
||||||
|
depthTest={false}
|
||||||
|
opacity={0.8}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
<sprite
|
||||||
|
scale={[1.5, 1.5, 0]}
|
||||||
|
position={[-1, 0, 0]}
|
||||||
|
renderOrder={99999}
|
||||||
|
onClick={handleVirtualButtonPress}
|
||||||
|
name={"square"}
|
||||||
|
>
|
||||||
|
<spriteMaterial
|
||||||
|
attach="material"
|
||||||
|
map={squareButtonTex}
|
||||||
|
depthTest={false}
|
||||||
|
opacity={0.8}
|
||||||
|
/>
|
||||||
|
</sprite>
|
||||||
|
</group>
|
||||||
<IdleManager
|
<IdleManager
|
||||||
lainIdleTimerRef={lainIdleTimerRef}
|
lainIdleTimerRef={lainIdleTimerRef}
|
||||||
idleSceneTimerRef={idleSceneTimerRef}
|
idleSceneTimerRef={idleSceneTimerRef}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import * as THREE from "three";
|
||||||
import PauseSquare from "./PauseSquare";
|
import PauseSquare from "./PauseSquare";
|
||||||
import PauseBigLetter from "../../TextRenderer/PauseBigLetter";
|
import PauseBigLetter from "../../TextRenderer/PauseBigLetter";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../../store";
|
||||||
|
import usePrevious from "../../../hooks/usePrevious";
|
||||||
|
|
||||||
const Pause = () => {
|
const Pause = () => {
|
||||||
const generateSqaureGeom = useCallback((row: number, square: number) => {
|
const generateSqaureGeom = useCallback((row: number, square: number) => {
|
||||||
|
@ -40,6 +41,7 @@ const Pause = () => {
|
||||||
);
|
);
|
||||||
|
|
||||||
const subscene = useStore((state) => state.mainSubscene);
|
const subscene = useStore((state) => state.mainSubscene);
|
||||||
|
const prevData = usePrevious({ subscene });
|
||||||
const setInputCooldown = useStore((state) => state.setInputCooldown);
|
const setInputCooldown = useStore((state) => state.setInputCooldown);
|
||||||
|
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
|
@ -59,15 +61,15 @@ const Pause = () => {
|
||||||
setTimeout(() => setInputCooldown(1000), 7600);
|
setTimeout(() => setInputCooldown(1000), 7600);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
if (prevData?.subscene === "pause" && subscene === "site") {
|
||||||
setExit(true);
|
setExit(true);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setVisible(false);
|
setVisible(false);
|
||||||
setFinished(false);
|
setFinished(false);
|
||||||
setExit(false);
|
setExit(false);
|
||||||
}, 1200);
|
}, 1200);
|
||||||
};
|
}
|
||||||
}, [setInputCooldown, subscene]);
|
}, [prevData?.subscene, setInputCooldown, subscene]);
|
||||||
|
|
||||||
const whenActive = useCallback((rowIdx: number, colIdx: number) => {
|
const whenActive = useCallback((rowIdx: number, colIdx: number) => {
|
||||||
switch (rowIdx) {
|
switch (rowIdx) {
|
||||||
|
|
|
@ -9,6 +9,7 @@ import {
|
||||||
import { playMediaElement, resetMediaElement } from "../helpers/media-helpers";
|
import { playMediaElement, resetMediaElement } from "../helpers/media-helpers";
|
||||||
import {
|
import {
|
||||||
ActiveSite,
|
ActiveSite,
|
||||||
|
AuthorizeUserMatrixIndices,
|
||||||
EndComponent,
|
EndComponent,
|
||||||
GameScene,
|
GameScene,
|
||||||
LeftMediaComponent,
|
LeftMediaComponent,
|
||||||
|
@ -164,9 +165,7 @@ export const knockNode = {
|
||||||
export const knockNodeAndFall = {
|
export const knockNodeAndFall = {
|
||||||
state: [
|
state: [
|
||||||
{ mutation: { lainMoveState: "knock_and_fall", inputCooldown: 6000 } },
|
{ mutation: { lainMoveState: "knock_and_fall", inputCooldown: 6000 } },
|
||||||
{
|
{ mutation: { lainMoveState: "standing" }, delay: 6000 },
|
||||||
mutation: { lainMoveState: "standing" },
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
effects: [nodeKnockAndFallAnimation],
|
effects: [nodeKnockAndFallAnimation],
|
||||||
audio: [
|
audio: [
|
||||||
|
@ -649,7 +648,6 @@ export const enterUserAuthorization = {
|
||||||
{
|
{
|
||||||
mutation: {
|
mutation: {
|
||||||
bootSubscene: "authorize_user",
|
bootSubscene: "authorize_user",
|
||||||
authorizeUserLetterIdx: 0,
|
|
||||||
inputCooldown: 500,
|
inputCooldown: 500,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -664,6 +662,7 @@ export const exitUserAuthorization = {
|
||||||
playerName: "",
|
playerName: "",
|
||||||
bootSubscene: "main_menu",
|
bootSubscene: "main_menu",
|
||||||
inputCooldown: 500,
|
inputCooldown: 500,
|
||||||
|
authorizeUserMatrixIndices: { rowIdx: 0, colIdx: 0 },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -690,14 +689,15 @@ export const removePlayerNameLastChar = (calculatedState: {
|
||||||
|
|
||||||
export const failUpdatePlayerName = { audio: [{ sfx: [audio.sound0] }] };
|
export const failUpdatePlayerName = { audio: [{ sfx: [audio.sound0] }] };
|
||||||
|
|
||||||
export const updateAuthorizeUserLetterIdx = (calculatedState: {
|
export const updateAuthorizeUserLetterMatrixIndices = (calculatedState: {
|
||||||
authorizeUserLetterIdx: number;
|
authorizeUserLetterMatrixIndices: AuthorizeUserMatrixIndices;
|
||||||
}) => ({
|
}) => ({
|
||||||
state: [
|
state: [
|
||||||
{
|
{
|
||||||
mutation: {
|
mutation: {
|
||||||
inputCooldown: 300,
|
inputCooldown: 300,
|
||||||
authorizeUserLetterIdx: calculatedState.authorizeUserLetterIdx,
|
authorizeUserMatrixIndices:
|
||||||
|
calculatedState.authorizeUserLetterMatrixIndices,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
@ -12,7 +12,7 @@ import {
|
||||||
loadGameFail,
|
loadGameFail,
|
||||||
removePlayerNameLastChar,
|
removePlayerNameLastChar,
|
||||||
startNewGame,
|
startNewGame,
|
||||||
updateAuthorizeUserLetterIdx,
|
updateAuthorizeUserLetterMatrixIndices,
|
||||||
updatePlayerName,
|
updatePlayerName,
|
||||||
} from "../eventTemplates";
|
} from "../eventTemplates";
|
||||||
import { BootSceneContext, GameEvent } from "../../types/types";
|
import { BootSceneContext, GameEvent } from "../../types/types";
|
||||||
|
@ -26,8 +26,8 @@ const handleBootSceneInput = (
|
||||||
activeMainMenuComponent,
|
activeMainMenuComponent,
|
||||||
activePromptComponent,
|
activePromptComponent,
|
||||||
promptVisible,
|
promptVisible,
|
||||||
authorizeUserLetterIdx,
|
|
||||||
playerName,
|
playerName,
|
||||||
|
authorizeUserMatrixIndices,
|
||||||
} = bootSceneContext;
|
} = bootSceneContext;
|
||||||
|
|
||||||
if (promptVisible) {
|
if (promptVisible) {
|
||||||
|
@ -83,113 +83,69 @@ const handleBootSceneInput = (
|
||||||
} else {
|
} else {
|
||||||
return exitUserAuthorization;
|
return exitUserAuthorization;
|
||||||
}
|
}
|
||||||
case "LEFT":
|
case "LEFT": {
|
||||||
// if utmost left, break
|
const newMatrixIndices = {
|
||||||
if (
|
...authorizeUserMatrixIndices,
|
||||||
[0, 13, 26, 39, 52].includes(authorizeUserLetterIdx) ||
|
colIdx:
|
||||||
authorizeUserLetterIdx === 15
|
authorizeUserMatrixIndices.colIdx - 1 < 0
|
||||||
)
|
? authorizeUserMatrixIndices.colIdx
|
||||||
return;
|
: authorizeUserMatrixIndices.colIdx - 1,
|
||||||
// skip
|
};
|
||||||
else if (
|
|
||||||
authorizeUserLetterIdx === 41 ||
|
return updateAuthorizeUserLetterMatrixIndices({
|
||||||
authorizeUserLetterIdx === 17 ||
|
authorizeUserLetterMatrixIndices: newMatrixIndices,
|
||||||
authorizeUserLetterIdx === 30 ||
|
|
||||||
authorizeUserLetterIdx === 43 ||
|
|
||||||
authorizeUserLetterIdx === 19 ||
|
|
||||||
authorizeUserLetterIdx === 45
|
|
||||||
) {
|
|
||||||
return updateAuthorizeUserLetterIdx({
|
|
||||||
authorizeUserLetterIdx: authorizeUserLetterIdx - 2,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return updateAuthorizeUserLetterIdx({
|
|
||||||
authorizeUserLetterIdx: authorizeUserLetterIdx - 1,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
case "RIGHT":
|
|
||||||
// if utmost right, break
|
case "RIGHT": {
|
||||||
if ([12, 25, 38, 51, 64].includes(authorizeUserLetterIdx)) return;
|
const newMatrixIndices = {
|
||||||
// skip empty
|
...authorizeUserMatrixIndices,
|
||||||
else if (
|
colIdx:
|
||||||
authorizeUserLetterIdx === 39 ||
|
authorizeUserMatrixIndices.colIdx + 1 > 12
|
||||||
authorizeUserLetterIdx === 41 ||
|
? authorizeUserMatrixIndices.colIdx
|
||||||
authorizeUserLetterIdx === 28 ||
|
: authorizeUserMatrixIndices.colIdx + 1,
|
||||||
authorizeUserLetterIdx === 15 ||
|
};
|
||||||
authorizeUserLetterIdx === 43 ||
|
|
||||||
authorizeUserLetterIdx === 17
|
return updateAuthorizeUserLetterMatrixIndices({
|
||||||
) {
|
authorizeUserLetterMatrixIndices: newMatrixIndices,
|
||||||
return updateAuthorizeUserLetterIdx({
|
|
||||||
authorizeUserLetterIdx: authorizeUserLetterIdx + 2,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return updateAuthorizeUserLetterIdx({
|
|
||||||
authorizeUserLetterIdx: authorizeUserLetterIdx + 1,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
case "DOWN":
|
|
||||||
// if utmost down, break
|
case "DOWN": {
|
||||||
if (
|
const newMatrixIndices = {
|
||||||
Array.from(new Array(13), (x, i) => i + 52).includes(
|
...authorizeUserMatrixIndices,
|
||||||
authorizeUserLetterIdx
|
rowIdx:
|
||||||
)
|
authorizeUserMatrixIndices.rowIdx + 1 > 4
|
||||||
) {
|
? authorizeUserMatrixIndices.rowIdx
|
||||||
return;
|
: authorizeUserMatrixIndices.rowIdx + 1,
|
||||||
// skip empty
|
};
|
||||||
} else if (
|
|
||||||
authorizeUserLetterIdx === 0 ||
|
return updateAuthorizeUserLetterMatrixIndices({
|
||||||
authorizeUserLetterIdx === 1 ||
|
authorizeUserLetterMatrixIndices: newMatrixIndices,
|
||||||
authorizeUserLetterIdx === 52 ||
|
|
||||||
authorizeUserLetterIdx === 27 ||
|
|
||||||
authorizeUserLetterIdx === 31 ||
|
|
||||||
authorizeUserLetterIdx === 5
|
|
||||||
) {
|
|
||||||
return updateAuthorizeUserLetterIdx({
|
|
||||||
authorizeUserLetterIdx: authorizeUserLetterIdx + 26,
|
|
||||||
});
|
|
||||||
} else if (authorizeUserLetterIdx === 3) {
|
|
||||||
return updateAuthorizeUserLetterIdx({
|
|
||||||
authorizeUserLetterIdx: authorizeUserLetterIdx + 52,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return updateAuthorizeUserLetterIdx({
|
|
||||||
authorizeUserLetterIdx: authorizeUserLetterIdx + 13,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
case "UP":
|
|
||||||
// if utmost up, break
|
case "UP": {
|
||||||
if (
|
const newMatrixIndices = {
|
||||||
Array.from(new Array(13), (x, i) => i).includes(
|
...authorizeUserMatrixIndices,
|
||||||
authorizeUserLetterIdx
|
rowIdx:
|
||||||
)
|
authorizeUserMatrixIndices.rowIdx - 1 < 0
|
||||||
) {
|
? authorizeUserMatrixIndices.rowIdx
|
||||||
return;
|
: authorizeUserMatrixIndices.rowIdx - 1,
|
||||||
// skip empty
|
};
|
||||||
} else if (
|
|
||||||
authorizeUserLetterIdx === 26 ||
|
return updateAuthorizeUserLetterMatrixIndices({
|
||||||
authorizeUserLetterIdx === 27 ||
|
authorizeUserLetterMatrixIndices: newMatrixIndices,
|
||||||
authorizeUserLetterIdx === 53 ||
|
|
||||||
authorizeUserLetterIdx === 31 ||
|
|
||||||
authorizeUserLetterIdx === 57
|
|
||||||
) {
|
|
||||||
return updateAuthorizeUserLetterIdx({
|
|
||||||
authorizeUserLetterIdx: authorizeUserLetterIdx - 26,
|
|
||||||
});
|
|
||||||
} else if (authorizeUserLetterIdx === 55) {
|
|
||||||
return updateAuthorizeUserLetterIdx({
|
|
||||||
authorizeUserLetterIdx: authorizeUserLetterIdx - 52,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return updateAuthorizeUserLetterIdx({
|
|
||||||
authorizeUserLetterIdx: authorizeUserLetterIdx - 13,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
case "CIRCLE":
|
case "CIRCLE":
|
||||||
const chosenCharacter =
|
const chosenCharacter =
|
||||||
authorize_user_letters[
|
authorize_user_letters.matrix[authorizeUserMatrixIndices.rowIdx][
|
||||||
authorizeUserLetterIdx.toString() as keyof typeof authorize_user_letters
|
authorizeUserMatrixIndices.colIdx
|
||||||
];
|
];
|
||||||
|
|
||||||
|
if (chosenCharacter) {
|
||||||
const newName = handleNameSelection(playerName, chosenCharacter);
|
const newName = handleNameSelection(playerName, chosenCharacter);
|
||||||
|
|
||||||
if (newName?.length === 8) return;
|
if (newName?.length === 8) return;
|
||||||
|
@ -199,6 +155,7 @@ const handleBootSceneInput = (
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default handleBootSceneInput;
|
export default handleBootSceneInput;
|
||||||
|
|
|
@ -1,67 +1,9 @@
|
||||||
{
|
{
|
||||||
"0": "ッ",
|
"matrix": [
|
||||||
"1": "ャ",
|
[ "ッ", "ャ", "ァ", "ワ", "ラ", "ヤ", "マ", "ハ", "ナ", "タ", "サ", "カ", "ア"],
|
||||||
"2": "ァ",
|
[null, null, "ィ", null, "リ", null, "ミ", "ヒ", "ニ", "チ", "シ", "キ", "イ"],
|
||||||
"3": "ワ",
|
["゛", "ュ", "ゥ", null, "ル", "ユ", "ム", "フ", "ヌ", "ツ", "ス", "ク", "ウ"],
|
||||||
"4": "ラ",
|
["゜", null, "ェ", null, "レ", null, "メ", "ヘ", "ネ", "テ", "セ", "ケ", "エ"],
|
||||||
"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": "オ"
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,7 +22,7 @@ const BootScene = () => {
|
||||||
}, [setInputCooldown]);
|
}, [setInputCooldown]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<group position-z={3}>
|
||||||
<BootAccela visible={accelaVisible} />
|
<BootAccela visible={accelaVisible} />
|
||||||
<BootAnimation visible={!accelaVisible} activeSubScene={activeSubscene} />
|
<BootAnimation visible={!accelaVisible} activeSubScene={activeSubscene} />
|
||||||
<BootMainMenuComponents
|
<BootMainMenuComponents
|
||||||
|
@ -31,7 +31,7 @@ const BootScene = () => {
|
||||||
/>
|
/>
|
||||||
<BootAuthorizeUser visible={activeSubscene === "authorize_user"} />
|
<BootAuthorizeUser visible={activeSubscene === "authorize_user"} />
|
||||||
<BootLoadData visible={activeSubscene === "load_data"} />
|
<BootLoadData visible={activeSubscene === "load_data"} />
|
||||||
</perspectiveCamera>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default BootScene;
|
export default BootScene;
|
||||||
|
|
|
@ -24,12 +24,12 @@ const GateScene = () => {
|
||||||
}, [activeNodeName, incrementGateLvl, setInputCooldown, setNodeViewed]);
|
}, [activeNodeName, incrementGateLvl, setInputCooldown, setNodeViewed]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<group position-z={3}>
|
||||||
<pointLight intensity={5.2} color={0xffffff} position={[-2, 0, 0]} />
|
<pointLight intensity={5.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||||
<GateSide />
|
<GateSide />
|
||||||
<GateHUD intro={introAnim} gateLvl={gateLvl} />
|
<GateHUD intro={introAnim} gateLvl={gateLvl} />
|
||||||
<GateMiddleObject intro={introAnim} gateLvl={gateLvl} />
|
<GateMiddleObject intro={introAnim} gateLvl={gateLvl} />
|
||||||
</perspectiveCamera>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default GateScene;
|
export default GateScene;
|
||||||
|
|
|
@ -37,7 +37,9 @@ const IdleMediaScene = () => {
|
||||||
if (vtt) trackElement.src = vtt.default;
|
if (vtt) trackElement.src = vtt.default;
|
||||||
})
|
})
|
||||||
// some entries have no spoken words, so the file doesnt exist. we catch that here.
|
// some entries have no spoken words, so the file doesnt exist. we catch that here.
|
||||||
.catch(() => console.log("no subtitles for this media"));
|
.catch(() => {
|
||||||
|
trackElement.removeAttribute("src");
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (idleMedia.includes("XA")) {
|
if (idleMedia.includes("XA")) {
|
||||||
|
|
|
@ -117,7 +117,7 @@ const MainScene = () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<group position-z={3}>
|
||||||
<Suspense fallback={<Loading />}>
|
<Suspense fallback={<Loading />}>
|
||||||
<LevelSelection />
|
<LevelSelection />
|
||||||
<Popups />
|
<Popups />
|
||||||
|
@ -161,7 +161,7 @@ const MainScene = () => {
|
||||||
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
|
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
|
||||||
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
|
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</perspectiveCamera>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default MainScene;
|
export default MainScene;
|
||||||
|
|
|
@ -76,7 +76,7 @@ const MediaScene = () => {
|
||||||
}, [setInputCooldown]);
|
}, [setInputCooldown]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<group position-z={3}>
|
||||||
{loaded ? (
|
{loaded ? (
|
||||||
<group position={[0.4, -0.3, 0]}>
|
<group position={[0.4, -0.3, 0]}>
|
||||||
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||||
|
@ -99,7 +99,7 @@ const MediaScene = () => {
|
||||||
) : (
|
) : (
|
||||||
<Loading />
|
<Loading />
|
||||||
)}
|
)}
|
||||||
</perspectiveCamera>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
10
src/store.ts
10
src/store.ts
|
@ -7,6 +7,7 @@ import { getNodeById } from "./helpers/node-helpers";
|
||||||
import site_a from "./resources/site_a.json";
|
import site_a from "./resources/site_a.json";
|
||||||
import {
|
import {
|
||||||
ActiveSite,
|
ActiveSite,
|
||||||
|
AuthorizeUserMatrixIndices,
|
||||||
BootSceneContext,
|
BootSceneContext,
|
||||||
BootSubscene,
|
BootSubscene,
|
||||||
EndComponent,
|
EndComponent,
|
||||||
|
@ -91,7 +92,7 @@ type State = {
|
||||||
playerName: string;
|
playerName: string;
|
||||||
|
|
||||||
activeMainMenuComponent: MainMenuComponent;
|
activeMainMenuComponent: MainMenuComponent;
|
||||||
authorizeUserLetterIdx: number;
|
authorizeUserMatrixIndices: AuthorizeUserMatrixIndices;
|
||||||
bootSubscene: BootSubscene;
|
bootSubscene: BootSubscene;
|
||||||
|
|
||||||
promptVisible: boolean;
|
promptVisible: boolean;
|
||||||
|
@ -202,7 +203,10 @@ export const useStore = create(
|
||||||
|
|
||||||
// boot scene
|
// boot scene
|
||||||
activeMainMenuComponent: "authorize_user",
|
activeMainMenuComponent: "authorize_user",
|
||||||
authorizeUserLetterIdx: 0,
|
authorizeUserMatrixIndices: {
|
||||||
|
rowIdx: 0,
|
||||||
|
colIdx: 0,
|
||||||
|
},
|
||||||
bootSubscene: "main_menu",
|
bootSubscene: "main_menu",
|
||||||
|
|
||||||
// prompt
|
// prompt
|
||||||
|
@ -383,7 +387,7 @@ export const getBootSceneContext = (): BootSceneContext => {
|
||||||
playerName: state.playerName,
|
playerName: state.playerName,
|
||||||
subscene: state.bootSubscene,
|
subscene: state.bootSubscene,
|
||||||
activeMainMenuComponent: state.activeMainMenuComponent,
|
activeMainMenuComponent: state.activeMainMenuComponent,
|
||||||
authorizeUserLetterIdx: state.authorizeUserLetterIdx,
|
authorizeUserMatrixIndices: state.authorizeUserMatrixIndices,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -129,11 +129,16 @@ export type MediaSceneContext = {
|
||||||
activeSite: ActiveSite;
|
activeSite: ActiveSite;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type AuthorizeUserMatrixIndices = {
|
||||||
|
rowIdx: number;
|
||||||
|
colIdx: number;
|
||||||
|
};
|
||||||
|
|
||||||
export interface BootSceneContext extends PromptContext {
|
export interface BootSceneContext extends PromptContext {
|
||||||
playerName: string;
|
playerName: string;
|
||||||
subscene: BootSubscene;
|
subscene: BootSubscene;
|
||||||
activeMainMenuComponent: MainMenuComponent;
|
activeMainMenuComponent: MainMenuComponent;
|
||||||
authorizeUserLetterIdx: number;
|
authorizeUserMatrixIndices: AuthorizeUserMatrixIndices;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type EndSceneContext = {
|
export type EndSceneContext = {
|
||||||
|
|
Loading…
Reference in a new issue