diff --git a/src/components/MainScene/SyncedComponents/HUD.tsx b/src/components/MainScene/SyncedComponents/HUD.tsx index e1af09c..f0d477f 100644 --- a/src/components/MainScene/SyncedComponents/HUD.tsx +++ b/src/components/MainScene/SyncedComponents/HUD.tsx @@ -67,49 +67,33 @@ const HUD = () => { ] ); - const spriteTypeToSprite = useMemo(()=> { + console.log('called') + const longHudTex = useLoader(THREE.TextureLoader, longHud); + const longHudMirroredTex = useLoader(THREE.TextureLoader, longHudMirrored); - - }, []) - - //todo - const spriteTypeToSprite = (spriteType: string, hudElement: string) => { - switch (spriteType) { - case "normal": - switch (hudElement) { - case "long": - return longHud; - case "boring": - return boringHud; - case "big": - return bigHud; - } - break; - case "mirrored": - switch (hudElement) { - case "big": - return bigHudMirrored; - case "long": - return longHudMirrored; - case "boring": - return boringHudMirrored; - } - } - }; - - const longHudTexture = useLoader( + const boringHudTex = useLoader(THREE.TextureLoader, boringHud); + const boringHudMirroredTex = useLoader( THREE.TextureLoader, - spriteTypeToSprite(currentHud.long.type, "long")! + boringHudMirrored ); - const longHudBoringTexture = useLoader( - THREE.TextureLoader, - spriteTypeToSprite(currentHud.boring.type, "boring")! - ); + const bigHudTex = useLoader(THREE.TextureLoader, bigHud); + const bigHudMirroredTex = useLoader(THREE.TextureLoader, bigHudMirrored); - const bigHudTexture = useLoader( - THREE.TextureLoader, - spriteTypeToSprite(currentHud.big.type, "big")! + const textures = useMemo( + () => + currentHud.mirrored === 0 + ? [longHudTex, boringHudTex, bigHudTex] + : [longHudMirroredTex, boringHudMirroredTex, bigHudMirroredTex], + [ + bigHudMirroredTex, + bigHudTex, + boringHudMirroredTex, + boringHudTex, + currentHud.mirrored, + longHudMirroredTex, + longHudTex, + ] ); return ( @@ -123,7 +107,7 @@ const HUD = () => { > @@ -137,7 +121,7 @@ const HUD = () => { > @@ -151,7 +135,7 @@ const HUD = () => { > diff --git a/src/components/MainScene/SyncedComponents/Site.tsx b/src/components/MainScene/SyncedComponents/Site.tsx index 92a930d..dc419ad 100644 --- a/src/components/MainScene/SyncedComponents/Site.tsx +++ b/src/components/MainScene/SyncedComponents/Site.tsx @@ -12,6 +12,7 @@ import Rings from "./Site/Rings"; import site_a from "../../../resources/site_a.json"; import site_b from "../../../resources/site_b.json"; import game_progress from "../../../resources/initial_progress.json"; +import NodeAnimations from "./Site/NodeAnimations"; export type NodeDataType = { image_table_indices: { 1: string; 2: string; 3: string }; @@ -101,6 +102,7 @@ const Site = (props: SiteProps) => { siteData={siteData} gameProgress={gameProgress} /> + { if (isNodeVisible(node[0], props.gameProgress, props.currentSite)) { return ( { +const InactiveLevelNodes = memo((props: NodesProps) => { const visibleNodes = useMemo(() => { const obj = {}; const activeLevelNr = parseInt(props.activeLevel); @@ -28,7 +28,7 @@ const InactiveLevelNodes = (props: NodesProps) => { if (isNodeVisible(node[0], props.gameProgress, props.currentSite)) { return ( { })} ); -}; +}); export default InactiveLevelNodes; diff --git a/src/components/MainScene/SyncedComponents/Site/Node.tsx b/src/components/MainScene/SyncedComponents/Site/Node.tsx index 6e55070..e51ae76 100644 --- a/src/components/MainScene/SyncedComponents/Site/Node.tsx +++ b/src/components/MainScene/SyncedComponents/Site/Node.tsx @@ -1,33 +1,26 @@ -import React, { useEffect, useMemo, useRef, memo } from "react"; +import React, { memo, useEffect, useMemo, useRef } from "react"; import { useFrame, useLoader } from "react-three-fiber"; 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"; -import CouGold from "../../../../static/sprite/Cou_gold.png"; import Dc from "../../../../static/sprite/Dc.png"; import DcActive from "../../../../static/sprite/Dc_active.png"; -import DcGold from "../../../../static/sprite/Dc_gold.png"; import SSkn from "../../../../static/sprite/SSkn.png"; import SSKnActive from "../../../../static/sprite/SSkn_active.png"; -import SSKnGold from "../../../../static/sprite/SSkn_gold.png"; import Tda from "../../../../static/sprite/Tda.png"; import TdaActive from "../../../../static/sprite/Tda_active.png"; -import TdaGold from "../../../../static/sprite/Tda_gold.png"; import Dia from "../../../../static/sprite/Dia.png"; import DiaActive from "../../../../static/sprite/Dia_active.png"; -import DiaGold from "../../../../static/sprite/Dia_gold.png"; import Lda from "../../../../static/sprite/Lda.png"; import LdaActive from "../../../../static/sprite/Lda_active.png"; -import LdaGold from "../../../../static/sprite/Lda_gold.png"; import MULTI from "../../../../static/sprite/MULTI.png"; import MULTIActive from "../../../../static/sprite/MULTI_active.png"; -import MULTIGold from "../../../../static/sprite/MULTI_gold.png"; import level_y_values from "../../../../resources/level_y_values.json"; import { useNodeStore } from "../../../../store"; type NodeContructorProps = { - sprite: string; + nodeName: string; position: number[]; rotation: number[]; active?: boolean; @@ -40,40 +33,41 @@ const Node = memo((props: NodeContructorProps) => { // so we import all of them here and then use this function to // associate a sprite with the path - const spriteToPath = (sprite: string) => { - if (sprite.includes("S")) { - return [SSkn, SSKnActive, SSKnGold]; + const tex = useMemo(() => { + if (props.nodeName.includes("S")) { + return [SSkn, SSKnActive]; } else if ( - sprite.startsWith("P") || - sprite.startsWith("G") || - sprite.includes("?") + props.nodeName.startsWith("P") || + props.nodeName.startsWith("G") || + props.nodeName.includes("?") ) { - return [MULTI, MULTIActive, MULTIGold]; - } else if (sprite.includes("Dc")) { - return [Dc, DcActive, DcGold]; + return [MULTI, MULTIActive]; + } else if (props.nodeName.includes("Dc")) { + return [Dc, DcActive]; } else { - const spriteAssocs = { - Tda: [Tda, TdaActive, TdaGold], - Cou: [Cou, CouActive, CouGold], - Dia: [Dia, DiaActive, DiaGold], - Lda: [Lda, LdaActive, LdaGold], - Ere: [MULTI, MULTIActive, MULTIGold], - Ekm: [MULTI, MULTIActive, MULTIGold], - Eda: [MULTI, MULTIActive, MULTIGold], - TaK: [MULTI, MULTIActive, MULTIGold], - Env: [MULTI, MULTIActive, MULTIGold], - }; - - return spriteAssocs[sprite.substr(0, 3) as keyof typeof spriteAssocs]; + switch (props.nodeName.substr(0, 3)) { + case "Tda": + return [Tda, TdaActive]; + case "Cou": + return [Cou, CouActive]; + case "Dia": + return [Dia, DiaActive]; + case "Lda": + return [Lda, LdaActive]; + case "Ere": + case "Ekm": + case "Eda": + case "TaK": + case "Env": + return [MULTI, MULTIActive]; + } } - }; + }, [props.nodeName]); const materialRef = useRef(); - const sprite = spriteToPath(props.sprite); - - const nonActiveTexture = useLoader(THREE.TextureLoader, sprite[0]); - const activeTexture = useLoader(THREE.TextureLoader, sprite[1]); + const nonActiveTexture = useLoader(THREE.TextureLoader, tex![0]); + const activeTexture = useLoader(THREE.TextureLoader, tex![1]); const uniforms = useMemo( () => ({ @@ -180,8 +174,6 @@ const Node = memo((props: NodeContructorProps) => { } }); - console.log("rendered"); - return ( { + const nodeShrinking = useNodeStore( + (state) => state.activeNodeState.shrinking + ); + + const nodeExploding = useNodeStore( + (state) => state.activeNodeState.exploding + ); + + return ( + <> + {nodeExploding ? : <>} + {nodeShrinking ? : <>} + + ); +}; + +export default NodeAnimations; diff --git a/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx b/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx index 225f34a..4e84b91 100644 --- a/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx +++ b/src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx @@ -24,6 +24,13 @@ import { import site_a from "../../../../../../resources/site_a.json"; import site_b from "../../../../../../resources/site_b.json"; import { SiteType } from "../../../Site"; +import SSKnActive from "../../../../../../static/sprite/SSkn_active.png"; +import MULTIActive from "../../../../../../static/sprite/MULTI_active.png"; +import DcActive from "../../../../../../static/sprite/Dc_active.png"; +import TdaActive from "../../../../../../static/sprite/Tda_active.png"; +import CouActive from "../../../../../../static/sprite/Cou_active.png"; +import DiaActive from "../../../../../../static/sprite/Dia_active.png"; +import LdaActive from "../../../../../../static/sprite/Lda_active.png"; type GLTFResult = GLTF & { nodes: { @@ -51,40 +58,41 @@ const GoldNode = (props: GoldNodeProps) => { const activeNodeData = (siteData as SiteType)[activeLevel][activeNodeId]; const activeNodeName = activeNodeData.node_name; - const activeNodeNameToPath = useMemo(() => { + const tex = useMemo(() => { if (activeNodeName.includes("S")) { - return [SSkn, SSKnGold]; + return [SSkn, SSKnActive]; } else if ( activeNodeName.startsWith("P") || activeNodeName.startsWith("G") || activeNodeName.includes("?") ) { - return [MULTI, MULTIGold]; + return [MULTI, MULTIActive]; } else if (activeNodeName.includes("Dc")) { - return [Dc, DcGold]; + return [Dc, DcActive]; } else { - const activeNodeNameAssocs = { - Tda: [Tda, TdaGold], - Cou: [Cou, CouGold], - Dia: [Dia, DiaGold], - Lda: [Lda, LdaGold], - Ere: [MULTI, MULTIGold], - Ekm: [MULTI, MULTIGold], - Eda: [MULTI, MULTIGold], - TaK: [MULTI, MULTIGold], - Env: [MULTI, MULTIGold], - }; - - return activeNodeNameAssocs[ - activeNodeName.substr(0, 3) as keyof typeof activeNodeNameAssocs - ]; + switch (activeNodeName.substr(0, 3)) { + case "Tda": + return [Tda, TdaActive]; + case "Cou": + return [Cou, CouActive]; + case "Dia": + return [Dia, DiaActive]; + case "Lda": + return [Lda, LdaActive]; + case "Ere": + case "Ekm": + case "Eda": + case "TaK": + case "Env": + return [MULTI, MULTIActive]; + } } }, [activeNodeName]); const r = useRef(); - const regularTex = useLoader(THREE.TextureLoader, activeNodeNameToPath[0]); - const goldTex = useLoader(THREE.TextureLoader, activeNodeNameToPath[1]); + const regularTex = useLoader(THREE.TextureLoader, tex![0]); + const goldTex = useLoader(THREE.TextureLoader, tex![1]); useEffect(() => { if (r.current && !props.visible) { @@ -101,6 +109,7 @@ const GoldNode = (props: GoldNodeProps) => { } }); + return ( { mainSubscene !== "level_selection" ) { if (now > timePassedSinceLastKeyPress.current + 5000) { - setEventState({ - event: "play_idle_media", - scene: "idle_media", - site: currentSite, - }); - timePassedSinceLastKeyPress.current = -1; + // setEventState({ + // event: "play_idle_media", + // scene: "idle_media", + // site: currentSite, + // }); + // timePassedSinceLastKeyPress.current = -1; } else if (now > timePassedSinceLastKeyPress.current + 10000) { const moves = [ "prayer", diff --git a/src/resources/node_huds.json b/src/resources/node_huds.json index 258f35f..9c9f50f 100644 --- a/src/resources/node_huds.json +++ b/src/resources/node_huds.json @@ -1,18 +1,16 @@ { "fg_hud_1": { + "mirrored": 0, "long": { "position": [-0.45, 0.15, -8.6], - "type": "normal", "initial_position": [-1.45, 0.15, -8.6] }, "boring": { "position": [0.48, 0.174, -8.6], - "type": "normal", "initial_position": [1.48, 0.174, -8.6] }, "big": { "position": [0.36, 0.13, -8.6], - "type": "normal", "initial_position": [1.36, 0.13, -8.6] }, "big_text": [-0.35, 0.23, -8.7], @@ -22,19 +20,17 @@ } }, "fg_hud_2": { + "mirrored": 0, "long": { "position": [-0.45, -0.09, -8.6], - "type": "normal", "initial_position": [-1.45, -0.09, -8.6] }, "boring": { "position": [0.5, -0.07, -8.6], - "type": "normal", "initial_position": [1.5, -0.07, -8.6] }, "big": { "position": [0.35, -0.12, -8.6], - "type": "normal", "initial_position": [1.35, -0.12, -8.6] }, "big_text": [-0.35, -0.05, -8.7], @@ -44,19 +40,17 @@ } }, "fg_hud_3": { + "mirrored": 0, "long": { "position": [-0.45, -0.32, -8.6], - "type": "normal", "initial_position": [-1.43, -0.3, -8.6] }, "boring": { "position": [0.51, -0.3, -8.6], - "type": "normal", "initial_position": [1.51, -0.3, -8.6] }, "big": { "position": [0.3, -0.28, -8.6], - "type": "normal", "initial_position": [1.3, -0.12, -8.6] }, "big_text": [-0.35, -0.32, -8.7], @@ -66,19 +60,17 @@ } }, "fg_hud_4": { + "mirrored": 1, "long": { "position": [0.85, 0.18, -8.6], - "type": "mirrored", "initial_position": [1.85, 0.18, -8.6] }, "boring": { "position": [-0.11, 0.2, -8.6], - "type": "mirrored", "initial_position": [-1.11, 0.2, -8.6] }, "big": { "position": [-0.35, 0.155, -8.6], - "type": "mirrored", "initial_position": [-1.35, 0.155, -8.6] }, "big_text": [0.45, 0.265, -8.7], @@ -88,19 +80,17 @@ } }, "fg_hud_5": { + "mirrored": 1, "long": { "position": [0.85, -0.09, -8.6], - "type": "mirrored", "initial_position": [1.85, -0.09, -8.6] }, "boring": { "position": [-0.11, -0.07, -8.6], - "type": "mirrored", "initial_position": [-1.11, -0.07, -8.6] }, "big": { "position": [-0.35, -0.12, -8.6], - "type": "mirrored", "initial_position": [-1.35, -0.12, -8.6] }, "big_text": [0.45, -0.05, -8.7], @@ -110,19 +100,17 @@ } }, "fg_hud_6": { + "mirrored": 1, "long": { "position": [0.78, -0.32, -8.6], - "type": "mirrored", "initial_position": [1.78, -0.32, -8.6] }, "boring": { "position": [-0.11, -0.3, -8.6], - "type": "mirrored", "initial_position": [-1.11, -0.3, -8.6] }, "big": { "position": [-0.25, -0.28, -8.6], - "type": "mirrored", "initial_position": [-1.25, -0.28, -8.6] }, "big_text": [0.45, -0.32, -8.7], @@ -132,19 +120,17 @@ } }, "bg_hud_1": { + "mirrored": 0, "long": { "position": [-0.3, 0.04, -8.6], - "type": "normal", "initial_position": [-1.3, 0.02, -8.6] }, "boring": { "position": [0.6, 0.06, -8.6], - "type": "normal", "initial_position": [1.6, 0.038, -8.6] }, "big": { "position": [0.3, 0.015, -8.6], - "type": "normal", "initial_position": [1.3, 0, -8.6] }, "big_text": [-0.15, 0.1, -8.7], @@ -154,19 +140,17 @@ } }, "bg_hud_2": { + "mirrored": 0, "long": { "position": [-0.3, -0.07, -8.6], - "type": "normal", "initial_position": [-1.35, -0.09, -8.6] }, "boring": { "position": [0.6, -0.05, -8.6], - "type": "normal", "initial_position": [1.6, -0.07, -8.6] }, "big": { "position": [0.3, -0.1, -8.6], - "type": "normal", "initial_position": [1.35, -0.12, -8.6] }, "big_text": [-0.15, -0.03, -8.7], @@ -176,19 +160,17 @@ } }, "bg_hud_3": { + "mirrored": 0, "long": { "position": [-0.3, -0.19, -8.6], - "type": "normal", "initial_position": [-1.35, -0.19, -8.6] }, "boring": { "position": [0.6, -0.17, -8.6], - "type": "normal", "initial_position": [1.6, -0.17, -8.6] }, "big": { "position": [0.3, -0.22, -8.6], - "type": "normal", "initial_position": [1.35, -0.22, -8.6] }, "big_text": [-0.15, -0.17, -8.7], @@ -198,19 +180,17 @@ } }, "bg_hud_4": { + "mirrored": 1, "long": { "position": [0.63, 0.04, -8.6], - "type": "mirrored", "initial_position": [1.63, 0.04, -8.6] }, "boring": { "position": [-0.28, 0.06, -8.6], - "type": "mirrored", "initial_position": [-1.28, 0.06, -8.6] }, "big": { "position": [-0.35, 0.015, -8.6], - "type": "mirrored", "initial_position": [-1.35, 0.015, -8.6] }, "big_text": [0.2, 0.1, -8.7], @@ -220,19 +200,17 @@ } }, "bg_hud_5": { + "mirrored": 1, "long": { "position": [0.65, -0.07, -8.6], - "type": "mirrored", "initial_position": [1.65, -0.09, -8.6] }, "boring": { "position": [-0.3, -0.05, -8.6], - "type": "mirrored", "initial_position": [-1.3, -0.07, -8.6] }, "big": { "position": [-0.35, -0.1, -8.6], - "type": "mirrored", "initial_position": [-1.35, -0.12, -8.6] }, "big_text": [0.2, -0.03, -8.7], @@ -242,19 +220,17 @@ } }, "bg_hud_6": { + "mirrored": 1, "long": { "position": [0.63, -0.19, -8.6], - "type": "mirrored", "initial_position": [1.63, -0.2, -8.6] }, "boring": { "position": [-0.29, -0.17, -8.6], - "type": "mirrored", "initial_position": [-1.29, -0.18, -8.6] }, "big": { "position": [-0.25, -0.22, -8.6], - "type": "mirrored", "initial_position": [-1.25, -0.18, -8.6] }, "big_text": [0.2, -0.17, -8.7], diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index 3ef6646..7e30321 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -37,8 +37,6 @@ const MainScene = () => { - -