rewriting boot scene in three

src/App.tsx

@@ -6,9 +6,10 @@ import { Canvas } from "react-three-fiber";
 import Boot from "./components/Boot";
 import MediaPlayer from "./components/MediaScene/MediaPlayer";
 import MediaScene from "./scenes/MediaScene";
-import EventManager from "./components/StateManagers/EventManager";
+import EventManager from "./core/StateManagers/EventManager";
 import { useSceneStore } from "./store";
 import GateScene from "./scenes/GateScene";
+import BootScene from "./scenes/BootScene";
 
 const App = () => {
   const [moveToGame, setMoveToGame] = useState(false);
@@ -26,6 +27,7 @@ const App = () => {
       main: <MainScene />,
       media: <MediaScene />,
       gate: <GateScene />,
+      boot: <BootScene />,
     };
   }, []);
 

src/components/Boot.tsx

@@ -1,286 +0,0 @@
-import React, { useEffect, useState, useCallback } from "react";
-
-import networkLogo from "../static/sprite/network_os_logo.png";
-import introBox from "../static/sprite/gray_box.png";
-import introTextBetween from "../static/sprite/intro_text_thing.png";
-import introTextArrow from "../static/sprite/intro_text_arrow.png";
-import mask from "../static/sprite/load_screen_mask.png";
-import loop from "../static/sprite/loop.webp";
-
-import "../static/css/intro.css";
-
-// yes this thing is a mess ITS SUPPOSED TO BE MESSY OK
-const FirstMarq: React.FC = () => {
-  return (
-    <>
-      connect : Looking up host <br />
-      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tachibana.cos
-      <br />
-      connect : Contacting host <br />
-      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;allen.la <br />
-      connect : host tachibana.cos <br /> contacted Waiting for reply <br />
-      Socket 172 connection with port <br /> number 2105 established <br />
-      Transfer Data from tachibana.cos <br />
-      Remote host closed socket
-      <br />
-      connect : Looking up host <br />
-      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tachibana.cos
-      <br />
-      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;allen.la <br />
-      connect : host tachibana.cos <br /> contacted Waiting for reply <br />
-      connect : Contacting host <br />
-      Remote host closed socket Transfer Data from tachibana.cos <br />
-      Socket 172 connection with port <br /> number 2105 established <br />
-      connect : Looking up host <br />
-      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tachibana.cos
-      <br />
-      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;allen.la <br />
-      connect : host tachibana.cos <br /> contacted Waiting for reply <br />
-      connect : Contacting host <br />
-      Remote host closed socket connect : host tachibana.cos <br /> contacted
-      Waiting for reply <br />
-      connect : Contacting host <br />
-      Transfer Data from tachibana.cos <br />
-      Socket 172 connection with port <br /> number 2105 established <br />
-    </>
-  );
-};
-
-type IntroProps = {
-  setMoveToGame: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-const Boot = (props: IntroProps) => {
-  const [looping, setLooping] = useState(true);
-  const [isArrowUp, setIsArrowUp] = useState(true);
-
-  const [loadStatusState, setLoadStatusState] = useState(<></>);
-
-  const [introFinished, setIntroFinished] = useState(false);
-
-  const [delayedMarqShown, setDelayedMarqShown] = useState(false);
-
-  const [authorizeActive, setAuthorizeActive] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setLooping(false);
-    }, 1500);
-
-    setTimeout(() => {
-      setLoadStatusState(
-        <>
-          <div className="connect-container">connect : </div>
-          <div className="host-container">
-            host tachibana.cos <br /> contacted Waiting for reply
-          </div>
-        </>
-      );
-    }, 2500);
-
-    setTimeout(() => {
-      setLoadStatusState(
-        <>
-          Socket 172 connection with port <br /> number 2105 established
-        </>
-      );
-    }, 4500);
-
-    setTimeout(() => {
-      setLoadStatusState(<>Transfer Data from tachibana.cos</>);
-    }, 6500);
-
-    setTimeout(() => {
-      setLoadStatusState(<>Remote host closed socket</>);
-    }, 8500);
-
-    setTimeout(() => {
-      setIntroFinished(true);
-    }, 9500);
-    //9500
-
-    setTimeout(() => {
-      setDelayedMarqShown(true);
-    }, 11900);
-    //11900
-  }, []);
-
-  useEffect(() => {
-    const toggleArrowPos = () => {
-      if (Math.random() >= 0.5) setIsArrowUp(!isArrowUp);
-    };
-
-    const toggleServerText = () => {
-      if (Math.random() >= 0.3)
-        setLoadStatusState(
-          <>
-            <div className="connect-container">connect : </div>
-            <div className="host-container">
-              Looking up host <br />
-              tachibana.cos
-            </div>
-          </>
-        );
-
-      if (Math.random() >= 0.95)
-        setLoadStatusState(
-          <>
-            <div className="connect-container">connect : </div>
-            <div className="host-container">
-              Contacting host <br /> allen.lab
-            </div>
-          </>
-        );
-    };
-
-    const textInterval = setInterval(() => {
-      toggleArrowPos();
-      toggleServerText();
-    }, 50);
-
-    return () => clearInterval(textInterval);
-  }, [loadStatusState, isArrowUp]);
-
-  const handleUserKeyPress = useCallback(
-    (event) => {
-      const { keyCode } = event;
-
-      if (keyCode === 40 || keyCode === 38) {
-        setAuthorizeActive(!authorizeActive);
-      }
-      if (keyCode === 13) {
-        props.setMoveToGame(true);
-      }
-    },
-    [authorizeActive]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleUserKeyPress);
-
-    return () => {
-      window.removeEventListener("keydown", handleUserKeyPress);
-    };
-  }, [handleUserKeyPress]);
-
-  return (
-    <>
-      <p
-        className={
-          introFinished
-            ? "first-marquee-text animate-text-marquee-first"
-            : "hidden"
-        }
-      >
-        <FirstMarq />
-      </p>
-      <p
-        className={
-          delayedMarqShown
-            ? "first-marquee-text animate-text-marquee-first"
-            : "hidden"
-        }
-      >
-        <FirstMarq />
-      </p>
-      <div
-        className={
-          introFinished
-            ? "second-marquee-text animate-text-marquee-second"
-            : "hidden"
-        }
-      ></div>
-      <div
-        className={
-          delayedMarqShown
-            ? "second-marquee-text animate-text-marquee-second"
-            : "hidden"
-        }
-      ></div>
-      {looping ? (
-        <div className="intro-loop">
-          <img alt="loop" src={loop}></img>
-          <p>
-            make
-            <br />
-            me
-            <br />
-            sad
-          </p>
-        </div>
-      ) : (
-        <>
-          <div className={introFinished ? "hidden-fade-out-05s mask" : "mask"}>
-            <img alt="mask" src={mask} />
-          </div>
-          <div className="intro-load-screen">
-            <img
-              className={
-                introFinished ? "animate-to-top-right-1s logo" : "logo"
-              }
-              alt="logo"
-              src={networkLogo}
-            ></img>
-            <h1 className={introFinished ? "authorize" : "hidden"}>
-              <span className={authorizeActive ? "active" : ""}>
-                Authorize User
-              </span>
-            </h1>
-            <img
-              className={introFinished ? "animate-to-middle-1s box" : "box"}
-              alt="box"
-              src={introBox}
-            ></img>
-            <h1 className={introFinished ? "load" : "hidden"}>
-              <span className={authorizeActive ? "" : "active"}>Load Data</span>
-            </h1>
-            <div
-              className={
-                introFinished ? "hidden-fade-out-05s" : "box-background"
-              }
-            ></div>
-            <div
-              className={
-                introFinished
-                  ? "text-container-left hidden-fade-out-05s"
-                  : "text-container-left"
-              }
-            >
-              Copyright (C) dango factory
-              <br />
-              <img alt="between" src={introTextBetween}></img>
-              special thanks : myu-myu
-            </div>
-            <div
-              className={
-                introFinished
-                  ? "text-container-right hidden-fade-out-05s"
-                  : "text-container-right"
-              }
-            >
-              <div className="wrap-to-left">
-                <div className="arrow-container">
-                  <img
-                    style={{ transform: isArrowUp ? "translateY(-15px)" : "" }}
-                    src={introTextArrow}
-                    alt="arrow"
-                  ></img>
-                </div>
-                <div className="sevrer-container">
-                  mISO-sevrer
-                  <br />
-                  sHIO-sevrer
-                </div>{" "}
-                <br />
-                {loadStatusState}
-                <br />
-              </div>
-            </div>
-          </div>
-        </>
-      )}
-    </>
-  );
-};
-
-export default Boot;

src/components/Boot/BootAccela.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import accelaBootSpriteSheet from "../../static/sprite/login_intro_accela_spritesheet.png";
+import makeMeSad from "../../static/sprite/make_me_sad.png";
+import { useFrame, useLoader } from "react-three-fiber";
+import * as THREE from "three";
+import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
+
+const BootAccela = () => {
+  const accelaBootTex: any = useLoader(
+    THREE.TextureLoader,
+    accelaBootSpriteSheet
+  );
+  const makeMeSadTex = useLoader(THREE.TextureLoader, makeMeSad);
+
+  const [animator] = useState(() => {
+    const anim = new PlainAnimator(accelaBootTex, 10, 3, 29, 60);
+    anim.init(0);
+    return anim;
+  });
+
+  useFrame(() => {
+    animator.animate();
+  });
+
+  return (
+    <>
+      <sprite scale={[0.35, 0.6, 0.35]} position={[0, 0.2, 0]}>
+        <spriteMaterial attach="material" map={accelaBootTex} />
+      </sprite>
+      <sprite scale={[0.4, 0.6, 0.4]} position={[0, -0.5, 0]}>
+        <spriteMaterial attach="material" map={makeMeSadTex} />
+      </sprite>
+    </>
+  );
+};
+
+export default BootAccela;

src/components/Boot/BootAnimation.tsx

@@ -0,0 +1,181 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import bootLof from "../../static/sprite/boot_lof.png";
+import bootBottomBarLeft from "../../static/sprite/boot_bottom_bar_left.png";
+import bootBottomBarRight from "../../static/sprite/boot_bottom_bar_right.png";
+import bootPurpleSquare from "../../static/sprite/boot_purple_square.png";
+import bootGraySquare from "../../static/sprite/boot_gray_square.png";
+import bootDangoText from "../../static/sprite/dango_text.png";
+import bootMisoShio from "../../static/sprite/miso_shio.png";
+import bootArrows from "../../static/sprite/boot_arrows.png";
+import bootStatusTexts from "../../static/sprite/boot_status_texts.png";
+
+import { useFrame, useLoader } from "react-three-fiber";
+import { a, useSpring } from "@react-spring/three";
+import * as THREE from "three";
+
+const BootAnimation = () => {
+  const bootLofTex = useLoader(THREE.TextureLoader, bootLof);
+  const bootBottomBarLeftTex = useLoader(
+    THREE.TextureLoader,
+    bootBottomBarLeft
+  );
+  const bootBottomBarRightTex = useLoader(
+    THREE.TextureLoader,
+    bootBottomBarRight
+  );
+  const bootPurpleSquareTex = useLoader(THREE.TextureLoader, bootPurpleSquare);
+  const bootGraySquareTex = useLoader(THREE.TextureLoader, bootGraySquare);
+  const bootDangoTextTex = useLoader(THREE.TextureLoader, bootDangoText);
+  const bootMisoShioTex = useLoader(THREE.TextureLoader, bootMisoShio);
+  const bootArrowsTex = useLoader(THREE.TextureLoader, bootArrows);
+  const bootStatusTextsTex = useLoader(THREE.TextureLoader, bootStatusTexts);
+
+  const graySquareRef = useRef<THREE.SpriteMaterial>();
+  const arrowRef = useRef<THREE.Object3D>();
+
+  useFrame(() => {
+    if (graySquareRef.current) {
+      graySquareRef.current.rotation -= 0.1;
+    }
+    if (arrowRef.current && Date.now() % 5 === 0) {
+      arrowRef.current.position.y =
+        arrowRef.current.position.y === -1.04 ? -0.96 : -1.04;
+    }
+  });
+
+  const currentBootStatusTextTex = useMemo(() => {
+    bootStatusTextsTex.offset.y = 0.79;
+    bootStatusTextsTex.repeat.set(0.5, 0.2);
+    return bootStatusTextsTex;
+  }, [bootStatusTextsTex]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      currentBootStatusTextTex.offset.y = 0.528;
+    }, 900);
+
+    setTimeout(() => {
+      currentBootStatusTextTex.offset.y = 0.79;
+    }, 1200);
+
+    setTimeout(() => {
+      currentBootStatusTextTex.offset.y = 0.264;
+    }, 1500);
+
+    setTimeout(() => {
+      currentBootStatusTextTex.offset.y = 0.79;
+    }, 1600);
+
+    setTimeout(() => {
+      currentBootStatusTextTex.offset.x = 0.5;
+      currentBootStatusTextTex.offset.y = 0.264;
+    }, 2100);
+
+    setTimeout(() => {
+      currentBootStatusTextTex.offset.x = 0;
+      currentBootStatusTextTex.offset.y = 0.005;
+    }, 2400);
+
+    setTimeout(() => {
+      currentBootStatusTextTex.offset.y = 0.79;
+    }, 2500);
+
+    setTimeout(() => {
+      currentBootStatusTextTex.offset.x = 0.5;
+      currentBootStatusTextTex.offset.y = 0.005;
+      setBootOpacity(0);
+      setGraySquarePosY(0);
+      setLofPosX(1.3);
+      setLofPosY(1);
+    }, 4000);
+  }, [currentBootStatusTextTex.offset]);
+
+  const [bootOpacity, setBootOpacity] = useState(1);
+  const [graySquarePosY, setGraySquarePosY] = useState(-0.8);
+  const [lofPosX, setLofPosX] = useState(0);
+  const [lofPosY, setLofPosY] = useState(0);
+
+  const bootState = useSpring({
+    bootOpacity: bootOpacity,
+    config: { duration: 300 },
+  });
+
+  const positionState = useSpring({
+    graySquarePosY: graySquarePosY,
+    lofPosX: lofPosX,
+    lofPosY: lofPosY,
+    config: { duration: 600 },
+  });
+
+  return (
+    <>
+      <a.sprite
+        scale={[1.2, 0.4, 0]}
+        position-x={positionState.lofPosX}
+        position-y={positionState.lofPosY}
+      >
+        <spriteMaterial attach="material" map={bootLofTex} />
+      </a.sprite>
+      <sprite scale={[2.2, 0.66, 0]} position={[-1.1, -0.8, 0]}>
+        <a.spriteMaterial
+          attach="material"
+          map={bootBottomBarLeftTex}
+          opacity={bootState.bootOpacity}
+        />
+      </sprite>
+      <sprite scale={[2.2, 0.66, 0]} position={[1.1, -0.8, 0]}>
+        <a.spriteMaterial
+          attach="material"
+          map={bootBottomBarRightTex}
+          opacity={bootState.bootOpacity}
+        />
+      </sprite>
+      <sprite scale={[0.2, 0.2, 0]} position={[0, -0.8, 0]}>
+        <a.spriteMaterial
+          attach="material"
+          map={bootPurpleSquareTex}
+          opacity={bootState.bootOpacity}
+        />
+      </sprite>
+      <sprite scale={[1.4, 0.5, 0]} position={[-1.2, -1.17, 0]}>
+        <a.spriteMaterial
+          attach="material"
+          map={bootDangoTextTex}
+          opacity={bootState.bootOpacity}
+        />
+      </sprite>
+      <sprite scale={[0.6, 0.15, 0]} position={[0.9, -1, 0]}>
+        <a.spriteMaterial
+          attach="material"
+          map={bootMisoShioTex}
+          opacity={bootState.bootOpacity}
+        />
+      </sprite>
+      <sprite scale={[0.12, 0.06, 0]} position={[0.5, -0.96, 0]} ref={arrowRef}>
+        <a.spriteMaterial
+          attach="material"
+          map={bootArrowsTex}
+          opacity={bootState.bootOpacity}
+        />
+      </sprite>
+
+      <sprite scale={[1.4, 0.2, 0]} position={[1.15, -1.2, 0]}>
+        <a.spriteMaterial
+          attach="material"
+          map={currentBootStatusTextTex}
+          opacity={bootState.bootOpacity}
+        />
+      </sprite>
+
+      <a.sprite scale={[0.2, 0.2, 0]} position-y={positionState.graySquarePosY}>
+        <spriteMaterial
+          attach="material"
+          map={bootGraySquareTex}
+          ref={graySquareRef}
+        />
+      </a.sprite>
+    </>
+  );
+};
+
+export default BootAnimation;

src/core/StateManagers/EventManager.tsx

@@ -18,7 +18,7 @@ import MediaElementManager from "./MediaElementManager";
 import SceneManager from "./SceneManager";
 import YellowTextManager from "./YellowTextManager";
 import MediaImageManager from "./MediaImageManager";
-import computeAction from "../../core/computeAction";
+import computeAction from "../computeAction";
 import available_blue_orbs_on_projection from "../../resources/available_blue_orbs_on_projection.json";
 import LevelManager from "./LevelManager";
 

src/core/computeAction.ts

@@ -1,4 +1,4 @@
-import { GameContext } from "../components/StateManagers/EventManager";
+import { GameContext } from "./StateManagers/EventManager";
 import handleMainSceneEvent from "./mainSceneEventHandler";
 import handleMediaSceneEvent from "./mediaSceneEventHandler";
 

src/core/mainSceneEventHandler.ts

@@ -1,4 +1,4 @@
-import { GameContext } from "../components/StateManagers/EventManager";
+import { GameContext } from "./StateManagers/EventManager";
 import available_blue_orbs_on_projection from "../resources/available_blue_orbs_on_projection.json";
 import site_a from "../resources/site_a.json";
 

src/core/mediaSceneEventHandler.ts

@@ -1,4 +1,4 @@
-import { GameContext } from "../components/StateManagers/EventManager";
+import { GameContext } from "./StateManagers/EventManager";
 
 const handleMediaSceneEvent = (gameContext: GameContext) => {
   const keyPress = gameContext.keyPress;

src/scenes/BootScene.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import BootAccela from "../components/Boot/BootAccela";
+import BootAnimation from "../components/Boot/BootAnimation";
+
+const BootScene = () => {
+  return (
+    <perspectiveCamera position-z={3}>
+      {/*<BootAccela />*/}
+      <BootAnimation />
+    </perspectiveCamera>
+  );
+};
+export default BootScene;

src/scenes/GateScene.tsx

@@ -6,10 +6,10 @@ import GateMiddle from "../components/GateScene/GateMiddle";
 const GateScene = () => {
   return (
     <perspectiveCamera position-z={3}>
-      <OrbitControls />
       <pointLight intensity={5.2} color={0xffffff} position={[-2, 0, 0]} />
+      <OrbitControls />
       <GateSide />
-      <GateMiddle/>
+      <GateMiddle />
     </perspectiveCamera>
   );
 };

src/store.ts

@@ -380,7 +380,7 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "gate",
+  currentScene: "boot",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));