51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
'use client'
|
|
import Konami from 'react-konami-code'
|
|
import { Snowfall } from 'react-snowfall'
|
|
import { useEffect, useState } from 'react'
|
|
import { nationalities } from '@/app/db/data'
|
|
|
|
export default function KonamiSnowfall({
|
|
nationalityList,
|
|
}: Readonly<{
|
|
nationalityList: string[]
|
|
}>) {
|
|
const [snowfallActivated, setSnowfallActivated] = useState<boolean>(false)
|
|
const [images, setImages] = useState<HTMLImageElement[]>([])
|
|
|
|
const handleKonami = () => {
|
|
setSnowfallActivated(!snowfallActivated)
|
|
}
|
|
|
|
useEffect(() => {
|
|
const imagesTemp: HTMLImageElement[] = []
|
|
nationalityList.forEach((n) => {
|
|
const { flag } = nationalities[n]
|
|
const image = new Image()
|
|
image.src = flag
|
|
imagesTemp.push(image)
|
|
})
|
|
setImages(imagesTemp)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<Konami action={handleKonami} />
|
|
{snowfallActivated && (
|
|
<Snowfall
|
|
snowflakeCount={500}
|
|
color='white'
|
|
images={images}
|
|
radius={[20, 60]}
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
zIndex: -1,
|
|
pointerEvents: 'none',
|
|
height: `${document.documentElement.scrollHeight}px`,
|
|
}}
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|