mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

added audio idle nodes on site a

Browse source
This commit is contained in:
ad044 2021-01-12 20:01:45 +04:00
parent f0be5368d2
commit fdcfb1d7ab
10 changed files with 625 additions and 269 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App.tsx
View file

@ -25,6 +25,7 @@ const App = () => {
return {
main: <MainScene />,
media: <MediaScene />,
idle_media: <MediaScene />,
gate: <GateScene />,
boot: <BootScene />,
sskn: <SSknScene />,

66
src/components/MediaScene/Images.tsx
View file

@ -3,6 +3,7 @@ import {
useLevelStore,
useMediaStore,
useNodeStore,
useSceneStore,
useSiteStore,
} from "../../store";
import { a, useSpring } from "@react-spring/three";
@ -14,7 +15,10 @@ import * as THREE from "three";
import { useLoader } from "react-three-fiber";
const Images = () => {
const idleNodeId = useNodeStore((state) => state.idleNodeId);
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
const currentScene = useSceneStore((state) => state.currentScene);
const [imageScaleY, setImageScaleY] = useState(3.75);
const [sceneImages, setSceneImages] = useState([] as any);
const [activeImage, setActiveImage] = useState<THREE.Texture>();
@ -41,30 +45,46 @@ const Images = () => {
);
useEffect(() => {
const images = (siteData as SiteType)[activeLevel][activeNodeId]
.image_table_indices;
let images;
if (currentScene === "media" || currentScene === "tak") {
images = (siteData as SiteType)[activeLevel][activeNodeId]
.image_table_indices;
} else if (currentScene === "idle_media") {
const level = idleNodeId.substr(0, 2);
images = (siteData as SiteType)[level][idleNodeId].image_table_indices;
}
// checking the length of the img arr doesn't work in some cases
// since the amount of images varies from 1 to 3.
// we try all 3 of them for each case, so logging the count to
// determine whether or not its complete is optimal i think.
let imgTries = 0;
const imgArr: { default: string }[] = [];
Object.entries(images).forEach((img) => {
imgTries++;
if (img[1] !== "-1") {
import(
"../../static/media_images/" + currentSite + "/" + img[1] + ".png"
).then((imageSrc: { default: string }) => {
imgArr.splice(parseInt(img[0]), 0, imageSrc);
if (imgTries === 3) {
setSceneImages(imgArr);
new THREE.TextureLoader().load(imgArr[0].default, setActiveImage);
}
});
}
});
}, [activeLevel, activeLevelData, activeNodeId, currentSite, siteData]);
if (images) {
// checking the length of the img arr doesn't work in some cases
// since the amount of images varies from 1 to 3.
// we try all 3 of them for each case, so logging the count to
// determine whether or not its complete is optimal i think.
let imgTries = 0;
const imgArr: { default: string }[] = [];
Object.entries(images).forEach((img) => {
imgTries++;
if (img[1] !== "-1") {
import(
"../../static/media_images/" + currentSite + "/" + img[1] + ".png"
).then((imageSrc: { default: string }) => {
imgArr.splice(parseInt(img[0]), 0, imageSrc);
if (imgTries === 3) {
setSceneImages(imgArr);
new THREE.TextureLoader().load(imgArr[0].default, setActiveImage);
}
});
}
});
}
}, [
activeLevel,
activeLevelData,
activeNodeId,
currentScene,
currentSite,
idleNodeId,
siteData,
]);
useEffect(() => {
if (mediaPercentageElapsed === 0 && sceneImages[0]) {

61
src/components/MediaScene/MediaPlayer.tsx
View file

@ -32,6 +32,7 @@ const MediaPlayer = () => {
(state) => state.setPercentageElapsed
);
const idleNodeId = useNodeStore((state) => state.idleNodeId);
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
const activeLevel = useLevelStore((state) => state.activeLevel);
@ -66,7 +67,9 @@ const MediaPlayer = () => {
setPercentageElapsed(percentageElapsed);
if (percentageElapsed === 100) {
videoRef.current.currentTime = 0;
if (currentScene === "end") {
if (currentScene === "idle_media") {
setScene("main");
} else if (currentScene === "end") {
incrementEndMediaPlayedCount();
} else {
if (
@ -130,27 +133,38 @@ const MediaPlayer = () => {
videoRef.current.play();
}
}
} else if (currentScene === "media" || currentScene === "tak") {
const nodeMedia = (siteData as SiteType)[activeLevel][activeNodeId]
.media_file;
if (nodeMedia.includes("XA")) {
import(
"../../static/audio/" + currentSite + "/" + nodeMedia + ".ogg"
).then((media) => {
setMediaSource(media.default);
if (videoRef.current) {
videoRef.current.load();
}
});
} else {
import(
"../../static/movie/" + currentSite + "/" + nodeMedia + "[0].webm"
).then((media) => {
setMediaSource(media.default);
if (videoRef.current) {
videoRef.current.load();
}
});
} else {
let nodeMedia;
if (currentScene === "media" || currentScene === "tak") {
nodeMedia = (siteData as SiteType)[activeLevel][activeNodeId]
.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")) {
import(
"../../static/audio/" + currentSite + "/" + nodeMedia + ".ogg"
).then((media) => {
setMediaSource(media.default);
if (videoRef.current) {
videoRef.current.load();
if (currentScene === "idle_media") {
videoRef.current.play();
}
}
});
} else {
import(
"../../static/movie/" + currentSite + "/" + nodeMedia + "[0].webm"
).then((media) => {
setMediaSource(media.default);
if (videoRef.current) {
videoRef.current.load();
}
});
}
}
}
}, [
@ -159,6 +173,7 @@ const MediaPlayer = () => {
currentScene,
currentSite,
endMediaPlayedCount,
idleNodeId,
siteData,
videoRef,
]);
@ -171,7 +186,7 @@ const MediaPlayer = () => {
id="media"
ref={videoRef}
style={{
display: ["media", "tak", "end"].includes(currentScene)
display: ["media", "idle_media", "tak", "end"].includes(currentScene)
? "block"
: "none",
}}

79
src/core/StateManagers/EventManager.tsx
View file

@ -144,33 +144,62 @@ const EventManager = () => {
const now = Date.now();
if (
timePassedSinceLastKeyPress.current > -1 &&
currentScene === "main" &&
now > timePassedSinceLastKeyPress.current + 10000 &&
mainSubscene !== "pause"
mainSubscene !== "pause" &&
currentScene === "main"
) {
const moves = [
"prayer",
"touch_sleeve",
"thinking",
"stretch_2",
"stretch",
"spin",
"scratch_head",
"blush",
"hands_behind_head",
"hands_on_hips",
"hands_on_hips_2",
"hands_together",
"lean_forward",
"lean_left",
"lean_right",
"look_around",
"play_with_hair",
];
if (now > timePassedSinceLastKeyPress.current + 10000) {
const moves = [
"prayer",
"touch_sleeve",
"thinking",
"stretch_2",
"stretch",
"spin",
"scratch_head",
"blush",
"hands_behind_head",
"hands_on_hips",
"hands_on_hips_2",
"hands_together",
"lean_forward",
"lean_left",
"lean_right",
"look_around",
"play_with_hair",
];
const event = moves[Math.floor(Math.random() * moves.length)];
setEventState({ event: event });
timePassedSinceLastKeyPress.current = now - 2500;
const event = moves[Math.floor(Math.random() * moves.length)];
setEventState({ event: event });
timePassedSinceLastKeyPress.current = now - 2500;
}
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({
event: "play_idle_media",
scene: "idle_media",
idleNodeId: nodeToPlay,
});
timePassedSinceLastKeyPress.current = -1;
}
}
});

11
src/core/StateManagers/MainSceneManagers/NodeManager.tsx
View file

@ -3,6 +3,7 @@ import { useNodeStore } from "../../../store";
import { StateManagerProps } from "../EventManager";
const NodeManager = (props: StateManagerProps) => {
const setIdleNodeId = useNodeStore((state) => state.setIdleNode);
const setActiveNodeState = useNodeStore((state) => state.setActiveNodeState);
const setNodeMatrixIndices = useNodeStore(
(state) => state.setNodeMatrixIndices
@ -200,6 +201,7 @@ const NodeManager = (props: StateManagerProps) => {
colIdx: number;
};
siteRotY: number;
idleNodeId?: string;
}) => {
switch (eventState.event) {
case "site_up":
@ -238,9 +240,16 @@ const NodeManager = (props: StateManagerProps) => {
action: animateShrinkAndRip,
value: [eventState.siteRotY],
};
case "play_idle_media":
return { action: setIdleNodeId, value: [eventState.idleNodeId] };
}
},
[animateActiveNodeThrow, animateShrinkAndRip, updateActiveNode]
[
animateActiveNodeThrow,
animateShrinkAndRip,
setIdleNodeId,
updateActiveNode,
]
);
useEffect(() => {

2
src/core/StateManagers/MediaSceneManagers/MediaComponentManager.tsx
View file

@ -111,7 +111,7 @@ const MediaComponentManager = (props: StateManagerProps) => {
const dispatchedObject = dispatchObject(props.eventState);
if (dispatchedObject) {
dispatchedObject.action.apply(null, dispatchedObject.value);
(dispatchedObject.action as any).apply(null, dispatchedObject.value);
}
}
}, [props.eventState, dispatchObject]);

7
src/core/StateManagers/SceneManager.tsx
View file

@ -51,6 +51,13 @@ const SceneManager = (props: StateManagerProps) => {
delay: 0,
setMainSceneIntro: true,
};
case "play_idle_media":
return {
action: setScene,
value: "idle_media",
delay: 0,
setMainSceneIntro: false,
};
}
},
[setScene]

599
src/resources/site_a.json
View file

File diff suppressed because it is too large Load diff

51
src/scenes/MediaScene.tsx
View file

@ -3,6 +3,7 @@ import {
useLevelStore,
useMediaStore,
useNodeStore,
useSceneStore,
useSiteStore,
} from "../store";
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
@ -19,6 +20,7 @@ import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextA
import site_b from "../resources/site_b.json";
const MediaScene = () => {
const currentScene = useSceneStore((state) => state.currentScene);
const mediaComponentMatrixIndices = useMediaStore(
(state) => state.componentMatrixIndices
);
@ -58,25 +60,40 @@ const MediaScene = () => {
return (
<perspectiveCamera position-z={3}>
<group position={[0.4, -0.3, 0]}>
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
<LeftSide activeMediaComponent={activeMediaComponent} />
<group position={[0, 0.5, -3]}>
<MediaLoadingBar />
<NodeNameContainer />
</group>
<group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
{activeNodeName.split("").map((letter, idx) => (
<MediumLetter letter={letter} letterIdx={idx} key={idx} />
))}
</group>
<MediaYellowTextAnimator />
{currentScene !== "idle_media" ? (
<>
<pointLight
intensity={1.2}
color={0xffffff}
position={[-2, 0, 0]}
/>
<LeftSide activeMediaComponent={activeMediaComponent} />
<group position={[0, 0.5, -3]}>
<MediaLoadingBar />
<NodeNameContainer />
</group>
<group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
{activeNodeName.split("").map((letter, idx) => (
<MediumLetter letter={letter} letterIdx={idx} key={idx} />
))}
</group>
<MediaYellowTextAnimator />
</>
) : (
<></>
)}
{activeNodeMedia.includes("XA") ? (
<>
<AudioVisualizer />
<RightSide activeMediaComponent={activeMediaComponent} />
<Lof />
<Images />{" "}
{currentScene !== "idle_media" ? (
<>
<RightSide activeMediaComponent={activeMediaComponent} />
<Lof />
<AudioVisualizer />
</>
) : (
<></>
)}
<Images />
</>
) : (
<></>

17
src/store.ts
View file

@ -57,6 +57,7 @@ type HUDState = {
};
type NodeState = {
idleNodeId: string;
activeNodeState: {
id: string;
posX: number;
@ -132,6 +133,17 @@ export type BigTextState = {
};
};
export type MediaState = {
audioAnalyser: any;
mediaPercentageElapsed: number;
componentMatrix: [[string, string], [string, string, string]];
componentMatrixIndices: {
sideIdx: number;
leftSideIdx: number;
rightSideIdx: number;
};
};
export type BootState = {
componentMatrix: {
main_menu: [string, string];
@ -291,6 +303,7 @@ export const useHudStore = create<HUDState>((set) => ({
export const useNodeStore = create(
combine(
{
idleNodeId: "",
activeNodeState: {
id: "0422",
posX: 0,
@ -315,6 +328,7 @@ export const useNodeStore = create(
rowIdx: number;
colIdx: number;
}) => set(() => ({ nodeMatrixIndices: to })),
setIdleNode: (to: string) => set(() => ({ idleNodeId: to })),
})
)
);
@ -405,7 +419,7 @@ export const useMediaStore = create(
// 0 or 1 or 2 ("fstWord", "sndWord" or "thirdWord")
rightSideIdx: 0,
},
} as any,
} as MediaState,
(set) => ({
toggleSide: () =>
set((state) => ({
@ -609,4 +623,3 @@ export const useEndSceneStore = create<EndState>((set) => ({
set((state) => ({ mediaPlayedCount: state.mediaPlayedCount + 1 })),
resetMediaPlayedCount: () => set(() => ({ mediaPlayedCount: 0 })),
}));