diff --git a/src/components/StateManagers/BlueOrbHUDManager.tsx b/src/components/StateManagers/BlueOrbHUDManager.tsx index 579daed..acd7bd4 100644 --- a/src/components/StateManagers/BlueOrbHUDManager.tsx +++ b/src/components/StateManagers/BlueOrbHUDManager.tsx @@ -1,6 +1,5 @@ import { useCallback, useEffect } from "react"; import { useHudStore } from "../../store"; -import game_action_mappings from "../../resources/game_action_mappings.json"; import { StateManagerProps } from "./EventManager"; const BlueOrbHUDManager = (props: StateManagerProps) => { @@ -46,28 +45,18 @@ const BlueOrbHUDManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventObject: any = - game_action_mappings[ - props.eventState as keyof typeof game_action_mappings - ]; + const eventAction = props.eventState.event; + const newActiveHudId = props.eventState.newActiveHudId; - if (eventObject) { - const eventAction = eventObject.action; - const targetBlueOrbHudId = eventObject.target_hud_id; + const dispatchedObject = dispatchObject(eventAction, newActiveHudId); - const dispatchedObject = dispatchObject( - eventAction, - targetBlueOrbHudId - ); + if (dispatchedObject) { + toggleHud(); - if (dispatchedObject) { + setTimeout(() => { + dispatchedObject.action(dispatchedObject.value); toggleHud(); - - setTimeout(() => { - dispatchedObject.action(dispatchedObject.value); - toggleHud(); - }, dispatchedObject.actionDelay); - } + }, dispatchedObject.actionDelay); } } }, [props.eventState, setActiveBlueOrbHudId, toggleHud, dispatchObject]); diff --git a/src/components/StateManagers/BlueOrbManager.tsx b/src/components/StateManagers/BlueOrbManager.tsx index 79ac558..82f04ac 100644 --- a/src/components/StateManagers/BlueOrbManager.tsx +++ b/src/components/StateManagers/BlueOrbManager.tsx @@ -22,7 +22,7 @@ type BlueOrbDispatcher = { move_left: BlueOrbDispatchData; move_right: BlueOrbDispatchData; change_blue_orb: BlueOrbDispatchData; - select_blue_orb: BlueOrbDispatchData; + throw_blue_orb: BlueOrbDispatchData; }; const BlueOrbManager = (props: StateManagerProps) => { @@ -120,9 +120,9 @@ const BlueOrbManager = (props: StateManagerProps) => { value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], actionDelay: 0, }, - select_blue_orb: { + throw_blue_orb: { action: animateActiveBlueOrbThrow, - value: true, + value: [true], actionDelay: 0, }, }; diff --git a/src/components/StateManagers/EventManager.tsx b/src/components/StateManagers/EventManager.tsx index 302b2c5..89404eb 100644 --- a/src/components/StateManagers/EventManager.tsx +++ b/src/components/StateManagers/EventManager.tsx @@ -52,17 +52,24 @@ export type GameContext = { blueOrbColIdx: number; currentLevel: string; siteRotIdx: string; + activeMediaComponent: string; }; const EventManager = () => { + const currentScene = useSceneStore((state) => state.currentScene); + + // main scene const blueOrbRowIdx = useBlueOrbStore((state) => state.blueOrbRowIdx); const blueOrbColIdx = useBlueOrbStore((state) => state.blueOrbColIdx); - const siteRotIdx = useSiteStore((state) => state.siteRotIdx); const currentLevel = useLevelStore((state) => state.currentLevel); + // media scene + const activeMediaComponent = useMediaStore( + (state) => state.activeMediaComponent + ); + const [eventState, setEventState] = useState(); - const currentScene = useSceneStore((state) => state.currentScene); const [inputCooldown, setInputCooldown] = useState(false); @@ -73,8 +80,16 @@ const EventManager = () => { blueOrbRowIdx: blueOrbRowIdx, blueOrbColIdx: blueOrbColIdx, currentLevel: currentLevel, + activeMediaComponent: activeMediaComponent, }), - [blueOrbColIdx, blueOrbRowIdx, currentLevel, currentScene, siteRotIdx] + [ + activeMediaComponent, + blueOrbColIdx, + blueOrbRowIdx, + currentLevel, + currentScene, + siteRotIdx, + ] ); const handleKeyPress = useCallback( @@ -86,7 +101,7 @@ const EventManager = () => { if (keyPress && !inputCooldown) { gameContext.keyPress = keyPress; const event = computeAction(gameContext); - console.log(event) + console.log(event); setEventState(event); } }, @@ -109,12 +124,12 @@ const EventManager = () => { - {/**/} - {/**/} - {/**/} + + + - {/**/} + ); diff --git a/src/components/StateManagers/GreenTextManager.tsx b/src/components/StateManagers/GreenTextManager.tsx index 2e10f75..c8ab9e5 100644 --- a/src/components/StateManagers/GreenTextManager.tsx +++ b/src/components/StateManagers/GreenTextManager.tsx @@ -1,6 +1,5 @@ import { useCallback, useEffect } from "react"; import { useTextRendererStore } from "../../store"; -import game_action_mappings from "../../resources/game_action_mappings.json"; import site_a from "../../resources/site_a.json"; import { StateManagerProps } from "./EventManager"; import blue_orb_huds from "../../resources/blue_orb_huds.json"; @@ -18,13 +17,12 @@ const GreenTextManager = (props: StateManagerProps) => { ); const toggleAndSetGreenText = useCallback( - (targetBlueOrbId: string, targetBlueOrbHudId: string, delay: number) => { + (newActiveBlueOrbId: string, newActiveHudId: string, delay: number) => { const targetGreenText = - site_a[targetBlueOrbId as keyof typeof site_a].title; + site_a[newActiveBlueOrbId as keyof typeof site_a].title; const targetGreenTextPosData = - blue_orb_huds[targetBlueOrbHudId as keyof typeof blue_orb_huds] - .medium_text; + blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds].medium_text; toggleGreenText(); @@ -42,27 +40,27 @@ const GreenTextManager = (props: StateManagerProps) => { ); const dispatchObject = useCallback( - (event: string, targetBlueOrbId: string, targetBlueOrbHudId: string) => { + (event: string, newActiveBlueOrbId: string, newActiveHudId: string) => { const dispatcherObjects = { move_up: { action: toggleAndSetGreenText, - value: [targetBlueOrbId, targetBlueOrbHudId, 3903.704], + value: [newActiveBlueOrbId, newActiveHudId, 3903.704], }, move_down: { action: toggleAndSetGreenText, - value: [targetBlueOrbId, targetBlueOrbHudId, 3903.704], + value: [newActiveBlueOrbId, newActiveHudId, 3903.704], }, move_left: { action: toggleAndSetGreenText, - value: [targetBlueOrbId, targetBlueOrbHudId, 3903.704], + value: [newActiveBlueOrbId, newActiveHudId, 3903.704], }, move_right: { action: toggleAndSetGreenText, - value: [targetBlueOrbId, targetBlueOrbHudId, 3903.704], + value: [newActiveBlueOrbId, newActiveHudId, 3903.704], }, change_blue_orb: { action: toggleAndSetGreenText, - value: [targetBlueOrbId, targetBlueOrbHudId, 500], + value: [newActiveBlueOrbId, newActiveHudId, 500], }, }; @@ -73,25 +71,18 @@ const GreenTextManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventObject: any = - game_action_mappings[ - props.eventState as keyof typeof game_action_mappings - ]; + const eventAction = props.eventState.event; + const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId; + const newActiveHudId = props.eventState.newActiveHudId; - if (eventObject) { - const eventAction = eventObject.action; - const targetBlueOrbId = eventObject.target_blue_orb_id; - const targetBlueOrbHudId = eventObject.target_hud_id; + const dispatchedObject = dispatchObject( + eventAction, + newActiveBlueOrbId, + newActiveHudId + ); - const dispatchedObject = dispatchObject( - eventAction, - targetBlueOrbId, - targetBlueOrbHudId - ); - - if (dispatchedObject) { - dispatchedObject.action.apply(null, dispatchedObject.value as any); - } + if (dispatchedObject) { + dispatchedObject.action.apply(null, dispatchedObject.value as any); } } }, [props.eventState, dispatchObject]); diff --git a/src/components/StateManagers/LainManager.tsx b/src/components/StateManagers/LainManager.tsx index 37e331e..36736aa 100644 --- a/src/components/StateManagers/LainManager.tsx +++ b/src/components/StateManagers/LainManager.tsx @@ -28,7 +28,7 @@ const LainManager = (props: StateManagerProps) => { value: "move_right", duration: 3904.704, }, - select_blue_orb: { + throw_blue_orb: { action: setLainMoveState, value: "throwBlueOrb", duration: 3904.704, diff --git a/src/components/StateManagers/MediaComponentManager.tsx b/src/components/StateManagers/MediaComponentManager.tsx index 07ce59b..3520364 100644 --- a/src/components/StateManagers/MediaComponentManager.tsx +++ b/src/components/StateManagers/MediaComponentManager.tsx @@ -1,8 +1,6 @@ import { useCallback, useEffect } from "react"; import { StateManagerProps } from "./EventManager"; import { useMediaStore } from "../../store"; -import game_action_mappings from "../../resources/game_action_mappings.json"; -import blue_orb_directions from "../../resources/blue_orb_directions.json"; const MediaComponentManager = (props: StateManagerProps) => { const setActiveMediaComponent = useMediaStore( @@ -49,39 +47,39 @@ const MediaComponentManager = (props: StateManagerProps) => { ); const dispatchObject = useCallback( - (event: string, targetMediaComponent: string) => { + (event: string) => { const dispatcherObjects = { fstWord_up: { action: setActiveMediaComponent, - value: targetMediaComponent, + value: "thirdWord", }, fstWord_down: { action: setActiveMediaComponent, - value: targetMediaComponent, + value: "sndWord", }, sndWord_up: { action: setActiveMediaComponent, - value: targetMediaComponent, + value: "fstWord", }, sndWord_down: { action: setActiveMediaComponent, - value: targetMediaComponent, + value: "thirdWord", }, thirdWord_down: { action: setActiveMediaComponent, - value: targetMediaComponent, + value: "fstWord", }, thirdWord_up: { action: setActiveMediaComponent, - value: targetMediaComponent, + value: "sndWord", }, play_down: { action: setActiveMediaComponent, - value: targetMediaComponent, + value: "exit", }, exit_up: { action: setActiveMediaComponent, - value: targetMediaComponent, + value: "play", }, switch_to_right_side_from_play: { action: switchToRightSide, @@ -103,7 +101,7 @@ const MediaComponentManager = (props: StateManagerProps) => { action: switchToLeftSide, value: "thirdWord", }, - select_blue_orb: { + throw_blue_orb: { action: setActiveMediaComponent, value: "play", }, @@ -116,23 +114,12 @@ const MediaComponentManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventObject: any = - game_action_mappings[ - props.eventState as keyof typeof blue_orb_directions - ]; + const eventAction = props.eventState.event; - if (eventObject) { - const eventAction = eventObject.action; - const targetMediaComponent = eventObject.target_media_component; + const dispatchedObject = dispatchObject(eventAction); - const dispatchedObject = dispatchObject( - eventAction, - targetMediaComponent - ); - - if (dispatchedObject) { - dispatchedObject.action(dispatchedObject.value); - } + if (dispatchedObject) { + dispatchedObject.action(dispatchedObject.value); } } }, [props.eventState, dispatchObject]); diff --git a/src/components/StateManagers/MediaElementManager.tsx b/src/components/StateManagers/MediaElementManager.tsx index bbcbd0b..a8f4d80 100644 --- a/src/components/StateManagers/MediaElementManager.tsx +++ b/src/components/StateManagers/MediaElementManager.tsx @@ -1,8 +1,6 @@ import { useCallback, useEffect } from "react"; import { StateManagerProps } from "./EventManager"; -import game_action_mappings from "../../resources/game_action_mappings.json"; -import blue_orb_directions from "../../resources/blue_orb_directions.json"; const MediaComponentManager = (props: StateManagerProps) => { const playMedia = useCallback(() => { @@ -13,7 +11,7 @@ const MediaComponentManager = (props: StateManagerProps) => { const dispatchObject = useCallback( (event: string) => { const dispatcherObjects = { - play_media_element: { action: playMedia }, + play_select: { action: playMedia }, }; return dispatcherObjects[event as keyof typeof dispatcherObjects]; @@ -23,19 +21,12 @@ const MediaComponentManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventObject: any = - game_action_mappings[ - props.eventState as keyof typeof blue_orb_directions - ]; + const eventAction = props.eventState.event; - if (eventObject) { - const eventAction = eventObject.action; + const dispatchedObject = dispatchObject(eventAction); - const dispatchedObject = dispatchObject(eventAction); - - if (dispatchedObject) { - dispatchedObject.action(); - } + if (dispatchedObject) { + dispatchedObject.action(); } } }, [props.eventState, dispatchObject]); diff --git a/src/components/StateManagers/MediaImageManager.tsx b/src/components/StateManagers/MediaImageManager.tsx index 940f2e7..218192a 100644 --- a/src/components/StateManagers/MediaImageManager.tsx +++ b/src/components/StateManagers/MediaImageManager.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect } from "react"; import { StateManagerProps } from "./EventManager"; -import game_action_mappings from "../../resources/game_action_mappings.json"; import site_a from "../../resources/site_a.json"; import image_table from "../../resources/image_table.json"; import { ImageSrc, useImageStore } from "../../store"; @@ -9,43 +8,50 @@ import { ImageSrc, useImageStore } from "../../store"; const MediaImageManager = (props: StateManagerProps) => { const setImages = useImageStore((state) => state.setImages); - const updateSceneImages = useCallback((targetBlueOrbId: string) => { - const node_name = site_a[targetBlueOrbId as keyof typeof site_a].node_name; - const images = image_table[node_name as keyof typeof image_table]; + const updateSceneImages = useCallback( + (newActiveBlueOrbId: string) => { + const node_name = + site_a[newActiveBlueOrbId as keyof typeof site_a].node_name; + const images = image_table[node_name as keyof typeof image_table]; - Object.values(images).forEach((img) => { - switch (img.substr(img.length - 1)) { - case "0": - import("../../static/media_images/site_a/" + img + ".png").then( - (imageSrc: ImageSrc) => { - setImages(imageSrc, 1); - } - ); - break; - case "1": - import("../../static/media_images/site_a/" + img + ".png").then( - (imageSrc: ImageSrc) => { - setImages(imageSrc, 2); - } - ); - break; - case "2": - import("../../static/media_images/site_a/" + img + ".png").then( - (imageSrc: ImageSrc) => { - setImages(imageSrc, 3); - } - ); - break; - default: - break; - } - }); - }, []); + Object.values(images).forEach((img) => { + switch (img.substr(img.length - 1)) { + case "0": + import("../../static/media_images/site_a/" + img + ".png").then( + (imageSrc: ImageSrc) => { + setImages(imageSrc, 1); + } + ); + break; + case "1": + import("../../static/media_images/site_a/" + img + ".png").then( + (imageSrc: ImageSrc) => { + setImages(imageSrc, 2); + } + ); + break; + case "2": + import("../../static/media_images/site_a/" + img + ".png").then( + (imageSrc: ImageSrc) => { + setImages(imageSrc, 3); + } + ); + break; + default: + break; + } + }); + }, + [setImages] + ); const dispatchObject = useCallback( - (event: string, targetBlueOrbId: string) => { + (event: string, newActiveBlueOrbId: string) => { const dispatcherObjects = { - select_blue_orb: { action: updateSceneImages, value: targetBlueOrbId }, + throw_blue_orb: { + action: updateSceneImages, + value: newActiveBlueOrbId, + }, }; return dispatcherObjects[event as keyof typeof dispatcherObjects]; @@ -55,20 +61,13 @@ const MediaImageManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventObject: any = - game_action_mappings[ - props.eventState as keyof typeof game_action_mappings - ]; + const eventAction = props.eventState.action; + const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId; - if (eventObject) { - const eventAction = eventObject.action; - const targetBlueOrbId = eventObject.target_blue_orb_id; + const dispatchedObject = dispatchObject(eventAction, newActiveBlueOrbId); - const dispatchedObject = dispatchObject(eventAction, targetBlueOrbId); - - if (dispatchedObject) { - dispatchedObject.action(dispatchedObject.value); - } + if (dispatchedObject) { + dispatchedObject.action(dispatchedObject.value); } } }, [props.eventState, dispatchObject]); diff --git a/src/components/StateManagers/MediaWordManager.tsx b/src/components/StateManagers/MediaWordManager.tsx index 681dea5..2ab6a93 100644 --- a/src/components/StateManagers/MediaWordManager.tsx +++ b/src/components/StateManagers/MediaWordManager.tsx @@ -1,8 +1,6 @@ import { useCallback, useEffect } from "react"; import { StateManagerProps } from "./EventManager"; 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; @@ -16,7 +14,7 @@ type MediaWordDispatchData = { sndWord_up: MediaWordDispatcher; thirdWord_down: MediaWordDispatcher; thirdWord_up: MediaWordDispatcher; - select_blue_orb: MediaWordDispatcher; + throw_blue_orb: MediaWordDispatcher; }; const MediaWordManager = (props: StateManagerProps) => { @@ -54,7 +52,7 @@ const MediaWordManager = (props: StateManagerProps) => { action: addToWordPositionDataStructIdx, value: -1, }, - select_blue_orb: { + throw_blue_orb: { action: resetWordPositionDataStructIdx, }, }; @@ -66,19 +64,12 @@ const MediaWordManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventObject: any = - game_action_mappings[ - props.eventState as keyof typeof blue_orb_directions - ]; + const eventAction = props.eventState.event; - if (eventObject) { - const eventAction = eventObject.action; + const dispatchedObject = dispatchObject(eventAction); - const dispatchedObject = dispatchObject(eventAction); - - if (dispatchedObject) { - dispatchedObject.action(dispatchedObject.value); - } + if (dispatchedObject) { + dispatchedObject.action(dispatchedObject.value); } } }, [props.eventState, dispatchObject]); diff --git a/src/components/StateManagers/MiddleRingManager.tsx b/src/components/StateManagers/MiddleRingManager.tsx index 08baaf3..7403371 100644 --- a/src/components/StateManagers/MiddleRingManager.tsx +++ b/src/components/StateManagers/MiddleRingManager.tsx @@ -1,6 +1,5 @@ import { useCallback, useEffect, useMemo } from "react"; import { useMiddleRingStore } from "../../store"; -import game_action_mappings from "../../resources/game_action_mappings.json"; const MiddleRingManager = (props: any) => { const setMiddleRingWobbleStrength = useMiddleRingStore( diff --git a/src/components/StateManagers/SceneManager.tsx b/src/components/StateManagers/SceneManager.tsx index e253ea9..264e806 100644 --- a/src/components/StateManagers/SceneManager.tsx +++ b/src/components/StateManagers/SceneManager.tsx @@ -1,22 +1,21 @@ import { useCallback, useEffect } from "react"; import { StateManagerProps } from "./EventManager"; -import blue_orb_directions from "../../resources/blue_orb_directions.json"; import { useSceneStore } from "../../store"; const SceneManager = (props: StateManagerProps) => { const setScene = useSceneStore((state) => state.setScene); const dispatchObject = useCallback( - (event: string) => { + (event: string, newScene: string) => { const dispatcherObjects = { - select_blue_orb: { + throw_blue_orb: { action: setScene, - value: "media", + value: newScene, delay: 3904.704, }, exit_select: { action: setScene, - value: "main", + value: newScene, delay: 0, }, }; @@ -27,24 +26,10 @@ const SceneManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventObject = - blue_orb_directions[ - props.eventState as keyof typeof blue_orb_directions - ]; + const eventAction = props.eventState.event; + const newScene = props.eventState.newScene; - let dispatchedObject: { - action: (to: string) => void; - value: string; - delay: number; - }; - - if (eventObject) { - const eventAction = eventObject.action; - dispatchedObject = dispatchObject(eventAction); - } else { - const eventAction = props.eventState; - dispatchedObject = dispatchObject(eventAction); - } + const dispatchedObject = dispatchObject(eventAction, newScene); if (dispatchedObject) { setTimeout(() => { diff --git a/src/components/StateManagers/YellowTextManager.tsx b/src/components/StateManagers/YellowTextManager.tsx index ae17019..2b445f2 100644 --- a/src/components/StateManagers/YellowTextManager.tsx +++ b/src/components/StateManagers/YellowTextManager.tsx @@ -1,18 +1,21 @@ import { MutableRefObject, useCallback, useEffect, useRef } from "react"; import blue_orb_huds from "../../resources/blue_orb_huds.json"; import site_a from "../../resources/site_a.json"; -import {useBlueOrbStore, useHudStore, useTextRendererStore} from "../../store"; -import game_action_mappings from "../../resources/game_action_mappings.json"; +import { + useBlueOrbStore, + useHudStore, + useTextRendererStore, +} from "../../store"; type AnimateYellowTextWithMove = ( yellowLetterPosYOffset: number, - targetBlueOrbHudId: string, - targetBlueOrbId: string + newActiveHudId: string, + newActiveBlueOrbId: string ) => void; type AnimateYellowTextWithoutMove = ( - targetBlueOrbHudId: string, - targetBlueOrbId: string + newActiveHudId: string, + newActiveBlueOrbId: string ) => void; type AnimateMediaYellowText = ( @@ -36,7 +39,7 @@ type YellowTextDispatcher = { change_blue_orb: YellowTextDispatchData; play_down: YellowTextDispatchData; exit_up: YellowTextDispatchData; - select_blue_orb: YellowTextDispatchData; + throw_blue_orb: YellowTextDispatchData; exit_media_scene: YellowTextDispatchData; }; @@ -72,8 +75,8 @@ const YellowTextManager = (props: any) => { const animateYellowTextWithMove: AnimateYellowTextWithMove = useCallback( ( yellowLetterPosYOffset: number, - targetBlueOrbHudId: string, - targetBlueOrbId: string + newActiveHudId: string, + newActiveBlueOrbId: string ) => { // animate the letters to match that of site's // to create an illusion of not moving @@ -89,15 +92,17 @@ const YellowTextManager = (props: any) => { setTimeout(() => { // animate it to new pos x/y setYellowTextPosX( - blue_orb_huds[targetBlueOrbHudId as keyof typeof blue_orb_huds] + blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds] .big_text[0] ); setYellowTextPosY( - blue_orb_huds[targetBlueOrbHudId as keyof typeof blue_orb_huds] + blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds] .big_text[1] ); // set new text according to the node name - setYellowText(site_a[targetBlueOrbId as keyof typeof site_a].node_name); + setYellowText( + site_a[newActiveBlueOrbId as keyof typeof site_a].node_name + ); }, 3000); // unshrink text @@ -115,17 +120,17 @@ const YellowTextManager = (props: any) => { ); const animateYellowTextWithoutMove: AnimateYellowTextWithoutMove = useCallback( - (targetBlueOrbHudId: string, targetBlueOrbId: string) => { + (newActiveHudId: string, newActiveBlueOrbId: string) => { // make current hud big text shrink setYellowTextOffsetXCoeff(-1); setTimeout(() => { setYellowTextPosX( - blue_orb_huds[targetBlueOrbHudId as keyof typeof blue_orb_huds] + blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds] .big_text[0] ); setYellowTextPosY( - blue_orb_huds[targetBlueOrbHudId as keyof typeof blue_orb_huds] + blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds] .big_text[1] ); }, 400); @@ -133,7 +138,9 @@ const YellowTextManager = (props: any) => { setTimeout(() => { // set new text according to the node name - setYellowText(site_a[targetBlueOrbId as keyof typeof site_a].node_name); + setYellowText( + site_a[newActiveBlueOrbId as keyof typeof site_a].node_name + ); }, 1000); setTimeout(() => { @@ -209,29 +216,29 @@ const YellowTextManager = (props: any) => { const dispatchObject = useCallback( ( event: string, - targetBlueOrbHudId: string | undefined, - targetBlueOrbId: string | undefined + newActiveHudId: string | undefined, + newActiveBlueOrbId: string | undefined ) => { const dispatcherObjects: YellowTextDispatcher = { move_up: { action: animateYellowTextWithMove, - value: [-1.5, targetBlueOrbHudId, targetBlueOrbId], + value: [-1.5, newActiveHudId, newActiveBlueOrbId], }, move_down: { action: animateYellowTextWithMove, - value: [1.5, targetBlueOrbHudId, targetBlueOrbId], + value: [1.5, newActiveHudId, newActiveBlueOrbId], }, move_left: { action: animateYellowTextWithMove, - value: [targetBlueOrbHudId, targetBlueOrbId], + value: [newActiveHudId, newActiveBlueOrbId], }, move_right: { action: animateYellowTextWithMove, - value: [targetBlueOrbHudId, targetBlueOrbId], + value: [newActiveHudId, newActiveBlueOrbId], }, change_blue_orb: { action: animateYellowTextWithoutMove, - value: [targetBlueOrbHudId, targetBlueOrbId], + value: [newActiveHudId, newActiveBlueOrbId], }, exit_up: { action: animateMediaYellowText, @@ -241,7 +248,7 @@ const YellowTextManager = (props: any) => { action: animateMediaYellowText, value: ["Exit", [-0.8, -0.08, 0.6]], }, - select_blue_orb: { + throw_blue_orb: { action: initializeYellowTextForMediaScene, }, exit_media_scene: { @@ -262,34 +269,27 @@ const YellowTextManager = (props: any) => { useEffect(() => { if (props.eventState) { - const eventObject: any = - game_action_mappings[ - props.eventState as keyof typeof game_action_mappings - ]; + const eventAction = props.eventState.event; - if (eventObject) { - const eventAction = eventObject.action; + const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId; + const newActiveHudId = props.eventState.newActiveHudId; - const targetBlueOrbId = eventObject.target_blue_orb_id; - const targetBlueOrbHudId = eventObject.target_hud_id; + const dispatchedObject = dispatchObject( + eventAction, + newActiveHudId, + newActiveBlueOrbId + ); - const dispatchedObject = dispatchObject( - eventAction, - targetBlueOrbHudId, - targetBlueOrbId - ); - - if (dispatchedObject) { - (dispatchedObject.action as any).apply(null, dispatchedObject.value); - } + if (dispatchedObject) { + (dispatchedObject.action as any).apply(null, dispatchedObject.value); } } }, [ animateYellowTextWithMove, animateYellowTextWithoutMove, props.eventState, - props.targetBlueOrbHudId, - props.targetBlueOrbId, + props.newActiveHudId, + props.newActiveBlueOrbId, dispatchObject, ]); diff --git a/src/core/computeAction.ts b/src/core/computeAction.ts index 1497a8b..6b079f5 100644 --- a/src/core/computeAction.ts +++ b/src/core/computeAction.ts @@ -1,102 +1,14 @@ import { GameContext } from "../components/StateManagers/EventManager"; -import available_blue_orbs_on_projection from "../resources/available_blue_orbs_on_projection.json"; +import handleMainSceneEvent from "./mainSceneEventHandler"; +import handleMediaSceneEvent from "./mediaSceneEventHandler"; const computeAction = (gameContext: GameContext) => { - let event; - let newBlueOrbColIdx; - let newBlueOrbRowIdx; - let newLevel; - let newSiteRotIdx; - let newActiveBlueOrbId; - - switch (gameContext.keyPress) { - case "left": - newBlueOrbColIdx = gameContext.blueOrbColIdx - 1; - if (newBlueOrbColIdx < 0) { - event = "move_left"; - newSiteRotIdx = parseInt(gameContext.siteRotIdx) + 1; - if (newSiteRotIdx > 8) newSiteRotIdx = "1"; - console.log(newSiteRotIdx) - newBlueOrbColIdx = 0; - newBlueOrbRowIdx = gameContext.blueOrbRowIdx; - newLevel = gameContext.currentLevel; - } else { - event = "change_blue_orb"; - newBlueOrbRowIdx = gameContext.blueOrbRowIdx; - newLevel = gameContext.currentLevel; - newSiteRotIdx = gameContext.siteRotIdx; - } - break; - case "down": - newBlueOrbRowIdx = gameContext.blueOrbRowIdx + 1; - if (newBlueOrbRowIdx > 2) { - event = "move_down"; - - newLevel = (parseInt(gameContext.currentLevel) - 1) - .toString() - .padStart(2, "0"); - - newBlueOrbColIdx = gameContext.blueOrbColIdx; - newBlueOrbRowIdx = 0; - - newSiteRotIdx = gameContext.siteRotIdx; - } else { - event = "change_blue_orb"; - newBlueOrbColIdx = gameContext.blueOrbColIdx; - newLevel = gameContext.currentLevel; - newSiteRotIdx = gameContext.siteRotIdx; - } - break; - case "up": - newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1; - if (newBlueOrbRowIdx < 0) { - event = "move_up"; - - newLevel = (parseInt(gameContext.currentLevel) + 1) - .toString() - .padStart(2, "0"); - - newBlueOrbColIdx = gameContext.blueOrbColIdx; - newBlueOrbRowIdx = 2; - - newSiteRotIdx = gameContext.siteRotIdx; - } else { - event = "change_blue_orb"; - newBlueOrbColIdx = gameContext.blueOrbColIdx; - newLevel = gameContext.currentLevel; - newSiteRotIdx = gameContext.siteRotIdx; - } - break; - case "right": - newBlueOrbColIdx = gameContext.blueOrbColIdx + 1; - if (newBlueOrbColIdx > 3) { - event = "move_right"; - newSiteRotIdx = (parseInt(gameContext.siteRotIdx) - 1).toString(); - newBlueOrbColIdx = 0; - newBlueOrbRowIdx = gameContext.blueOrbRowIdx; - newLevel = gameContext.currentLevel; - } else { - event = "change_blue_orb"; - newBlueOrbRowIdx = gameContext.blueOrbRowIdx; - newLevel = gameContext.currentLevel; - newSiteRotIdx = gameContext.siteRotIdx; - } + switch (gameContext.scene) { + case "main": + return handleMainSceneEvent(gameContext); + case "media": + return handleMediaSceneEvent(gameContext); } - - newActiveBlueOrbId = - newLevel + - available_blue_orbs_on_projection[ - newSiteRotIdx as keyof typeof available_blue_orbs_on_projection - ][newBlueOrbRowIdx as number][newBlueOrbColIdx as number]; - - return { - event: event, - newBlueOrbColIdx: newBlueOrbColIdx, - newBlueOrbRowIdx: newBlueOrbRowIdx, - newSiteRotIdx: newSiteRotIdx, - newLevel: newLevel, - newActiveBlueOrbId: newActiveBlueOrbId, - }; }; export default computeAction; diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts new file mode 100644 index 0000000..7cf8a51 --- /dev/null +++ b/src/core/mainSceneEventHandler.ts @@ -0,0 +1,106 @@ +import { GameContext } from "../components/StateManagers/EventManager"; +import available_blue_orbs_on_projection from "../resources/available_blue_orbs_on_projection.json"; + +const hudAssocs = { + "00": "fg_hud_1", + "10": "fg_hud_2", + "20": "fg_hud_3", + "01": "bg_hud_1", + "11": "bg_hud_2", + "21": "bg_hud_3", + "02": "bg_hud_4", + "12": "bg_hud_5", + "22": "bg_hud_6", + "03": "fg_hud_4", + "13": "fg_hud_5", + "23": "fg_hud_6", +}; + +const handleMainSceneEvent = (gameContext: GameContext) => { + let event; + + const keyPress = gameContext.keyPress; + + let newBlueOrbColIdx = gameContext.blueOrbColIdx; + let newBlueOrbRowIdx = gameContext.blueOrbRowIdx; + let newLevel = gameContext.currentLevel; + let newSiteRotIdx: string | number = gameContext.siteRotIdx; + let newScene = gameContext.scene; + + switch (keyPress) { + case "left": + newBlueOrbColIdx = gameContext.blueOrbColIdx - 1; + if (newBlueOrbColIdx < 0) { + event = "move_left"; + newSiteRotIdx = parseInt(gameContext.siteRotIdx) + 1; + if (newSiteRotIdx > 8) newSiteRotIdx = "1"; + newBlueOrbColIdx = 0; + } else { + event = "change_blue_orb"; + } + break; + case "down": + newBlueOrbRowIdx = gameContext.blueOrbRowIdx + 1; + if (newBlueOrbRowIdx > 2) { + event = "move_down"; + + newLevel = (parseInt(gameContext.currentLevel) - 1) + .toString() + .padStart(2, "0"); + newBlueOrbRowIdx = 0; + } else { + event = "change_blue_orb"; + } + break; + case "up": + newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1; + if (newBlueOrbRowIdx < 0) { + event = "move_up"; + + newLevel = (parseInt(gameContext.currentLevel) + 1) + .toString() + .padStart(2, "0"); + + newBlueOrbRowIdx = 2; + } else { + event = "change_blue_orb"; + } + break; + case "right": + newBlueOrbColIdx = gameContext.blueOrbColIdx + 1; + if (newBlueOrbColIdx > 3) { + event = "move_right"; + newSiteRotIdx = (parseInt(gameContext.siteRotIdx) - 1).toString(); + newBlueOrbColIdx = 0; + } else { + event = "change_blue_orb"; + } + break; + case "select": + event = "throw_blue_orb"; + newScene = "media"; + } + + const newActiveBlueOrbId = + newLevel + + available_blue_orbs_on_projection[ + newSiteRotIdx as keyof typeof available_blue_orbs_on_projection + ][newBlueOrbRowIdx as number][newBlueOrbColIdx as number]; + + const newActiveHudId = + hudAssocs[ + `${newBlueOrbRowIdx}${newBlueOrbColIdx}` as keyof typeof hudAssocs + ]; + return { + event: event, + newBlueOrbColIdx: newBlueOrbColIdx, + newBlueOrbRowIdx: newBlueOrbRowIdx, + newSiteRotIdx: newSiteRotIdx, + newLevel: newLevel, + newScene: newScene, + newActiveBlueOrbId: newActiveBlueOrbId, + newActiveHudId: newActiveHudId, + }; +}; + +export default handleMainSceneEvent; diff --git a/src/core/mediaSceneEventHandler.ts b/src/core/mediaSceneEventHandler.ts new file mode 100644 index 0000000..6daf565 --- /dev/null +++ b/src/core/mediaSceneEventHandler.ts @@ -0,0 +1,17 @@ +import { GameContext } from "../components/StateManagers/EventManager"; + +const handleMediaSceneEvent = (gameContext: GameContext) => { + const keyPress = gameContext.keyPress; + + const activeMediaComponent = gameContext.activeMediaComponent; + switch (keyPress) { + case "right": + return { event: `switch_to_right_side_from_${activeMediaComponent}` }; + case "left": + return { event: `switch_to_left_side_from_${activeMediaComponent}` }; + default: + return { event: `${activeMediaComponent}_${keyPress}`, newScene: "main" }; + } +}; + +export default handleMediaSceneEvent; diff --git a/src/resources/blue_orb_directions.json b/src/resources/blue_orb_directions.json deleted file mode 100644 index a091d14..0000000 --- a/src/resources/blue_orb_directions.json +++ /dev/null @@ -1,77 +0,0 @@ -{ - "0422_down": { - "action": "change_blue_orb", - "target_blue_orb_id": "0414", - "target_hud_id": "fg_hud_2" - }, - "0422_right": { - "action": "change_blue_orb", - "target_blue_orb_id": "0417", - "target_hud_id": "bg_hud_1" - }, - "0422_up": { - "action": "move_up", - "target_blue_orb_id": "0506", - "target_hud_id": "fg_hud_3" - }, - "0422_select": { - "action": "select_blue_orb", - "target_blue_orb_id": "0422", - "target_hud_id": "fg_hud_1" - }, - - "0414_up": { - "action": "change_blue_orb", - "target_blue_orb_id": "0422", - "target_hud_id": "fg_hud_1" - }, - "0414_right": { - "action": "change_blue_orb", - "target_blue_orb_id": "0417", - "target_hud_id": "bg_hud_1" - }, - - "0413_down": { - "action": "change_blue_orb", - "target_blue_orb_id": "0405", - "target_hud_id": "fg_hud_6" - }, - "0413_left": { - "action": "change_blue_orb", - "target_blue_orb_id": "0417", - "target_hud_id": "bg_hud_1" - }, - - "0405_left": { - "action": "change_blue_orb", - "target_blue_orb_id": "0417", - "target_hud_id": "bg_hud_1" - }, - "0405_up": { - "action": "change_blue_orb", - "target_blue_orb_id": "0413", - "target_hud_id": "fg_hud_5" - }, - - "0417_left": { - "action": "change_blue_orb", - "target_blue_orb_id": "0422", - "target_hud_id": "fg_hud_1" - }, - "0417_down": { - "action": "change_blue_orb", - "target_blue_orb_id": "0414", - "target_hud_id": "fg_hud_2" - }, - "0417_right": { - "action": "change_blue_orb", - "target_blue_orb_id": "0413", - "target_hud_id": "fg_hud_5" - }, - - "0506_down": { - "action": "move_down", - "target_blue_orb_id": "0422", - "target_hud_id": "fg_hud_1" - } -} diff --git a/src/resources/blue_orb_huds.json b/src/resources/blue_orb_huds.json index fd5cb2c..b27aedd 100644 --- a/src/resources/blue_orb_huds.json +++ b/src/resources/blue_orb_huds.json @@ -147,7 +147,7 @@ "type": "normal", "initial_position": [1.3, 0, -8.6] }, - "big_text": [-0.15, 0.08, -8.7], + "big_text": [-0.15, 0.06, -8.7], "medium_text": { "position": [0.1, 0, -8.7], "initial_position": [1.1, 0, -8.7] @@ -169,7 +169,7 @@ "type": "normal", "initial_position": [1.35, -0.12, -8.6] }, - "big_text": [-0.23, -0.05, -8.7], + "big_text": [-0.15, -0.05, -8.7], "medium_text": { "position": [0.18, -0.13, -8.7], "initial_position": [1.18, -0.13, -8.7] @@ -191,7 +191,7 @@ "type": "normal", "initial_position": [1.35, -0.22, -8.6] }, - "big_text": [-0.23, -0.16, -8.7], + "big_text": [-0.15, -0.16, -8.7], "medium_text": { "position": [0.18, -0.25, -8.7], "initial_position": [1.18, -0.25, -8.7] @@ -213,7 +213,7 @@ "type": "mirrored", "initial_position": [-1.35, 0.015, -8.6] }, - "big_text": [0.18, 0.105, -8.7], + "big_text": [0.15, 0.06, -8.7], "medium_text": { "position": [-0.65, 0.02, -8.7], "initial_position": [-1.65, 0.02, -8.7] @@ -235,7 +235,7 @@ "type": "mirrored", "initial_position": [-1.35, -0.12, -8.6] }, - "big_text": [0.2, -0.025, -8.7], + "big_text": [0.15, -0.05, -8.7], "medium_text": { "position": [-0.65, -0.11, -8.7], "initial_position": [-1.65, -0.11, -8.7] @@ -257,7 +257,7 @@ "type": "mirrored", "initial_position": [-1.25, -0.18, -8.6] }, - "big_text": [0.2, -0.18, -8.7], + "big_text": [0.15, -0.16, -8.7], "medium_text": { "position": [-0.53, -0.2, -8.7], "initial_position": [-1.53, -0.2, -8.7] diff --git a/src/resources/game_action_mappings.json b/src/resources/game_action_mappings.json deleted file mode 100644 index 3cdb436..0000000 --- a/src/resources/game_action_mappings.json +++ /dev/null @@ -1,138 +0,0 @@ -{ - "play_select": { - "action": "play_media_element" - }, - "exit_select": { - "action": "exit_media_scene" - }, - - "play_down": { - "action": "play_down", - "target_media_component": "exit" - }, - "exit_up": { - "action": "exit_up", - "target_media_component": "play" - }, - "play_right": { - "action": "switch_to_right_side_from_play", - "target_media_component": "last_active_right_media_component" - }, - "exit_right": { - "action": "switch_to_right_side_from_exit", - "target_media_component": "last_active_right_media_component" - }, - - "fstWord_left": { - "action": "switch_to_left_side_from_fstWord", - "target_media_component": "last_active_left_media_component" - }, - "fstWord_up": { - "action": "fstWord_up", - "target_media_component": "thirdWord" - }, - "fstWord_down": { - "action": "fstWord_down", - "target_media_component": "sndWord" - }, - "sndWord_up": { - "action": "sndWord_up", - "target_media_component": "fstWord" - }, - "sndWord_down": { - "action": "sndWord_down", - "target_media_component": "thirdWord" - }, - "sndWord_left": { - "action": "switch_to_left_side_from_sndWord", - "target_media_component": "last_active_left_media_component" - }, - "thirdWord_down": { - "action": "thirdWord_down", - "target_media_component": "fstWord" - }, - "thirdWord_up": { - "action": "thirdWord_up", - "target_media_component": "sndWord" - }, - "thirdWord_left": { - "action": "switch_to_left_side_from_thirdWord", - "target_media_component": "last_active_left_media_component" - }, - - "0422_down": { - "action": "change_blue_orb", - "target_blue_orb_id": "0414", - "target_hud_id": "fg_hud_2" - }, - "0422_right": { - "action": "change_blue_orb", - "target_blue_orb_id": "0417", - "target_hud_id": "bg_hud_1" - }, - "0422_up": { - "action": "move_up", - "target_blue_orb_id": "0506", - "target_hud_id": "fg_hud_3" - }, - "0422_select": { - "action": "select_blue_orb", - "target_blue_orb_id": "0422", - "target_hud_id": "fg_hud_1" - }, - - "0414_up": { - "action": "change_blue_orb", - "target_blue_orb_id": "0422", - "target_hud_id": "fg_hud_1" - }, - "0414_right": { - "action": "change_blue_orb", - "target_blue_orb_id": "0417", - "target_hud_id": "bg_hud_1" - }, - - "0413_down": { - "action": "change_blue_orb", - "target_blue_orb_id": "0405", - "target_hud_id": "fg_hud_6" - }, - "0413_left": { - "action": "change_blue_orb", - "target_blue_orb_id": "0417", - "target_hud_id": "bg_hud_1" - }, - - "0405_left": { - "action": "change_blue_orb", - "target_blue_orb_id": "0417", - "target_hud_id": "bg_hud_1" - }, - "0405_up": { - "action": "change_blue_orb", - "target_blue_orb_id": "0413", - "target_hud_id": "fg_hud_5" - }, - - "0417_left": { - "action": "change_blue_orb", - "target_blue_orb_id": "0422", - "target_hud_id": "fg_hud_1" - }, - "0417_down": { - "action": "change_blue_orb", - "target_blue_orb_id": "0414", - "target_hud_id": "fg_hud_2" - }, - "0417_right": { - "action": "change_blue_orb", - "target_blue_orb_id": "0413", - "target_hud_id": "fg_hud_5" - }, - - "0506_down": { - "action": "move_down", - "target_blue_orb_id": "0422", - "target_hud_id": "fg_hud_1" - } -} diff --git a/src/store.ts b/src/store.ts index 07f65bc..36a4059 100644 --- a/src/store.ts +++ b/src/store.ts @@ -379,7 +379,7 @@ export const useMediaWordStore = create((set) => ({ })); export const useSceneStore = create((set) => ({ - currentScene: "main", + currentScene: "media", setScene: (to) => set(() => ({ currentScene: to })), }));