src/app/interface/background/index.tsx

"use client"

import { useEffect, useRef, useState } from "react"
import Snowfall from "react-snowfall"

import { useStore } from "@/app/store"

export function Background() {
  const panel = useStore(state => state.panel)
  const [itsRainingFaces, makeItRain] = useState(false)
  const [nbFaces, setNbFaces] = useState(0)
  const nbFacesRef = useRef(0)

  const [sprite, setSprite] = useState<HTMLImageElement>()
  
  useEffect(() => {
    const newSprite = document.createElement('img')
    newSprite.src = "/images/sprite.png" // '/images/hf.png'
    setSprite(newSprite)
  }, [])

  // just to delay things a bit
  useEffect(() => {
    setTimeout(() => { makeItRain(true) }, 1000)
  }, [])

  // effect is more interesting if progressive
  useEffect(() => {
   let interval = setInterval(() => {
     // if (!itsRainingFaces) { return }
      if (nbFacesRef.current > 25) {
        clearInterval(interval)
      } else {
        setNbFaces(nbFacesRef.current += 1)
      }
    }, 1000)
  }, [])

  return (
    <>{itsRainingFaces && sprite 
      ? <Snowfall
        // Applied to the canvas element.

        style={{
          background: 'transparent',
          position: 'fixed',
          width: '100vw',
          height: '100vh',
          transitionProperty: "color",
          transitionDuration: "3000ms",
          opacity: panel === "join" ? 1 : 0,
        }}
        radius={[10, 80]}
        speed={[2, 4]}
        wind={[1, 3.0]}
        // Controls the number of snowflakes that are created (defaults to 150).
        snowflakeCount={nbFaces}
        images={[sprite]}
      />
      : null}
    </>
  )
}