diff --git a/src/components/MainScene/Pause.tsx b/src/components/MainScene/Pause.tsx index 5b03eec..0e2f1c7 100644 --- a/src/components/MainScene/Pause.tsx +++ b/src/components/MainScene/Pause.tsx @@ -3,16 +3,29 @@ import * as THREE from "three"; import PauseSquare from "./PauseSquare"; import StaticBigLetter from "../TextRenderer/StaticBigLetter"; import { usePauseStore } from "../../store"; +import { useLoader } from "react-three-fiber"; const Pause = (props: { visible: boolean }) => { - const [intro, setIntro] = useState(true); + const [showActiveComponent, setShowActiveComponent] = useState(false); const [animation, setAnimation] = useState(false); + const [intro, setIntro] = useState(true); + + const wordFont = useLoader(THREE.FontLoader, "/3d_fonts/MediaWord.blob"); + + const config = useMemo( + () => ({ + font: wordFont, + size: 2.5, + }), + [wordFont] + ); const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx); const activeComponent = usePauseStore( useCallback( - (state) => (intro ? "" : state.componentMatrix[componentMatrixIdx]), - [componentMatrixIdx, intro] + (state) => + showActiveComponent ? state.componentMatrix[componentMatrixIdx] : "", + [componentMatrixIdx, showActiveComponent] ) ); @@ -45,13 +58,21 @@ const Pause = (props: { visible: boolean }) => { setAnimation(true); }, 1000); setTimeout(() => { + setShowActiveComponent(true); setIntro(false); - }, 3000); + }, 3500); } + return () => { + setTimeout(() => { + setAnimation(false); + setIntro(true); + setShowActiveComponent(false); + }, 700); + }; }, [props.visible]); return animation ? ( - + {[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) => [0, 1, 2, 3, 4, 5, 6].map((col: number) => { if (rowIdx === 5 && col > 0 && col < 5) { @@ -67,6 +88,7 @@ const Pause = (props: { visible: boolean }) => { key={col} rowIdx={rowIdx} colIdx={col} + intro={intro} /> { colIdx={col} key={col} shouldDisappear={true} + intro={intro} /> ) : ( @@ -83,6 +106,7 @@ const Pause = (props: { visible: boolean }) => { colIdx={col} active={!(activeComponent === "load")} key={col} + intro={intro} /> ); } else if (rowIdx === 4 && col > 4 && col < 7) { @@ -98,6 +122,7 @@ const Pause = (props: { visible: boolean }) => { key={col} rowIdx={rowIdx} colIdx={col} + intro={intro} /> { colIdx={col} key={col} shouldDisappear={true} + intro={intro} /> ) : ( @@ -114,6 +140,7 @@ const Pause = (props: { visible: boolean }) => { colIdx={col} active={!(activeComponent === "about")} key={col} + intro={intro} /> ); } else if (rowIdx === 3 && col > 2 && col < 7) { @@ -129,6 +156,7 @@ const Pause = (props: { visible: boolean }) => { key={col} rowIdx={rowIdx} colIdx={col} + intro={intro} /> { colIdx={col} key={col} shouldDisappear={true} + intro={intro} /> ) : ( @@ -145,6 +174,7 @@ const Pause = (props: { visible: boolean }) => { colIdx={col} active={!(activeComponent === "change")} key={col} + intro={intro} /> ); } else if (rowIdx === 1 && col > 0 && col < 5) { @@ -160,6 +190,7 @@ const Pause = (props: { visible: boolean }) => { key={col} rowIdx={rowIdx} colIdx={col} + intro={intro} /> { colIdx={col} key={col} shouldDisappear={true} + intro={intro} /> ) : ( @@ -176,6 +208,7 @@ const Pause = (props: { visible: boolean }) => { colIdx={col} active={!(activeComponent === "save")} key={col} + intro={intro} /> ); } else if (rowIdx === 0 && col > 4 && col < 7) { @@ -191,6 +224,7 @@ const Pause = (props: { visible: boolean }) => { key={col} rowIdx={1} colIdx={col} + intro={intro} /> { colIdx={col} key={col} shouldDisappear={true} + intro={intro} /> ) : ( @@ -207,6 +242,7 @@ const Pause = (props: { visible: boolean }) => { colIdx={col} active={!(activeComponent === "exit")} key={col} + intro={intro} /> ); } else { @@ -217,6 +253,7 @@ const Pause = (props: { visible: boolean }) => { colIdx={col} key={col} active={true} + intro={intro} /> ); } @@ -281,6 +318,33 @@ const Pause = (props: { visible: boolean }) => { active={activeComponent === "exit"} /> ))} + + + + + + + + + + ) : ( <> diff --git a/src/components/MainScene/PauseSquare.tsx b/src/components/MainScene/PauseSquare.tsx index fa00946..02cfab9 100644 --- a/src/components/MainScene/PauseSquare.tsx +++ b/src/components/MainScene/PauseSquare.tsx @@ -1,9 +1,8 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; +import React, { useMemo } from "react"; import * as THREE from "three"; import { useLoader } from "react-three-fiber"; import pauseGrayBoxes from "../../static/sprite/pause_gray_boxes.png"; import { a, useSpring } from "@react-spring/three"; -import { CurveUtils } from "three"; import { usePauseStore } from "../../store"; type PauseSquareProps = { @@ -12,6 +11,7 @@ type PauseSquareProps = { geometry: THREE.PlaneBufferGeometry; active?: boolean; shouldDisappear?: boolean; + intro?: boolean; }; const PauseSquare = (props: PauseSquareProps) => { @@ -19,40 +19,6 @@ const PauseSquare = (props: PauseSquareProps) => { const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes); - const [intro, setIntro] = useState(true); - const [introAnimToggle, setIntroAnimToggle] = useState(false); - - const { introToggle } = useSpring({ - introToggle: Number(introAnimToggle), - config: { duration: 200 }, - }); - - const { toggle } = useSpring({ - toggle: Number(props.active), - config: { duration: 200 }, - }); - - const rotX = toggle.to([0, 1], [-Math.PI, exitAnimation ? 2.2 : 0]); - const rotY = toggle.to([0, 1], [Math.PI / 2, exitAnimation ? 2.2 : 0]); - - const introRotX = introToggle.to([0, 1], [Math.PI, 0]); - const introRotY = introToggle.to( - [0, 1], - [Math.PI, props.shouldDisappear ? Math.PI / 2 : 0] - ); - - useEffect(() => { - setTimeout(() => { - setTimeout(() => { - setIntroAnimToggle(true); - }, (props.rowIdx + props.colIdx) * 100); - - setTimeout(() => { - setIntro(false); - }, 1500); - }, 500); - }, [props.colIdx, props.rowIdx]); - const getExitAnimValue = useMemo(() => { let col, row; if (props.colIdx < 3) col = -1; @@ -69,36 +35,79 @@ const PauseSquare = (props: PauseSquareProps) => { const initialState = useSpring({ posX: props.colIdx / 2.8 + getExitAnimValue.col * (exitAnimation ? 2.2 : 0), posY: props.rowIdx / 2.8 + getExitAnimValue.row * (exitAnimation ? 2.2 : 0), + rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI, + rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2, rotZ: 0, from: { posX: 1.05, posY: 1.07, rotZ: -1 }, config: { duration: 500 }, }); + const shadowState = useSpring({ + posX: props.colIdx / 2.8 + getExitAnimValue.col * (exitAnimation ? 2.2 : 0), + posY: props.rowIdx / 2.8 + getExitAnimValue.row * (exitAnimation ? 2.2 : 0), + rotX: exitAnimation ? Math.PI / 2 : 0, + rotY: exitAnimation ? Math.PI / 2 : 0, + from: { posX: 1.05, posY: 1.07, rotZ: -1 }, + config: { duration: 500 }, + }); + + const introState = useSpring({ + rotX: 0, + rotY: props.shouldDisappear ? Math.PI / 2 : 0, + from: { rotX: Math.PI, rotY: Math.PI }, + delay: (props.rowIdx + props.colIdx) * 100 + 500, + config: { duration: 200 }, + }); + return ( - 3 ? -0.25 : 0.25, - props.rowIdx <= 3 ? -0.25 : 0.25, - 0, - ]} - rotation-x={intro ? introRotX : rotX} - rotation-y={intro ? introRotY : rotY} - rotation-z={initialState.rotZ} - > - 3 && props.rowIdx <= 3) || - (props.colIdx <= 3 && props.rowIdx > 3) - ? THREE.FrontSide - : THREE.BackSide - } - /> - + <> + 3 ? -0.25 : 0.25, + props.rowIdx <= 3 ? -0.25 : 0.25, + 0, + ]} + rotation-x={props.intro ? introState.rotX : initialState.rotX} + rotation-y={props.intro ? introState.rotY : initialState.rotY} + rotation-z={initialState.rotZ} + renderOrder={100} + > + 3 && props.rowIdx <= 3) || + (props.colIdx <= 3 && props.rowIdx > 3) + ? THREE.FrontSide + : THREE.BackSide + } + transparent={true} + depthTest={false} + /> + + + + + + + ); }; diff --git a/src/components/TextRenderer/StaticBigLetter.tsx b/src/components/TextRenderer/StaticBigLetter.tsx index 1149450..1159dfd 100644 --- a/src/components/TextRenderer/StaticBigLetter.tsx +++ b/src/components/TextRenderer/StaticBigLetter.tsx @@ -5,7 +5,7 @@ import * as THREE from "three"; import { useLoader } from "react-three-fiber"; import orange_font_json from "../../resources/font_data/big_font.json"; import { a, useSpring } from "@react-spring/three"; -import React, { useEffect, useMemo, useState } from "react"; +import React, { useMemo } from "react"; import { usePauseStore } from "../../store"; const StaticBigLetter = (props: { @@ -17,6 +17,7 @@ const StaticBigLetter = (props: { active: boolean; rowIdx?: number; colIdx?: number; + intro?: boolean; }) => { const exitAnimation = usePauseStore((state) => state.exitAnimation); @@ -96,11 +97,6 @@ const StaticBigLetter = (props: { return geometry; }, [letterData, lineYOffsets, props.letter]); - const { toggle } = useSpring({ - toggle: Number(props.active), - config: { duration: 200 }, - }); - const getExitAnimValue = useMemo(() => { let col = 0; let row = 0; @@ -115,34 +111,6 @@ const StaticBigLetter = (props: { } }, [props.colIdx, props.rowIdx]); - const rotX = toggle.to([0, 1], [-Math.PI, 0 + (exitAnimation ? 2.2 : 0)]); - const rotY = toggle.to([0, 1], [Math.PI / 2, 0 + (exitAnimation ? 2.2 : 0)]); - - const [intro, setIntro] = useState(!!(props.rowIdx && props.colIdx)); - const [introAnimToggle, setIntroAnimToggle] = useState(false); - - const { introToggle } = useSpring({ - introToggle: Number(introAnimToggle), - config: { duration: 200 }, - }); - - const introRotX = introToggle.to([0, 1], [Math.PI, 0]); - const introRotY = introToggle.to([0, 1], [Math.PI * 2, 0]); - - useEffect(() => { - setTimeout(() => { - if (props.rowIdx && props.colIdx) { - setTimeout(() => { - setIntroAnimToggle(true); - }, (props.rowIdx + props.colIdx) * 100); - - setTimeout(() => { - setIntro(false); - }, 1500); - } - }, 500); - }, [props.colIdx, props.rowIdx]); - const initialState = useSpring({ posX: props.position[0] + @@ -151,7 +119,17 @@ const StaticBigLetter = (props: { -letterData[4] / 50 + props.position[1] + (getExitAnimValue ? getExitAnimValue.row * (exitAnimation ? 2.2 : 0) : 0), - config: { duration: 800 }, + rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI, + rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2, + config: { duration: 500 }, + }); + + const introState = useSpring({ + rotX: 0, + rotY: 0, + from: { rotX: Math.PI, rotY: Math.PI * 2 }, + delay: (props.rowIdx! + props.colIdx!) * 100 + 500, + config: { duration: 200 }, }); return ( @@ -165,14 +143,16 @@ const StaticBigLetter = (props: { position-y={initialState.posY} scale={props.scale as [number, number, number]} geometry={geom} - rotation-x={intro ? introRotX : rotX} - rotation-y={intro ? introRotY : rotY} + rotation-x={props.intro ? introState.rotX : initialState.rotX} + rotation-y={props.intro ? introState.rotY : initialState.rotY} + renderOrder={100} > ); diff --git a/src/core/StateManagers/GreenTextManager.tsx b/src/core/StateManagers/GreenTextManager.tsx index 4e0f9ab..7350768 100644 --- a/src/core/StateManagers/GreenTextManager.tsx +++ b/src/core/StateManagers/GreenTextManager.tsx @@ -87,7 +87,6 @@ const GreenTextManager = (props: StateManagerProps) => { value: [newActiveNodeId, newLevel], }; case "toggle_level_selection": - case "toggle_pause": return { action: toggleActive, }; diff --git a/src/core/StateManagers/NodeHUDManager.tsx b/src/core/StateManagers/NodeHUDManager.tsx index abee1e2..fb612b0 100644 --- a/src/core/StateManagers/NodeHUDManager.tsx +++ b/src/core/StateManagers/NodeHUDManager.tsx @@ -57,7 +57,6 @@ const NodeHUDManager = (props: StateManagerProps) => { value: [targetNodeHudId], }; case "toggle_level_selection": - case "toggle_pause": return { action: toggleActive, }; diff --git a/src/core/StateManagers/PauseComponentManager.tsx b/src/core/StateManagers/PauseComponentManager.tsx index bf5946f..e6f9b66 100644 --- a/src/core/StateManagers/PauseComponentManager.tsx +++ b/src/core/StateManagers/PauseComponentManager.tsx @@ -22,6 +22,11 @@ const PauseComponentManager = (props: StateManagerProps) => { action: setExitAnimation, value: true, }; + case "toggle_pause": + return { + action: setExitAnimation, + value: false, + }; } }, [setComponentMatrixIdx, setExitAnimation] diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index 5004ec6..6512bf3 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -53,7 +53,7 @@ const MainScene = () => { - {/**/} + );