diff --git a/src/components/Boot/BootAuthorizeUser.tsx b/src/components/Boot/BootAuthorizeUser.tsx index 8adae64..93957b1 100644 --- a/src/components/Boot/BootAuthorizeUser.tsx +++ b/src/components/Boot/BootAuthorizeUser.tsx @@ -8,7 +8,6 @@ import authorizeInactiveLetters from "../../static/sprite/authorize_inactive_let import authorizeActiveLetters from "../../static/sprite/authorize_active_letters.png"; import { useLoader } from "react-three-fiber"; import * as THREE from "three"; -import { useAuthorizeUserStore } from "../../store"; import { OrbitControls } from "@react-three/drei"; type BootAuthorizeUserProps = { @@ -42,19 +41,15 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => { authorizeActiveLetters ); - const backgroundLettersPos = useAuthorizeUserStore( - (state) => state.bgLettersPos - ); - const activeLetterTextureOffset = useAuthorizeUserStore( - (state) => state.activeLetterTextureOffset - ); + const backgroundLettersPos = 1; + const activeLetterTextureOffset = 2; const authorizeActiveLettersMap = useMemo(() => { authorizeActiveLettersTex.wrapT = authorizeActiveLettersTex.wrapS = THREE.RepeatWrapping; authorizeActiveLettersTex.repeat.set(0.06, 0.2); - authorizeActiveLettersTex.offset.x = activeLetterTextureOffset.x; - authorizeActiveLettersTex.offset.y = activeLetterTextureOffset.y; + authorizeActiveLettersTex.offset.x = 1; + authorizeActiveLettersTex.offset.y = 2; return authorizeActiveLettersTex; }, [activeLetterTextureOffset, authorizeActiveLettersTex]); @@ -129,7 +124,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => { { - const greenText = useStore((state) => - state.activeNode.title.split("") + const greenText = ["d", "i"]; + const activeRef = useRef(true); + const currentHudRef = useRef( + getNodeHud(useStore.getState().activeNodeMatrixIndices) + ); + const activeNodeMatrixIndices = useStore( + (state) => state.activeNodeMatrixIndices ); - const active = useStore((state) => Number(state.hudActive)); - const currentHud = useStore((state) => state.hud); - const hudElementState = useSpring({ - bigHUDPositionX: active, - longHUDPositionX: active, - boringHUDPositionX: active, - greenTextPositionX: active, - config: { duration: 400 }, + useFrame(() => { + if ( + longHudRef.current && + bigHudRef.current && + boringHudRef.current && + greenTextRef.current + ) { + longHudRef.current.position.x = lerp( + longHudRef.current.position.x, + !activeRef.current + ? currentHudRef.current.long.initial_position[0] + : currentHudRef.current.long.position[0], + 0.12 + ); + + boringHudRef.current.position.x = lerp( + boringHudRef.current.position.x, + !activeRef.current + ? currentHudRef.current.boring.initial_position[0] + : currentHudRef.current.boring.position[0], + 0.12 + ); + + bigHudRef.current.position.x = lerp( + bigHudRef.current.position.x, + !activeRef.current + ? currentHudRef.current.big.initial_position[0] + : currentHudRef.current.big.position[0], + 0.12 + ); + + greenTextRef.current.position.x = lerp( + greenTextRef.current.position.x, + !activeRef.current + ? currentHudRef.current.medium_text.initial_position[0] + : currentHudRef.current.medium_text.position[0], + 0.12 + ); + } }); - const bigHUDPosX = hudElementState.bigHUDPositionX.to( - [0, 1], - [currentHud.big.initial_position[0], currentHud.big.position[0]] - ); + useEffect(() => { + if (activeRef.current) { + activeRef.current = false; + setTimeout(() => { + const hud = getNodeHud(activeNodeMatrixIndices); + if ( + longHudRef.current && + bigHudRef.current && + boringHudRef.current && + greenTextRef.current + ) { + longHudRef.current.position.y = hud.long.position[1]; + boringHudRef.current.position.y = hud.boring.position[1]; + bigHudRef.current.position.y = hud.big.position[1]; + greenTextRef.current.position.y = hud.medium_text.position[1]; - const boringHUDPosX = hudElementState.boringHUDPositionX.to( - [0, 1], - [currentHud.boring.initial_position[0], currentHud.boring.position[0]] - ); + longHudRef.current.position.x = hud.long.initial_position[0]; + boringHudRef.current.position.x = hud.boring.initial_position[0]; + bigHudRef.current.position.x = hud.big.initial_position[0]; + greenTextRef.current.position.x = hud.medium_text.initial_position[0]; - const longHUDPosX = hudElementState.longHUDPositionX.to( - [0, 1], - [currentHud.long.initial_position[0], currentHud.long.position[0]] - ); + if (hud.mirrored) { + longHudRef.current.scale.x = -Math.abs(longHudRef.current.scale.x); + boringHudRef.current.scale.x = -Math.abs( + boringHudRef.current.scale.x + ); + bigHudRef.current.scale.x = -Math.abs(bigHudRef.current.scale.x); + } else { + longHudRef.current.scale.x = Math.abs(longHudRef.current.scale.x); + boringHudRef.current.scale.x = Math.abs( + boringHudRef.current.scale.x + ); + bigHudRef.current.scale.x = Math.abs(bigHudRef.current.scale.x); + } + currentHudRef.current = hud; + activeRef.current = true; + } + }, 500); + } + }, [activeNodeMatrixIndices]); - const greenTextPosX = hudElementState.greenTextPositionX.to( - [0, 1], - [ - currentHud.medium_text.initial_position[0], - currentHud.medium_text.position[0], - ] - ); + const longHudRef = useRef(); + const boringHudRef = useRef(); + const bigHudRef = useRef(); + const greenTextRef = useRef(); const longHudTex = useLoader(THREE.TextureLoader, longHud); - const longHudMirroredTex = useLoader(THREE.TextureLoader, longHudMirrored); - const boringHudTex = useLoader(THREE.TextureLoader, boringHud); - const boringHudMirroredTex = useLoader( - THREE.TextureLoader, - boringHudMirrored - ); - const bigHudTex = useLoader(THREE.TextureLoader, bigHud); - const bigHudMirroredTex = useLoader(THREE.TextureLoader, bigHudMirrored); - - const textures = useMemo( - () => - currentHud.mirrored === 0 - ? [longHudTex, boringHudTex, bigHudTex] - : [longHudMirroredTex, boringHudMirroredTex, bigHudMirroredTex], - [ - bigHudMirroredTex, - bigHudTex, - boringHudMirroredTex, - boringHudTex, - currentHud.mirrored, - longHudMirroredTex, - longHudTex, - ] - ); + // console.log("rend"); return ( - - + - - + - + - - + - + - - - {greenText.map((letter: string, idx: number) => ( - - ))} + + + ); diff --git a/src/components/TextRenderer/GreenTextRenderer.tsx b/src/components/TextRenderer/GreenTextRenderer.tsx new file mode 100644 index 0000000..7243cba --- /dev/null +++ b/src/components/TextRenderer/GreenTextRenderer.tsx @@ -0,0 +1,106 @@ +import { useLoader } from "react-three-fiber"; +import * as THREE from "three"; +import greenFont from "../../static/sprite/white_and_green_texture.png"; +import medium_font_json from "../../resources/font_data/medium_font.json"; +import { a } from "@react-spring/three"; +import React, { memo, useCallback, useMemo } from "react"; +import { useStore } from "../../store"; + +const GreenTextRenderer = memo(() => { + const textToRender = useStore( + useCallback( + (state) => + (state.currentScene === "main" + ? state.activeNode.title + : state.activeNode.node_name + ).split(""), + [] + ) + ); + + const colorTexture = useLoader(THREE.TextureLoader, greenFont); + + const getLineYOffset = (letter: string) => { + const lineOne = "ABCDEFGHIJKLMNOPQQRSTUVW"; + const lineTwo = "XYZ0123456789abcdefghij"; + const lineThree = "klmnopqrstuvwxyz,.*"; + + let lineNum: number; + if (letter === " ") { + lineNum = 5; + } else { + if (lineOne.includes(letter)) { + lineNum = 1; + } else if (lineTwo.includes(letter)) { + lineNum = 2; + } else if (lineThree.includes(letter)) { + lineNum = 3; + } else { + lineNum = 4; + } + } + + const offsets = { + 1: 0.355, + 2: 0.297, + 3: 0.238, + 4: 0.18, + 5: 1, + }; + return offsets[lineNum as keyof typeof offsets]; + }; + + const text = useMemo(() => { + const getGeom = (letter: string, letterData: number[]) => { + const geometry = new THREE.PlaneBufferGeometry(); + + const uvAttribute = geometry.attributes.uv; + + for (let i = 0; i < uvAttribute.count; i++) { + let u = uvAttribute.getX(i); + let v = uvAttribute.getY(i); + + u = (u * letterData[2]) / 256 + letterData[0] / 256; + + v = + (v * letterData[3]) / 136 + + getLineYOffset(letter) - + letterData[4] / 136; + + uvAttribute.setXY(i, u, v); + } + + return geometry; + }; + + return textToRender.map((letter, idx) => { + const letterData = + medium_font_json.glyphs[letter as keyof typeof medium_font_json.glyphs]; + const geom = getGeom(letter, letterData); + + return ( + + + + ); + }); + }, [colorTexture, textToRender]); + + console.log("rend"); + + return <>{text}; +}); + +export default GreenTextRenderer; diff --git a/src/components/TextRenderer/MediumLetter.tsx b/src/components/TextRenderer/MediumLetter.tsx deleted file mode 100644 index 497c4e8..0000000 --- a/src/components/TextRenderer/MediumLetter.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { useLoader } from "react-three-fiber"; -import * as THREE from "three"; -import greenFont from "../../static/sprite/white_and_green_texture.png"; -import medium_font_json from "../../resources/font_data/medium_font.json"; -import { a } from "@react-spring/three"; -import React, { useMemo, memo } from "react"; - -const MediumLetter = memo((props: { letter: string; letterIdx: number }) => { - const colorTexture = useLoader(THREE.TextureLoader, greenFont); - - const lineYOffset = useMemo(() => { - const lineOne = "ABCDEFGHIJKLMNOPQQRSTUVW"; - const lineTwo = "XYZ0123456789abcdefghij"; - const lineThree = "klmnopqrstuvwxyz,.*"; - - let lineNum: number; - if (props.letter === " ") { - lineNum = 5; - } else { - if (lineOne.includes(props.letter)) { - lineNum = 1; - } else if (lineTwo.includes(props.letter)) { - lineNum = 2; - } else if (lineThree.includes(props.letter)) { - lineNum = 3; - } else { - lineNum = 4; - } - } - - const offsets = { - 1: 0.355, - 2: 0.297, - 3: 0.238, - 4: 0.18, - 5: 1, - }; - return offsets[lineNum as keyof typeof offsets]; - }, [props.letter]); - - const letterData = useMemo( - () => - medium_font_json.glyphs[ - props.letter as keyof typeof medium_font_json.glyphs - ], - [props.letter] - ); - - const geom = useMemo(() => { - const geometry = new THREE.PlaneBufferGeometry(); - - const uvAttribute = geometry.attributes.uv; - - for (let i = 0; i < uvAttribute.count; i++) { - let u = uvAttribute.getX(i); - let v = uvAttribute.getY(i); - - u = (u * letterData[2]) / 256 + letterData[0] / 256; - - v = (v * letterData[3]) / 136 + lineYOffset - letterData[4] / 136; - - uvAttribute.setXY(i, u, v); - } - - return geometry; - }, [letterData, lineYOffset]); - - return ( - - - - ); -}); - -export default MediumLetter; diff --git a/src/core/StateManagers/BootSceneManagers/BootAuthorizeUserManager.tsx b/src/core/StateManagers/BootSceneManagers/BootAuthorizeUserManager.tsx deleted file mode 100644 index bd02558..0000000 --- a/src/core/StateManagers/BootSceneManagers/BootAuthorizeUserManager.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { useCallback, useEffect } from "react"; -import { StateManagerProps } from "../EventManager"; -import { useAuthorizeUserStore } from "../../../store"; - -const BootAuthorizeUserManager = (props: StateManagerProps) => { - const setActiveLetterTextureOffset = useAuthorizeUserStore( - (state) => state.setActiveLetterTexOffset - ); - const setBgLettersPos = useAuthorizeUserStore( - (state) => state.setBgLettersPos - ); - - const updateAuthorizeUser = useCallback( - ( - newBgLettersPos: { x: number; y: number }, - newActiveLetterTexOffset: { x: number; y: number } - ) => { - setActiveLetterTextureOffset(newActiveLetterTexOffset); - setBgLettersPos(newBgLettersPos); - }, - [setActiveLetterTextureOffset, setBgLettersPos] - ); - - const dispatchObject = useCallback( - ( - event: string, - newBgLettersPos: { x: number; y: number }, - newActiveLetterTexOffset: { x: number; y: number } - ) => { - switch (event) { - case "authorize_user_left": - case "authorize_user_up": - case "authorize_user_down": - case "authorize_user_right": - return { - action: updateAuthorizeUser, - value: [newBgLettersPos, newActiveLetterTexOffset], - }; - } - }, - [updateAuthorizeUser] - ); - - useEffect(() => { - if (props.eventState) { - const eventAction = props.eventState.event; - const newBgLettersPos = props.eventState.newBgLettersPos; - const newActiveLetterTexOffset = - props.eventState.newActiveLetterTexOffset; - - const dispatchedObject = dispatchObject( - eventAction, - newBgLettersPos, - newActiveLetterTexOffset - ); - if (dispatchedObject) { - dispatchedObject.action.apply(null, dispatchedObject.value as any); - } - } - }, [dispatchObject, props.eventState]); - return null; -}; - -export default BootAuthorizeUserManager; diff --git a/src/core/StateManagers/MainSceneManagers/NodeHUDManager.tsx b/src/core/StateManagers/MainSceneManagers/NodeHUDManager.tsx index 9e17632..7a515b3 100644 --- a/src/core/StateManagers/MainSceneManagers/NodeHUDManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/NodeHUDManager.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect } from "react"; import { useStore } from "../../../store"; import { StateManagerProps } from "../EventManager"; -import {HUDType} from "../../../components/MainScene/SyncedComponents/HUD"; +import { HUDType } from "../../../components/MainScene/SyncedComponents/HUD"; const NodeHUDManager = (props: StateManagerProps) => { const set = useStore((state) => state.setHud); @@ -19,18 +19,6 @@ const NodeHUDManager = (props: StateManagerProps) => { [set, toggleActive] ); - const changeNode = useCallback( - (hud: HUDType) => { - toggleActive(); - - setTimeout(() => { - set(hud); - toggleActive(); - }, 500); - }, - [set, toggleActive] - ); - const selectLevelAnimation = useCallback( (hud: HUDType) => { setTimeout(() => { @@ -52,11 +40,6 @@ const NodeHUDManager = (props: StateManagerProps) => { action: moveAndChangeNode, value: [eventState.hud], }; - case "change_node": - return { - action: changeNode, - value: [eventState.hud], - }; case "toggle_level_selection": case "level_selection_back": return { @@ -70,7 +53,7 @@ const NodeHUDManager = (props: StateManagerProps) => { }; } }, - [changeNode, moveAndChangeNode, selectLevelAnimation, toggleActive] + [moveAndChangeNode, selectLevelAnimation, toggleActive] ); useEffect(() => { diff --git a/src/core/utils/lerp.ts b/src/core/utils/lerp.ts new file mode 100644 index 0000000..9c433c3 --- /dev/null +++ b/src/core/utils/lerp.ts @@ -0,0 +1,3 @@ +const lerp = (x: number, y: number, a: number) => x * (1 - a) + y * a; + +export default lerp; diff --git a/src/scenes/MediaScene.tsx b/src/scenes/MediaScene.tsx index 47f1567..83f6abe 100644 --- a/src/scenes/MediaScene.tsx +++ b/src/scenes/MediaScene.tsx @@ -6,26 +6,12 @@ import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisua import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar"; import NodeNameContainer from "../components/MediaScene/NodeNameContainer"; import Images from "../components/MediaScene/Images"; -import MediumLetter from "../components/TextRenderer/MediumLetter"; +import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer"; import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator"; import MediaSceneEventManager from "../core/StateManagers/MediaSceneEventManager"; const MediaScene = () => { - const nodeNameText = useStore( - useCallback( - (state) => - state.activeNode.node_name - .split("") - .map((letter: string, idx: number) => ( - - )), - [] - ) - ); - - const activeNodeMedia = useStore( - (state) => state.activeNode.media_file - ); + const activeNodeMedia = useStore((state) => state.activeNode.media_file); useEffect(() => { document.getElementsByTagName("canvas")[0].className = @@ -46,7 +32,7 @@ const MediaScene = () => { - {nodeNameText} + diff --git a/src/store.ts b/src/store.ts index 4cb29a0..e670ab9 100644 --- a/src/store.ts +++ b/src/store.ts @@ -25,21 +25,6 @@ type SiteSaveState = { }; }; -export const useAuthorizeUserStore = create((set) => ({ - bgLettersPos: { - x: 3.35, - y: -0.7, - }, - activeLetterTextureOffset: { - x: 0, - y: -0.2, - }, - setBgLettersPos: (to: { x: number; y: number }) => - set(() => ({ bgLettersPos: to })), - setActiveLetterTexOffset: (to: { x: number; y: number }) => - set(() => ({ activeLetterTextureOffset: to })), -})); - type State = { currentScene: string;