mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
more werk
This commit is contained in:
parent
d5797c6b34
commit
80d816d576
6 changed files with 145 additions and 90 deletions
|
@ -35,8 +35,7 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
||||||
|
|
||||||
const uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]);
|
const uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]);
|
||||||
|
|
||||||
const formattedLevel =
|
const formattedLevel = props.level.padStart(2, "0");
|
||||||
props.level.length < 2 ? "0" + props.level : props.level;
|
|
||||||
|
|
||||||
uniforms.siteA = { type: "t", value: siteA };
|
uniforms.siteA = { type: "t", value: siteA };
|
||||||
uniforms.siteB = { type: "t", value: siteB };
|
uniforms.siteB = { type: "t", value: siteB };
|
||||||
|
|
|
@ -40,7 +40,7 @@ const Site = memo(() => {
|
||||||
|
|
||||||
{Object.entries(site_a).map((blueOrb) => {
|
{Object.entries(site_a).map((blueOrb) => {
|
||||||
if (
|
if (
|
||||||
(blueOrb as any)[1]["unlocked_by"] === "-1" &&
|
// (blueOrb as any)[1]["unlocked_by"] === "-1" &&
|
||||||
activeLevels.includes((blueOrb as any)[0].substr(0, 2))
|
activeLevels.includes((blueOrb as any)[0].substr(0, 2))
|
||||||
)
|
)
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -6,6 +6,7 @@ import BlueOrbManager from "./BlueOrbManager";
|
||||||
import BlueOrbHUDManager from "./BlueOrbHUDManager";
|
import BlueOrbHUDManager from "./BlueOrbHUDManager";
|
||||||
import {
|
import {
|
||||||
useBlueOrbStore,
|
useBlueOrbStore,
|
||||||
|
useLevelStore,
|
||||||
useMediaStore,
|
useMediaStore,
|
||||||
useSceneStore,
|
useSceneStore,
|
||||||
useSiteStore,
|
useSiteStore,
|
||||||
|
@ -17,6 +18,8 @@ import MediaElementManager from "./MediaElementManager";
|
||||||
import SceneManager from "./SceneManager";
|
import SceneManager from "./SceneManager";
|
||||||
import YellowTextManager from "./YellowTextManager";
|
import YellowTextManager from "./YellowTextManager";
|
||||||
import MediaImageManager from "./MediaImageManager";
|
import MediaImageManager from "./MediaImageManager";
|
||||||
|
import computeAction from "../../core/computeAction";
|
||||||
|
import available_blue_orbs_on_projection from "../../resources/available_blue_orbs_on_projection.json";
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
const keyCodeAssocs = {
|
const keyCodeAssocs = {
|
||||||
|
@ -33,12 +36,29 @@ export type StateManagerProps = {
|
||||||
eventState: string;
|
eventState: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type GameContext = {
|
||||||
|
keyPress?: string;
|
||||||
|
scene: string;
|
||||||
|
blueOrbRowIdx: number;
|
||||||
|
blueOrbColIdx: number;
|
||||||
|
currentLevel: string;
|
||||||
|
siteRotIdx: string;
|
||||||
|
};
|
||||||
|
|
||||||
const EventManager = () => {
|
const EventManager = () => {
|
||||||
const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
|
const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
|
||||||
const blueOrbRowIdx = useBlueOrbStore((state) => state.blueOrbRowIdx);
|
const blueOrbRowIdx = useBlueOrbStore((state) => state.blueOrbRowIdx);
|
||||||
const blueOrbColIdx = useBlueOrbStore((state) => state.blueOrbColIdx);
|
const blueOrbColIdx = useBlueOrbStore((state) => state.blueOrbColIdx);
|
||||||
|
|
||||||
const siteRotIdx = useSiteStore((state) => state.siteRotIdx);
|
const siteRotIdx = useSiteStore((state) => state.siteRotIdx);
|
||||||
|
const currentLevel = useLevelStore((state) => state.currentLevel);
|
||||||
|
|
||||||
|
const availableBlueOrbsForSelection = available_blue_orbs_on_projection[
|
||||||
|
siteRotIdx as keyof typeof available_blue_orbs_on_projection
|
||||||
|
].map((posIdxArr) => posIdxArr.map((posIdx) => currentLevel + posIdx));
|
||||||
|
|
||||||
|
const selectedBlueOrb =
|
||||||
|
availableBlueOrbsForSelection[blueOrbRowIdx][blueOrbColIdx];
|
||||||
|
|
||||||
const [eventState, setEventState] = useState<string>();
|
const [eventState, setEventState] = useState<string>();
|
||||||
const activeMediaComponent = useMediaStore(
|
const activeMediaComponent = useMediaStore(
|
||||||
|
@ -56,39 +76,32 @@ const EventManager = () => {
|
||||||
return keys[currentScene as keyof typeof keys];
|
return keys[currentScene as keyof typeof keys];
|
||||||
}, [activeBlueOrb, activeMediaComponent, currentScene]);
|
}, [activeBlueOrb, activeMediaComponent, currentScene]);
|
||||||
|
|
||||||
|
const gameContext: GameContext = useMemo(
|
||||||
|
() => ({
|
||||||
|
scene: currentScene,
|
||||||
|
siteRotIdx: siteRotIdx,
|
||||||
|
blueOrbRowIdx: blueOrbRowIdx,
|
||||||
|
blueOrbColIdx: blueOrbColIdx,
|
||||||
|
currentLevel: currentLevel,
|
||||||
|
}),
|
||||||
|
[blueOrbColIdx, blueOrbRowIdx, currentLevel, currentScene, siteRotIdx]
|
||||||
|
);
|
||||||
|
|
||||||
const handleKeyPress = useCallback(
|
const handleKeyPress = useCallback(
|
||||||
(event) => {
|
(event) => {
|
||||||
const { keyCode } = event;
|
const { keyCode } = event;
|
||||||
|
|
||||||
const keyPress = getKeyCodeAssociation(keyCode);
|
const keyPress = getKeyCodeAssociation(keyCode);
|
||||||
|
|
||||||
const gameContext = {
|
|
||||||
scene: currentScene,
|
|
||||||
keyPress: keyPress,
|
|
||||||
siteRotIdx: siteRotIdx,
|
|
||||||
blueOrbRowIdx: blueOrbRowIdx,
|
|
||||||
blueOrbColIdx: blueOrbColIdx,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (keyPress && !inputCooldown) {
|
if (keyPress && !inputCooldown) {
|
||||||
// event id consists of the CURRENT blue orb id (to calculate where we're at currently)
|
gameContext.keyPress = keyPress;
|
||||||
// and the keypress.
|
const event = computeAction(gameContext);
|
||||||
// this id is later on used to get the needed corresponding data for each component
|
console.log(event);
|
||||||
// from blue_orb_directions.json file.
|
|
||||||
// const eventId = `${activeBlueOrb}_${keyPress}`;
|
|
||||||
//
|
|
||||||
const eventId = `${sceneEventKey}_${keyPress}`;
|
const eventId = `${sceneEventKey}_${keyPress}`;
|
||||||
setEventState(eventId);
|
setEventState(eventId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[
|
[gameContext, inputCooldown, sceneEventKey]
|
||||||
blueOrbColIdx,
|
|
||||||
blueOrbRowIdx,
|
|
||||||
currentScene,
|
|
||||||
inputCooldown,
|
|
||||||
sceneEventKey,
|
|
||||||
siteRotIdx,
|
|
||||||
]
|
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -1,31 +1,57 @@
|
||||||
import available_blue_orbs_on_projection from "../resources/available_blue_orbs_on_projection.json";
|
import { GameContext } from "../components/StateManagers/EventManager";
|
||||||
|
|
||||||
type GameContext = {
|
|
||||||
scene: string;
|
|
||||||
keyPress: string;
|
|
||||||
siteRotIdx: number;
|
|
||||||
blueOrbRowIdx: number;
|
|
||||||
blueOrbColIdx: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
const computeAction = (gameContext: GameContext) => {
|
const computeAction = (gameContext: GameContext) => {
|
||||||
const availableBlueOrbs = [
|
let event;
|
||||||
available_blue_orbs_on_projection.topRowProjection[gameContext.siteRotIdx],
|
let newBlueOrbColIdx;
|
||||||
available_blue_orbs_on_projection.middleRowProjection[
|
let newBlueOrbRowIdx;
|
||||||
gameContext.siteRotIdx
|
let newLevel;
|
||||||
],
|
let newSiteRotIdx;
|
||||||
available_blue_orbs_on_projection.bottomRowProjection[
|
|
||||||
gameContext.siteRotIdx
|
|
||||||
],
|
|
||||||
];
|
|
||||||
|
|
||||||
switch (gameContext.keyPress) {
|
switch (gameContext.keyPress) {
|
||||||
case "left":
|
case "left":
|
||||||
let newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1;
|
newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1;
|
||||||
if(newBlueOrbRowIdx < 0) {
|
if (newBlueOrbRowIdx < 0) {
|
||||||
|
return { event: "move_left" };
|
||||||
|
} else {
|
||||||
|
return { event: "change_blue_orb_left" };
|
||||||
|
}
|
||||||
|
case "down":
|
||||||
|
newBlueOrbColIdx = gameContext.blueOrbColIdx + 1;
|
||||||
|
if (newBlueOrbColIdx > 2) {
|
||||||
|
event = "move_down";
|
||||||
|
|
||||||
|
newLevel = (parseInt(gameContext.currentLevel) - 1)
|
||||||
|
.toString()
|
||||||
|
.padStart(2, "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");
|
||||||
|
|
||||||
|
newBlueOrbColIdx = gameContext.blueOrbColIdx;
|
||||||
|
newBlueOrbRowIdx = 2;
|
||||||
|
|
||||||
|
newSiteRotIdx = gameContext.siteRotIdx;
|
||||||
|
} else {
|
||||||
|
event = "change_blue_orb";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
event: event,
|
||||||
|
newBlueOrbColIdx: newBlueOrbColIdx,
|
||||||
|
newBlueOrbRowIdx: newBlueOrbRowIdx,
|
||||||
|
newSiteRotIdx: newSiteRotIdx,
|
||||||
|
newLevel: newLevel,
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export default computeAction;
|
export default computeAction;
|
||||||
|
|
|
@ -1,32 +1,42 @@
|
||||||
{
|
{
|
||||||
"topRowProjection": [
|
"1": [
|
||||||
["16", "19", "20", "23"],
|
["16", "19", "20", "23"],
|
||||||
["17", "20", "21", "16"],
|
|
||||||
["18", "21", "22", "17"],
|
|
||||||
["19", "22", "23", "18"],
|
|
||||||
["20", "23", "16", "19"],
|
|
||||||
["21", "16", "17", "20"],
|
|
||||||
["22", "17", "18", "21"],
|
|
||||||
["23", "18", "19", "22"]
|
|
||||||
],
|
|
||||||
"middleRowProjection": [
|
|
||||||
["08", "11", "12", "15"],
|
["08", "11", "12", "15"],
|
||||||
["09", "12", "13", "08"],
|
["00", "03", "04", "07"]
|
||||||
["10", "13", "14", "09"],
|
|
||||||
["11", "14", "15", "10"],
|
|
||||||
["12", "15", "09", "11"],
|
|
||||||
["13", "08", "09", "12"],
|
|
||||||
["14", "09", "10", "13"],
|
|
||||||
["15", "10", "11", "14"]
|
|
||||||
],
|
],
|
||||||
"bottomRowProjection": [
|
"2": [
|
||||||
["00", "03", "04", "07"],
|
["17", "20", "21", "16"],
|
||||||
["01", "04", "05", "00"],
|
["09", "12", "13", "08"],
|
||||||
["02", "05", "06", "01"],
|
["01", "04", "05", "00"]
|
||||||
["03", "06", "07", "02"],
|
],
|
||||||
["04", "07", "00", "03"],
|
"3": [
|
||||||
["05", "00", "01", "04"],
|
["18", "21", "22", "17"],
|
||||||
["06", "01", "02", "05"],
|
["10", "13", "14", "09"],
|
||||||
|
["02", "05", "06", "01"]
|
||||||
|
],
|
||||||
|
"4": [
|
||||||
|
["19", "22", "23", "18"],
|
||||||
|
["11", "14", "15", "10"],
|
||||||
|
["03", "06", "07", "02"]
|
||||||
|
],
|
||||||
|
"5": [
|
||||||
|
["20", "23", "16", "19"],
|
||||||
|
["12", "15", "09", "11"],
|
||||||
|
["04", "07", "00", "03"]
|
||||||
|
],
|
||||||
|
"6": [
|
||||||
|
["21", "16", "17", "20"],
|
||||||
|
["13", "08", "09", "12"],
|
||||||
|
["05", "00", "01", "04"]
|
||||||
|
],
|
||||||
|
"7": [
|
||||||
|
["22", "17", "18", "21"],
|
||||||
|
["14", "09", "10", "13"],
|
||||||
|
["06", "01", "02", "05"]
|
||||||
|
],
|
||||||
|
"8": [
|
||||||
|
["23", "18", "19", "22"],
|
||||||
|
["15", "10", "11", "14"],
|
||||||
["07", "02", "03", "06"]
|
["07", "02", "03", "06"]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
17
src/store.ts
17
src/store.ts
|
@ -1,5 +1,6 @@
|
||||||
import create from "zustand";
|
import create from "zustand";
|
||||||
import { combine } from "zustand/middleware";
|
import { combine } from "zustand/middleware";
|
||||||
|
import available_blue_orbs_on_projection from "./resources/available_blue_orbs_on_projection.json";
|
||||||
|
|
||||||
type SceneState = {
|
type SceneState = {
|
||||||
currentScene: string;
|
currentScene: string;
|
||||||
|
@ -73,13 +74,15 @@ type SiteState = {
|
||||||
setSiteRotY: (to: number) => void;
|
setSiteRotY: (to: number) => void;
|
||||||
setSitePosY: (to: number) => void;
|
setSitePosY: (to: number) => void;
|
||||||
setIsSiteChanging: (to: boolean) => void;
|
setIsSiteChanging: (to: boolean) => void;
|
||||||
siteRotIdx: number;
|
siteRotIdx: string;
|
||||||
setSiteRotIdx: (to: number) => void;
|
setSiteRotIdx: (to: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type LevelState = {
|
type LevelState = {
|
||||||
|
currentLevel: string;
|
||||||
activeLevels: string[];
|
activeLevels: string[];
|
||||||
setActiveLevels: (to: string[]) => void;
|
setActiveLevels: (to: string[]) => void;
|
||||||
|
setCurrentLevel: (to: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type MiddleRingState = {
|
type MiddleRingState = {
|
||||||
|
@ -190,7 +193,8 @@ export const useHudStore = create<HUDState>((set) => ({
|
||||||
toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
|
toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useBlueOrbStore = create<BlueOrbState>((set) => ({
|
export const useBlueOrbStore = create<BlueOrbState>((set) => {
|
||||||
|
return {
|
||||||
activeBlueOrbId: "0422",
|
activeBlueOrbId: "0422",
|
||||||
isActiveBlueOrbInteractedWith: false,
|
isActiveBlueOrbInteractedWith: false,
|
||||||
activeBlueOrbPosX: 0,
|
activeBlueOrbPosX: 0,
|
||||||
|
@ -206,7 +210,8 @@ export const useBlueOrbStore = create<BlueOrbState>((set) => ({
|
||||||
setBlueOrbRowIdx: (to) => set(() => ({ blueOrbRowIdx: to })),
|
setBlueOrbRowIdx: (to) => set(() => ({ blueOrbRowIdx: to })),
|
||||||
blueOrbColIdx: 0,
|
blueOrbColIdx: 0,
|
||||||
setBlueOrbColIdx: (to) => set(() => ({ blueOrbColIdx: to })),
|
setBlueOrbColIdx: (to) => set(() => ({ blueOrbColIdx: to })),
|
||||||
}));
|
};
|
||||||
|
});
|
||||||
|
|
||||||
export const useLainStore = create<LainState>((set) => ({
|
export const useLainStore = create<LainState>((set) => ({
|
||||||
lainMoveState: "standing",
|
lainMoveState: "standing",
|
||||||
|
@ -255,7 +260,7 @@ export const useSiteStore = create<SiteState>((set) => ({
|
||||||
setSitePosY: (to) => set(() => ({ sitePosY: to })),
|
setSitePosY: (to) => set(() => ({ sitePosY: to })),
|
||||||
setSiteRotY: (to) => set(() => ({ siteRotY: to })),
|
setSiteRotY: (to) => set(() => ({ siteRotY: to })),
|
||||||
setIsSiteChanging: (to) => set(() => ({ isSiteChangingY: to })),
|
setIsSiteChanging: (to) => set(() => ({ isSiteChangingY: to })),
|
||||||
siteRotIdx: 6,
|
siteRotIdx: "7",
|
||||||
setSiteRotIdx: (to) => set(() => ({ siteRotIdx: to })),
|
setSiteRotIdx: (to) => set(() => ({ siteRotIdx: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
@ -281,8 +286,10 @@ export const useMiddleRingStore = create<MiddleRingState>((set) => ({
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useLevelStore = create<LevelState>((set) => ({
|
export const useLevelStore = create<LevelState>((set) => ({
|
||||||
|
currentLevel: "04",
|
||||||
activeLevels: ["03", "04", "05"],
|
activeLevels: ["03", "04", "05"],
|
||||||
setActiveLevels: (to) => set(() => ({ activeLevels: to })),
|
setActiveLevels: (to) => set(() => ({ activeLevels: to })),
|
||||||
|
setCurrentLevel: (to) => set(() => ({ currentLevel: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useMediaStore = create<MediaState>((set) => ({
|
export const useMediaStore = create<MediaState>((set) => ({
|
||||||
|
|
Loading…
Reference in a new issue