mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
changed keybinding system, adding pause
This commit is contained in:
parent
fbefc0eb3a
commit
db396e62ee
19 changed files with 102 additions and 108 deletions
|
@ -19,11 +19,16 @@ const ActiveLevelNodes = () => {
|
||||||
const siteState = useSpring({
|
const siteState = useSpring({
|
||||||
siteRotY: siteTransformState.rotY,
|
siteRotY: siteTransformState.rotY,
|
||||||
sitePosY: siteTransformState.posY,
|
sitePosY: siteTransformState.posY,
|
||||||
|
siteRotX: siteTransformState.rotX,
|
||||||
config: { duration: 1200 },
|
config: { duration: 1200 },
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a.group rotation-y={siteState.siteRotY} position-y={siteState.sitePosY}>
|
<a.group
|
||||||
|
rotation-y={siteState.siteRotY}
|
||||||
|
position-y={siteState.sitePosY}
|
||||||
|
rotation-x={siteState.siteRotX}
|
||||||
|
>
|
||||||
{Object.entries(activeLevelNodes).map((node: [string, any]) => {
|
{Object.entries(activeLevelNodes).map((node: [string, any]) => {
|
||||||
return (
|
return (
|
||||||
<Node
|
<Node
|
||||||
|
|
|
@ -1,15 +1,10 @@
|
||||||
import React, { createRef, memo, RefObject, useRef } from "react";
|
import React, { createRef, memo, RefObject, useRef } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import { useGrayPlanesStore } from "../../store";
|
|
||||||
|
|
||||||
const GrayPlanes = memo(() => {
|
const GrayPlanes = memo((props: { visible: boolean }) => {
|
||||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
const grayPlanesVisible = useGrayPlanesStore(
|
|
||||||
(state) => state.grayPlanesVisible
|
|
||||||
);
|
|
||||||
|
|
||||||
const grayPlanePoses = [
|
const grayPlanePoses = [
|
||||||
[1.2, 0, -1.2],
|
[1.2, 0, -1.2],
|
||||||
[1.2, 0, 1.2],
|
[1.2, 0, 1.2],
|
||||||
|
@ -21,7 +16,7 @@ const GrayPlanes = memo(() => {
|
||||||
];
|
];
|
||||||
|
|
||||||
const grayPlaneRefs = grayPlanePoses.map((poses: number[]) =>
|
const grayPlaneRefs = grayPlanePoses.map((poses: number[]) =>
|
||||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||||
useRef<RefObject<THREE.Object3D>[]>(
|
useRef<RefObject<THREE.Object3D>[]>(
|
||||||
poses.map(() => createRef<THREE.Object3D>())
|
poses.map(() => createRef<THREE.Object3D>())
|
||||||
)
|
)
|
||||||
|
@ -37,7 +32,7 @@ const GrayPlanes = memo(() => {
|
||||||
<group
|
<group
|
||||||
position={[0.1, 0, -2]}
|
position={[0.1, 0, -2]}
|
||||||
ref={grayPlaneGroupRef}
|
ref={grayPlaneGroupRef}
|
||||||
visible={grayPlanesVisible}
|
visible={props.visible}
|
||||||
>
|
>
|
||||||
{grayPlaneRefs.map((ref, idx: number) => {
|
{grayPlaneRefs.map((ref, idx: number) => {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -11,10 +11,9 @@ import { a, useSpring } from "@react-spring/three";
|
||||||
import { useHudStore } from "../../store";
|
import { useHudStore } from "../../store";
|
||||||
import node_huds from "../../resources/node_huds.json";
|
import node_huds from "../../resources/node_huds.json";
|
||||||
|
|
||||||
const HUD = memo(() => {
|
const HUD = memo((props: { visible: boolean }) => {
|
||||||
const active = useHudStore((state) => state.active);
|
const active = useHudStore((state) => state.active);
|
||||||
const id = useHudStore((state) => state.id);
|
const id = useHudStore((state) => state.id);
|
||||||
const visible = useHudStore((state) => state.visible);
|
|
||||||
|
|
||||||
const currentHud = node_huds[id as keyof typeof node_huds];
|
const currentHud = node_huds[id as keyof typeof node_huds];
|
||||||
|
|
||||||
|
@ -83,7 +82,7 @@ const HUD = memo(() => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group visible={visible} position={[0, 0, 10]}>
|
<group visible={props.visible} position={[0, 0, 10]}>
|
||||||
<a.sprite
|
<a.sprite
|
||||||
position-x={longHUDPosX}
|
position-x={longHUDPosX}
|
||||||
position-y={currentHud!.long.position[1]}
|
position-y={currentHud!.long.position[1]}
|
||||||
|
|
|
@ -60,12 +60,17 @@ const Site = memo(() => {
|
||||||
const siteState = useSpring({
|
const siteState = useSpring({
|
||||||
siteRotY: siteTransformState.rotY,
|
siteRotY: siteTransformState.rotY,
|
||||||
sitePosY: siteTransformState.posY,
|
sitePosY: siteTransformState.posY,
|
||||||
|
siteRotX: siteTransformState.rotX,
|
||||||
config: { duration: 1200 },
|
config: { duration: 1200 },
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<a.group rotation-y={siteState.siteRotY} position-y={siteState.sitePosY}>
|
<a.group
|
||||||
|
rotation-y={siteState.siteRotY}
|
||||||
|
position-y={siteState.sitePosY}
|
||||||
|
rotation-x={siteState.siteRotX}
|
||||||
|
>
|
||||||
{Object.entries(level_y_values).map((level: [string, number]) => (
|
{Object.entries(level_y_values).map((level: [string, number]) => (
|
||||||
<group position={[0, level[1], 0]} key={level[0]}>
|
<group position={[0, level[1], 0]} key={level[0]}>
|
||||||
<PurpleRing purpleRingPosY={0.44} level={level[0]} />
|
<PurpleRing purpleRingPosY={0.44} level={level[0]} />
|
||||||
|
|
|
@ -2,15 +2,14 @@ import React, { memo, useRef, useState } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import orbSprite from "../../static/sprite/orb.png";
|
import orbSprite from "../../static/sprite/orb.png";
|
||||||
import { useYellowOrbStore } from "../../store";
|
import { useMainSceneStore } from "../../store";
|
||||||
|
|
||||||
// initialize outside the component otherwise it gets overwritten when it rerenders
|
// initialize outside the component otherwise it gets overwritten when it rerenders
|
||||||
let orbIdx = 0;
|
let orbIdx = 0;
|
||||||
let orbDirectionChangeCount = 0;
|
let orbDirectionChangeCount = 0;
|
||||||
let renderOrder = -1;
|
let renderOrder = -1;
|
||||||
|
|
||||||
const YellowOrb = memo(() => {
|
const YellowOrb = memo((props: { visible: boolean }) => {
|
||||||
const yellowOrbVisible = useYellowOrbStore((state) => state.yellowOrbVisible);
|
|
||||||
const orbRef = useRef<THREE.Object3D>();
|
const orbRef = useRef<THREE.Object3D>();
|
||||||
const [orbDirection, setOrbDirection] = useState("left");
|
const [orbDirection, setOrbDirection] = useState("left");
|
||||||
const [currentCurve, setCurrentCurve] = useState("first");
|
const [currentCurve, setCurrentCurve] = useState("first");
|
||||||
|
@ -32,7 +31,7 @@ const YellowOrb = memo(() => {
|
||||||
);
|
);
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (yellowOrbVisible) {
|
if (props.visible) {
|
||||||
let orbPosFirst = firstCurve.getPoint(orbIdx / 250);
|
let orbPosFirst = firstCurve.getPoint(orbIdx / 250);
|
||||||
let orbPosSecond = secondCurve.getPoint(orbIdx / 250);
|
let orbPosSecond = secondCurve.getPoint(orbIdx / 250);
|
||||||
|
|
||||||
|
@ -108,7 +107,7 @@ const YellowOrb = memo(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, -0.1, 1]} visible={yellowOrbVisible}>
|
<group position={[0, -0.1, 1]} visible={props.visible}>
|
||||||
<sprite scale={[0.5, 0.5, 0.5]} ref={orbRef} renderOrder={renderOrder}>
|
<sprite scale={[0.5, 0.5, 0.5]} ref={orbRef} renderOrder={renderOrder}>
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
|
|
|
@ -1,11 +1,5 @@
|
||||||
import React, { memo, useEffect } from "react";
|
import React, { memo, useEffect } from "react";
|
||||||
import {
|
import { useHudStore, useLainStore, useStarfieldStore } from "../store";
|
||||||
useGrayPlanesStore,
|
|
||||||
useHudStore,
|
|
||||||
useLainStore,
|
|
||||||
useStarfieldStore,
|
|
||||||
useYellowOrbStore,
|
|
||||||
} from "../store";
|
|
||||||
|
|
||||||
// ghost component to manipulate the intro action for the main scene.
|
// ghost component to manipulate the intro action for the main scene.
|
||||||
|
|
||||||
|
@ -22,7 +16,7 @@ const MainSceneIntro = memo(() => {
|
||||||
const toggleHud = useHudStore((state) => state.toggleActive);
|
const toggleHud = useHudStore((state) => state.toggleActive);
|
||||||
|
|
||||||
//const setHudVisible = useSetRecoilState(hudVisibilityAtom);
|
//const setHudVisible = useSetRecoilState(hudVisibilityAtom);
|
||||||
const setOrbVisible = useYellowOrbStore((state) => state.setYellowOrbVisible);
|
// const setOrbVisible = useYellowOrbStore((state) => state.setYellowOrbVisible);
|
||||||
|
|
||||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||||
|
|
||||||
|
@ -36,13 +30,9 @@ const MainSceneIntro = memo(() => {
|
||||||
(state) => state.setMainStarfieldBoostVal
|
(state) => state.setMainStarfieldBoostVal
|
||||||
);
|
);
|
||||||
|
|
||||||
const setGrayPlanesVisible = useGrayPlanesStore(
|
|
||||||
(state) => state.setGrayPlanesVisible
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setGrayPlanesVisible(true);
|
// setGrayPlanesVisible(true);
|
||||||
}, 2500);
|
}, 2500);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
@ -55,7 +45,7 @@ const MainSceneIntro = memo(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setLainMoveState("standing");
|
setLainMoveState("standing");
|
||||||
|
|
||||||
setOrbVisible(true);
|
// setOrbVisible(true);
|
||||||
//setHudVisible(true);
|
//setHudVisible(true);
|
||||||
|
|
||||||
setIntroStarfieldVisible(false);
|
setIntroStarfieldVisible(false);
|
||||||
|
@ -67,10 +57,8 @@ const MainSceneIntro = memo(() => {
|
||||||
}, 300);
|
}, 300);
|
||||||
}, 3860);
|
}, 3860);
|
||||||
}, [
|
}, [
|
||||||
setGrayPlanesVisible,
|
|
||||||
setMainStarfieldBoostVal,
|
setMainStarfieldBoostVal,
|
||||||
setMainStarfieldVisible,
|
setMainStarfieldVisible,
|
||||||
setOrbVisible,
|
|
||||||
setIntroStarfieldVisible,
|
setIntroStarfieldVisible,
|
||||||
setLainMoveState,
|
setLainMoveState,
|
||||||
toggleHud,
|
toggleHud,
|
||||||
|
|
|
@ -3,7 +3,7 @@ import React, { useEffect, useRef } from "react";
|
||||||
import { GreenTextState, useGreenTextStore } from "../../store";
|
import { GreenTextState, useGreenTextStore } from "../../store";
|
||||||
import MediumLetter from "./MediumLetter";
|
import MediumLetter from "./MediumLetter";
|
||||||
|
|
||||||
const GreenTextRenderer = () => {
|
const GreenTextRenderer = (props: { visible?: boolean }) => {
|
||||||
const greenTextActive = useGreenTextStore((state) => state.active);
|
const greenTextActive = useGreenTextStore((state) => state.active);
|
||||||
|
|
||||||
const transformRef = useRef(useGreenTextStore.getState().transformState);
|
const transformRef = useRef(useGreenTextStore.getState().transformState);
|
||||||
|
@ -34,7 +34,7 @@ const GreenTextRenderer = () => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, 0, 10]}>
|
<group position={[0, 0, 10]} visible={props.visible}>
|
||||||
<a.group
|
<a.group
|
||||||
position-x={greenTextPosX}
|
position-x={greenTextPosX}
|
||||||
position-y={transformRef.current.posY}
|
position-y={transformRef.current.posY}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { useBigTextStore, BigTextState } from "../../store";
|
import { useBigTextStore, BigTextState, useMainSceneStore } from "../../store";
|
||||||
import { a, useSpring, useTrail } from "@react-spring/three";
|
import { a, useSpring, useTrail } from "@react-spring/three";
|
||||||
import BigLetter from "./BigLetter";
|
import BigLetter from "./BigLetter";
|
||||||
|
|
||||||
const YellowTextRenderer = () => {
|
const YellowTextRenderer = (props: { visible?: boolean }) => {
|
||||||
const disableTrail = useBigTextStore((state) => state.disableTrail);
|
const disableTrail = useBigTextStore((state) => state.disableTrail);
|
||||||
const transformState = useBigTextStore((state) => state.transformState);
|
const transformState = useBigTextStore((state) => state.transformState);
|
||||||
|
|
||||||
|
@ -40,7 +40,7 @@ const YellowTextRenderer = () => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, 0, 10]}>
|
<group position={[0, 0, 10]} visible={props.visible}>
|
||||||
{disableTrail
|
{disableTrail
|
||||||
? textArrRef.current.map((letter, idx) => (
|
? textArrRef.current.map((letter, idx) => (
|
||||||
<a.group
|
<a.group
|
||||||
|
|
|
@ -35,13 +35,14 @@ import SubsceneManager from "./SubsceneManager";
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
const keyCodeAssocs = {
|
const keyCodeAssocs = {
|
||||||
40: "down", // down arrow
|
40: "DOWN", // down arrow
|
||||||
37: "left", // left arrow
|
37: "LEFT", // left arrow
|
||||||
38: "up", // up arrow
|
38: "UP", // up arrow
|
||||||
39: "right", // right arrow
|
39: "RIGHT", // right arrow
|
||||||
88: "select", // x key
|
88: "CIRCLE", // x key
|
||||||
90: "back", // z key
|
90: "X", // z key
|
||||||
69: "toggle_level_selection", // e key
|
68: "TRIANGLE", // d key
|
||||||
|
69: "L2", // e key
|
||||||
};
|
};
|
||||||
return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs];
|
return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs];
|
||||||
};
|
};
|
||||||
|
|
|
@ -87,6 +87,7 @@ const GreenTextManager = (props: StateManagerProps) => {
|
||||||
value: [newActiveNodeId, newLevel],
|
value: [newActiveNodeId, newLevel],
|
||||||
};
|
};
|
||||||
case "toggle_level_selection":
|
case "toggle_level_selection":
|
||||||
|
case "toggle_pause":
|
||||||
return {
|
return {
|
||||||
action: toggleActive,
|
action: toggleActive,
|
||||||
};
|
};
|
||||||
|
|
|
@ -57,6 +57,7 @@ const NodeHUDManager = (props: StateManagerProps) => {
|
||||||
value: [targetNodeHudId],
|
value: [targetNodeHudId],
|
||||||
};
|
};
|
||||||
case "toggle_level_selection":
|
case "toggle_level_selection":
|
||||||
|
case "toggle_pause":
|
||||||
return {
|
return {
|
||||||
action: toggleActive,
|
action: toggleActive,
|
||||||
};
|
};
|
||||||
|
|
|
@ -24,6 +24,12 @@ const SiteManager = (props: StateManagerProps) => {
|
||||||
value: [newSiteRotY, "rotY"],
|
value: [newSiteRotY, "rotY"],
|
||||||
actionDelay: 1100,
|
actionDelay: 1100,
|
||||||
};
|
};
|
||||||
|
case "toggle_pause":
|
||||||
|
return {
|
||||||
|
action: setTransformState,
|
||||||
|
value: [Math.PI / 2, "rotX"],
|
||||||
|
actionDelay: 0,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[setTransformState]
|
[setTransformState]
|
||||||
|
|
|
@ -21,6 +21,11 @@ const SubsceneManager = (props: StateManagerProps) => {
|
||||||
action: setMainSubscene,
|
action: setMainSubscene,
|
||||||
value: "level_selection",
|
value: "level_selection",
|
||||||
};
|
};
|
||||||
|
case "toggle_pause":
|
||||||
|
return {
|
||||||
|
action: setMainSubscene,
|
||||||
|
value: "pause",
|
||||||
|
};
|
||||||
case "authorize_user_back":
|
case "authorize_user_back":
|
||||||
case "load_data_no_select":
|
case "load_data_no_select":
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -8,13 +8,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => {
|
||||||
const currentSubscene = "authorize_user";
|
const currentSubscene = "authorize_user";
|
||||||
|
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "left":
|
case "LEFT":
|
||||||
const utmostLeftIndices = [0, 13, 26, 39, 52];
|
const utmostLeftIndices = [0, 13, 26, 39, 52];
|
||||||
if (utmostLeftIndices.includes(matrixIdx)) {
|
if (utmostLeftIndices.includes(matrixIdx)) {
|
||||||
break;
|
break;
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
event: `${currentSubscene}_${keyPress}`,
|
event: `${currentSubscene}_left`,
|
||||||
newBgLettersPos: { x: bgLettersPos.x + 0.3, y: bgLettersPos.y },
|
newBgLettersPos: { x: bgLettersPos.x + 0.3, y: bgLettersPos.y },
|
||||||
newActiveLetterTexOffset: {
|
newActiveLetterTexOffset: {
|
||||||
x: activeLetterTexOffset.x - 0.0775,
|
x: activeLetterTexOffset.x - 0.0775,
|
||||||
|
@ -23,13 +23,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => {
|
||||||
newAuthorizeUserMatrixIdx: matrixIdx - 1,
|
newAuthorizeUserMatrixIdx: matrixIdx - 1,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
case "right":
|
case "RIGHT":
|
||||||
const utmostRightIndices = [12, 25, 38, 51, 64];
|
const utmostRightIndices = [12, 25, 38, 51, 64];
|
||||||
if (utmostRightIndices.includes(matrixIdx)) {
|
if (utmostRightIndices.includes(matrixIdx)) {
|
||||||
break;
|
break;
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
event: `${currentSubscene}_${keyPress}`,
|
event: `${currentSubscene}_right`,
|
||||||
newBgLettersPos: { x: bgLettersPos.x - 0.3, y: bgLettersPos.y },
|
newBgLettersPos: { x: bgLettersPos.x - 0.3, y: bgLettersPos.y },
|
||||||
newActiveLetterTexOffset: {
|
newActiveLetterTexOffset: {
|
||||||
x: activeLetterTexOffset.x + 0.0775,
|
x: activeLetterTexOffset.x + 0.0775,
|
||||||
|
@ -38,13 +38,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => {
|
||||||
newAuthorizeUserMatrixIdx: matrixIdx + 1,
|
newAuthorizeUserMatrixIdx: matrixIdx + 1,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
case "down":
|
case "DOWN":
|
||||||
const utmostLowIndices = Array.from(new Array(13), (x, i) => i + 52);
|
const utmostLowIndices = Array.from(new Array(13), (x, i) => i + 52);
|
||||||
if (utmostLowIndices.includes(matrixIdx)) {
|
if (utmostLowIndices.includes(matrixIdx)) {
|
||||||
break;
|
break;
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
event: `${currentSubscene}_${keyPress}`,
|
event: `${currentSubscene}_down`,
|
||||||
newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y + 0.25 },
|
newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y + 0.25 },
|
||||||
newActiveLetterTexOffset: {
|
newActiveLetterTexOffset: {
|
||||||
x: activeLetterTexOffset.x,
|
x: activeLetterTexOffset.x,
|
||||||
|
@ -53,13 +53,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => {
|
||||||
newAuthorizeUserMatrixIdx: matrixIdx + 13,
|
newAuthorizeUserMatrixIdx: matrixIdx + 13,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
case "up":
|
case "UP":
|
||||||
const utmostHighIndices = Array.from(new Array(13), (x, i) => i);
|
const utmostHighIndices = Array.from(new Array(13), (x, i) => i);
|
||||||
if (utmostHighIndices.includes(matrixIdx)) {
|
if (utmostHighIndices.includes(matrixIdx)) {
|
||||||
break;
|
break;
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
event: `${currentSubscene}_${keyPress}`,
|
event: `${currentSubscene}_up`,
|
||||||
newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y - 0.25 },
|
newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y - 0.25 },
|
||||||
newActiveLetterTexOffset: {
|
newActiveLetterTexOffset: {
|
||||||
x: activeLetterTexOffset.x,
|
x: activeLetterTexOffset.x,
|
||||||
|
@ -68,8 +68,7 @@ const handleAuthorizeUserEvent = (gameContext: any) => {
|
||||||
newAuthorizeUserMatrixIdx: matrixIdx - 13,
|
newAuthorizeUserMatrixIdx: matrixIdx - 13,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
case "X": {
|
||||||
case "back": {
|
|
||||||
return { event: "authorize_user_back" };
|
return { event: "authorize_user_back" };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,18 +19,22 @@ const handleBootEvent = (gameContext: any) => {
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "down":
|
case "DOWN":
|
||||||
case "up":
|
case "UP":
|
||||||
case "left":
|
case "LEFT":
|
||||||
case "right":
|
case "RIGHT":
|
||||||
case "back":
|
|
||||||
return {
|
return {
|
||||||
event: `${currentSubscene}_${keyPress}`,
|
event: `${currentSubscene}_${keyPress.toLowerCase()}`,
|
||||||
subscene: currentSubscene,
|
subscene: currentSubscene,
|
||||||
};
|
};
|
||||||
case "select":
|
case "X":
|
||||||
return {
|
return {
|
||||||
event: `${activeBootElement}_${keyPress}`,
|
event: `${currentSubscene}_back`,
|
||||||
|
subscene: currentSubscene,
|
||||||
|
};
|
||||||
|
case "CIRCLE":
|
||||||
|
return {
|
||||||
|
event: `${activeBootElement}_select`,
|
||||||
subscene: currentSubscene,
|
subscene: currentSubscene,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,7 +37,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
|
|
||||||
if (subscene === "site") {
|
if (subscene === "site") {
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "left":
|
case "LEFT":
|
||||||
newNodeColIdx = nodeColIdx - 1;
|
newNodeColIdx = nodeColIdx - 1;
|
||||||
if (newNodeColIdx < 0) {
|
if (newNodeColIdx < 0) {
|
||||||
event = "move_left";
|
event = "move_left";
|
||||||
|
@ -48,7 +48,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
event = "change_node";
|
event = "change_node";
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "down":
|
case "DOWN":
|
||||||
newNodeRowIdx = nodeRowIdx + 1;
|
newNodeRowIdx = nodeRowIdx + 1;
|
||||||
if (newNodeRowIdx > 2) {
|
if (newNodeRowIdx > 2) {
|
||||||
event = "move_down";
|
event = "move_down";
|
||||||
|
@ -62,7 +62,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
event = "change_node";
|
event = "change_node";
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "up":
|
case "UP":
|
||||||
newNodeRowIdx = nodeRowIdx - 1;
|
newNodeRowIdx = nodeRowIdx - 1;
|
||||||
if (newNodeRowIdx < 0) {
|
if (newNodeRowIdx < 0) {
|
||||||
event = "move_up";
|
event = "move_up";
|
||||||
|
@ -77,7 +77,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
event = "change_node";
|
event = "change_node";
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "right":
|
case "RIGHT":
|
||||||
newNodeColIdx = nodeColIdx + 1;
|
newNodeColIdx = nodeColIdx + 1;
|
||||||
if (newNodeColIdx > 3) {
|
if (newNodeColIdx > 3) {
|
||||||
event = "move_right";
|
event = "move_right";
|
||||||
|
@ -88,7 +88,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
event = "change_node";
|
event = "change_node";
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "select":
|
case "CIRCLE":
|
||||||
// in this case we have to check the type of the blue orb
|
// in this case we have to check the type of the blue orb
|
||||||
// and dispatch an action depending on that, so we have to precalculate the
|
// and dispatch an action depending on that, so we have to precalculate the
|
||||||
// new active blue orb here.
|
// new active blue orb here.
|
||||||
|
@ -118,8 +118,10 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "toggle_level_selection":
|
case "L2":
|
||||||
return { event: "toggle_level_selection" };
|
return { event: "toggle_level_selection" };
|
||||||
|
case "TRIANGLE":
|
||||||
|
return { event: "toggle_pause" };
|
||||||
}
|
}
|
||||||
|
|
||||||
const newActiveNodeId =
|
const newActiveNodeId =
|
||||||
|
@ -145,21 +147,21 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
};
|
};
|
||||||
} else if (subscene === "level_selection") {
|
} else if (subscene === "level_selection") {
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "up":
|
case "UP":
|
||||||
if (levelSelectionIdx + 1 <= 23)
|
if (levelSelectionIdx + 1 <= 23)
|
||||||
return {
|
return {
|
||||||
event: `level_selection_${keyPress}`,
|
event: `level_selection_up`,
|
||||||
newSelectedLevelIdx: levelSelectionIdx + 1,
|
newSelectedLevelIdx: levelSelectionIdx + 1,
|
||||||
};
|
};
|
||||||
break;
|
break;
|
||||||
case "down":
|
case "DOWN":
|
||||||
if (levelSelectionIdx - 1 >= 0)
|
if (levelSelectionIdx - 1 >= 0)
|
||||||
return {
|
return {
|
||||||
event: `level_selection_${keyPress}`,
|
event: `level_selection_down`,
|
||||||
newSelectedLevelIdx: levelSelectionIdx - 1,
|
newSelectedLevelIdx: levelSelectionIdx - 1,
|
||||||
};
|
};
|
||||||
break;
|
break;
|
||||||
case "back":
|
case "X":
|
||||||
return {
|
return {
|
||||||
event: "level_selection_back",
|
event: "level_selection_back",
|
||||||
newActiveNodeId:
|
newActiveNodeId:
|
||||||
|
@ -173,7 +175,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
],
|
],
|
||||||
newLevel: newLevel,
|
newLevel: newLevel,
|
||||||
};
|
};
|
||||||
case "select":
|
case "CIRCLE":
|
||||||
const oldLevel = newLevel;
|
const oldLevel = newLevel;
|
||||||
newLevel = (levelSelectionIdx + 1).toString().padStart(2, "0");
|
newLevel = (levelSelectionIdx + 1).toString().padStart(2, "0");
|
||||||
if (oldLevel === newLevel) break;
|
if (oldLevel === newLevel) break;
|
||||||
|
|
|
@ -7,7 +7,7 @@ const handleMediaSceneEvent = (gameContext: any) => {
|
||||||
const rightSideComponents = ["fstWord", "sndWord", "thirdWord"];
|
const rightSideComponents = ["fstWord", "sndWord", "thirdWord"];
|
||||||
if (rightSideComponents.includes(activeMediaComponent)) {
|
if (rightSideComponents.includes(activeMediaComponent)) {
|
||||||
switch (keyPress) {
|
switch (keyPress) {
|
||||||
case "down":
|
case "DOWN":
|
||||||
newWordPosStateIdx++;
|
newWordPosStateIdx++;
|
||||||
if (newWordPosStateIdx > 6) {
|
if (newWordPosStateIdx > 6) {
|
||||||
newWordPosStateIdx = 1;
|
newWordPosStateIdx = 1;
|
||||||
|
@ -17,7 +17,7 @@ const handleMediaSceneEvent = (gameContext: any) => {
|
||||||
newRightSideComponentIdx = 0;
|
newRightSideComponentIdx = 0;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "up":
|
case "UP":
|
||||||
newWordPosStateIdx--;
|
newWordPosStateIdx--;
|
||||||
if (newWordPosStateIdx < 1) {
|
if (newWordPosStateIdx < 1) {
|
||||||
newWordPosStateIdx = 6;
|
newWordPosStateIdx = 6;
|
||||||
|
|
|
@ -8,7 +8,7 @@ import MainSceneIntro from "../components/MainSceneIntro";
|
||||||
import GrayPlanes from "../components/MainScene/GrayPlanes";
|
import GrayPlanes from "../components/MainScene/GrayPlanes";
|
||||||
import MiddleRing from "../components/MainScene/MiddleRing";
|
import MiddleRing from "../components/MainScene/MiddleRing";
|
||||||
import Starfield from "../components/MainScene/Starfield";
|
import Starfield from "../components/MainScene/Starfield";
|
||||||
import { useHudStore, useLainStore } from "../store";
|
import { useHudStore, useLainStore, useMainSceneStore } from "../store";
|
||||||
import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
|
import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
|
||||||
import HUD from "../components/MainScene/HUD";
|
import HUD from "../components/MainScene/HUD";
|
||||||
import YellowOrb from "../components/MainScene/YellowOrb";
|
import YellowOrb from "../components/MainScene/YellowOrb";
|
||||||
|
@ -17,6 +17,10 @@ import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
|
||||||
import LevelSelection from "../components/MainScene/LevelSelection";
|
import LevelSelection from "../components/MainScene/LevelSelection";
|
||||||
|
|
||||||
const MainScene = () => {
|
const MainScene = () => {
|
||||||
|
const currentSubscene = useMainSceneStore((state) => state.subscene);
|
||||||
|
|
||||||
|
const isPaused = currentSubscene === "pause";
|
||||||
|
|
||||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||||
const setActiveNodeHudId = useHudStore((state) => state.setId);
|
const setActiveNodeHudId = useHudStore((state) => state.setId);
|
||||||
|
|
||||||
|
@ -32,13 +36,13 @@ const MainScene = () => {
|
||||||
<a.group>
|
<a.group>
|
||||||
<Preloader />
|
<Preloader />
|
||||||
<Site />
|
<Site />
|
||||||
<ActiveLevelNodes />
|
{/*<ActiveLevelNodes />*/}
|
||||||
<HUD />
|
<HUD visible={!isPaused} />
|
||||||
<GreenTextRenderer />
|
<GreenTextRenderer visible={!isPaused} />
|
||||||
<YellowTextRenderer />
|
<YellowTextRenderer visible={!isPaused} />
|
||||||
<YellowOrb />
|
<YellowOrb visible={!isPaused} />
|
||||||
<Starfield />
|
{/*<Starfield />*/}
|
||||||
<GrayPlanes />
|
<GrayPlanes visible={!isPaused} />
|
||||||
<MiddleRing />
|
<MiddleRing />
|
||||||
<LevelSelection />
|
<LevelSelection />
|
||||||
{/*<OrbitControls />*/}
|
{/*<OrbitControls />*/}
|
||||||
|
|
24
src/store.ts
24
src/store.ts
|
@ -19,7 +19,6 @@ type SceneState = {
|
||||||
type HUDState = {
|
type HUDState = {
|
||||||
id: string;
|
id: string;
|
||||||
active: number;
|
active: number;
|
||||||
visible: boolean;
|
|
||||||
setId: (to: string) => void;
|
setId: (to: string) => void;
|
||||||
toggleActive: () => void;
|
toggleActive: () => void;
|
||||||
};
|
};
|
||||||
|
@ -40,11 +39,6 @@ type LainState = {
|
||||||
setLainMoveState: (to: string) => void;
|
setLainMoveState: (to: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type GrayPlanesState = {
|
|
||||||
grayPlanesVisible: boolean;
|
|
||||||
setGrayPlanesVisible: (to: boolean) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
type StarfieldState = {
|
type StarfieldState = {
|
||||||
introStarfieldVisible: boolean;
|
introStarfieldVisible: boolean;
|
||||||
mainStarfieldVisible: boolean;
|
mainStarfieldVisible: boolean;
|
||||||
|
@ -54,15 +48,11 @@ type StarfieldState = {
|
||||||
setMainStarfieldBoostVal: (to: number) => void;
|
setMainStarfieldBoostVal: (to: number) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type YellowOrbState = {
|
|
||||||
yellowOrbVisible: boolean;
|
|
||||||
setYellowOrbVisible: (to: boolean) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
type SiteState = {
|
type SiteState = {
|
||||||
transformState: {
|
transformState: {
|
||||||
posY: number;
|
posY: number;
|
||||||
rotY: number;
|
rotY: number;
|
||||||
|
rotX: number;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -221,7 +211,6 @@ export const useGreenTextStore = create(
|
||||||
export const useHudStore = create<HUDState>((set) => ({
|
export const useHudStore = create<HUDState>((set) => ({
|
||||||
id: "fg_hud_1",
|
id: "fg_hud_1",
|
||||||
active: 1,
|
active: 1,
|
||||||
visible: true,
|
|
||||||
setId: (to) => set(() => ({ id: to })),
|
setId: (to) => set(() => ({ id: to })),
|
||||||
toggleActive: () => set((state) => ({ active: Number(!state.active) })),
|
toggleActive: () => set((state) => ({ active: Number(!state.active) })),
|
||||||
}));
|
}));
|
||||||
|
@ -257,11 +246,6 @@ export const useLainStore = create<LainState>((set) => ({
|
||||||
setLainMoveState: (to) => set(() => ({ lainMoveState: to })),
|
setLainMoveState: (to) => set(() => ({ lainMoveState: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useGrayPlanesStore = create<GrayPlanesState>((set) => ({
|
|
||||||
grayPlanesVisible: true,
|
|
||||||
setGrayPlanesVisible: (to) => set(() => ({ grayPlanesVisible: to })),
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const useStarfieldStore = create<StarfieldState>((set) => ({
|
export const useStarfieldStore = create<StarfieldState>((set) => ({
|
||||||
introStarfieldVisible: false,
|
introStarfieldVisible: false,
|
||||||
mainStarfieldVisible: true,
|
mainStarfieldVisible: true,
|
||||||
|
@ -271,17 +255,13 @@ export const useStarfieldStore = create<StarfieldState>((set) => ({
|
||||||
setMainStarfieldBoostVal: (to) => set(() => ({ mainStarfieldBoostVal: to })),
|
setMainStarfieldBoostVal: (to) => set(() => ({ mainStarfieldBoostVal: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useYellowOrbStore = create<YellowOrbState>((set) => ({
|
|
||||||
yellowOrbVisible: false,
|
|
||||||
setYellowOrbVisible: (to) => set(() => ({ yellowOrbVisible: to })),
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const useSiteStore = create(
|
export const useSiteStore = create(
|
||||||
combine(
|
combine(
|
||||||
{
|
{
|
||||||
transformState: {
|
transformState: {
|
||||||
posY: 0,
|
posY: 0,
|
||||||
rotY: 0,
|
rotY: 0,
|
||||||
|
rotX: 0,
|
||||||
},
|
},
|
||||||
} as SiteState,
|
} as SiteState,
|
||||||
(set) => ({
|
(set) => ({
|
||||||
|
|
Loading…
Reference in a new issue