more work on idle media

src/components/MediaScene/Images.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react";
 import {
+  useIdleStore,
   useLevelStore,
   useMediaStore,
   useNodeStore,
@@ -15,7 +16,8 @@ import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
 
 const Images = () => {
-  const idleNodeId = useNodeStore((state) => state.idleNodeId);
+  const idleNodeImages = useIdleStore((state) => state.images);
+
   const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
   const currentScene = useSceneStore((state) => state.currentScene);
 
@@ -50,8 +52,7 @@ const Images = () => {
       images = (siteData as SiteType)[activeLevel][activeNodeId]
         .image_table_indices;
     } else if (currentScene === "idle_media") {
-      const level = idleNodeId.substr(0, 2);
+      images = idleNodeImages;
-      images = (siteData as SiteType)[level][idleNodeId].image_table_indices;
     }
 
     if (images) {
@@ -82,7 +83,7 @@ const Images = () => {
     activeNodeId,
     currentScene,
     currentSite,
-    idleNodeId,
+    idleNodeImages,
     siteData,
   ]);
 

src/components/MediaScene/MediaPlayer.tsx

@@ -10,6 +10,7 @@ import site_a from "../../resources/site_a.json";
 import site_b from "../../resources/site_b.json";
 import {
   useEndSceneStore,
+  useIdleStore,
   useLevelStore,
   useMediaStore,
   useNodeStore,
@@ -18,7 +19,7 @@ import {
 } from "../../store";
 import t from "../../static/webvtt/test.vtt";
 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 xa0006 from "../../static/audio/a/Xa0006.mp4";
 
@@ -32,7 +33,8 @@ const MediaPlayer = () => {
     (state) => state.setPercentageElapsed
   );
 
-  const idleNodeId = useNodeStore((state) => state.idleNodeId);
+  const idleMedia = useIdleStore((state) => state.media);
+
   const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
   const activeLevel = useLevelStore((state) => state.activeLevel);
 
@@ -134,15 +136,9 @@ const MediaPlayer = () => {
         }
       }
     } else {
-      let nodeMedia;
       if (currentScene === "media" || currentScene === "tak") {
-        nodeMedia = (siteData as SiteType)[activeLevel][activeNodeId]
+        const 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"
@@ -150,20 +146,42 @@ const MediaPlayer = () => {
             setMediaSource(media.default);
             if (videoRef.current) {
               videoRef.current.load();
-              if (currentScene === "idle_media") {
-                videoRef.current.play();
-              }
             }
           });
         } else {
+          import("../../static/movie/" + nodeMedia + "[0].webm").then(
+            (media) => {
+              setMediaSource(media.default);
+              if (videoRef.current) {
+                videoRef.current.load();
+              }
+            }
+          );
+        }
+      } else if (currentScene === "idle_media") {
+        if (idleMedia) {
+          if (idleMedia.includes("XA")) {
             import(
-            "../../static/movie/" + currentSite + "/" + nodeMedia + "[0].webm"
+              "../../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,
     currentSite,
     endMediaPlayedCount,
-    idleNodeId,
+    idleMedia,
     siteData,
     videoRef,
   ]);

src/core/StateManagers/EventManager.tsx

@@ -37,6 +37,7 @@ import MediaYellowTextManager from "./MediaYellowTextManager";
 import GameSaver from "./GameSaver";
 import GameLoader from "./GameLoader";
 import { useFrame } from "react-three-fiber";
+import IdleManager from "./MainSceneManagers/IdleManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -173,30 +174,10 @@ const EventManager = () => {
         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,
+          site: currentSite,
         });
         timePassedSinceLastKeyPress.current = -1;
       }
@@ -313,6 +294,7 @@ const EventManager = () => {
       <MediaYellowTextManager eventState={eventState!} />
       <GameSaver eventState={eventState!} />
       <GameLoader eventState={eventState!} />
+      <IdleManager eventState={eventState!} />
     </>
   );
 };

src/core/StateManagers/MainSceneManagers/IdleManager.tsx

@@ -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;

src/core/StateManagers/MainSceneManagers/NodeManager.tsx

@@ -3,7 +3,6 @@ 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
@@ -240,16 +239,9 @@ 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(() => {

src/scenes/MediaScene.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect } from "react";
 import {
+  useIdleStore,
   useLevelStore,
   useMediaStore,
   useNodeStore,
@@ -25,6 +26,7 @@ const MediaScene = () => {
     (state) => state.componentMatrixIndices
   );
 
+  const idleMedia = useIdleStore((state) => state.media);
   const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
   const activeLevel = useLevelStore((state) => state.activeLevel);
 
@@ -82,7 +84,7 @@ const MediaScene = () => {
         ) : (
           <></>
         )}
-        {activeNodeMedia.includes("XA") ? (
+        {activeNodeMedia.includes("XA") || idleMedia.includes("XA") ? (
           <>
             {currentScene !== "idle_media" ? (
               <>

src/store.ts

@@ -10,6 +10,13 @@ type EndState = {
   resetMediaPlayedCount: () => void;
 };
 
+type IdleState = {
+  media: any;
+  images: any;
+  setMedia: (to: any) => void;
+  setImages: (to: any) => void;
+};
+
 type SiteSaveState = {
   a: {
     activeNodeId: string;
@@ -57,7 +64,6 @@ type HUDState = {
 };
 
 type NodeState = {
-  idleNodeId: string;
   activeNodeState: {
     id: string;
     posX: number;
@@ -303,7 +309,6 @@ export const useHudStore = create<HUDState>((set) => ({
 export const useNodeStore = create(
   combine(
     {
-      idleNodeId: "",
       activeNodeState: {
         id: "0422",
         posX: 0,
@@ -328,11 +333,18 @@ export const useNodeStore = create(
         rowIdx: number;
         colIdx: number;
       }) => 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) => ({
   lainMoveState: "standing",
   setLainMoveState: (to) => set(() => ({ lainMoveState: to })),