mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
all current animations work properly, have to add more
This commit is contained in:
parent
f166536e2f
commit
43dcd21451
10 changed files with 300 additions and 176 deletions
|
@ -1,16 +1,12 @@
|
||||||
import React, { useCallback, useRef, useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
|
||||||
import grayTextureFile from "../../static/sprite/gray_box.png";
|
|
||||||
import darkGrayTextureFile from "../../static/sprite/dark_gray_box.png";
|
|
||||||
import mediaOverlayHud from "../../static/sprite/media_hud.png";
|
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 * as THREE from "three";
|
||||||
import { OrbitControls } from "drei";
|
import { OrbitControls } from "drei";
|
||||||
import { useMediaStore, useMediaWordStore } from "../../store";
|
import { useMediaStore } from "../../store";
|
||||||
import TextRenderer from "../TextRenderer/TextRenderer";
|
import TextRenderer from "../TextRenderer/TextRenderer";
|
||||||
import LeftSide from "./LeftSide/LeftSide";
|
import LeftSide from "./LeftSide/LeftSide";
|
||||||
import Word from "./RightSide/Word";
|
|
||||||
import RightSide from "./RightSide/RightSide";
|
import RightSide from "./RightSide/RightSide";
|
||||||
|
|
||||||
const MediaScene = () => {
|
const MediaScene = () => {
|
||||||
|
|
|
@ -10,24 +10,24 @@ type RightSideProps = {
|
||||||
const RightSide = (props: RightSideProps) => {
|
const RightSide = (props: RightSideProps) => {
|
||||||
const words = useMediaWordStore((state) => state.words);
|
const words = useMediaWordStore((state) => state.words);
|
||||||
|
|
||||||
const wordStateDataStructIdx = useMediaWordStore(
|
const wordPositionDataStructIdx = useMediaWordStore(
|
||||||
(state) => state.wordStateDataStructIdx
|
(state) => state.wordPositionDataStructIdx
|
||||||
);
|
);
|
||||||
|
|
||||||
const wordState = useMediaWordStore(
|
const wordPositionState = useMediaWordStore(
|
||||||
useCallback((state) => state.wordStateDataStruct[wordStateDataStructIdx], [
|
useCallback(
|
||||||
wordStateDataStructIdx,
|
(state) => state.wordPositionDataStruct[wordPositionDataStructIdx],
|
||||||
])
|
[wordPositionDataStructIdx]
|
||||||
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
console.log(wordStateDataStructIdx);
|
const wordPositionStateSpring = useSpring({
|
||||||
const wordStateSpring = useSpring({
|
fstWordPosX: wordPositionState.positions.fstWord.posX,
|
||||||
fstWordPosX: wordState.positions.fstWord.posX,
|
fstWordPosY: wordPositionState.positions.fstWord.posY,
|
||||||
fstWordPosY: wordState.positions.fstWord.posY,
|
sndWordPosX: wordPositionState.positions.sndWord.posX,
|
||||||
sndWordPosX: wordState.positions.sndWord.posX,
|
sndWordPosY: wordPositionState.positions.sndWord.posY,
|
||||||
sndWordPosY: wordState.positions.sndWord.posY,
|
thirdWordPosX: wordPositionState.positions.thirdWord.posX,
|
||||||
thirdWordPosX: wordState.positions.thirdWord.posX,
|
thirdWordPosY: wordPositionState.positions.thirdWord.posY,
|
||||||
thirdWordPosY: wordState.positions.thirdWord.posY,
|
|
||||||
config: { duration: 300 },
|
config: { duration: 300 },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -35,20 +35,20 @@ const RightSide = (props: RightSideProps) => {
|
||||||
<>
|
<>
|
||||||
<Word
|
<Word
|
||||||
word={words[0]}
|
word={words[0]}
|
||||||
posX={wordStateSpring.fstWordPosX}
|
posX={wordPositionStateSpring.fstWordPosX}
|
||||||
posY={wordStateSpring.fstWordPosY}
|
posY={wordPositionStateSpring.fstWordPosY}
|
||||||
active={props.activeMediaElement === "fstWord"}
|
active={props.activeMediaElement === "fstWord"}
|
||||||
/>
|
/>
|
||||||
<Word
|
<Word
|
||||||
word={words[1]}
|
word={words[1]}
|
||||||
posX={wordStateSpring.sndWordPosX}
|
posX={wordPositionStateSpring.sndWordPosX}
|
||||||
posY={wordStateSpring.sndWordPosY}
|
posY={wordPositionStateSpring.sndWordPosY}
|
||||||
active={props.activeMediaElement === "sndWord"}
|
active={props.activeMediaElement === "sndWord"}
|
||||||
/>
|
/>
|
||||||
<Word
|
<Word
|
||||||
word={words[2]}
|
word={words[2]}
|
||||||
posX={wordStateSpring.thirdWordPosX}
|
posX={wordPositionStateSpring.thirdWordPosX}
|
||||||
posY={wordStateSpring.thirdWordPosY}
|
posY={wordPositionStateSpring.thirdWordPosY}
|
||||||
active={props.activeMediaElement === "thirdWord"}
|
active={props.activeMediaElement === "thirdWord"}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -8,6 +8,8 @@ import YellowTextStateManager from "./YellowTextStateManager";
|
||||||
import { useBlueOrbStore, useMediaStore } from "../../store";
|
import { useBlueOrbStore, useMediaStore } from "../../store";
|
||||||
import GreenTextStateManager from "./GreenTextStateManager";
|
import GreenTextStateManager from "./GreenTextStateManager";
|
||||||
import ActiveMediaElementStateManager from "./MediaScene/ActiveMediaElementStateManager";
|
import ActiveMediaElementStateManager from "./MediaScene/ActiveMediaElementStateManager";
|
||||||
|
import MediaWordStateManager from "./MediaScene/MediaWordStateManager";
|
||||||
|
import MediaYellowTextStateManager from "./MediaScene/MediaYellowTextStateManager";
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
const keyCodeAssocs = {
|
const keyCodeAssocs = {
|
||||||
|
@ -24,16 +26,6 @@ export type StateManagerProps = {
|
||||||
eventState: string;
|
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 EventStateManager = () => {
|
||||||
const [eventState, setEventState] = useState<string>();
|
const [eventState, setEventState] = useState<string>();
|
||||||
const activeBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
|
const activeBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
|
||||||
|
@ -55,7 +47,6 @@ const EventStateManager = () => {
|
||||||
// const eventId = `${activeBlueOrb}_${keyPress}`;
|
// const eventId = `${activeBlueOrb}_${keyPress}`;
|
||||||
//
|
//
|
||||||
const eventId = `${activeMediaElement}_${keyPress}`;
|
const eventId = `${activeMediaElement}_${keyPress}`;
|
||||||
console.log(activeMediaElement)
|
|
||||||
setEventState(eventId);
|
setEventState(eventId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -80,6 +71,8 @@ const EventStateManager = () => {
|
||||||
<LainStateManager eventState={eventState!} />
|
<LainStateManager eventState={eventState!} />
|
||||||
<MiddleRingStateManager eventState={eventState!} />
|
<MiddleRingStateManager eventState={eventState!} />
|
||||||
<ActiveMediaElementStateManager eventState={eventState!} />
|
<ActiveMediaElementStateManager eventState={eventState!} />
|
||||||
|
<MediaWordStateManager eventState={eventState!} />
|
||||||
|
<MediaYellowTextStateManager eventState={eventState!} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -12,27 +12,27 @@ const LainStateManager = (props: StateManagerProps) => {
|
||||||
moveUp: {
|
moveUp: {
|
||||||
action: setLainMoveState,
|
action: setLainMoveState,
|
||||||
value: "moveUp",
|
value: "moveUp",
|
||||||
duration: 3903.704,
|
duration: 3904.704,
|
||||||
},
|
},
|
||||||
moveDown: {
|
moveDown: {
|
||||||
action: setLainMoveState,
|
action: setLainMoveState,
|
||||||
value: "moveDown",
|
value: "moveDown",
|
||||||
duration: 3903.704,
|
duration: 3904.704,
|
||||||
},
|
},
|
||||||
moveLeft: {
|
moveLeft: {
|
||||||
action: setLainMoveState,
|
action: setLainMoveState,
|
||||||
value: "moveLeft",
|
value: "moveLeft",
|
||||||
duration: 3903.704,
|
duration: 3904.704,
|
||||||
},
|
},
|
||||||
moveRight: {
|
moveRight: {
|
||||||
action: setLainMoveState,
|
action: setLainMoveState,
|
||||||
value: "moveRight",
|
value: "moveRight",
|
||||||
duration: 3903.704,
|
duration: 3904.704,
|
||||||
},
|
},
|
||||||
pickActiveBlueOrb: {
|
pickActiveBlueOrb: {
|
||||||
action: setLainMoveState,
|
action: setLainMoveState,
|
||||||
value: "throwBlueOrb",
|
value: "throwBlueOrb",
|
||||||
duration: 3903.704,
|
duration: 3904.704,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -3,8 +3,6 @@ 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 { useTextRendererStore } from "../../store";
|
||||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
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 = (
|
type AnimateYellowTextWithMove = (
|
||||||
yellowLetterPosYOffset: number,
|
yellowLetterPosYOffset: number,
|
||||||
|
@ -17,16 +15,8 @@ type AnimateYellowTextWithoutMove = (
|
||||||
targetBlueOrbId: string
|
targetBlueOrbId: string
|
||||||
) => void;
|
) => void;
|
||||||
|
|
||||||
type AnimateMediaYellowText = (
|
|
||||||
targetMediaText: string,
|
|
||||||
targetMediaTextPos: number[]
|
|
||||||
) => void;
|
|
||||||
|
|
||||||
type YellowTextDispatchData = {
|
type YellowTextDispatchData = {
|
||||||
action:
|
action: AnimateYellowTextWithMove | AnimateYellowTextWithoutMove;
|
||||||
| AnimateYellowTextWithMove
|
|
||||||
| AnimateYellowTextWithoutMove
|
|
||||||
| AnimateMediaYellowText;
|
|
||||||
value: any;
|
value: any;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -36,8 +26,6 @@ type YellowTextDispatcher = {
|
||||||
moveLeft: YellowTextDispatchData;
|
moveLeft: YellowTextDispatchData;
|
||||||
moveRight: YellowTextDispatchData;
|
moveRight: YellowTextDispatchData;
|
||||||
changeBlueOrbFocus: YellowTextDispatchData;
|
changeBlueOrbFocus: YellowTextDispatchData;
|
||||||
setActivePlay: YellowTextDispatchData;
|
|
||||||
setActiveExit: YellowTextDispatchData;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const YellowTextStateManager = (props: any) => {
|
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(
|
const dispatchObject = useCallback(
|
||||||
(
|
(
|
||||||
event: string,
|
event: string,
|
||||||
|
@ -171,7 +132,6 @@ const YellowTextStateManager = (props: any) => {
|
||||||
targetBlueOrbId: string | undefined
|
targetBlueOrbId: string | undefined
|
||||||
) => {
|
) => {
|
||||||
const dispatcherObjects: YellowTextDispatcher = {
|
const dispatcherObjects: YellowTextDispatcher = {
|
||||||
// main scene
|
|
||||||
moveUp: {
|
moveUp: {
|
||||||
action: animateYellowTextWithMove,
|
action: animateYellowTextWithMove,
|
||||||
value: [-1.5, targetBlueOrbHudId, targetBlueOrbId],
|
value: [-1.5, targetBlueOrbHudId, targetBlueOrbId],
|
||||||
|
@ -192,40 +152,23 @@ const YellowTextStateManager = (props: any) => {
|
||||||
action: animateYellowTextWithoutMove,
|
action: animateYellowTextWithoutMove,
|
||||||
value: [targetBlueOrbHudId, targetBlueOrbId],
|
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];
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
},
|
},
|
||||||
[
|
[animateYellowTextWithMove, animateYellowTextWithoutMove]
|
||||||
animateYellowTextWithMove,
|
|
||||||
animateYellowTextWithoutMove,
|
|
||||||
animateMediaYellowText,
|
|
||||||
]
|
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
const eventObject: EventObject =
|
const eventObject =
|
||||||
blue_orb_directions[
|
blue_orb_directions[
|
||||||
props.eventState as keyof typeof blue_orb_directions
|
props.eventState as keyof typeof blue_orb_directions
|
||||||
] ||
|
|
||||||
media_scene_directions[
|
|
||||||
props.eventState as keyof typeof media_scene_directions
|
|
||||||
];
|
];
|
||||||
|
|
||||||
if (eventObject) {
|
if (eventObject) {
|
||||||
const eventAction = eventObject.action;
|
const eventAction = eventObject.action;
|
||||||
|
|
||||||
// main scene specific
|
|
||||||
const targetBlueOrbId = eventObject.target_blue_orb_id;
|
const targetBlueOrbId = eventObject.target_blue_orb_id;
|
||||||
const targetBlueOrbHudId = eventObject.target_hud_id;
|
const targetBlueOrbHudId = eventObject.target_hud_id;
|
||||||
|
|
||||||
|
@ -238,6 +181,7 @@ const YellowTextStateManager = (props: any) => {
|
||||||
if (dispatchedObject) {
|
if (dispatchedObject) {
|
||||||
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
|
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [
|
}, [
|
||||||
|
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
78
src/store.ts
78
src/store.ts
|
@ -85,36 +85,26 @@ type MiddleRingState = {
|
||||||
setMiddleRingAnimDuration: (to: number) => void;
|
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 = {
|
type MediaWordState = {
|
||||||
wordStateDataStruct: MediaWordData[];
|
wordPositionDataStruct: {
|
||||||
wordStateDataStructIdx: number;
|
positions: {
|
||||||
|
fstWord: { posX: number; posY: number };
|
||||||
|
sndWord: { posX: number; posY: number };
|
||||||
|
thirdWord: { posX: number; posY: number };
|
||||||
|
};
|
||||||
|
}[];
|
||||||
|
wordPositionDataStructIdx: number;
|
||||||
words: string[];
|
words: string[];
|
||||||
activeWordIdx: number;
|
addToWordPositionDataStructIdx: (val: number) => void;
|
||||||
lastActiveWordIdx: number;
|
|
||||||
setWords: (to: string[]) => void;
|
|
||||||
addToActiveWordIdx: (val: number) => void;
|
|
||||||
addToWordStateDataStructIdx: (val: number) => void;
|
|
||||||
setLastActiveWordIdx: (to: number) => void;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type MediaState = {
|
type MediaState = {
|
||||||
activeMediaElement: string;
|
activeMediaElement: string;
|
||||||
leftColActiveMediaElement: string;
|
|
||||||
leftColActiveMediaElementText: string;
|
|
||||||
leftColActiveMediaElementTextPos: number[];
|
|
||||||
setActiveMediaElement: (to: string) => void;
|
setActiveMediaElement: (to: string) => void;
|
||||||
setLeftColActiveMediaElement: (to: string) => void;
|
lastActiveLeftSideElement: string;
|
||||||
setLeftColActiveMediaElementText: (to: string) => void;
|
setLastActiveLeftSideElement: (to: string) => void;
|
||||||
setLeftColActiveMediaElementTextPos: (to: number[]) => void;
|
lastActiveRightSideElement: string;
|
||||||
|
setLastActiveRightSideElement: (to: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type TextRendererState = {
|
type TextRendererState = {
|
||||||
|
@ -254,22 +244,19 @@ export const useMediaStore = create<MediaState>((set) => ({
|
||||||
// you end up on the last active element FROM THAT COLUMN).
|
// you end up on the last active element FROM THAT COLUMN).
|
||||||
// so we store leftColActiveMediaElement as well as rightCol.
|
// so we store leftColActiveMediaElement as well as rightCol.
|
||||||
activeMediaElement: "play",
|
activeMediaElement: "play",
|
||||||
leftColActiveMediaElement: "play",
|
|
||||||
leftColActiveMediaElementText: "Play",
|
|
||||||
leftColActiveMediaElementTextPos: [-2.7, -0.9, 0.6],
|
|
||||||
setActiveMediaElement: (to) => set(() => ({ activeMediaElement: to })),
|
setActiveMediaElement: (to) => set(() => ({ activeMediaElement: to })),
|
||||||
setLeftColActiveMediaElement: (to) =>
|
lastActiveLeftSideElement: "play",
|
||||||
set(() => ({ leftColActiveMediaElement: to })),
|
lastActiveRightSideElement: "fstWord",
|
||||||
setLeftColActiveMediaElementText: (to) =>
|
setLastActiveLeftSideElement: (to) =>
|
||||||
set(() => ({ leftColActiveMediaElementText: to })),
|
set(() => ({ lastActiveLeftSideElement: to })),
|
||||||
setLeftColActiveMediaElementTextPos: (to) =>
|
setLastActiveRightSideElement: (to) =>
|
||||||
set(() => ({ leftColActiveMediaElementTextPos: to })),
|
set(() => ({ lastActiveRightSideElement: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useMediaWordStore = create<MediaWordState>((set) => ({
|
export const useMediaWordStore = create<MediaWordState>((set) => ({
|
||||||
wordStateDataStruct: [
|
words: ["eye", "quiet", "hallucination"],
|
||||||
|
wordPositionDataStruct: [
|
||||||
{
|
{
|
||||||
activeWord: "fstWord",
|
|
||||||
positions: {
|
positions: {
|
||||||
fstWord: { posX: 0, posY: 0 },
|
fstWord: { posX: 0, posY: 0 },
|
||||||
sndWord: { posX: 3, posY: -3 },
|
sndWord: { posX: 3, posY: -3 },
|
||||||
|
@ -277,26 +264,23 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
activeWord: "sndWord",
|
|
||||||
positions: {
|
positions: {
|
||||||
fstWord: { posX: 1.8, posY: -2.5 },
|
fstWord: { posX: 1.8, posY: -2.5 },
|
||||||
sndWord: { posX: 1.5, posY: -1.5 },
|
sndWord: { posX: 1.5, posY: -1.5 },
|
||||||
thirdWord: { posX: 3.3, posY: -3.7 },
|
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,
|
wordPositionDataStructIdx: 0,
|
||||||
words: ["eye", "quiet", "hallucination"],
|
addToWordPositionDataStructIdx: (val) =>
|
||||||
activeWordIdx: 0,
|
|
||||||
lastActiveWordIdx: 0,
|
|
||||||
setWords: (to) => set(() => ({ words: to })),
|
|
||||||
setLastActiveWordIdx: (to) => set(() => ({ lastActiveWordIdx: to })),
|
|
||||||
addToWordStateDataStructIdx: (val) =>
|
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
wordStateDataStructIdx: state.wordStateDataStructIdx + val,
|
wordPositionDataStructIdx: state.wordPositionDataStructIdx + val,
|
||||||
})),
|
|
||||||
addToActiveWordIdx: (val) =>
|
|
||||||
set((state) => ({
|
|
||||||
activeWordIdx: state.activeWordIdx + val,
|
|
||||||
})),
|
})),
|
||||||
}));
|
}));
|
||||||
|
|
Loading…
Reference in a new issue