mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
basics for word selection in media scene
This commit is contained in:
parent
1e0a412ede
commit
7a10c7cfe0
10 changed files with 144 additions and 11 deletions
|
@ -23,7 +23,10 @@ import gameLoader from "../core/setters/gameLoader";
|
||||||
import gameSaver from "../core/setters/gameSaver";
|
import gameSaver from "../core/setters/gameSaver";
|
||||||
|
|
||||||
const KeyPressHandler = () => {
|
const KeyPressHandler = () => {
|
||||||
const mediaSceneSetters = useMemo(() => [mediaManager, sceneManager], []);
|
const mediaSceneSetters = useMemo(
|
||||||
|
() => [mediaManager, sceneManager, nodeManager, levelManager, siteManager],
|
||||||
|
[]
|
||||||
|
);
|
||||||
const ssknSceneSetters = useMemo(() => [ssknManager, sceneManager], []);
|
const ssknSceneSetters = useMemo(() => [ssknManager, sceneManager], []);
|
||||||
const mainSceneSetters = useMemo(
|
const mainSceneSetters = useMemo(
|
||||||
() => [
|
() => [
|
||||||
|
@ -55,7 +58,6 @@ const KeyPressHandler = () => {
|
||||||
|
|
||||||
if (keyPress) {
|
if (keyPress) {
|
||||||
timePassedSinceLastKeyPress.current = Date.now();
|
timePassedSinceLastKeyPress.current = Date.now();
|
||||||
|
|
||||||
const sceneFns = (() => {
|
const sceneFns = (() => {
|
||||||
switch (scene) {
|
switch (scene) {
|
||||||
case "main":
|
case "main":
|
||||||
|
@ -76,14 +78,25 @@ const KeyPressHandler = () => {
|
||||||
handler: handleSSknSceneEvent,
|
handler: handleSSknSceneEvent,
|
||||||
setters: ssknSceneSetters,
|
setters: ssknSceneSetters,
|
||||||
};
|
};
|
||||||
|
case "gate":
|
||||||
|
case "polytan":
|
||||||
|
return {
|
||||||
|
action: () => useStore.setState({ currentScene: "main" }),
|
||||||
|
};
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
if (sceneFns) {
|
if (sceneFns) {
|
||||||
const { contextProvider, handler, setters } = { ...sceneFns };
|
// in case of polytan/gate we only need to do one thing, which is reset the scene.
|
||||||
const ctx = { ...contextProvider(), keyPress: keyPress };
|
// we check for that here
|
||||||
const event = handler(ctx);
|
if (sceneFns.action) {
|
||||||
setters.forEach((fn) => fn(event));
|
sceneFns.action();
|
||||||
|
} else {
|
||||||
|
const { contextProvider, handler, setters } = { ...sceneFns };
|
||||||
|
const ctx = { ...contextProvider(), keyPress: keyPress };
|
||||||
|
const event = handler(ctx);
|
||||||
|
setters.forEach((fn) => fn(event));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -103,28 +103,33 @@ const handleMainSceneEvent = (mainSceneContext: any) => {
|
||||||
return {
|
return {
|
||||||
event: `${eventAnimation}_media`,
|
event: `${eventAnimation}_media`,
|
||||||
scene: "media",
|
scene: "media",
|
||||||
|
siteRotY: siteRotY,
|
||||||
};
|
};
|
||||||
case 6:
|
case 6:
|
||||||
if (activeNode.node_name.substr(0, 3) === "TaK") {
|
if (activeNode.node_name.substr(0, 3) === "TaK") {
|
||||||
return {
|
return {
|
||||||
event: `${eventAnimation}_tak`,
|
event: `${eventAnimation}_tak`,
|
||||||
scene: "tak",
|
scene: "tak",
|
||||||
|
siteRotY: siteRotY,
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
event: `${eventAnimation}_media`,
|
event: `${eventAnimation}_media`,
|
||||||
scene: "media",
|
scene: "media",
|
||||||
|
siteRotY: siteRotY,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
case 8:
|
case 8:
|
||||||
return {
|
return {
|
||||||
event: `${eventAnimation}_gate`,
|
event: `${eventAnimation}_gate`,
|
||||||
scene: "gate",
|
scene: "gate",
|
||||||
|
siteRotY: siteRotY,
|
||||||
};
|
};
|
||||||
case 7:
|
case 7:
|
||||||
return {
|
return {
|
||||||
event: `${eventAnimation}_sskn`,
|
event: `${eventAnimation}_sskn`,
|
||||||
scene: "sskn",
|
scene: "sskn",
|
||||||
|
siteRotY: siteRotY,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -1,9 +1,13 @@
|
||||||
|
import { findNodeFromWord } from "../../utils/media-utils";
|
||||||
|
|
||||||
const handleMediaKeyPress = (mediaSceneContext: any) => {
|
const handleMediaKeyPress = (mediaSceneContext: any) => {
|
||||||
const {
|
const {
|
||||||
keyPress,
|
keyPress,
|
||||||
activeMediaComponent,
|
activeMediaComponent,
|
||||||
wordPosStateIdx,
|
wordPosStateIdx,
|
||||||
rightSideComponentIdx,
|
rightSideComponentIdx,
|
||||||
|
activeNode,
|
||||||
|
activeSite,
|
||||||
} = mediaSceneContext;
|
} = mediaSceneContext;
|
||||||
|
|
||||||
const calculateNewRightSide = (
|
const calculateNewRightSide = (
|
||||||
|
@ -61,7 +65,25 @@ const handleMediaKeyPress = (mediaSceneContext: any) => {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
case "CIRCLE":
|
case "CIRCLE":
|
||||||
return { event: `media_${activeMediaComponent}_select` };
|
switch (activeMediaComponent) {
|
||||||
|
case "fstWord":
|
||||||
|
case "sndWord":
|
||||||
|
case "thirdWord":
|
||||||
|
const data = findNodeFromWord(
|
||||||
|
activeMediaComponent,
|
||||||
|
activeNode,
|
||||||
|
activeSite
|
||||||
|
);
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
return { event: `media_${activeMediaComponent}_select`, ...data };
|
||||||
|
} else {
|
||||||
|
// todo in case node isnt unlocked yet
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return { event: `media_${activeMediaComponent}_select` };
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,9 @@ const levelManager = (eventState: any) => {
|
||||||
case "site_down":
|
case "site_down":
|
||||||
case "select_level_up":
|
case "select_level_up":
|
||||||
case "select_level_down":
|
case "select_level_down":
|
||||||
|
case "media_fstWord_select":
|
||||||
|
case "media_sndWord_select":
|
||||||
|
case "media_thirdWord_select":
|
||||||
return { action: () => setActiveLevel(eventState.level) };
|
return { action: () => setActiveLevel(eventState.level) };
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -156,6 +156,9 @@ const nodeManager = (eventState: any) => {
|
||||||
case "site_right":
|
case "site_right":
|
||||||
case "select_level_up":
|
case "select_level_up":
|
||||||
case "select_level_down":
|
case "select_level_down":
|
||||||
|
case "media_fstWord_select":
|
||||||
|
case "media_sndWord_select":
|
||||||
|
case "media_thirdWord_select":
|
||||||
return {
|
return {
|
||||||
action: () => updateActiveNode(eventState.node, 3900),
|
action: () => updateActiveNode(eventState.node, 3900),
|
||||||
};
|
};
|
||||||
|
@ -175,7 +178,7 @@ const nodeManager = (eventState: any) => {
|
||||||
case "rip_node_sskn":
|
case "rip_node_sskn":
|
||||||
case "rip_node_tak":
|
case "rip_node_tak":
|
||||||
return {
|
return {
|
||||||
action: () => animateActiveNodeThrow(eventState.siteRotY),
|
action: () => animateShrinkAndRip(eventState.siteRotY),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -8,6 +8,9 @@ const siteManager = (eventState: any) => {
|
||||||
switch (eventState.event) {
|
switch (eventState.event) {
|
||||||
case "site_left":
|
case "site_left":
|
||||||
case "site_right":
|
case "site_right":
|
||||||
|
case "media_fstWord_select":
|
||||||
|
case "media_sndWord_select":
|
||||||
|
case "media_thirdWord_select":
|
||||||
return {
|
return {
|
||||||
action: () => setRotY(eventState.siteRotY),
|
action: () => setRotY(eventState.siteRotY),
|
||||||
delay: 1100,
|
delay: 1100,
|
||||||
|
|
|
@ -62,12 +62,16 @@ const mediaManager = (eventState: any) => {
|
||||||
case "media_leftside_right":
|
case "media_leftside_right":
|
||||||
case "media_rightside_left":
|
case "media_rightside_left":
|
||||||
return {
|
return {
|
||||||
action: () => toggleSide,
|
action: () => toggleSide(),
|
||||||
};
|
};
|
||||||
case "media_play_select":
|
case "media_play_select":
|
||||||
return { action: () => playMedia };
|
return { action: () => playMedia() };
|
||||||
case "media_exit_select":
|
case "media_exit_select":
|
||||||
return { action: () => exitMedia };
|
return { action: () => exitMedia() };
|
||||||
|
case "media_fstWord_select":
|
||||||
|
case "media_sndWord_select":
|
||||||
|
case "media_thirdWord_select":
|
||||||
|
return { action: () => undefined };
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -24,6 +24,9 @@ const sceneManager = (eventState: any) => {
|
||||||
case "media_exit_select":
|
case "media_exit_select":
|
||||||
case "exit_gate":
|
case "exit_gate":
|
||||||
case "sskn_cancel_select":
|
case "sskn_cancel_select":
|
||||||
|
case "media_fstWord_select":
|
||||||
|
case "media_sndWord_select":
|
||||||
|
case "media_thirdWord_select":
|
||||||
return {
|
return {
|
||||||
action: () =>
|
action: () =>
|
||||||
useStore.setState({ currentScene: "main", intro: false }),
|
useStore.setState({ currentScene: "main", intro: false }),
|
||||||
|
|
|
@ -465,5 +465,7 @@ export const getMediaSceneContext = () => {
|
||||||
],
|
],
|
||||||
rightSideComponentIdx: state.mediaComponentMatrixIndices.rightSideIdx,
|
rightSideComponentIdx: state.mediaComponentMatrixIndices.rightSideIdx,
|
||||||
wordPosStateIdx: state.mediaWordPosStateIdx,
|
wordPosStateIdx: state.mediaWordPosStateIdx,
|
||||||
|
activeNode: state.activeNode,
|
||||||
|
site: state.activeSite,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
75
src/utils/media-utils.ts
Normal file
75
src/utils/media-utils.ts
Normal file
|
@ -0,0 +1,75 @@
|
||||||
|
import site_a from "../resources/site_a.json";
|
||||||
|
import site_b from "../resources/site_b.json";
|
||||||
|
import node_matrices from "../resources/node_matrices.json";
|
||||||
|
import {
|
||||||
|
NodeDataType,
|
||||||
|
SiteType,
|
||||||
|
} from "../components/MainScene/SyncedComponents/Site";
|
||||||
|
import { NodeLib } from "three/examples/jsm/nodes/core/NodeLib";
|
||||||
|
import { isNodeVisible } from "./node-utils";
|
||||||
|
|
||||||
|
export const findNodeFromWord = (
|
||||||
|
wordLabel: string,
|
||||||
|
activeNode: NodeDataType,
|
||||||
|
site: string
|
||||||
|
) => {
|
||||||
|
const labelToIdx = (() => {
|
||||||
|
switch (wordLabel) {
|
||||||
|
case "fstWord":
|
||||||
|
return 1;
|
||||||
|
case "sndWord":
|
||||||
|
return 2;
|
||||||
|
case "thirdWord":
|
||||||
|
return 3;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
const wordToFind = activeNode.words[labelToIdx!];
|
||||||
|
|
||||||
|
const siteData: SiteType = site === "a" ? site_a : site_b;
|
||||||
|
|
||||||
|
const nodesWithSameWords = Object.values(siteData)
|
||||||
|
.flatMap((level) =>
|
||||||
|
Object.values(level).filter((node) =>
|
||||||
|
Object.values(node.words).includes(wordToFind)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.sort((a, b) => (a.node_name > b.node_name ? 1 : -1));
|
||||||
|
|
||||||
|
const chosenNode =
|
||||||
|
nodesWithSameWords[
|
||||||
|
nodesWithSameWords.findIndex(
|
||||||
|
(node) => node.node_name === activeNode.node_name
|
||||||
|
) + 1
|
||||||
|
] ?? nodesWithSameWords[0];
|
||||||
|
|
||||||
|
//todo check if visible
|
||||||
|
const pos = chosenNode.id.substr(2);
|
||||||
|
|
||||||
|
const matIdx = Object.entries(node_matrices).flatMap((matrixData) =>
|
||||||
|
matrixData[1].filter((row) => row[0] === pos).length > 0
|
||||||
|
? matrixData[0]
|
||||||
|
: []
|
||||||
|
)[0];
|
||||||
|
|
||||||
|
const rotValues = {
|
||||||
|
"1": 6 * (-Math.PI / 4),
|
||||||
|
"2": 5 * (-Math.PI / 4),
|
||||||
|
"3": 4 * (-Math.PI / 4),
|
||||||
|
"4": 3 * (-Math.PI / 4),
|
||||||
|
"5": 2 * (-Math.PI / 4),
|
||||||
|
"6": -Math.PI / 4,
|
||||||
|
"7": 0,
|
||||||
|
"8": Math.PI / 4,
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(chosenNode);
|
||||||
|
return {
|
||||||
|
node: {
|
||||||
|
...chosenNode,
|
||||||
|
matrixIndices: { colIdx: 0, matrixIdx: matIdx, rowIdx: 0 },
|
||||||
|
},
|
||||||
|
siteRotY: rotValues[matIdx as keyof typeof rotValues],
|
||||||
|
level: chosenNode.id.substr(0, 2),
|
||||||
|
};
|
||||||
|
};
|
Loading…
Reference in a new issue