mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
more work on idle media
This commit is contained in:
parent
fdcfb1d7ab
commit
2bf0a047e0
7 changed files with 182 additions and 58 deletions
|
@ -1,5 +1,6 @@
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
import {
|
import {
|
||||||
|
useIdleStore,
|
||||||
useLevelStore,
|
useLevelStore,
|
||||||
useMediaStore,
|
useMediaStore,
|
||||||
useNodeStore,
|
useNodeStore,
|
||||||
|
@ -15,7 +16,8 @@ import * as THREE from "three";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
|
|
||||||
const Images = () => {
|
const Images = () => {
|
||||||
const idleNodeId = useNodeStore((state) => state.idleNodeId);
|
const idleNodeImages = useIdleStore((state) => state.images);
|
||||||
|
|
||||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||||
const currentScene = useSceneStore((state) => state.currentScene);
|
const currentScene = useSceneStore((state) => state.currentScene);
|
||||||
|
|
||||||
|
@ -50,8 +52,7 @@ const Images = () => {
|
||||||
images = (siteData as SiteType)[activeLevel][activeNodeId]
|
images = (siteData as SiteType)[activeLevel][activeNodeId]
|
||||||
.image_table_indices;
|
.image_table_indices;
|
||||||
} else if (currentScene === "idle_media") {
|
} else if (currentScene === "idle_media") {
|
||||||
const level = idleNodeId.substr(0, 2);
|
images = idleNodeImages;
|
||||||
images = (siteData as SiteType)[level][idleNodeId].image_table_indices;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (images) {
|
if (images) {
|
||||||
|
@ -82,7 +83,7 @@ const Images = () => {
|
||||||
activeNodeId,
|
activeNodeId,
|
||||||
currentScene,
|
currentScene,
|
||||||
currentSite,
|
currentSite,
|
||||||
idleNodeId,
|
idleNodeImages,
|
||||||
siteData,
|
siteData,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
|
@ -10,6 +10,7 @@ import site_a from "../../resources/site_a.json";
|
||||||
import site_b from "../../resources/site_b.json";
|
import site_b from "../../resources/site_b.json";
|
||||||
import {
|
import {
|
||||||
useEndSceneStore,
|
useEndSceneStore,
|
||||||
|
useIdleStore,
|
||||||
useLevelStore,
|
useLevelStore,
|
||||||
useMediaStore,
|
useMediaStore,
|
||||||
useNodeStore,
|
useNodeStore,
|
||||||
|
@ -18,7 +19,7 @@ import {
|
||||||
} from "../../store";
|
} from "../../store";
|
||||||
import t from "../../static/webvtt/test.vtt";
|
import t from "../../static/webvtt/test.vtt";
|
||||||
import { SiteType } from "../MainScene/SyncedComponents/Site";
|
import { SiteType } from "../MainScene/SyncedComponents/Site";
|
||||||
import endroll from "../../static/movie/b/ENDROLL1.STR[0].webm";
|
import endroll from "../../static/movie/ENDROLL1.STR[0].webm";
|
||||||
import xa0001 from "../../static/audio/a/Xa0001.mp4";
|
import xa0001 from "../../static/audio/a/Xa0001.mp4";
|
||||||
import xa0006 from "../../static/audio/a/Xa0006.mp4";
|
import xa0006 from "../../static/audio/a/Xa0006.mp4";
|
||||||
|
|
||||||
|
@ -32,7 +33,8 @@ const MediaPlayer = () => {
|
||||||
(state) => state.setPercentageElapsed
|
(state) => state.setPercentageElapsed
|
||||||
);
|
);
|
||||||
|
|
||||||
const idleNodeId = useNodeStore((state) => state.idleNodeId);
|
const idleMedia = useIdleStore((state) => state.media);
|
||||||
|
|
||||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||||
const activeLevel = useLevelStore((state) => state.activeLevel);
|
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||||
|
|
||||||
|
@ -134,15 +136,9 @@ const MediaPlayer = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
let nodeMedia;
|
|
||||||
if (currentScene === "media" || currentScene === "tak") {
|
if (currentScene === "media" || currentScene === "tak") {
|
||||||
nodeMedia = (siteData as SiteType)[activeLevel][activeNodeId]
|
const nodeMedia = (siteData as SiteType)[activeLevel][activeNodeId]
|
||||||
.media_file;
|
.media_file;
|
||||||
} else if (currentScene === "idle_media") {
|
|
||||||
const level = idleNodeId.substr(0, 2);
|
|
||||||
nodeMedia = (siteData as SiteType)[level][idleNodeId].media_file;
|
|
||||||
}
|
|
||||||
if (nodeMedia) {
|
|
||||||
if (nodeMedia.includes("XA")) {
|
if (nodeMedia.includes("XA")) {
|
||||||
import(
|
import(
|
||||||
"../../static/audio/" + currentSite + "/" + nodeMedia + ".ogg"
|
"../../static/audio/" + currentSite + "/" + nodeMedia + ".ogg"
|
||||||
|
@ -150,20 +146,42 @@ const MediaPlayer = () => {
|
||||||
setMediaSource(media.default);
|
setMediaSource(media.default);
|
||||||
if (videoRef.current) {
|
if (videoRef.current) {
|
||||||
videoRef.current.load();
|
videoRef.current.load();
|
||||||
if (currentScene === "idle_media") {
|
|
||||||
videoRef.current.play();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
import(
|
import("../../static/movie/" + nodeMedia + "[0].webm").then(
|
||||||
"../../static/movie/" + currentSite + "/" + nodeMedia + "[0].webm"
|
(media) => {
|
||||||
).then((media) => {
|
setMediaSource(media.default);
|
||||||
setMediaSource(media.default);
|
if (videoRef.current) {
|
||||||
if (videoRef.current) {
|
videoRef.current.load();
|
||||||
videoRef.current.load();
|
}
|
||||||
}
|
}
|
||||||
});
|
);
|
||||||
|
}
|
||||||
|
} else if (currentScene === "idle_media") {
|
||||||
|
if (idleMedia) {
|
||||||
|
if (idleMedia.includes("XA")) {
|
||||||
|
import(
|
||||||
|
"../../static/audio/" + currentSite + "/" + idleMedia + ".ogg"
|
||||||
|
).then((media) => {
|
||||||
|
setMediaSource(media.default);
|
||||||
|
if (videoRef.current) {
|
||||||
|
videoRef.current.load();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
import("../../static/movie/" + idleMedia + "[0].webm").then(
|
||||||
|
(media) => {
|
||||||
|
setMediaSource(media.default);
|
||||||
|
if (videoRef.current) {
|
||||||
|
videoRef.current.load();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (videoRef.current) {
|
||||||
|
videoRef.current.play();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -173,7 +191,7 @@ const MediaPlayer = () => {
|
||||||
currentScene,
|
currentScene,
|
||||||
currentSite,
|
currentSite,
|
||||||
endMediaPlayedCount,
|
endMediaPlayedCount,
|
||||||
idleNodeId,
|
idleMedia,
|
||||||
siteData,
|
siteData,
|
||||||
videoRef,
|
videoRef,
|
||||||
]);
|
]);
|
||||||
|
|
|
@ -37,6 +37,7 @@ import MediaYellowTextManager from "./MediaYellowTextManager";
|
||||||
import GameSaver from "./GameSaver";
|
import GameSaver from "./GameSaver";
|
||||||
import GameLoader from "./GameLoader";
|
import GameLoader from "./GameLoader";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
|
import IdleManager from "./MainSceneManagers/IdleManager";
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
const keyCodeAssocs = {
|
const keyCodeAssocs = {
|
||||||
|
@ -173,30 +174,10 @@ const EventManager = () => {
|
||||||
timePassedSinceLastKeyPress.current = now - 2500;
|
timePassedSinceLastKeyPress.current = now - 2500;
|
||||||
}
|
}
|
||||||
if (now > timePassedSinceLastKeyPress.current + 5000) {
|
if (now > timePassedSinceLastKeyPress.current + 5000) {
|
||||||
const siteAIdleNodes = [
|
|
||||||
"0000",
|
|
||||||
"0001",
|
|
||||||
"0002",
|
|
||||||
"0003",
|
|
||||||
"0004",
|
|
||||||
"0005",
|
|
||||||
"0006",
|
|
||||||
"0007",
|
|
||||||
"0008",
|
|
||||||
"0009",
|
|
||||||
];
|
|
||||||
// todo
|
|
||||||
const siteBIdleNodes = ["0001"];
|
|
||||||
|
|
||||||
const nodeToPlay =
|
|
||||||
currentSite === "a"
|
|
||||||
? siteAIdleNodes[Math.floor(Math.random() * siteAIdleNodes.length)]
|
|
||||||
: siteBIdleNodes[Math.floor(Math.random() * siteBIdleNodes.length)];
|
|
||||||
|
|
||||||
setEventState({
|
setEventState({
|
||||||
event: "play_idle_media",
|
event: "play_idle_media",
|
||||||
scene: "idle_media",
|
scene: "idle_media",
|
||||||
idleNodeId: nodeToPlay,
|
site: currentSite,
|
||||||
});
|
});
|
||||||
timePassedSinceLastKeyPress.current = -1;
|
timePassedSinceLastKeyPress.current = -1;
|
||||||
}
|
}
|
||||||
|
@ -313,6 +294,7 @@ const EventManager = () => {
|
||||||
<MediaYellowTextManager eventState={eventState!} />
|
<MediaYellowTextManager eventState={eventState!} />
|
||||||
<GameSaver eventState={eventState!} />
|
<GameSaver eventState={eventState!} />
|
||||||
<GameLoader eventState={eventState!} />
|
<GameLoader eventState={eventState!} />
|
||||||
|
<IdleManager eventState={eventState!} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
117
src/core/StateManagers/MainSceneManagers/IdleManager.tsx
Normal file
117
src/core/StateManagers/MainSceneManagers/IdleManager.tsx
Normal file
|
@ -0,0 +1,117 @@
|
||||||
|
import React, { useCallback, useEffect } from "react";
|
||||||
|
import { StateManagerProps } from "../EventManager";
|
||||||
|
import { SiteType } from "../../../components/MainScene/SyncedComponents/Site";
|
||||||
|
import site_a from "../../../resources/site_a.json";
|
||||||
|
import site_b from "../../../resources/site_b.json";
|
||||||
|
import { useIdleStore } from "../../../store";
|
||||||
|
|
||||||
|
const IdleManager = (props: StateManagerProps) => {
|
||||||
|
const setImages = useIdleStore((state) => state.setImages);
|
||||||
|
const setMedia = useIdleStore((state) => state.setMedia);
|
||||||
|
|
||||||
|
const playIdleMedia = useCallback(
|
||||||
|
(site: string) => {
|
||||||
|
const siteAIdleNodes = {
|
||||||
|
audio: [
|
||||||
|
"0000",
|
||||||
|
"0001",
|
||||||
|
"0002",
|
||||||
|
"0003",
|
||||||
|
"0004",
|
||||||
|
"0005",
|
||||||
|
"0006",
|
||||||
|
"0007",
|
||||||
|
"0008",
|
||||||
|
"0009",
|
||||||
|
],
|
||||||
|
video: [
|
||||||
|
"INS01.STR",
|
||||||
|
"INS02.STR",
|
||||||
|
"INS03.STR",
|
||||||
|
"INS04.STR",
|
||||||
|
"INS05.STR",
|
||||||
|
"INS06.STR",
|
||||||
|
"INS07.STR",
|
||||||
|
"INS08.STR",
|
||||||
|
"INS09.STR",
|
||||||
|
"INS10.STR",
|
||||||
|
"INS11.STR",
|
||||||
|
"INS12.STR",
|
||||||
|
"INS13.STR",
|
||||||
|
"INS14.STR",
|
||||||
|
"INS15.STR",
|
||||||
|
"INS16.STR",
|
||||||
|
"INS17.STR",
|
||||||
|
"INS18.STR",
|
||||||
|
"INS19.STR",
|
||||||
|
"INS20.STR",
|
||||||
|
"INS21.STR",
|
||||||
|
"INS22.STR",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const siteBIdleNodes = {
|
||||||
|
audio: ["1015", "1219", "0419", "0500", "0501", "0508", "0510", "0513"],
|
||||||
|
video: [
|
||||||
|
"INS16.STR",
|
||||||
|
"INS17.STR",
|
||||||
|
"INS18.STR",
|
||||||
|
"INS19.STR",
|
||||||
|
"INS20.STR",
|
||||||
|
"INS21.STR",
|
||||||
|
"INS22.STR",
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const siteData = site === "a" ? site_a : site_b;
|
||||||
|
const idleNodes = site === "a" ? siteAIdleNodes : siteBIdleNodes;
|
||||||
|
|
||||||
|
if (Math.random() < 0.5) {
|
||||||
|
const nodeToPlay =
|
||||||
|
idleNodes.audio[Math.floor(Math.random() * idleNodes.audio.length)];
|
||||||
|
|
||||||
|
const level = nodeToPlay.substr(0, 2);
|
||||||
|
|
||||||
|
const images = (siteData as SiteType)[level][nodeToPlay]
|
||||||
|
.image_table_indices;
|
||||||
|
const media = (siteData as SiteType)[level][nodeToPlay].media_file;
|
||||||
|
|
||||||
|
setMedia(media);
|
||||||
|
setImages(images);
|
||||||
|
} else {
|
||||||
|
setMedia(
|
||||||
|
idleNodes.video[Math.floor(Math.random() * idleNodes.video.length)]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('s')
|
||||||
|
},
|
||||||
|
[setImages, setMedia]
|
||||||
|
);
|
||||||
|
|
||||||
|
const dispatchObject = useCallback(
|
||||||
|
(eventState: { event: string; site: string }) => {
|
||||||
|
switch (eventState.event) {
|
||||||
|
case "play_idle_media":
|
||||||
|
return {
|
||||||
|
action: playIdleMedia,
|
||||||
|
value: eventState.site,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[playIdleMedia]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.eventState) {
|
||||||
|
const dispatchedObject = dispatchObject(props.eventState);
|
||||||
|
|
||||||
|
if (dispatchedObject) {
|
||||||
|
dispatchedObject.action(dispatchedObject.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [dispatchObject, props.eventState]);
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IdleManager;
|
|
@ -3,7 +3,6 @@ import { useNodeStore } from "../../../store";
|
||||||
import { StateManagerProps } from "../EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
|
|
||||||
const NodeManager = (props: StateManagerProps) => {
|
const NodeManager = (props: StateManagerProps) => {
|
||||||
const setIdleNodeId = useNodeStore((state) => state.setIdleNode);
|
|
||||||
const setActiveNodeState = useNodeStore((state) => state.setActiveNodeState);
|
const setActiveNodeState = useNodeStore((state) => state.setActiveNodeState);
|
||||||
const setNodeMatrixIndices = useNodeStore(
|
const setNodeMatrixIndices = useNodeStore(
|
||||||
(state) => state.setNodeMatrixIndices
|
(state) => state.setNodeMatrixIndices
|
||||||
|
@ -240,16 +239,9 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
action: animateShrinkAndRip,
|
action: animateShrinkAndRip,
|
||||||
value: [eventState.siteRotY],
|
value: [eventState.siteRotY],
|
||||||
};
|
};
|
||||||
case "play_idle_media":
|
|
||||||
return { action: setIdleNodeId, value: [eventState.idleNodeId] };
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[
|
[animateActiveNodeThrow, animateShrinkAndRip, updateActiveNode]
|
||||||
animateActiveNodeThrow,
|
|
||||||
animateShrinkAndRip,
|
|
||||||
setIdleNodeId,
|
|
||||||
updateActiveNode,
|
|
||||||
]
|
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { useCallback, useEffect } from "react";
|
import React, { useCallback, useEffect } from "react";
|
||||||
import {
|
import {
|
||||||
|
useIdleStore,
|
||||||
useLevelStore,
|
useLevelStore,
|
||||||
useMediaStore,
|
useMediaStore,
|
||||||
useNodeStore,
|
useNodeStore,
|
||||||
|
@ -25,6 +26,7 @@ const MediaScene = () => {
|
||||||
(state) => state.componentMatrixIndices
|
(state) => state.componentMatrixIndices
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const idleMedia = useIdleStore((state) => state.media);
|
||||||
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||||
const activeLevel = useLevelStore((state) => state.activeLevel);
|
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||||
|
|
||||||
|
@ -82,7 +84,7 @@ const MediaScene = () => {
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
)}
|
)}
|
||||||
{activeNodeMedia.includes("XA") ? (
|
{activeNodeMedia.includes("XA") || idleMedia.includes("XA") ? (
|
||||||
<>
|
<>
|
||||||
{currentScene !== "idle_media" ? (
|
{currentScene !== "idle_media" ? (
|
||||||
<>
|
<>
|
||||||
|
|
18
src/store.ts
18
src/store.ts
|
@ -10,6 +10,13 @@ type EndState = {
|
||||||
resetMediaPlayedCount: () => void;
|
resetMediaPlayedCount: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type IdleState = {
|
||||||
|
media: any;
|
||||||
|
images: any;
|
||||||
|
setMedia: (to: any) => void;
|
||||||
|
setImages: (to: any) => void;
|
||||||
|
};
|
||||||
|
|
||||||
type SiteSaveState = {
|
type SiteSaveState = {
|
||||||
a: {
|
a: {
|
||||||
activeNodeId: string;
|
activeNodeId: string;
|
||||||
|
@ -57,7 +64,6 @@ type HUDState = {
|
||||||
};
|
};
|
||||||
|
|
||||||
type NodeState = {
|
type NodeState = {
|
||||||
idleNodeId: string;
|
|
||||||
activeNodeState: {
|
activeNodeState: {
|
||||||
id: string;
|
id: string;
|
||||||
posX: number;
|
posX: number;
|
||||||
|
@ -303,7 +309,6 @@ export const useHudStore = create<HUDState>((set) => ({
|
||||||
export const useNodeStore = create(
|
export const useNodeStore = create(
|
||||||
combine(
|
combine(
|
||||||
{
|
{
|
||||||
idleNodeId: "",
|
|
||||||
activeNodeState: {
|
activeNodeState: {
|
||||||
id: "0422",
|
id: "0422",
|
||||||
posX: 0,
|
posX: 0,
|
||||||
|
@ -328,11 +333,18 @@ export const useNodeStore = create(
|
||||||
rowIdx: number;
|
rowIdx: number;
|
||||||
colIdx: number;
|
colIdx: number;
|
||||||
}) => set(() => ({ nodeMatrixIndices: to })),
|
}) => set(() => ({ nodeMatrixIndices: to })),
|
||||||
setIdleNode: (to: string) => set(() => ({ idleNodeId: to })),
|
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const useIdleStore = create<IdleState>((set) => ({
|
||||||
|
media: undefined,
|
||||||
|
// this may be undefined depending on whether or not the media is audio or not
|
||||||
|
images: undefined,
|
||||||
|
setMedia: (to) => set(() => ({ media: to })),
|
||||||
|
setImages: (to) => set(() => ({ images: to })),
|
||||||
|
}));
|
||||||
|
|
||||||
export const useLainStore = create<LainState>((set) => ({
|
export const useLainStore = create<LainState>((set) => ({
|
||||||
lainMoveState: "standing",
|
lainMoveState: "standing",
|
||||||
setLainMoveState: (to) => set(() => ({ lainMoveState: to })),
|
setLainMoveState: (to) => set(() => ({ lainMoveState: to })),
|
||||||
|
|
Loading…
Reference in a new issue