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,
})),
}));