From 3e62072a7be268fedf836c0013f8814c9c9955cc Mon Sep 17 00:00:00 2001 From: ad044 Date: Sat, 7 Nov 2020 23:23:29 +0400 Subject: [PATCH] rewriting boot scene in three --- src/App.tsx | 4 +- src/components/Boot.tsx | 286 ------------------ src/components/Boot/BootAccela.tsx | 37 +++ src/components/Boot/BootAnimation.tsx | 181 +++++++++++ .../StateManagers/BlueOrbHUDManager.tsx | 0 .../StateManagers/BlueOrbManager.tsx | 0 .../StateManagers/EventManager.tsx | 2 +- .../StateManagers/GreenTextManager.tsx | 0 .../StateManagers/LainManager.tsx | 0 .../StateManagers/LevelManager.tsx | 0 .../StateManagers/MediaComponentManager.tsx | 0 .../StateManagers/MediaElementManager.tsx | 0 .../StateManagers/MediaImageManager.tsx | 0 .../StateManagers/MediaWordManager.tsx | 0 .../StateManagers/MiddleRingManager.tsx | 0 .../StateManagers/SceneManager.tsx | 0 .../StateManagers/SiteManager.tsx | 0 .../StateManagers/YellowTextManager.tsx | 0 src/core/computeAction.ts | 2 +- src/core/mainSceneEventHandler.ts | 2 +- src/core/mediaSceneEventHandler.ts | 2 +- src/scenes/BootScene.tsx | 13 + src/scenes/GateScene.tsx | 4 +- src/store.ts | 2 +- 24 files changed, 241 insertions(+), 294 deletions(-) delete mode 100644 src/components/Boot.tsx create mode 100644 src/components/Boot/BootAccela.tsx create mode 100644 src/components/Boot/BootAnimation.tsx rename src/{components => core}/StateManagers/BlueOrbHUDManager.tsx (100%) rename src/{components => core}/StateManagers/BlueOrbManager.tsx (100%) rename src/{components => core}/StateManagers/EventManager.tsx (98%) rename src/{components => core}/StateManagers/GreenTextManager.tsx (100%) rename src/{components => core}/StateManagers/LainManager.tsx (100%) rename src/{components => core}/StateManagers/LevelManager.tsx (100%) rename src/{components => core}/StateManagers/MediaComponentManager.tsx (100%) rename src/{components => core}/StateManagers/MediaElementManager.tsx (100%) rename src/{components => core}/StateManagers/MediaImageManager.tsx (100%) rename src/{components => core}/StateManagers/MediaWordManager.tsx (100%) rename src/{components => core}/StateManagers/MiddleRingManager.tsx (100%) rename src/{components => core}/StateManagers/SceneManager.tsx (100%) rename src/{components => core}/StateManagers/SiteManager.tsx (100%) rename src/{components => core}/StateManagers/YellowTextManager.tsx (100%) create mode 100644 src/scenes/BootScene.tsx diff --git a/src/App.tsx b/src/App.tsx index 8374318..4fbf086 100644 --- a/src/App.tsx +++ b/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: , media: , gate: , + boot: , }; }, []); diff --git a/src/components/Boot.tsx b/src/components/Boot.tsx deleted file mode 100644 index 4e1d8c6..0000000 --- a/src/components/Boot.tsx +++ /dev/null @@ -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
-                tachibana.cos -
- connect : Contacting host
-                allen.la
- connect : host tachibana.cos
contacted Waiting for reply
- Socket 172 connection with port
number 2105 established
- Transfer Data from tachibana.cos
- Remote host closed socket -
- connect : Looking up host
-                tachibana.cos -
-                allen.la
- connect : host tachibana.cos
contacted Waiting for reply
- connect : Contacting host
- Remote host closed socket Transfer Data from tachibana.cos
- Socket 172 connection with port
number 2105 established
- connect : Looking up host
-                tachibana.cos -
-                allen.la
- connect : host tachibana.cos
contacted Waiting for reply
- connect : Contacting host
- Remote host closed socket connect : host tachibana.cos
contacted - Waiting for reply
- connect : Contacting host
- Transfer Data from tachibana.cos
- Socket 172 connection with port
number 2105 established
- - ); -}; - -type IntroProps = { - setMoveToGame: React.Dispatch>; -}; - -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( - <> -
connect :
-
- host tachibana.cos
contacted Waiting for reply -
- - ); - }, 2500); - - setTimeout(() => { - setLoadStatusState( - <> - Socket 172 connection with port
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( - <> -
connect :
-
- Looking up host
- tachibana.cos -
- - ); - - if (Math.random() >= 0.95) - setLoadStatusState( - <> -
connect :
-
- Contacting host
allen.lab -
- - ); - }; - - 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 ( - <> -

- -

-

- -

-
-
- {looping ? ( -
- loop -

- make -
- me -
- sad -

-
- ) : ( - <> -
- mask -
-
- logo -

- - Authorize User - -

- box -

- Load Data -

-
-
- Copyright (C) dango factory -
- between - special thanks : myu-myu -
-
-
-
- arrow -
-
- mISO-sevrer -
- sHIO-sevrer -
{" "} -
- {loadStatusState} -
-
-
-
- - )} - - ); -}; - -export default Boot; diff --git a/src/components/Boot/BootAccela.tsx b/src/components/Boot/BootAccela.tsx new file mode 100644 index 0000000..c8163e5 --- /dev/null +++ b/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 ( + <> + + + + + + + + ); +}; + +export default BootAccela; diff --git a/src/components/Boot/BootAnimation.tsx b/src/components/Boot/BootAnimation.tsx new file mode 100644 index 0000000..ecd7b8f --- /dev/null +++ b/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(); + const arrowRef = useRef(); + + 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 ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default BootAnimation; diff --git a/src/components/StateManagers/BlueOrbHUDManager.tsx b/src/core/StateManagers/BlueOrbHUDManager.tsx similarity index 100% rename from src/components/StateManagers/BlueOrbHUDManager.tsx rename to src/core/StateManagers/BlueOrbHUDManager.tsx diff --git a/src/components/StateManagers/BlueOrbManager.tsx b/src/core/StateManagers/BlueOrbManager.tsx similarity index 100% rename from src/components/StateManagers/BlueOrbManager.tsx rename to src/core/StateManagers/BlueOrbManager.tsx diff --git a/src/components/StateManagers/EventManager.tsx b/src/core/StateManagers/EventManager.tsx similarity index 98% rename from src/components/StateManagers/EventManager.tsx rename to src/core/StateManagers/EventManager.tsx index ebcbcd2..accb20a 100644 --- a/src/components/StateManagers/EventManager.tsx +++ b/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"; diff --git a/src/components/StateManagers/GreenTextManager.tsx b/src/core/StateManagers/GreenTextManager.tsx similarity index 100% rename from src/components/StateManagers/GreenTextManager.tsx rename to src/core/StateManagers/GreenTextManager.tsx diff --git a/src/components/StateManagers/LainManager.tsx b/src/core/StateManagers/LainManager.tsx similarity index 100% rename from src/components/StateManagers/LainManager.tsx rename to src/core/StateManagers/LainManager.tsx diff --git a/src/components/StateManagers/LevelManager.tsx b/src/core/StateManagers/LevelManager.tsx similarity index 100% rename from src/components/StateManagers/LevelManager.tsx rename to src/core/StateManagers/LevelManager.tsx diff --git a/src/components/StateManagers/MediaComponentManager.tsx b/src/core/StateManagers/MediaComponentManager.tsx similarity index 100% rename from src/components/StateManagers/MediaComponentManager.tsx rename to src/core/StateManagers/MediaComponentManager.tsx diff --git a/src/components/StateManagers/MediaElementManager.tsx b/src/core/StateManagers/MediaElementManager.tsx similarity index 100% rename from src/components/StateManagers/MediaElementManager.tsx rename to src/core/StateManagers/MediaElementManager.tsx diff --git a/src/components/StateManagers/MediaImageManager.tsx b/src/core/StateManagers/MediaImageManager.tsx similarity index 100% rename from src/components/StateManagers/MediaImageManager.tsx rename to src/core/StateManagers/MediaImageManager.tsx diff --git a/src/components/StateManagers/MediaWordManager.tsx b/src/core/StateManagers/MediaWordManager.tsx similarity index 100% rename from src/components/StateManagers/MediaWordManager.tsx rename to src/core/StateManagers/MediaWordManager.tsx diff --git a/src/components/StateManagers/MiddleRingManager.tsx b/src/core/StateManagers/MiddleRingManager.tsx similarity index 100% rename from src/components/StateManagers/MiddleRingManager.tsx rename to src/core/StateManagers/MiddleRingManager.tsx diff --git a/src/components/StateManagers/SceneManager.tsx b/src/core/StateManagers/SceneManager.tsx similarity index 100% rename from src/components/StateManagers/SceneManager.tsx rename to src/core/StateManagers/SceneManager.tsx diff --git a/src/components/StateManagers/SiteManager.tsx b/src/core/StateManagers/SiteManager.tsx similarity index 100% rename from src/components/StateManagers/SiteManager.tsx rename to src/core/StateManagers/SiteManager.tsx diff --git a/src/components/StateManagers/YellowTextManager.tsx b/src/core/StateManagers/YellowTextManager.tsx similarity index 100% rename from src/components/StateManagers/YellowTextManager.tsx rename to src/core/StateManagers/YellowTextManager.tsx diff --git a/src/core/computeAction.ts b/src/core/computeAction.ts index 6b079f5..51c165b 100644 --- a/src/core/computeAction.ts +++ b/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"; diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts index 2be0267..de176e2 100644 --- a/src/core/mainSceneEventHandler.ts +++ b/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"; diff --git a/src/core/mediaSceneEventHandler.ts b/src/core/mediaSceneEventHandler.ts index 6daf565..3c80fae 100644 --- a/src/core/mediaSceneEventHandler.ts +++ b/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; diff --git a/src/scenes/BootScene.tsx b/src/scenes/BootScene.tsx new file mode 100644 index 0000000..dcf0949 --- /dev/null +++ b/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 ( + + {/**/} + + + ); +}; +export default BootScene; diff --git a/src/scenes/GateScene.tsx b/src/scenes/GateScene.tsx index 7ea3b0f..9903d96 100644 --- a/src/scenes/GateScene.tsx +++ b/src/scenes/GateScene.tsx @@ -6,10 +6,10 @@ import GateMiddle from "../components/GateScene/GateMiddle"; const GateScene = () => { return ( - + - + ); }; diff --git a/src/store.ts b/src/store.ts index 5e4bc0c..71e36d0 100644 --- a/src/store.ts +++ b/src/store.ts @@ -380,7 +380,7 @@ export const useMediaWordStore = create((set) => ({ })); export const useSceneStore = create((set) => ({ - currentScene: "gate", + currentScene: "boot", setScene: (to) => set(() => ({ currentScene: to })), }));