mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
starting work on way of calculating actions
This commit is contained in:
parent
efdd391a6c
commit
d5797c6b34
18 changed files with 18727 additions and 199 deletions
18497
package-lock.json
generated
Normal file
18497
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
@ -8,14 +8,14 @@ import longHudMirrored from "../../static/sprite/long_hud_mirrored.png";
|
||||||
import boringHud from "../../static/sprite/long_hud_boring.png";
|
import boringHud from "../../static/sprite/long_hud_boring.png";
|
||||||
import boringHudMirrored from "../../static/sprite/long_hud_boring_mirrored.png";
|
import boringHudMirrored from "../../static/sprite/long_hud_boring_mirrored.png";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useBlueOrbStore } from "../../store";
|
import {useBlueOrbStore, useHudStore} from "../../store";
|
||||||
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
||||||
|
|
||||||
const HUD = memo(() => {
|
const HUD = memo(() => {
|
||||||
const hudActive = useBlueOrbStore((state) => state.hudActive);
|
const hudActive = useHudStore((state) => state.hudActive);
|
||||||
const currentHudId = useBlueOrbStore((state) => state.activeHudId);
|
const currentHudId = useHudStore((state) => state.activeHudId);
|
||||||
|
|
||||||
const hudVisible = useBlueOrbStore((state) => state.hudVisible);
|
const hudVisible = useHudStore((state) => state.hudVisible);
|
||||||
|
|
||||||
const currentHud = blue_orb_huds[currentHudId as keyof typeof blue_orb_huds];
|
const currentHud = blue_orb_huds[currentHudId as keyof typeof blue_orb_huds];
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { memo, Suspense } from "react";
|
import React, { memo, Suspense, useMemo } from "react";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../resources/site_a.json";
|
||||||
import Level from "./Level";
|
import Level from "./Level";
|
||||||
import level_y_values from "../../resources/level_y_values.json";
|
import level_y_values from "../../resources/level_y_values.json";
|
||||||
|
@ -6,6 +6,8 @@ import blue_orb_positions from "../../resources/blue_orb_positions.json";
|
||||||
import BlueOrb from "./BlueOrb";
|
import BlueOrb from "./BlueOrb";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useBlueOrbStore, useLevelStore, useSiteStore } from "../../store";
|
import { useBlueOrbStore, useLevelStore, useSiteStore } from "../../store";
|
||||||
|
import { useLoader } from "react-three-fiber";
|
||||||
|
import * as THREE from "three";
|
||||||
|
|
||||||
const Site = memo(() => {
|
const Site = memo(() => {
|
||||||
const activeBlueOrbId = useBlueOrbStore((state) => state.activeBlueOrbId);
|
const activeBlueOrbId = useBlueOrbStore((state) => state.activeBlueOrbId);
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { memo, useEffect } from "react";
|
import React, { memo, useEffect } from "react";
|
||||||
import {
|
import {
|
||||||
useBlueOrbStore,
|
|
||||||
useGrayPlanesStore,
|
useGrayPlanesStore,
|
||||||
|
useHudStore,
|
||||||
useLainStore,
|
useLainStore,
|
||||||
useMainGroupStore,
|
useMainGroupStore,
|
||||||
useStarfieldStore,
|
useStarfieldStore,
|
||||||
|
@ -14,7 +14,7 @@ import {
|
||||||
// inside <Suspense> tags makes it behave in a more stable manner
|
// inside <Suspense> tags makes it behave in a more stable manner
|
||||||
// by waiting for the components to load and synchronously calling the functions.
|
// by waiting for the components to load and synchronously calling the functions.
|
||||||
const MainSceneIntro = memo(() => {
|
const MainSceneIntro = memo(() => {
|
||||||
const toggleHud = useBlueOrbStore((state) => state.toggleHud);
|
const toggleHud = useHudStore((state) => state.toggleHud);
|
||||||
|
|
||||||
//const setHudVisible = useSetRecoilState(hudVisibilityAtom);
|
//const setHudVisible = useSetRecoilState(hudVisibilityAtom);
|
||||||
const setOrbVisible = useYellowOrbStore((state) => state.setYellowOrbVisible);
|
const setOrbVisible = useYellowOrbStore((state) => state.setYellowOrbVisible);
|
||||||
|
@ -67,7 +67,8 @@ const MainSceneIntro = memo(() => {
|
||||||
|
|
||||||
toggleHud();
|
toggleHud();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.getElementsByTagName("canvas")[0].className = "main-scene-background";
|
document.getElementsByTagName("canvas")[0].className =
|
||||||
|
"main-scene-background";
|
||||||
}, 300);
|
}, 300);
|
||||||
}, 3860);
|
}, 3860);
|
||||||
}, [
|
}, [
|
||||||
|
|
|
@ -28,7 +28,6 @@ const Word = (props: WordProps) => {
|
||||||
return (
|
return (
|
||||||
<a.group position-x={props.posX} position-y={props.posY}>
|
<a.group position-x={props.posX} position-y={props.posY}>
|
||||||
<mesh scale={[0.4, 0.4, 0]} position={[-3.9, 1.915, 0]} renderOrder={3}>
|
<mesh scale={[0.4, 0.4, 0]} position={[-3.9, 1.915, 0]} renderOrder={3}>
|
||||||
<planeBufferGeometry attach="geometry" />
|
|
||||||
<textGeometry attach="geometry" args={[props.word, config]} />
|
<textGeometry attach="geometry" args={[props.word, config]} />
|
||||||
<meshBasicMaterial
|
<meshBasicMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { useBlueOrbStore } from "../../store";
|
import { useHudStore } from "../../store";
|
||||||
import game_action_mappings from "../../resources/game_action_mappings.json";
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
|
|
||||||
const BlueOrbHUDManager = (props: StateManagerProps) => {
|
const BlueOrbHUDManager = (props: StateManagerProps) => {
|
||||||
const setActiveBlueOrbHudId = useBlueOrbStore(
|
const setActiveBlueOrbHudId = useHudStore(
|
||||||
(state) => state.setActiveBlueOrbHudId
|
(state) => state.setActiveBlueOrbHudId
|
||||||
);
|
);
|
||||||
const toggleHud = useBlueOrbStore((state) => state.toggleHud);
|
const toggleHud = useHudStore((state) => state.toggleHud);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(event: string, targetBlueOrbHudId: string) => {
|
(event: string, targetBlueOrbHudId: string) => {
|
||||||
|
|
|
@ -4,7 +4,12 @@ import MiddleRingManager from "./MiddleRingManager";
|
||||||
import LainManager from "./LainManager";
|
import LainManager from "./LainManager";
|
||||||
import BlueOrbManager from "./BlueOrbManager";
|
import BlueOrbManager from "./BlueOrbManager";
|
||||||
import BlueOrbHUDManager from "./BlueOrbHUDManager";
|
import BlueOrbHUDManager from "./BlueOrbHUDManager";
|
||||||
import { useBlueOrbStore, useMediaStore, useSceneStore } from "../../store";
|
import {
|
||||||
|
useBlueOrbStore,
|
||||||
|
useMediaStore,
|
||||||
|
useSceneStore,
|
||||||
|
useSiteStore,
|
||||||
|
} from "../../store";
|
||||||
import GreenTextManager from "./GreenTextManager";
|
import GreenTextManager from "./GreenTextManager";
|
||||||
import MediaComponentManager from "./MediaComponentManager";
|
import MediaComponentManager from "./MediaComponentManager";
|
||||||
import MediaWordManager from "./MediaWordManager";
|
import MediaWordManager from "./MediaWordManager";
|
||||||
|
@ -29,8 +34,13 @@ export type StateManagerProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const EventManager = () => {
|
const EventManager = () => {
|
||||||
const [eventState, setEventState] = useState<string>();
|
|
||||||
const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
|
const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
|
||||||
|
const blueOrbRowIdx = useBlueOrbStore((state) => state.blueOrbRowIdx);
|
||||||
|
const blueOrbColIdx = useBlueOrbStore((state) => state.blueOrbColIdx);
|
||||||
|
|
||||||
|
const siteRotIdx = useSiteStore((state) => state.siteRotIdx);
|
||||||
|
|
||||||
|
const [eventState, setEventState] = useState<string>();
|
||||||
const activeMediaComponent = useMediaStore(
|
const activeMediaComponent = useMediaStore(
|
||||||
(state) => state.activeMediaComponent
|
(state) => state.activeMediaComponent
|
||||||
);
|
);
|
||||||
|
@ -52,6 +62,14 @@ const EventManager = () => {
|
||||||
|
|
||||||
const keyPress = getKeyCodeAssociation(keyCode);
|
const keyPress = getKeyCodeAssociation(keyCode);
|
||||||
|
|
||||||
|
const gameContext = {
|
||||||
|
scene: currentScene,
|
||||||
|
keyPress: keyPress,
|
||||||
|
siteRotIdx: siteRotIdx,
|
||||||
|
blueOrbRowIdx: blueOrbRowIdx,
|
||||||
|
blueOrbColIdx: blueOrbColIdx,
|
||||||
|
};
|
||||||
|
|
||||||
if (keyPress && !inputCooldown) {
|
if (keyPress && !inputCooldown) {
|
||||||
// event id consists of the CURRENT blue orb id (to calculate where we're at currently)
|
// event id consists of the CURRENT blue orb id (to calculate where we're at currently)
|
||||||
// and the keypress.
|
// and the keypress.
|
||||||
|
@ -63,7 +81,14 @@ const EventManager = () => {
|
||||||
setEventState(eventId);
|
setEventState(eventId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[inputCooldown, sceneEventKey]
|
[
|
||||||
|
blueOrbColIdx,
|
||||||
|
blueOrbRowIdx,
|
||||||
|
currentScene,
|
||||||
|
inputCooldown,
|
||||||
|
sceneEventKey,
|
||||||
|
siteRotIdx,
|
||||||
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -103,6 +103,10 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
||||||
action: switchToLeftSide,
|
action: switchToLeftSide,
|
||||||
value: "thirdWord",
|
value: "thirdWord",
|
||||||
},
|
},
|
||||||
|
select_blue_orb: {
|
||||||
|
action: setActiveMediaComponent,
|
||||||
|
value: "play",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
|
|
|
@ -14,7 +14,6 @@ const MediaImageManager = (props: StateManagerProps) => {
|
||||||
const images = image_table[node_name as keyof typeof image_table];
|
const images = image_table[node_name as keyof typeof image_table];
|
||||||
|
|
||||||
Object.values(images).forEach((img) => {
|
Object.values(images).forEach((img) => {
|
||||||
console.log(images);
|
|
||||||
switch (img.substr(img.length - 1)) {
|
switch (img.substr(img.length - 1)) {
|
||||||
case "0":
|
case "0":
|
||||||
import("../../static/media_images/site_a/" + img + ".png").then(
|
import("../../static/media_images/site_a/" + img + ".png").then(
|
||||||
|
|
|
@ -1,14 +1,35 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "./EventManager";
|
||||||
import { useMediaWordStore } from "../../store";
|
import { useMediaWordStore } from "../../store";
|
||||||
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
|
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
||||||
|
|
||||||
|
type MediaWordDispatcher = {
|
||||||
|
action: any;
|
||||||
|
value?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type MediaWordDispatchData = {
|
||||||
|
fstWord_down: MediaWordDispatcher;
|
||||||
|
fstWord_up: MediaWordDispatcher;
|
||||||
|
sndWord_down: MediaWordDispatcher;
|
||||||
|
sndWord_up: MediaWordDispatcher;
|
||||||
|
thirdWord_down: MediaWordDispatcher;
|
||||||
|
thirdWord_up: MediaWordDispatcher;
|
||||||
|
select_blue_orb: MediaWordDispatcher;
|
||||||
|
};
|
||||||
|
|
||||||
const MediaWordManager = (props: StateManagerProps) => {
|
const MediaWordManager = (props: StateManagerProps) => {
|
||||||
const addToWordPositionDataStructIdx = useMediaWordStore(
|
const addToWordPositionDataStructIdx = useMediaWordStore(
|
||||||
(state) => state.addToWordPositionDataStructIdx
|
(state) => state.addToWordPositionDataStructIdx
|
||||||
);
|
);
|
||||||
|
const resetWordPositionDataStructIdx = useMediaWordStore(
|
||||||
|
(state) => state.resetWordPositionDataStructIdx
|
||||||
|
);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(event: string) => {
|
(event: string) => {
|
||||||
const dispatcherObjects = {
|
const dispatcherObjects: MediaWordDispatchData = {
|
||||||
fstWord_down: {
|
fstWord_down: {
|
||||||
action: addToWordPositionDataStructIdx,
|
action: addToWordPositionDataStructIdx,
|
||||||
value: 1,
|
value: 1,
|
||||||
|
@ -33,19 +54,31 @@ const MediaWordManager = (props: StateManagerProps) => {
|
||||||
action: addToWordPositionDataStructIdx,
|
action: addToWordPositionDataStructIdx,
|
||||||
value: -1,
|
value: -1,
|
||||||
},
|
},
|
||||||
|
select_blue_orb: {
|
||||||
|
action: resetWordPositionDataStructIdx,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
},
|
},
|
||||||
[addToWordPositionDataStructIdx]
|
[addToWordPositionDataStructIdx, resetWordPositionDataStructIdx]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const dispatchedObject = dispatchObject(props.eventState);
|
const eventObject: any =
|
||||||
|
game_action_mappings[
|
||||||
|
props.eventState as keyof typeof blue_orb_directions
|
||||||
|
];
|
||||||
|
|
||||||
|
if (eventObject) {
|
||||||
|
const eventAction = eventObject.action;
|
||||||
|
|
||||||
|
const dispatchedObject = dispatchObject(eventAction);
|
||||||
|
|
||||||
if (dispatchedObject) {
|
if (dispatchedObject) {
|
||||||
dispatchedObject.action(dispatchedObject.value as never);
|
dispatchedObject.action(dispatchedObject.value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [props.eventState, dispatchObject]);
|
}, [props.eventState, dispatchObject]);
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { MutableRefObject, useCallback, useEffect, useRef } from "react";
|
||||||
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
||||||
import site_a from "../../resources/site_a.json";
|
import site_a from "../../resources/site_a.json";
|
||||||
import { useTextRendererStore } from "../../store";
|
import {useBlueOrbStore, useHudStore, useTextRendererStore} from "../../store";
|
||||||
import game_action_mappings from "../../resources/game_action_mappings.json";
|
import game_action_mappings from "../../resources/game_action_mappings.json";
|
||||||
|
|
||||||
type AnimateYellowTextWithMove = (
|
type AnimateYellowTextWithMove = (
|
||||||
|
@ -25,7 +25,7 @@ type YellowTextDispatchData = {
|
||||||
| AnimateYellowTextWithMove
|
| AnimateYellowTextWithMove
|
||||||
| AnimateYellowTextWithoutMove
|
| AnimateYellowTextWithoutMove
|
||||||
| AnimateMediaYellowText;
|
| AnimateMediaYellowText;
|
||||||
value: any;
|
value?: any;
|
||||||
};
|
};
|
||||||
|
|
||||||
type YellowTextDispatcher = {
|
type YellowTextDispatcher = {
|
||||||
|
@ -36,9 +36,23 @@ type YellowTextDispatcher = {
|
||||||
change_blue_orb: YellowTextDispatchData;
|
change_blue_orb: YellowTextDispatchData;
|
||||||
play_down: YellowTextDispatchData;
|
play_down: YellowTextDispatchData;
|
||||||
exit_up: YellowTextDispatchData;
|
exit_up: YellowTextDispatchData;
|
||||||
|
select_blue_orb: YellowTextDispatchData;
|
||||||
|
exit_media_scene: YellowTextDispatchData;
|
||||||
};
|
};
|
||||||
|
|
||||||
const YellowTextManager = (props: any) => {
|
const YellowTextManager = (props: any) => {
|
||||||
|
const activeBlueOrbId = useBlueOrbStore((state) => state.activeBlueOrbId);
|
||||||
|
const activeHudId = useHudStore((state) => state.activeHudId);
|
||||||
|
|
||||||
|
const blueOrbDataRef: MutableRefObject<
|
||||||
|
{ activeBlueOrbId: string; activeHudId: string } | undefined
|
||||||
|
> = useRef();
|
||||||
|
|
||||||
|
blueOrbDataRef.current = {
|
||||||
|
activeBlueOrbId: activeBlueOrbId,
|
||||||
|
activeHudId: activeHudId,
|
||||||
|
};
|
||||||
|
|
||||||
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
||||||
|
|
||||||
const setYellowTextOffsetXCoeff = useTextRendererStore(
|
const setYellowTextOffsetXCoeff = useTextRendererStore(
|
||||||
|
@ -165,6 +179,33 @@ const YellowTextManager = (props: any) => {
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const initializeYellowTextForMediaScene = useCallback(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setYellowText("Play");
|
||||||
|
setYellowTextPosX(-0.8);
|
||||||
|
setYellowTextPosY(0.05);
|
||||||
|
}, 3950);
|
||||||
|
}, [setYellowText, setYellowTextPosX, setYellowTextPosY]);
|
||||||
|
|
||||||
|
const initializeYellowTextForMainScene = useCallback(() => {
|
||||||
|
if (blueOrbDataRef.current) {
|
||||||
|
setYellowText(
|
||||||
|
site_a[blueOrbDataRef.current!.activeBlueOrbId as keyof typeof site_a]
|
||||||
|
.node_name
|
||||||
|
);
|
||||||
|
setYellowTextPosX(
|
||||||
|
blue_orb_huds[
|
||||||
|
blueOrbDataRef.current!.activeHudId as keyof typeof blue_orb_huds
|
||||||
|
].big_text[0]
|
||||||
|
);
|
||||||
|
setYellowTextPosY(
|
||||||
|
blue_orb_huds[
|
||||||
|
blueOrbDataRef.current!.activeHudId as keyof typeof blue_orb_huds
|
||||||
|
].big_text[1]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, [setYellowText, setYellowTextPosX, setYellowTextPosY]);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(
|
(
|
||||||
event: string,
|
event: string,
|
||||||
|
@ -200,6 +241,12 @@ const YellowTextManager = (props: any) => {
|
||||||
action: animateMediaYellowText,
|
action: animateMediaYellowText,
|
||||||
value: ["Exit", [-0.8, -0.08, 0.6]],
|
value: ["Exit", [-0.8, -0.08, 0.6]],
|
||||||
},
|
},
|
||||||
|
select_blue_orb: {
|
||||||
|
action: initializeYellowTextForMediaScene,
|
||||||
|
},
|
||||||
|
exit_media_scene: {
|
||||||
|
action: initializeYellowTextForMainScene,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
|
@ -208,6 +255,8 @@ const YellowTextManager = (props: any) => {
|
||||||
animateMediaYellowText,
|
animateMediaYellowText,
|
||||||
animateYellowTextWithMove,
|
animateYellowTextWithMove,
|
||||||
animateYellowTextWithoutMove,
|
animateYellowTextWithoutMove,
|
||||||
|
initializeYellowTextForMainScene,
|
||||||
|
initializeYellowTextForMediaScene,
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
31
src/core/computeAction.ts
Normal file
31
src/core/computeAction.ts
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
import available_blue_orbs_on_projection from "../resources/available_blue_orbs_on_projection.json";
|
||||||
|
|
||||||
|
type GameContext = {
|
||||||
|
scene: string;
|
||||||
|
keyPress: string;
|
||||||
|
siteRotIdx: number;
|
||||||
|
blueOrbRowIdx: number;
|
||||||
|
blueOrbColIdx: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const computeAction = (gameContext: GameContext) => {
|
||||||
|
const availableBlueOrbs = [
|
||||||
|
available_blue_orbs_on_projection.topRowProjection[gameContext.siteRotIdx],
|
||||||
|
available_blue_orbs_on_projection.middleRowProjection[
|
||||||
|
gameContext.siteRotIdx
|
||||||
|
],
|
||||||
|
available_blue_orbs_on_projection.bottomRowProjection[
|
||||||
|
gameContext.siteRotIdx
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
switch (gameContext.keyPress) {
|
||||||
|
case "left":
|
||||||
|
let newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1;
|
||||||
|
if(newBlueOrbRowIdx < 0) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default computeAction;
|
32
src/resources/available_blue_orbs_on_projection.json
Normal file
32
src/resources/available_blue_orbs_on_projection.json
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"topRowProjection": [
|
||||||
|
["16", "19", "20", "23"],
|
||||||
|
["17", "20", "21", "16"],
|
||||||
|
["18", "21", "22", "17"],
|
||||||
|
["19", "22", "23", "18"],
|
||||||
|
["20", "23", "16", "19"],
|
||||||
|
["21", "16", "17", "20"],
|
||||||
|
["22", "17", "18", "21"],
|
||||||
|
["23", "18", "19", "22"]
|
||||||
|
],
|
||||||
|
"middleRowProjection": [
|
||||||
|
["08", "11", "12", "15"],
|
||||||
|
["09", "12", "13", "08"],
|
||||||
|
["10", "13", "14", "09"],
|
||||||
|
["11", "14", "15", "10"],
|
||||||
|
["12", "15", "09", "11"],
|
||||||
|
["13", "08", "09", "12"],
|
||||||
|
["14", "09", "10", "13"],
|
||||||
|
["15", "10", "11", "14"]
|
||||||
|
],
|
||||||
|
"bottomRowProjection": [
|
||||||
|
["00", "03", "04", "07"],
|
||||||
|
["01", "04", "05", "00"],
|
||||||
|
["02", "05", "06", "01"],
|
||||||
|
["03", "06", "07", "02"],
|
||||||
|
["04", "07", "00", "03"],
|
||||||
|
["05", "00", "01", "04"],
|
||||||
|
["06", "01", "02", "05"],
|
||||||
|
["07", "02", "03", "06"]
|
||||||
|
]
|
||||||
|
}
|
|
@ -1,66 +0,0 @@
|
||||||
import { memo, useEffect, useMemo } from "react";
|
|
||||||
import { useBlueOrbStore, useTextRendererStore } from "../../store";
|
|
||||||
import site_a from "../../resources/site_a.json";
|
|
||||||
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
|
||||||
|
|
||||||
const MainSceneInitializer = memo(() => {
|
|
||||||
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
|
||||||
const setYellowTextPosX = useTextRendererStore(
|
|
||||||
(state) => state.setYellowTextPosX
|
|
||||||
);
|
|
||||||
const setYellowTextPosY = useTextRendererStore(
|
|
||||||
(state) => state.setYellowTextPosY
|
|
||||||
);
|
|
||||||
const setGreenText = useTextRendererStore((state) => state.setGreenText);
|
|
||||||
const setGreenTextPosY = useTextRendererStore(
|
|
||||||
(state) => state.setGreenTextPosY
|
|
||||||
);
|
|
||||||
const setGreenTextPosX = useTextRendererStore(
|
|
||||||
(state) => state.setGreenTextPosX
|
|
||||||
);
|
|
||||||
|
|
||||||
const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
|
|
||||||
const activeBlueOrbHudId = useBlueOrbStore((state) => state.activeHudId);
|
|
||||||
|
|
||||||
const toggleGreenText = useTextRendererStore(
|
|
||||||
(state) => state.toggleGreenText
|
|
||||||
);
|
|
||||||
|
|
||||||
const activeBlueOrbHud =
|
|
||||||
blue_orb_huds[activeBlueOrbHudId as keyof typeof blue_orb_huds];
|
|
||||||
|
|
||||||
const blueOrbData = useMemo(
|
|
||||||
() => site_a[activeBlueOrb as keyof typeof site_a],
|
|
||||||
[activeBlueOrb]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const node_name = site_a[activeBlueOrb as keyof typeof site_a].node_name;
|
|
||||||
setGreenText(blueOrbData.title);
|
|
||||||
setYellowText(node_name);
|
|
||||||
setYellowTextPosX(activeBlueOrbHud.big_text[0]);
|
|
||||||
setYellowTextPosY(activeBlueOrbHud.big_text[1]);
|
|
||||||
|
|
||||||
setGreenTextPosX({
|
|
||||||
initial: activeBlueOrbHud.medium_text.initial_position[0],
|
|
||||||
final: activeBlueOrbHud.medium_text.position[0],
|
|
||||||
});
|
|
||||||
setGreenTextPosY(activeBlueOrbHud.medium_text.position[1]);
|
|
||||||
}, [
|
|
||||||
activeBlueOrb,
|
|
||||||
activeBlueOrbHud.big_text,
|
|
||||||
activeBlueOrbHud.medium_text.initial_position,
|
|
||||||
activeBlueOrbHud.medium_text.position,
|
|
||||||
blueOrbData,
|
|
||||||
setGreenText,
|
|
||||||
setGreenTextPosX,
|
|
||||||
setGreenTextPosY,
|
|
||||||
setYellowText,
|
|
||||||
setYellowTextPosX,
|
|
||||||
setYellowTextPosY,
|
|
||||||
toggleGreenText,
|
|
||||||
]);
|
|
||||||
return null;
|
|
||||||
});
|
|
||||||
|
|
||||||
export default MainSceneInitializer;
|
|
|
@ -1,83 +0,0 @@
|
||||||
import { memo, useEffect, useMemo } from "react";
|
|
||||||
import {
|
|
||||||
ImageSrc,
|
|
||||||
useBlueOrbStore,
|
|
||||||
useImageStore,
|
|
||||||
useMediaStore,
|
|
||||||
useMediaWordStore,
|
|
||||||
useTextRendererStore,
|
|
||||||
} from "../../store";
|
|
||||||
import site_a from "../../resources/site_a.json";
|
|
||||||
import string_table from "../../resources/string_table.json";
|
|
||||||
import image_table from "../../resources/image_table.json";
|
|
||||||
|
|
||||||
const MediaSceneInitializer = memo(() => {
|
|
||||||
const lastActiveLeftSideComponent = useMediaStore(
|
|
||||||
(state) => state.lastActiveLeftSideElement
|
|
||||||
);
|
|
||||||
const setActiveMediaComponent = useMediaStore(
|
|
||||||
(state) => state.setActiveMediaComponent
|
|
||||||
);
|
|
||||||
const setYellowText = useTextRendererStore((state) => state.setYellowText);
|
|
||||||
const setYellowTextPosX = useTextRendererStore(
|
|
||||||
(state) => state.setYellowTextPosX
|
|
||||||
);
|
|
||||||
const setYellowTextPosY = useTextRendererStore(
|
|
||||||
(state) => state.setYellowTextPosY
|
|
||||||
);
|
|
||||||
const setGreenText = useTextRendererStore((state) => state.setGreenText);
|
|
||||||
const setGreenTextPosY = useTextRendererStore(
|
|
||||||
(state) => state.setGreenTextPosY
|
|
||||||
);
|
|
||||||
const setGreenTextPosX = useTextRendererStore(
|
|
||||||
(state) => state.setGreenTextPosX
|
|
||||||
);
|
|
||||||
const setWords = useMediaWordStore((state) => state.setWords);
|
|
||||||
|
|
||||||
const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
|
|
||||||
|
|
||||||
const blueOrbData = useMemo(
|
|
||||||
() => site_a[activeBlueOrb as keyof typeof site_a],
|
|
||||||
[activeBlueOrb]
|
|
||||||
);
|
|
||||||
|
|
||||||
const resetWordPositionDataStructIdx = useMediaWordStore(
|
|
||||||
(state) => state.resetWordPositionDataStructIdx
|
|
||||||
);
|
|
||||||
const setImages = useImageStore((state) => state.setImages);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setActiveMediaComponent(lastActiveLeftSideComponent);
|
|
||||||
setGreenText(blueOrbData.node_name);
|
|
||||||
setYellowText("Play");
|
|
||||||
setYellowTextPosX(-0.8);
|
|
||||||
setYellowTextPosY(0.05);
|
|
||||||
setGreenTextPosX({ initial: 0.02, final: 0.02 });
|
|
||||||
setGreenTextPosY(0.675);
|
|
||||||
resetWordPositionDataStructIdx();
|
|
||||||
setWords([
|
|
||||||
string_table[blueOrbData.words[1] as keyof typeof string_table],
|
|
||||||
string_table[blueOrbData.words[2] as keyof typeof string_table],
|
|
||||||
string_table[blueOrbData.words[3] as keyof typeof string_table],
|
|
||||||
]);
|
|
||||||
|
|
||||||
|
|
||||||
}, [
|
|
||||||
activeBlueOrb,
|
|
||||||
blueOrbData,
|
|
||||||
lastActiveLeftSideComponent,
|
|
||||||
resetWordPositionDataStructIdx,
|
|
||||||
setActiveMediaComponent,
|
|
||||||
setGreenText,
|
|
||||||
setGreenTextPosX,
|
|
||||||
setGreenTextPosY,
|
|
||||||
setImages,
|
|
||||||
setWords,
|
|
||||||
setYellowText,
|
|
||||||
setYellowTextPosX,
|
|
||||||
setYellowTextPosY,
|
|
||||||
]);
|
|
||||||
return null;
|
|
||||||
});
|
|
||||||
|
|
||||||
export default MediaSceneInitializer;
|
|
|
@ -9,16 +9,15 @@ 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 { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
|
import {useBlueOrbStore, useHudStore, useLainStore, useMainGroupStore} from "../store";
|
||||||
import TextRenderer from "../components/TextRenderer/TextRenderer";
|
import TextRenderer from "../components/TextRenderer/TextRenderer";
|
||||||
import HUD from "../components/MainScene/HUD";
|
import HUD from "../components/MainScene/HUD";
|
||||||
import YellowOrb from "../components/MainScene/YellowOrb";
|
import YellowOrb from "../components/MainScene/YellowOrb";
|
||||||
import MainSceneInitializer from "./Initializers/MainSceneInitializer";
|
|
||||||
|
|
||||||
const MainScene = () => {
|
const MainScene = () => {
|
||||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||||
const setActiveBlueOrb = useBlueOrbStore((state) => state.setActiveBlueOrbId);
|
const setActiveBlueOrb = useBlueOrbStore((state) => state.setActiveBlueOrbId);
|
||||||
const setActiveBlueOrbHudId = useBlueOrbStore(
|
const setActiveBlueOrbHudId = useHudStore(
|
||||||
(state) => state.setActiveBlueOrbHudId
|
(state) => state.setActiveBlueOrbHudId
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -47,8 +46,7 @@ const MainScene = () => {
|
||||||
return (
|
return (
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
{/*<MainSceneIntro />*/}
|
<MainSceneIntro />
|
||||||
{/*<MainSceneInitializer />*/}
|
|
||||||
<a.group
|
<a.group
|
||||||
rotation-x={mainGroupStateRot.mainGroupRotX}
|
rotation-x={mainGroupStateRot.mainGroupRotX}
|
||||||
position-y={mainGroupStatePos.mainGroupPosY}
|
position-y={mainGroupStatePos.mainGroupPosY}
|
||||||
|
@ -59,7 +57,7 @@ const MainScene = () => {
|
||||||
<HUD />
|
<HUD />
|
||||||
<TextRenderer />
|
<TextRenderer />
|
||||||
<YellowOrb />
|
<YellowOrb />
|
||||||
<Starfield />
|
{/*<Starfield />*/}
|
||||||
<GrayPlanes />
|
<GrayPlanes />
|
||||||
<Lights />
|
<Lights />
|
||||||
<MiddleRing />
|
<MiddleRing />
|
||||||
|
|
|
@ -7,7 +7,6 @@ import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisua
|
||||||
import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
|
import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
|
||||||
import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
|
import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
|
||||||
import Lof from "../components/MediaScene/Lof";
|
import Lof from "../components/MediaScene/Lof";
|
||||||
import MediaSceneInitializer from "./Initializers/MediaSceneInitializer";
|
|
||||||
import { OrbitControls } from "drei";
|
import { OrbitControls } from "drei";
|
||||||
import Images from "../components/MediaScene/Images";
|
import Images from "../components/MediaScene/Images";
|
||||||
|
|
||||||
|
@ -25,7 +24,6 @@ const MediaScene = () => {
|
||||||
<perspectiveCamera position-z={3}>
|
<perspectiveCamera position-z={3}>
|
||||||
<group position={[0.4, -0.3, 0]}>
|
<group position={[0.4, -0.3, 0]}>
|
||||||
<OrbitControls />
|
<OrbitControls />
|
||||||
{/*<MediaSceneInitializer />*/}
|
|
||||||
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||||
<LeftSide activeMediaComponent={activeMediaComponent} />
|
<LeftSide activeMediaComponent={activeMediaComponent} />
|
||||||
<RightSide activeMediaComponent={activeMediaComponent} />
|
<RightSide activeMediaComponent={activeMediaComponent} />
|
||||||
|
|
45
src/store.ts
45
src/store.ts
|
@ -6,11 +6,16 @@ type SceneState = {
|
||||||
setScene: (to: string) => void;
|
setScene: (to: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type BlueOrbState = {
|
type HUDState = {
|
||||||
activeBlueOrbId: string;
|
|
||||||
activeHudId: string;
|
activeHudId: string;
|
||||||
hudActive: number;
|
hudActive: number;
|
||||||
hudVisible: boolean;
|
hudVisible: boolean;
|
||||||
|
setActiveBlueOrbHudId: (to: string) => void;
|
||||||
|
toggleHud: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type BlueOrbState = {
|
||||||
|
activeBlueOrbId: string;
|
||||||
isActiveBlueOrbInteractedWith: boolean;
|
isActiveBlueOrbInteractedWith: boolean;
|
||||||
activeBlueOrbPosX: number;
|
activeBlueOrbPosX: number;
|
||||||
activeBlueOrbPosZ: number;
|
activeBlueOrbPosZ: number;
|
||||||
|
@ -19,9 +24,11 @@ type BlueOrbState = {
|
||||||
setActiveBlueOrbPosZ: (to: number) => void;
|
setActiveBlueOrbPosZ: (to: number) => void;
|
||||||
setActiveBlueOrbRotZ: (to: number) => void;
|
setActiveBlueOrbRotZ: (to: number) => void;
|
||||||
setActiveBlueOrbId: (to: string) => void;
|
setActiveBlueOrbId: (to: string) => void;
|
||||||
setActiveBlueOrbHudId: (to: string) => void;
|
|
||||||
toggleHud: () => void;
|
|
||||||
setIsActiveBlueOrbInteractedWith: (to: boolean) => void;
|
setIsActiveBlueOrbInteractedWith: (to: boolean) => void;
|
||||||
|
blueOrbRowIdx: number;
|
||||||
|
blueOrbColIdx: number;
|
||||||
|
setBlueOrbRowIdx: (to: number) => void;
|
||||||
|
setBlueOrbColIdx: (to: number) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type LainState = {
|
type LainState = {
|
||||||
|
@ -66,6 +73,8 @@ type SiteState = {
|
||||||
setSiteRotY: (to: number) => void;
|
setSiteRotY: (to: number) => void;
|
||||||
setSitePosY: (to: number) => void;
|
setSitePosY: (to: number) => void;
|
||||||
setIsSiteChanging: (to: boolean) => void;
|
setIsSiteChanging: (to: boolean) => void;
|
||||||
|
siteRotIdx: number;
|
||||||
|
setSiteRotIdx: (to: number) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type LevelState = {
|
type LevelState = {
|
||||||
|
@ -148,15 +157,6 @@ type ImageState = {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
// type ImageState = {
|
|
||||||
// fstImg: ImageSrc | undefined;
|
|
||||||
// sndImg: ImageSrc | undefined;
|
|
||||||
// thirdImg: ImageSrc | undefined;
|
|
||||||
// setFstImg: (to: ImageSrc) => void;
|
|
||||||
// setSndImg: (to: ImageSrc) => void;
|
|
||||||
// setThirdImg: (to: ImageSrc) => void;
|
|
||||||
// };
|
|
||||||
//
|
|
||||||
export const useTextRendererStore = create<TextRendererState>((set) => ({
|
export const useTextRendererStore = create<TextRendererState>((set) => ({
|
||||||
// yellow text
|
// yellow text
|
||||||
yellowText: "Play",
|
yellowText: "Play",
|
||||||
|
@ -182,12 +182,17 @@ export const useTextRendererStore = create<TextRendererState>((set) => ({
|
||||||
set((state) => ({ greenTextActive: Number(!state.greenTextActive) })),
|
set((state) => ({ greenTextActive: Number(!state.greenTextActive) })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useBlueOrbStore = create<BlueOrbState>((set) => ({
|
export const useHudStore = create<HUDState>((set) => ({
|
||||||
activeBlueOrbId: "0422",
|
|
||||||
activeHudId: "fg_hud_1",
|
activeHudId: "fg_hud_1",
|
||||||
hudActive: 1,
|
hudActive: 1,
|
||||||
isActiveBlueOrbInteractedWith: false,
|
|
||||||
hudVisible: true,
|
hudVisible: true,
|
||||||
|
setActiveBlueOrbHudId: (to) => set(() => ({ activeHudId: to })),
|
||||||
|
toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const useBlueOrbStore = create<BlueOrbState>((set) => ({
|
||||||
|
activeBlueOrbId: "0422",
|
||||||
|
isActiveBlueOrbInteractedWith: false,
|
||||||
activeBlueOrbPosX: 0,
|
activeBlueOrbPosX: 0,
|
||||||
activeBlueOrbPosZ: 0,
|
activeBlueOrbPosZ: 0,
|
||||||
activeBlueOrbRotZ: 0,
|
activeBlueOrbRotZ: 0,
|
||||||
|
@ -195,10 +200,12 @@ export const useBlueOrbStore = create<BlueOrbState>((set) => ({
|
||||||
setActiveBlueOrbPosZ: (to) => set(() => ({ activeBlueOrbPosZ: to })),
|
setActiveBlueOrbPosZ: (to) => set(() => ({ activeBlueOrbPosZ: to })),
|
||||||
setActiveBlueOrbRotZ: (to) => set(() => ({ activeBlueOrbRotZ: to })),
|
setActiveBlueOrbRotZ: (to) => set(() => ({ activeBlueOrbRotZ: to })),
|
||||||
setActiveBlueOrbId: (to) => set(() => ({ activeBlueOrbId: to })),
|
setActiveBlueOrbId: (to) => set(() => ({ activeBlueOrbId: to })),
|
||||||
setActiveBlueOrbHudId: (to) => set(() => ({ activeHudId: to })),
|
|
||||||
toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
|
|
||||||
setIsActiveBlueOrbInteractedWith: (to) =>
|
setIsActiveBlueOrbInteractedWith: (to) =>
|
||||||
set(() => ({ isActiveBlueOrbInteractedWith: to })),
|
set(() => ({ isActiveBlueOrbInteractedWith: to })),
|
||||||
|
blueOrbRowIdx: 0,
|
||||||
|
setBlueOrbRowIdx: (to) => set(() => ({ blueOrbRowIdx: to })),
|
||||||
|
blueOrbColIdx: 0,
|
||||||
|
setBlueOrbColIdx: (to) => set(() => ({ blueOrbColIdx: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useLainStore = create<LainState>((set) => ({
|
export const useLainStore = create<LainState>((set) => ({
|
||||||
|
@ -248,6 +255,8 @@ export const useSiteStore = create<SiteState>((set) => ({
|
||||||
setSitePosY: (to) => set(() => ({ sitePosY: to })),
|
setSitePosY: (to) => set(() => ({ sitePosY: to })),
|
||||||
setSiteRotY: (to) => set(() => ({ siteRotY: to })),
|
setSiteRotY: (to) => set(() => ({ siteRotY: to })),
|
||||||
setIsSiteChanging: (to) => set(() => ({ isSiteChangingY: to })),
|
setIsSiteChanging: (to) => set(() => ({ isSiteChangingY: to })),
|
||||||
|
siteRotIdx: 6,
|
||||||
|
setSiteRotIdx: (to) => set(() => ({ siteRotIdx: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useMiddleRingStore = create<MiddleRingState>((set) => ({
|
export const useMiddleRingStore = create<MiddleRingState>((set) => ({
|
||||||
|
|
Loading…
Reference in a new issue