a lot.

src/components/MainScene/Node.tsx

@@ -1,6 +1,6 @@
-import React, { memo, useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
-import { useSpring, a } from "@react-spring/three";
+import { a, useSpring } from "@react-spring/three";
 import * as THREE from "three";
 import Cou from "../../static/sprite/Cou.png";
 import CouActive from "../../static/sprite/Cou_active.png";

src/components/MainScene/Site.tsx

@@ -10,16 +10,10 @@ import GrayRing from "./GrayRing";
 import CyanCrystal from "./CyanCrystal";
 
 export type NodeDataType = {
-  SLPS_016_0x_offset: string;
   image_table_indices: { 1: string; 2: string; 3: string };
   is_hidden: string;
   media_file: string;
   node_name: string;
-  protocol_lines: {
-    1: string;
-    2: string;
-    3: string;
-  };
   site: string;
   type: string;
   title: string;

src/components/MediaScene/Images.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useLevelStore, useMediaStore, useNodeStore } from "../../store";
 import { a, useSpring } from "@react-spring/three";
-import image_table from "../../resources/image_table.json";
-import { LevelType } from "../MainScene/Site";
+import { LevelType, SiteType } from "../MainScene/Site";
 import site_a from "../../resources/site_a.json";
 import dummy from "../../static/sprite/dummy.png";
 import * as THREE from "three";
@@ -32,17 +31,16 @@ const Images = () => {
   );
 
   useEffect(() => {
-    const nodeName = activeLevelData[activeNodeId].node_name;
-
-    const images = image_table[nodeName as keyof typeof image_table];
+    const images = (site_a as SiteType)[activeLevel][activeNodeId]
+      .image_table_indices;
 
     const imgArr: { default: string }[] = [];
-    Object.values(images).forEach((img) => {
-      import("../../static/media_images/site_a/" + img + ".png").then(
+    Object.entries(images).forEach((img) => {
+      import("../../static/media_images/a/" + img[1] + ".png").then(
         (imageSrc: { default: string }) => {
           // images are unordered by default so we insert them into the arr
           // according to their last char
-          imgArr.splice(parseInt(img.substr(img.length - 1)), 0, imageSrc);
+          imgArr.splice(parseInt(img[0]), 0, imageSrc);
           if (imgArr.length === 3) {
             setSceneImages(imgArr);
             new THREE.TextureLoader().load(imgArr[0].default, setActiveImage);
@@ -50,7 +48,7 @@ const Images = () => {
         }
       );
     });
-  }, [activeLevelData, activeNodeId]);
+  }, [activeLevel, activeLevelData, activeNodeId]);
 
   useEffect(() => {
     if (mediaPercentageElapsed === 0 && sceneImages[0]) {

src/components/MediaScene/MediaPlayer.tsx

@@ -1,14 +1,33 @@
-import React, { createRef, useCallback, useRef } from "react";
-import test from "../../static/movie/LAIN01.XA[18].ogg";
-import { useMediaStore, useSceneStore } from "../../store";
+import React, {
+  createRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import site_a from "../../resources/site_a.json";
+import {
+  useLevelStore,
+  useMediaStore,
+  useNodeStore,
+  useSceneStore,
+  useSiteStore,
+} from "../../store";
 import t from "../../static/webvtt/test.vtt";
+import { SiteType } from "../MainScene/Site";
 
 const MediaPlayer = () => {
+  const [mediaSource, setMediaSource] = useState<any>();
+
   const currentScene = useSceneStore((state) => state.currentScene);
   const setPercentageElapsed = useMediaStore(
     (state) => state.setPercentageElapsed
   );
 
+  const currentSite = useSiteStore((state) => state.currentSite);
+  const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
+  const activeLevel = useLevelStore((state) => state.activeLevel);
+
   const requestRef = useRef();
   const videoRef = createRef<HTMLVideoElement>();
 
@@ -25,12 +44,42 @@ const MediaPlayer = () => {
     }
   }, [setPercentageElapsed, videoRef]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     (requestRef.current as any) = requestAnimationFrame(updateTime);
     const curr = requestRef.current;
     return () => cancelAnimationFrame(curr as any);
   }, [updateTime]);
 
+  useEffect(() => {
+    if (currentScene === "media") {
+      const nodeMedia = (site_a 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();
+          }
+        });
+      }
+    }
+  }, [activeLevel, activeNodeId, currentScene, currentSite, videoRef]);
+
   return (
     <video
       width="800"
@@ -40,7 +89,7 @@ const MediaPlayer = () => {
       ref={videoRef}
       style={{ display: currentScene === "media" ? "block" : "none" }}
     >
-      <source src={test} />
+      <source src={mediaSource} />
       <track src={t} kind="captions" default />
     </video>
   );

src/components/MediaScene/Selectables/LeftSide.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import TriangularPrism from "./LeftSide/TriangularPrism";
 import Cube from "./LeftSide/Cube";
+import { useSpring, a } from "@react-spring/three";
 
 type LeftSideProps = {
   activeMediaComponent: string;
@@ -16,26 +17,87 @@ const LeftSide = (props: LeftSideProps) => {
   const cubesActive = props.activeMediaComponent === "exit";
   const trianglesActive = props.activeMediaComponent === "play";
 
+  const groupSpringConfig = useMemo(() => ({ duration: 500 }), []);
+  const groupSpringFinalDest = useMemo(
+    () => ({ posX: 0, posZ: 0, posY: 0 }),
+    []
+  );
+
+  const topFrontGroupPos = useSpring({
+    config: groupSpringConfig,
+    to: groupSpringFinalDest,
+    from: { posX: 4, posZ: 2, posY: 1 },
+  });
+
+  const bottomFrontGroupPos = useSpring({
+    config: groupSpringConfig,
+    to: groupSpringFinalDest,
+    from: { posX: 0, posZ: 2, posY: 0 },
+  });
+
+  const topBehindGroupPos = useSpring({
+    config: groupSpringConfig,
+    to: groupSpringFinalDest,
+    from: { posX: 0, posZ: -3, posY: 2 },
+  });
+
+  const bottomBehindGroupPos = useSpring({
+    config: groupSpringConfig,
+    to: groupSpringFinalDest,
+    from: { posX: 4, posZ: -2, posY: 1 },
+  });
+
   return (
     <group position={[0, 0, -3]}>
-      <Cube position={[-2.7, -1.6, 0.6]} active={cubesActive} />
-      <TriangularPrism position={[-3.5, -1.6, 0.6]} active={!trianglesActive} />
-      <Cube position={[-3.5, -0.9, 0.6]} active={cubesActive} />
-      <TriangularPrism position={[-2.7, -0.9, 0.6]} active={trianglesActive} />
-      <Cube position={[-3.5, -0.9, 1.2]} active={cubesActive} />
-      <TriangularPrism position={[-3.5, -1.6, 1.2]} active={trianglesActive} />
-
-      {/*main two*/}
-      <Cube
-        position={[-2.7, -1.6, 1.2]}
-        active={cubesActive}
-        selectable={true}
-      />
-      <TriangularPrism
-        position={[-2.7, -0.9, 1.2]}
-        active={trianglesActive}
-        selectable={true}
-      />
+      <a.group
+        position-x={bottomBehindGroupPos.posX}
+        position-z={bottomBehindGroupPos.posZ}
+        position-y={bottomBehindGroupPos.posY}
+      >
+        <Cube position={[-2.7, -1.6, 0.6]} active={cubesActive} />
+        <TriangularPrism
+          position={[-3.5, -1.6, 0.6]}
+          active={!trianglesActive}
+        />
+      </a.group>
+      <a.group
+        position-x={topBehindGroupPos.posX}
+        position-z={topBehindGroupPos.posZ}
+        position-y={topBehindGroupPos.posY}
+      >
+        <Cube position={[-3.5, -0.9, 0.6]} active={cubesActive} />
+        <TriangularPrism
+          position={[-2.7, -0.9, 0.6]}
+          active={trianglesActive}
+        />
+      </a.group>
+      <a.group
+        position-x={topFrontGroupPos.posX}
+        position-z={topFrontGroupPos.posZ}
+        position-y={topFrontGroupPos.posY}
+      >
+        <Cube position={[-3.5, -0.9, 1.2]} active={cubesActive} />
+        <TriangularPrism
+          position={[-2.7, -0.9, 1.2]}
+          active={trianglesActive}
+          selectable={true}
+        />
+      </a.group>
+      <a.group
+        position-x={bottomFrontGroupPos.posX}
+        position-z={bottomFrontGroupPos.posZ}
+        position-y={bottomFrontGroupPos.posY}
+      >
+        <Cube
+          position={[-2.7, -1.6, 1.2]}
+          active={cubesActive}
+          selectable={true}
+        />
+        <TriangularPrism
+          position={[-3.5, -1.6, 1.2]}
+          active={trianglesActive}
+        />
+      </a.group>
     </group>
   );
 };

src/components/MediaScene/Selectables/RightSide.tsx

@@ -1,16 +1,21 @@
 import React, { useCallback, useMemo } from "react";
-import { useMediaWordStore } from "../../../store";
+import { useLevelStore, useMediaWordStore, useNodeStore } from "../../../store";
 import Word from "./RightSide/Word";
 import { useSpring, a } from "@react-spring/three";
 import word_position_states from "../../../resources/word_position_states.json";
 import * as THREE from "three";
+import site_a from "../../../resources/site_a.json";
+import { SiteType } from "../../MainScene/Site";
 
 type RightSideProps = {
   activeMediaComponent: string;
 };
 
 const RightSide = (props: RightSideProps) => {
-  const words = useMediaWordStore((state) => state.words);
+  const activeLevel = useLevelStore((state) => state.activeLevel);
+  const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
+
+  const words = (site_a as SiteType)[activeLevel][activeNodeId].words;
 
   const posStateIdx = useMediaWordStore(
     (state) => state.posStateIdx
@@ -71,19 +76,19 @@ const RightSide = (props: RightSideProps) => {
         </line>
       </a.group>
       <Word
-        word={words[0]}
+        word={words[1]}
         posX={wordPositionStateSpring.fstWordPosX}
         posY={wordPositionStateSpring.fstWordPosY}
         active={props.activeMediaComponent === "fstWord"}
       />
       <Word
-        word={words[1]}
+        word={words[2]}
         posX={wordPositionStateSpring.sndWordPosX}
         posY={wordPositionStateSpring.sndWordPosY}
         active={props.activeMediaComponent === "sndWord"}
       />
       <Word
-        word={words[2]}
+        word={words[3]}
         posX={wordPositionStateSpring.thirdWordPosX}
         posY={wordPositionStateSpring.thirdWordPosY}
         active={props.activeMediaComponent === "thirdWord"}

src/core/StateManagers/NodeManager.tsx

@@ -8,31 +8,48 @@ const NodeManager = (props: StateManagerProps) => {
     (state) => state.setNodeMatrixIndices
   );
 
-  const animateActiveNodeThrow = useCallback(() => {
-    setActiveNodeState(true, "interactedWith");
+  const animateActiveNodeThrow = useCallback(
+    (siteRotY: number) => {
+      setActiveNodeState(true, "interactedWith");
 
-    setActiveNodeState(0.3, "posZ");
-    setActiveNodeState(0.9, "posX");
+      const calculateCoordsBasedOnRotation = (
+        x: number,
+        z: number,
+        rotation: number
+      ) => ({
+        x: x * Math.cos(rotation) - z * Math.sin(rotation),
+        z: x * Math.sin(rotation) + z * Math.cos(rotation),
+      });
 
-    setTimeout(() => {
-      setActiveNodeState(0.2, "posZ");
-      setActiveNodeState(0.5, "posX");
-    }, 800);
-    setTimeout(() => {
-      setActiveNodeState(1.55, "posX");
-      setActiveNodeState(-0.005, "rotZ");
-    }, 2600);
-    setTimeout(() => {
-      setActiveNodeState(2, "posZ");
-      setActiveNodeState(0, "posX");
-      setActiveNodeState(-0.5, "rotZ");
-    }, 2700);
+      const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
+      const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
+      const thirdCoordSet = calculateCoordsBasedOnRotation(1.55, 0.2, siteRotY);
+      const fourthCoordSet = calculateCoordsBasedOnRotation(0, 2, siteRotY);
 
-    setTimeout(() => {
-      setActiveNodeState(0, "rotZ");
-      setActiveNodeState(false, "interactedWith");
-    }, 3800);
-  }, [setActiveNodeState]);
+      setActiveNodeState(fstCoordSet.x, "posX");
+      setActiveNodeState(fstCoordSet.z, "posZ");
+
+      setTimeout(() => {
+        setActiveNodeState(sndCoordSet.x, "posX");
+        setActiveNodeState(sndCoordSet.z, "posZ");
+      }, 800);
+      setTimeout(() => {
+        setActiveNodeState(thirdCoordSet.x, "posX");
+        setActiveNodeState(-0.005, "rotZ");
+      }, 2600);
+      setTimeout(() => {
+        setActiveNodeState(fourthCoordSet.x, "posX");
+        setActiveNodeState(fourthCoordSet.z, "posZ");
+        setActiveNodeState(-0.5, "rotZ");
+      }, 2700);
+
+      setTimeout(() => {
+        setActiveNodeState(0, "rotZ");
+        setActiveNodeState(false, "interactedWith");
+      }, 3800);
+    },
+    [setActiveNodeState]
+  );
 
   const updateActiveNode = useCallback(
     (
@@ -61,7 +78,8 @@ const NodeManager = (props: StateManagerProps) => {
         matrixIdx: number;
         rowIdx: number;
         colIdx: number;
-      }
+      },
+      newSiteRotY: number
     ) => {
       switch (event) {
         case "site_up":
@@ -84,7 +102,7 @@ const NodeManager = (props: StateManagerProps) => {
         case "throw_node_sskn":
           return {
             action: animateActiveNodeThrow,
-            value: [0, true],
+            value: [newSiteRotY],
           };
       }
     },
@@ -96,11 +114,13 @@ const NodeManager = (props: StateManagerProps) => {
       const eventAction = props.eventState.event;
       const newActiveNodeId = props.eventState.newActiveNodeId;
       const newNodeMatrixIndices = props.eventState.newNodeMatrixIndices;
+      const newSiteRotY = props.eventState.newSiteRotY;
 
       const dispatchedObject = dispatchObject(
         eventAction,
         newActiveNodeId,
-        newNodeMatrixIndices
+        newNodeMatrixIndices,
+        newSiteRotY
       );
 
       if (dispatchedObject) {

src/core/mainSceneEventHandler.ts

@@ -51,7 +51,7 @@ const handleMainSceneEvent = (gameContext: any) => {
           newSitePosY = selectedNodeData.newSitePosY;
           newLevel = selectedNodeData.newLevel;
           newActiveHudId = selectedNodeData.newActiveHudId;
-          console.log(selectedNodeData.newActiveNodeId);
+
         }
 
         break;
@@ -70,6 +70,9 @@ const handleMainSceneEvent = (gameContext: any) => {
         switch (parseInt(nodeType)) {
           case 0:
           case 2:
+          case 4:
+          case 3:
+          case 5:
             event = eventAnimation + "media";
             newScene = "media";
             break;

src/resources/string_table.json

@@ -1,470 +0,0 @@
-{
-  "0": "electric wire",
-  "1": "sky",
-  "10": "chaos",
-  "100": "aggression",
-  "101": "decision ",
-  "102": "mind",
-  "103": "murder intent",
-  "104": "suicide",
-  "105": "necessity",
-  "107": "utilization",
-  "107": "obstacle",
-  "108": "be frightened",
-  "109": "birth",
-  "11": "prompt",
-  "110": "room",
-  "111": "never realize",
-  "112": "absent",
-  "113": "self-confidence",
-  "114": "absorption",
-  "115": "trance",
-  "116": "soothing",
-  "117": "primacy",
-  "118": "vain person",
-  "119": "impulse",
-  "12": "indifference",
-  "120": "useless",
-  "121": "will&existence",
-  "122": "lower half",
-  "123": "wish",
-  "124": "transfer",
-  "125": "open the nExt.",
-  "126": "black tea",
-  "127": "milk",
-  "128": "dislike",
-  "129": "consultation",
-  "13": "human being",
-  "130": "boast",
-  "131": "advice",
-  "132": "desire",
-  "133": "investigation",
-  "134": "relax",
-  "135": "friend",
-  "136": "secret",
-  "137": "doll",
-  "138": "be tired",
-  "139": "study",
-  "14": "noise",
-  "140": "worry",
-  "141": "melancholy",
-  "142": "sLf-persecution",
-  "143": "imagination",
-  "144": "understanding",
-  "145": "impossible",
-  "146": "laboratory",
-  "147": "danger",
-  "148": "A.hallucination",
-  "149": "sensitivity",
-  "15": "duty",
-  "150": "needless",
-  "151": "diary",
-  "152": "complaint",
-  "153": "ego",
-  "154": "special",
-  "155": "elusion",
-  "156": "deny",
-  "157": "fiction",
-  "158": "intrapsychic",
-  "159": "apology",
-  "16": "school",
-  "160": "glad",
-  "161": "birthday",
-  "162": "present",
-  "163": "eye",
-  "164": "delusion",
-  "165": "illness",
-  "166": "counselor",
-  "167": "hallucination",
-  "168": "stress",
-  "169": "normal",
-  "17": "silence",
-  "170": "favorable turn",
-  "171": "deterioration",
-  "172": "engagement",
-  "173": "drunk",
-  "174": "hairstyle",
-  "175": "charm",
-  "176": "seem ",
-  "177": "image",
-  "178": "explanation",
-  "179": "research",
-  "18": "smile",
-  "180": "remembrance",
-  "181": "retrieval",
-  "182": "resignation",
-  "183": "happiness",
-  "184": "identification",
-  "185": "experience",
-  "186": "misato",
-  "187": "idolize",
-  "188": "alienation",
-  "189": "missing self",
-  "19": "character",
-  "190": "immature",
-  "191": "sleepless",
-  "192": "function",
-  "193": "odd jobs",
-  "194": "treatise",
-  "195": "father",
-  "196": "existence",
-  "197": "proof",
-  "198": "fact",
-  "199": "private tutor",
-  "2": "recognition",
-  "20": "sanity",
-  "200": "kaori",
-  "201": "love",
-  "202": "area",
-  "203": "God",
-  "204": "rumor",
-  "205": "doubt",
-  "206": "lonely",
-  "207": "client",
-  "208": "family",
-  "209": "no problem",
-  "21": "home page",
-  "210": "negative",
-  "211": "impression",
-  "212": "symptom",
-  "213": "game",
-  "214": "complex",
-  "215": "pupil",
-  "216": "conflict",
-  "217": "hatred                 ",
-  "218": "purpose",
-  "219": "mother",
-  "22": "computer",
-  "220": "distrust",
-  "221": "faith",
-  "222": "interest",
-  "223": "object",
-  "224": "longing",
-  "225": "cheerful",
-  "226": "Dr.takashima",
-  "227": "harassment",
-  "228": "chief of bureau",
-  "229": "classmate",
-  "23": "psychomotor",
-  "230": "problem",
-  "231": "neutrality",
-  "232": "charge",
-  "233": "restoration",
-  "234": "ethics",
-  "235": "lead",
-  "236": "hysterics",
-  "237": "condition",
-  "238": "amnesia",
-  "239": "self-rating",
-  "24": "exercise",
-  "240": "look good on",
-  "241": "hunch",
-  "242": "tachibana",
-  "243": "answer",
-  "244": "scold",
-  "245": "habit",
-  "246": "glasses",
-  "247": "lover",
-  "248": "confession",
-  "249": "boredom",
-  "25": "be active",
-  "250": "makeup",
-  "251": "common",
-  "252": "wretched",
-  "253": "kyoko",
-  "254": "whereabouts",
-  "255": "distortion",
-  "256": "conversion",
-  "257": "touko",
-  "258": "library",
-  "259": "talk with",
-  "26": "memories",
-  "260": "come in sight",
-  "261": "tomokun",
-  "262": "alright",
-  "263": "boy",
-  "264": "natural",
-  "265": "abnormal",
-  "266": "dream",
-  "267": "anger",
-  "268": "sadness",
-  "269": "cold",
-  "27": "amusing",
-  "270": "cake",
-  "271": "reward",
-  "272": "breast",
-  "273": "sexuality",
-  "274": "note",
-  "275": "think",
-  "276": "prohibition",
-  "277": "souvenir",
-  "278": "unpleasant",
-  "279": "meanness",
-  "28": "recurrence",
-  "280": "solitude",
-  "281": "graduation",
-  "282": "expectation",
-  "283": "middle school",
-  "284": "neglect",
-  "285": "meaning",
-  "286": "NAVI",
-  "287": "network",
-  "288": "telephone",
-  "289": "trouble",
-  "29": "memory",
-  "290": "business trip",
-  "291": "seeing off",
-  "292": "business",
-  "293": "Mr.rabbit",
-  "294": "footprint",
-  "295": "mail",
-  "296": "open",
-  "297": "revenge",
-  "298": "regrettable",
-  "299": "peace of mind",
-  "3": "pretend",
-  "30": "bad atmosphere",
-  "300": "transfiguration",
-  "301": "agree",
-  "302": "extra. lesson",
-  "303": "violin",
-  "304": "together",
-  "305": "monopoly",
-  "306": "painting",
-  "307": "cause",
-  "308": "seek",
-  "309": "mystery",
-  "31": "accept",
-  "310": "delete",
-  "311": "pleasant",
-  "312": "constancy",
-  "313": "cUl.attraction",
-  "314": "motive",
-  "315": "money",
-  "316": "corporation",
-  "317": "awareness",
-  "318": "fall ill",
-  "319": "despair",
-  "32": "admiration",
-  "320": "cO.unconsious",
-  "321": "hesitation",
-  "322": "jealousy",
-  "323": "exchange",
-  "324": "disturbance",
-  "325": "harmful effects",
-  "326": "selfish",
-  "327": "news-group",
-  "328": "man",
-  "329": "woman",
-  "33": "abuse",
-  "330": "anonymous",
-  "331": "naturally",
-  "332": "plagiarism",
-  "333": "agreement",
-  "334": "wait for",
-  "335": "believe",
-  "336": "sorrow",
-  "337": "side",
-  "338": "magazine",
-  "339": "idea",
-  "34": "decision",
-  "340": "regret",
-  "341": "existence cause",
-  "342": "bed",
-  "343": "smell",
-  "344": "wired",
-  "345": "companion",
-  "346": "data",
-  "347": "observation",
-  "348": "address",
-  "349": "illusion",
-  "35": "excuse",
-  "350": "divorce",
-  "351": "hug",
-  "352": "cry",
-  "353": "parting",
-  "354": "weed",
-  "355": "swing",
-  "356": "grudge",
-  "357": "ant",
-  "358": "cracking",
-  "359": "renewal",
-  "36": "knowledge",
-  "360": "contact",
-  "361": "feature",
-  "362": "robot",
-  "363": "limitation",
-  "364": "evolution",
-  "365": "interspersed",
-  "366": "lie",
-  "367": "proto",
-  "368": "misunderstand",
-  "369": "parts",
-  "37": "life",
-  "370": "excitement",
-  "371": "home",
-  "372": "Oh my God.",
-  "373": "bug",
-  "374": "access",
-  "375": "mischief",
-  "376": "permission",
-  "377": "help",
-  "378": "nonsense",
-  "379": "notice",
-  "38": "pursuit",
-  "380": "police",
-  "381": "lain",
-  "382": "painful",
-  "383": "takeshi",
-  "384": "cool",
-  "385": "suppression",
-  "386": "diet",
-  "387": "as it is",
-  "388": "in the future",
-  "389": "care",
-  "39": "anxiety",
-  "390": "farewell",
-  "391": "congratulations",
-  "392": "treasure",
-  "393": "uneasiness",
-  "394": "leave alone",
-  "395": "harumi",
-  "396": "marriage",
-  "397": "kanako",
-  "398": "not satisfied",
-  "399": "sexual",
-  "4": "phenomenon",
-  "40": "intellectual",
-  "400": "unstable",
-  "401": "despise",
-  "402": "flower",
-  "403": "obscenity",
-  "404": "quiet",
-  "405": "lunch",
-  "406": "blessing",
-  "407": "envy",
-  "408": "yoshida",
-  "409": "health imple.",
-  "41": "sCh.avoidance",
-  "410": "point out",
-  "411": "RML",
-  "412": "ring",
-  "413": "control",
-  "414": "prayer",
-  "415": "betrayal",
-  "416": "persuasion",
-  "417": "DATA of CLN01",
-  "418": "authorized_il",
-  "419": "active_file:lv",
-  "42": "apprehension",
-  "420": "ftp/tl.S_server",
-  "421": "DATA of CLN-1",
-  "422": "DATA of CLN00",
-  "423": "101",
-  "424": "COUNSELING_REC.",
-  "425": "downloaded file",
-  "426": "DIAGNOSIS_CLN01",
-  "427": "DIAGNOSIS_CLN00",
-  "428": "RESEARCH_\"Ma\"",
-  "429": "ftp/poa_server",
-  "43": "environment",
-  "430": "NEWS_SHOW",
-  "431": "talking_F#00021",
-  "432": "talking_F#00381",
-  "433": "talking_F#01980",
-  "434": "talking_F#04522",
-  "435": "talking_F#10294",
-  "436": "talking_F#15413",
-  "437": "network_voices?",
-  "438": "anonymous_user",
-  "439": "***unknown",
-  "44": "individuation",
-  "440": "ftp/**%#\"673\"",
-  "441": "ftp/**76%373\"",
-  "442": "ftp/52\"**3\"",
-  "443": "ftp/%2\"53\"",
-  "444": "ftp/006%3",
-  "445": "ftp/*4451%\"",
-  "446": "ftp/789.235\"",
-  "447": "ftp/121.%%0",
-  "448": "ftp/078.123%\"",
-  "449": "ftp/\"\"%#808",
-  "45": "body",
-  "450": "RESEARCH_\"Ky\"",
-  "451": "decoded file:",
-  "452": "ftp/tl.L_server",
-  "453": "RESEARCH_\"Ka\"",
-  "454": "lain's_DIARY",
-  "455": "active_file:",
-  "456": "TOUKO's_DIARY",
-  "457": "decoded file:t",
-  "458": "",
-  "459": "nT APPLICATION",
-  "46": "look back on",
-  "460": "network tool",
-  "461": "changing site",
-  "462": " quarter of GP",
-  "463": "POLY-TAN PARTS",
-  "464": "mT up-date App.",
-  "465": "movie tool",
-  "466": "playing movie",
-  "467": "freeware",
-  "47": "instrument",
-  "48": "feeling",
-  "49": "oral",
-  "5": "state",
-  "50": "world",
-  "51": "psychiatrist",
-  "52": "psychotherapy",
-  "53": "prejudice",
-  "54": "favorite",
-  "55": "Posi_feelings",
-  "56": "difference",
-  "57": "try hard",
-  "58": "program",
-  "59": "counter",
-  "6": "be settled",
-  "60": "trap",
-  "61": "software",
-  "62": "technology",
-  "63": "variety",
-  "64": "record",
-  "65": "expression",
-  "66": "close",
-  "67": "will",
-  "68": "simplicity",
-  "69": "communication",
-  "7": "comparison",
-  "70": "therapy",
-  "71": "psychosis",
-  "72": "trial",
-  "73": "action",
-  "74": "conceal",
-  "75": "copy",
-  "76": "migration",
-  "77": "agent",
-  "78": "factory",
-  "79": "immortality",
-  "8": "position",
-  "80": "possible",
-  "81": "result",
-  "82": "tool",
-  "83": "Nega feelings",
-  "84": "EEG",
-  "85": "manufacture",
-  "86": "joint",
-  "87": "reaction",
-  "88": "compensation",
-  "89": "thought",
-  "9": "moving",
-  "90": "walk through",
-  "91": "patient",
-  "92": "time",
-  "93": "individuality",
-  "94": "greeting",
-  "95": "kind",
-  "96": "elegance",
-  "97": "personality",
-  "98": "regimen",
-  "99": "kill"
-}

src/scenes/MainScene.tsx

@@ -25,11 +25,6 @@ const MainScene = () => {
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
   const setActiveNodeHudId = useHudStore((state) => state.setId);
 
-  useEffect(() => {
-    setLainMoveState("standing");
-    setActiveNodeHudId("fg_hud_1");
-  }, [setActiveNodeHudId, setLainMoveState]);
-
   return (
     <perspectiveCamera position-z={3}>
       <Suspense fallback={null}>

src/scenes/MediaScene.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   useLevelSelectionStore,
   useLevelStore,
@@ -16,11 +16,11 @@ import { OrbitControls } from "@react-three/drei";
 import Images from "../components/MediaScene/Images";
 import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
 import MediumLetter from "../components/TextRenderer/MediumLetter";
-import { a } from "@react-spring/three";
 import site_a from "../resources/site_a.json";
 import { SiteType } from "../components/MainScene/Site";
 
 const MediaScene = () => {
+  const [textVisible, setTextVisible] = useState(false);
   const mediaComponentMatrixIndices = useMediaStore(
     (state) => state.componentMatrixIndices
   );
@@ -28,8 +28,9 @@ const MediaScene = () => {
   const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
   const activeLevel = useLevelStore((state) => state.activeLevel);
 
-  const activeNodeName = (site_a as SiteType)[activeLevel][activeNodeId]
-    .node_name;
+  const activeNodeData = (site_a as SiteType)[activeLevel][activeNodeId];
+  const activeNodeName = activeNodeData.node_name;
+  const activeNodeMedia = activeNodeData.media_file;
 
   const activeMediaComponent = useMediaStore(
     useCallback(
@@ -46,6 +47,13 @@ const MediaScene = () => {
   useEffect(() => {
     document.getElementsByTagName("canvas")[0].className =
       "media-scene-background";
+    setTimeout(() => {
+      setTextVisible(true);
+    }, 800);
+
+    return () => {
+      setTextVisible(false);
+    };
   }, []);
 
   return (
@@ -54,8 +62,6 @@ const MediaScene = () => {
         <OrbitControls />
         <pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
         <LeftSide activeMediaComponent={activeMediaComponent} />
-        <RightSide activeMediaComponent={activeMediaComponent} />
-        <AudioVisualizer />
         <group position={[0, 0.5, -3]}>
           <MediaLoadingBar />
           <NodeNameContainer />
@@ -66,11 +72,19 @@ const MediaScene = () => {
           ))}
         </group>
 
-        <group position={[0, 0, 0]}>
+        <group position={[0, 0, 0]} visible={textVisible}>
           <YellowTextRenderer />
         </group>
-        <Lof />
-        <Images />
+        {activeNodeMedia.includes("XA") ? (
+          <>
+            <AudioVisualizer />
+            <RightSide activeMediaComponent={activeMediaComponent} />
+            <Lof />
+            <Images />{" "}
+          </>
+        ) : (
+          <></>
+        )}
       </group>
     </perspectiveCamera>
   );

src/store.ts

@@ -58,6 +58,7 @@ type StarfieldState = {
 };
 
 type SiteState = {
+  currentSite: "a" | "b";
   transformState: {
     posY: number;
     rotY: number;
@@ -84,8 +85,6 @@ type MiddleRingState = {
 
 type MediaWordState = {
   posStateIdx: number;
-  words: string[];
-  setWords: (to: string[]) => void;
   setPosStateIdx: (to: number) => void;
   resetPosStateIdx: () => void;
 };
@@ -271,6 +270,7 @@ export const useStarfieldStore = create<StarfieldState>((set) => ({
 export const useSiteStore = create(
   combine(
     {
+      currentSite: "a",
       transformState: {
         posY: 0,
         rotY: 0,
@@ -372,10 +372,8 @@ export const useMediaStore = create(
 );
 
 export const useMediaWordStore = create<MediaWordState>((set) => ({
-  words: ["eye", "quiet", "hallucination"],
   posStateIdx: 1,
   setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
-  setWords: (to) => set(() => ({ words: to })),
   resetPosStateIdx: () => set(() => ({ posStateIdx: 1 })),
 }));
 
@@ -390,7 +388,7 @@ export const useSSknStore = create<SSknState>((set) => ({
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "media",
+  currentScene: "main",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));