diff --git a/src/components/MediaScene/MediaScene.tsx b/src/components/MediaScene/MediaScene.tsx index 820a5be..2f79102 100644 --- a/src/components/MediaScene/MediaScene.tsx +++ b/src/components/MediaScene/MediaScene.tsx @@ -1,16 +1,12 @@ -import React, { useCallback, useRef, useState } from "react"; - -import grayTextureFile from "../../static/sprite/gray_box.png"; -import darkGrayTextureFile from "../../static/sprite/dark_gray_box.png"; +import React, { useState } from "react"; import mediaOverlayHud from "../../static/sprite/media_hud.png"; -import { useFrame, useLoader } from "react-three-fiber"; +import { useLoader } from "react-three-fiber"; import * as THREE from "three"; import { OrbitControls } from "drei"; -import { useMediaStore, useMediaWordStore } from "../../store"; +import { useMediaStore } from "../../store"; import TextRenderer from "../TextRenderer/TextRenderer"; import LeftSide from "./LeftSide/LeftSide"; -import Word from "./RightSide/Word"; import RightSide from "./RightSide/RightSide"; const MediaScene = () => { diff --git a/src/components/MediaScene/RightSide/RightSide.tsx b/src/components/MediaScene/RightSide/RightSide.tsx index a9dbbc5..3ac0329 100644 --- a/src/components/MediaScene/RightSide/RightSide.tsx +++ b/src/components/MediaScene/RightSide/RightSide.tsx @@ -10,24 +10,24 @@ type RightSideProps = { const RightSide = (props: RightSideProps) => { const words = useMediaWordStore((state) => state.words); - const wordStateDataStructIdx = useMediaWordStore( - (state) => state.wordStateDataStructIdx + const wordPositionDataStructIdx = useMediaWordStore( + (state) => state.wordPositionDataStructIdx ); - const wordState = useMediaWordStore( - useCallback((state) => state.wordStateDataStruct[wordStateDataStructIdx], [ - wordStateDataStructIdx, - ]) + const wordPositionState = useMediaWordStore( + useCallback( + (state) => state.wordPositionDataStruct[wordPositionDataStructIdx], + [wordPositionDataStructIdx] + ) ); - console.log(wordStateDataStructIdx); - const wordStateSpring = useSpring({ - fstWordPosX: wordState.positions.fstWord.posX, - fstWordPosY: wordState.positions.fstWord.posY, - sndWordPosX: wordState.positions.sndWord.posX, - sndWordPosY: wordState.positions.sndWord.posY, - thirdWordPosX: wordState.positions.thirdWord.posX, - thirdWordPosY: wordState.positions.thirdWord.posY, + const wordPositionStateSpring = useSpring({ + fstWordPosX: wordPositionState.positions.fstWord.posX, + fstWordPosY: wordPositionState.positions.fstWord.posY, + sndWordPosX: wordPositionState.positions.sndWord.posX, + sndWordPosY: wordPositionState.positions.sndWord.posY, + thirdWordPosX: wordPositionState.positions.thirdWord.posX, + thirdWordPosY: wordPositionState.positions.thirdWord.posY, config: { duration: 300 }, }); @@ -35,20 +35,20 @@ const RightSide = (props: RightSideProps) => { <> diff --git a/src/components/StateManagers/EventStateManager.tsx b/src/components/StateManagers/EventStateManager.tsx index bbc5923..d388da0 100644 --- a/src/components/StateManagers/EventStateManager.tsx +++ b/src/components/StateManagers/EventStateManager.tsx @@ -8,6 +8,8 @@ import YellowTextStateManager from "./YellowTextStateManager"; import { useBlueOrbStore, useMediaStore } from "../../store"; import GreenTextStateManager from "./GreenTextStateManager"; import ActiveMediaElementStateManager from "./MediaScene/ActiveMediaElementStateManager"; +import MediaWordStateManager from "./MediaScene/MediaWordStateManager"; +import MediaYellowTextStateManager from "./MediaScene/MediaYellowTextStateManager"; const getKeyCodeAssociation = (keyCode: number): string => { const keyCodeAssocs = { @@ -24,16 +26,6 @@ export type StateManagerProps = { eventState: string; }; -export type EventObject = { - action: string; - - target_blue_orb_id?: string; - target_hud_id?: string; - target_media_element?: string; - target_media_element_text?: string; - target_media_element_text_position?: number[]; -}; - const EventStateManager = () => { const [eventState, setEventState] = useState(); const activeBlueOrb = useBlueOrbStore((state) => state.blueOrbId); @@ -55,7 +47,6 @@ const EventStateManager = () => { // const eventId = `${activeBlueOrb}_${keyPress}`; // const eventId = `${activeMediaElement}_${keyPress}`; - console.log(activeMediaElement) setEventState(eventId); } }, @@ -80,6 +71,8 @@ const EventStateManager = () => { + + ); }; diff --git a/src/components/StateManagers/LainStateManager.tsx b/src/components/StateManagers/LainStateManager.tsx index 16187f5..470b79a 100644 --- a/src/components/StateManagers/LainStateManager.tsx +++ b/src/components/StateManagers/LainStateManager.tsx @@ -12,27 +12,27 @@ const LainStateManager = (props: StateManagerProps) => { moveUp: { action: setLainMoveState, value: "moveUp", - duration: 3903.704, + duration: 3904.704, }, moveDown: { action: setLainMoveState, value: "moveDown", - duration: 3903.704, + duration: 3904.704, }, moveLeft: { action: setLainMoveState, value: "moveLeft", - duration: 3903.704, + duration: 3904.704, }, moveRight: { action: setLainMoveState, value: "moveRight", - duration: 3903.704, + duration: 3904.704, }, pickActiveBlueOrb: { action: setLainMoveState, value: "throwBlueOrb", - duration: 3903.704, + duration: 3904.704, }, }; diff --git a/src/components/StateManagers/MediaScene/ActiveMediaElementStateManager.tsx b/src/components/StateManagers/MediaScene/ActiveMediaElementStateManager.tsx new file mode 100644 index 0000000..d360035 --- /dev/null +++ b/src/components/StateManagers/MediaScene/ActiveMediaElementStateManager.tsx @@ -0,0 +1,98 @@ +import React, { useCallback, useEffect } from "react"; +import { StateManagerProps } from "../EventStateManager"; +import { useMediaStore } from "../../../store"; + +const ActiveMediaElementStateManager = (props: StateManagerProps) => { + const setActiveMediaElement = useMediaStore( + (state) => state.setActiveMediaElement + ); + + const setLastActiveLeftSideElement = useMediaStore( + (state) => state.setLastActiveLeftSideElement + ); + const lastActiveLeftSideElement = useMediaStore( + (state) => state.lastActiveLeftSideElement + ); + const setLastActiveRightSideElement = useMediaStore( + (state) => state.setLastActiveRightSideElement + ); + const lastActiveRightSideElement = useMediaStore( + (state) => state.lastActiveRightSideElement + ); + + const switchToLeftSide = useCallback( + (from: string) => { + setActiveMediaElement(lastActiveLeftSideElement); + // store last active right side elem + setLastActiveRightSideElement(from); + }, + [ + lastActiveLeftSideElement, + setActiveMediaElement, + setLastActiveRightSideElement, + ] + ); + + const switchToRightSide = useCallback( + (from: string) => { + setActiveMediaElement(lastActiveRightSideElement); + // store last active left side elem + setLastActiveLeftSideElement(from); + }, + [ + lastActiveRightSideElement, + setActiveMediaElement, + setLastActiveLeftSideElement, + ] + ); + + const dispatchObject = useCallback( + (event: string) => { + const dispatcherObjects = { + play_down: { action: setActiveMediaElement, value: "exit" }, + exit_up: { action: setActiveMediaElement, value: "play" }, + play_right: { + action: switchToRightSide, + value: "play", + }, + exit_right: { + action: switchToRightSide, + value: "exit", + }, + fstWord_left: { + action: switchToLeftSide, + value: "fstWord", + }, + fstWord_down: { + action: setActiveMediaElement, + value: "sndWord", + }, + sndWord_up: { + action: setActiveMediaElement, + value: "fstWord", + }, + sndWord_down: { + action: setActiveMediaElement, + value: "thirdWord", + }, + }; + + return dispatcherObjects[event as keyof typeof dispatcherObjects]; + }, + [setActiveMediaElement, switchToLeftSide, switchToRightSide] + ); + + useEffect(() => { + if (props.eventState) { + const dispatchedObject = dispatchObject(props.eventState); + + if (dispatchedObject) { + dispatchedObject.action(dispatchedObject.value); + } + } + }, [props.eventState, dispatchObject]); + + return null; +}; + +export default ActiveMediaElementStateManager; diff --git a/src/components/StateManagers/MediaScene/MediaWordStateManager.tsx b/src/components/StateManagers/MediaScene/MediaWordStateManager.tsx new file mode 100644 index 0000000..34ae885 --- /dev/null +++ b/src/components/StateManagers/MediaScene/MediaWordStateManager.tsx @@ -0,0 +1,42 @@ +import React, { useCallback, useEffect } from "react"; +import { StateManagerProps } from "../EventStateManager"; +import { useMediaWordStore } from "../../../store"; + +const MediaWordStateManager = (props: StateManagerProps) => { + const addToWordPositionDataStructIdx = useMediaWordStore( + (state) => state.addToWordPositionDataStructIdx + ); + const dispatchObject = useCallback((event: string) => { + const dispatcherObjects = { + fstWord_down: { + action: addToWordPositionDataStructIdx, + value: 1, + }, + sndWord_up: { + action: addToWordPositionDataStructIdx, + value: -1, + }, + sndWord_down: { + action: addToWordPositionDataStructIdx, + value: 1, + + } + }; + + return dispatcherObjects[event as keyof typeof dispatcherObjects]; + }, []); + + useEffect(() => { + if (props.eventState) { + const dispatchedObject = dispatchObject(props.eventState); + + if (dispatchedObject) { + dispatchedObject.action(dispatchedObject.value as never); + } + } + }, [props.eventState, dispatchObject]); + + return null; +}; + +export default MediaWordStateManager; diff --git a/src/components/StateManagers/MediaScene/MediaYellowTextStateManager.tsx b/src/components/StateManagers/MediaScene/MediaYellowTextStateManager.tsx new file mode 100644 index 0000000..8abc5f4 --- /dev/null +++ b/src/components/StateManagers/MediaScene/MediaYellowTextStateManager.tsx @@ -0,0 +1,93 @@ +import React, { useCallback, useEffect } from "react"; +import { useTextRendererStore } from "../../../store"; + +type AnimateMediaYellowText = ( + targetMediaText: string, + targetMediaTextPos: number[] +) => void; + +type YellowTextDispatchData = { + action: AnimateMediaYellowText; + value: any; +}; + +type YellowTextDispatcher = { + play_down: YellowTextDispatchData; + exit_up: YellowTextDispatchData; +}; + +const MediaYellowTextStateManager = (props: any) => { + const setYellowText = useTextRendererStore((state) => state.setYellowText); + + const setYellowTextOffsetXCoeff = useTextRendererStore( + (state) => state.setYellowTextOffsetXCoeff + ); + + const incrementYellowTextPosY = useTextRendererStore( + (state) => state.incrementYellowTextPosY + ); + const setYellowTextPosY = useTextRendererStore( + (state) => state.setYellowTextPosY + ); + const setYellowTextPosX = useTextRendererStore( + (state) => state.setYellowTextPosX + ); + + const animateMediaYellowText: AnimateMediaYellowText = useCallback( + (targetMediaElementText: string, targetMediaElementTextPos: number[]) => { + // make current text shrink + setYellowTextOffsetXCoeff(-1); + + setTimeout(() => { + setYellowTextPosX(targetMediaElementTextPos[0]); + setYellowTextPosY(targetMediaElementTextPos[1]); + }, 400); + + setTimeout(() => { + setYellowText(targetMediaElementText); + }, 1000); + + setTimeout(() => { + // unshrink text + setYellowTextOffsetXCoeff(0); + }, 1200); + }, + [ + setYellowText, + setYellowTextOffsetXCoeff, + setYellowTextPosX, + setYellowTextPosY, + ] + ); + + const dispatchObject = useCallback( + (event: string) => { + const dispatcherObjects: YellowTextDispatcher = { + exit_up: { + action: animateMediaYellowText, + value: ["Play", [-0.8, 0.05, 0.6]], + }, + play_down: { + action: animateMediaYellowText, + value: ["Exit", [-0.8, -0.08, 0.6]], + }, + }; + + return dispatcherObjects[event as keyof typeof dispatcherObjects]; + }, + [animateMediaYellowText] + ); + + useEffect(() => { + if (props.eventState) { + const dispatchedObject = dispatchObject(props.eventState); + if (dispatchedObject) { + (dispatchedObject.action as any).apply(null, dispatchedObject.value); + } + } + }, [props.eventState, dispatchObject]); + + return null; +}; + +export default MediaYellowTextStateManager; diff --git a/src/components/StateManagers/YellowTextStateManager.tsx b/src/components/StateManagers/YellowTextStateManager.tsx index 5777e49..e3b7c58 100644 --- a/src/components/StateManagers/YellowTextStateManager.tsx +++ b/src/components/StateManagers/YellowTextStateManager.tsx @@ -3,8 +3,6 @@ import blue_orb_huds from "../../resources/blue_orb_huds.json"; import site_a from "../../resources/site_a.json"; import { useTextRendererStore } from "../../store"; import blue_orb_directions from "../../resources/blue_orb_directions.json"; -import media_scene_directions from "../../resources/media_scene_actions.json"; -import { EventObject } from "./EventStateManager"; type AnimateYellowTextWithMove = ( yellowLetterPosYOffset: number, @@ -17,16 +15,8 @@ type AnimateYellowTextWithoutMove = ( targetBlueOrbId: string ) => void; -type AnimateMediaYellowText = ( - targetMediaText: string, - targetMediaTextPos: number[] -) => void; - type YellowTextDispatchData = { - action: - | AnimateYellowTextWithMove - | AnimateYellowTextWithoutMove - | AnimateMediaYellowText; + action: AnimateYellowTextWithMove | AnimateYellowTextWithoutMove; value: any; }; @@ -36,8 +26,6 @@ type YellowTextDispatcher = { moveLeft: YellowTextDispatchData; moveRight: YellowTextDispatchData; changeBlueOrbFocus: YellowTextDispatchData; - setActivePlay: YellowTextDispatchData; - setActiveExit: YellowTextDispatchData; }; const YellowTextStateManager = (props: any) => { @@ -137,33 +125,6 @@ const YellowTextStateManager = (props: any) => { ] ); - const animateMediaYellowText: AnimateMediaYellowText = useCallback( - (targetMediaElementText: string, targetMediaElementTextPos: number[]) => { - // make current text shrink - setYellowTextOffsetXCoeff(-1); - - setTimeout(() => { - setYellowTextPosX(targetMediaElementTextPos[0]); - setYellowTextPosY(targetMediaElementTextPos[1]); - }, 400); - - setTimeout(() => { - setYellowText(targetMediaElementText); - }, 1000); - - setTimeout(() => { - // unshrink text - setYellowTextOffsetXCoeff(0); - }, 1200); - }, - [ - setYellowText, - setYellowTextOffsetXCoeff, - setYellowTextPosX, - setYellowTextPosY, - ] - ); - const dispatchObject = useCallback( ( event: string, @@ -171,7 +132,6 @@ const YellowTextStateManager = (props: any) => { targetBlueOrbId: string | undefined ) => { const dispatcherObjects: YellowTextDispatcher = { - // main scene moveUp: { action: animateYellowTextWithMove, value: [-1.5, targetBlueOrbHudId, targetBlueOrbId], @@ -192,40 +152,23 @@ const YellowTextStateManager = (props: any) => { action: animateYellowTextWithoutMove, value: [targetBlueOrbHudId, targetBlueOrbId], }, - // media scene - setActivePlay: { - action: animateMediaYellowText, - value: ["Play", [-0.8, 0.05, 0.6]], - }, - setActiveExit: { - action: animateMediaYellowText, - value: ["Exit", [-0.8, -0.08, 0.6]], - }, }; return dispatcherObjects[event as keyof typeof dispatcherObjects]; }, - [ - animateYellowTextWithMove, - animateYellowTextWithoutMove, - animateMediaYellowText, - ] + [animateYellowTextWithMove, animateYellowTextWithoutMove] ); useEffect(() => { if (props.eventState) { - const eventObject: EventObject = + const eventObject = blue_orb_directions[ props.eventState as keyof typeof blue_orb_directions - ] || - media_scene_directions[ - props.eventState as keyof typeof media_scene_directions ]; if (eventObject) { const eventAction = eventObject.action; - // main scene specific const targetBlueOrbId = eventObject.target_blue_orb_id; const targetBlueOrbHudId = eventObject.target_hud_id; @@ -238,6 +181,7 @@ const YellowTextStateManager = (props: any) => { if (dispatchedObject) { (dispatchedObject.action as any).apply(null, dispatchedObject.value); } + } else { } } }, [ diff --git a/src/resources/media_scene_actions.json b/src/resources/media_scene_actions.json deleted file mode 100644 index 60e6a39..0000000 --- a/src/resources/media_scene_actions.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "play_down": { - "action": "setActiveMediaElement", - "value": "exit" - }, - "exit_up": { - "action": "setActiveMediaElement", - "value": "play" - }, - "exit_right": { - "action": "setActiveWords", - "value": "lastActiveWord" - }, - "play_right": { - "action": "setActiveWords", - "value": "lastActiveWord" - }, - "fstWord_down": { - "action": "addToWordState", - "value": -1 - }, - "fstWord_up": { - "action": "addToWordState", - "value": 1 - } -} diff --git a/src/store.ts b/src/store.ts index d873c55..dbeeded 100644 --- a/src/store.ts +++ b/src/store.ts @@ -85,36 +85,26 @@ type MiddleRingState = { setMiddleRingAnimDuration: (to: number) => void; }; -type MediaWordData = { - activeWord: string; - positions: { - fstWord: { posX: number; posY: number }; - sndWord: { posX: number; posY: number }; - thirdWord: { posX: number; posY: number }; - }; -}; - type MediaWordState = { - wordStateDataStruct: MediaWordData[]; - wordStateDataStructIdx: number; + wordPositionDataStruct: { + positions: { + fstWord: { posX: number; posY: number }; + sndWord: { posX: number; posY: number }; + thirdWord: { posX: number; posY: number }; + }; + }[]; + wordPositionDataStructIdx: number; words: string[]; - activeWordIdx: number; - lastActiveWordIdx: number; - setWords: (to: string[]) => void; - addToActiveWordIdx: (val: number) => void; - addToWordStateDataStructIdx: (val: number) => void; - setLastActiveWordIdx: (to: number) => void; + addToWordPositionDataStructIdx: (val: number) => void; }; type MediaState = { activeMediaElement: string; - leftColActiveMediaElement: string; - leftColActiveMediaElementText: string; - leftColActiveMediaElementTextPos: number[]; setActiveMediaElement: (to: string) => void; - setLeftColActiveMediaElement: (to: string) => void; - setLeftColActiveMediaElementText: (to: string) => void; - setLeftColActiveMediaElementTextPos: (to: number[]) => void; + lastActiveLeftSideElement: string; + setLastActiveLeftSideElement: (to: string) => void; + lastActiveRightSideElement: string; + setLastActiveRightSideElement: (to: string) => void; }; type TextRendererState = { @@ -254,22 +244,19 @@ export const useMediaStore = create((set) => ({ // you end up on the last active element FROM THAT COLUMN). // so we store leftColActiveMediaElement as well as rightCol. activeMediaElement: "play", - leftColActiveMediaElement: "play", - leftColActiveMediaElementText: "Play", - leftColActiveMediaElementTextPos: [-2.7, -0.9, 0.6], setActiveMediaElement: (to) => set(() => ({ activeMediaElement: to })), - setLeftColActiveMediaElement: (to) => - set(() => ({ leftColActiveMediaElement: to })), - setLeftColActiveMediaElementText: (to) => - set(() => ({ leftColActiveMediaElementText: to })), - setLeftColActiveMediaElementTextPos: (to) => - set(() => ({ leftColActiveMediaElementTextPos: to })), + lastActiveLeftSideElement: "play", + lastActiveRightSideElement: "fstWord", + setLastActiveLeftSideElement: (to) => + set(() => ({ lastActiveLeftSideElement: to })), + setLastActiveRightSideElement: (to) => + set(() => ({ lastActiveRightSideElement: to })), })); export const useMediaWordStore = create((set) => ({ - wordStateDataStruct: [ + words: ["eye", "quiet", "hallucination"], + wordPositionDataStruct: [ { - activeWord: "fstWord", positions: { fstWord: { posX: 0, posY: 0 }, sndWord: { posX: 3, posY: -3 }, @@ -277,26 +264,23 @@ export const useMediaWordStore = create((set) => ({ }, }, { - activeWord: "sndWord", positions: { fstWord: { posX: 1.8, posY: -2.5 }, sndWord: { posX: 1.5, posY: -1.5 }, thirdWord: { posX: 3.3, posY: -3.7 }, }, }, + { + positions: { + fstWord: { posX: 3.7, posY: -4.3 }, + sndWord: { posX: 0, posY: 0 }, + thirdWord: { posX: 3, posY: -3 }, + }, + }, ], - wordStateDataStructIdx: 0, - words: ["eye", "quiet", "hallucination"], - activeWordIdx: 0, - lastActiveWordIdx: 0, - setWords: (to) => set(() => ({ words: to })), - setLastActiveWordIdx: (to) => set(() => ({ lastActiveWordIdx: to })), - addToWordStateDataStructIdx: (val) => + wordPositionDataStructIdx: 0, + addToWordPositionDataStructIdx: (val) => set((state) => ({ - wordStateDataStructIdx: state.wordStateDataStructIdx + val, - })), - addToActiveWordIdx: (val) => - set((state) => ({ - activeWordIdx: state.activeWordIdx + val, + wordPositionDataStructIdx: state.wordPositionDataStructIdx + val, })), }));