diff --git a/src/components/FlameParticle.jsx b/src/components/FlameParticle.jsx index f4a1a53..f7931b5 100644 --- a/src/components/FlameParticle.jsx +++ b/src/components/FlameParticle.jsx @@ -1,22 +1,21 @@ -import React, { useState, useEffect, useRef } from "react"; +import React, { useRef, useMemo } from "react"; import { useLoader, useFrame } from "@react-three/fiber"; import * as THREE from "three"; -export const FlameParticle = ({ position, png, turboColor, delay = 0 }) => { +export const FlameParticle = ({ position, png, isBoosting, delay = 0 }) => { const texture = useLoader(THREE.TextureLoader, png); const pointsRef = useRef(); - const [size, setSize] = useState(1); - const [opacity, setOpacity] = useState(1); - const [initialized, setInitialized] = useState(false); + const initialized = useRef(false); - useEffect(() => { + // Initialize after delay + useMemo(() => { const timer = setTimeout(() => { - setInitialized(true); + initialized.current = true; }, delay); return () => clearTimeout(timer); }, [delay]); - const points = React.useMemo(() => { + const points = useMemo(() => { const geom = new THREE.BufferGeometry(); geom.setAttribute( "position", @@ -26,29 +25,41 @@ export const FlameParticle = ({ position, png, turboColor, delay = 0 }) => { }, [position]); useFrame(({clock}, delta) => { - if (!initialized) return; + if (!initialized.current) return; - pointsRef.current.position.y += 0.03 * delta * 144; - pointsRef.current.position.z += 0.06 * delta * 144; - if(pointsRef.current.position.y > 0.4) { - pointsRef.current.position.y = 0; - pointsRef.current.position.z = 0; - setOpacity(1); - } - if(opacity > 0) { - setOpacity((opacity) => opacity - 0.05 * delta * 144); + const pointsCurrent = pointsRef.current; + + if (isBoosting) { + // Update logic when boosting + pointsCurrent.position.y += 0.03 * delta * 144; + pointsCurrent.position.z += 0.06 * delta * 144; + + if(pointsCurrent.position.y > 0.4) { + pointsCurrent.position.y = 0; + pointsCurrent.position.z = 0; + pointsCurrent.material.opacity = 1; + } + + if(pointsCurrent.material.opacity > 0) { + pointsCurrent.material.opacity -= 0.05 * delta * 144; + } + } else { + // Reset position and opacity when not boosting + pointsCurrent.position.y = 0; + pointsCurrent.position.z = 0; + pointsCurrent.material.opacity = 0; } }); return ( diff --git a/src/components/FlameParticles.jsx b/src/components/FlameParticles.jsx index df48398..c145ebb 100644 --- a/src/components/FlameParticles.jsx +++ b/src/components/FlameParticles.jsx @@ -2,9 +2,7 @@ import { FlameParticle } from "./FlameParticle"; export const FlameParticles = ({ isBoosting }) => { - if (!isBoosting) { - return null; - } + return ( {/* bottom left */} @@ -12,37 +10,37 @@ export const FlameParticles = ({ isBoosting }) => { @@ -52,37 +50,37 @@ export const FlameParticles = ({ isBoosting }) => { @@ -91,37 +89,37 @@ export const FlameParticles = ({ isBoosting }) => { @@ -129,37 +127,37 @@ export const FlameParticles = ({ isBoosting }) => {