fix: confetti

This commit is contained in:
bartosz-lipinski 2021-04-13 23:39:14 -05:00
parent 8620bf2be5
commit 4a8382a46f
1 changed files with 14 additions and 4 deletions

View File

@ -619,7 +619,7 @@ const Congrats = () => {
<Button className="congrats-button"><span>Sell it via auction</span><span>&gt;</span></Button> <Button className="congrats-button"><span>Sell it via auction</span><span>&gt;</span></Button>
</div> </div>
</div> </div>
<Conffeti /> <Confetti />
</> </>
} }
@ -632,7 +632,7 @@ interface Particle {
size: number, size: number,
} }
const Conffeti = () => { const Confetti = () => {
const [particles, setParticles] = useState<Array<Particle>>(Array.from({ length: 30 }).map(_ => ({ const [particles, setParticles] = useState<Array<Particle>>(Array.from({ length: 30 }).map(_ => ({
top: -Math.random() * 100, top: -Math.random() * 100,
left: Math.random() * 100, left: Math.random() * 100,
@ -643,13 +643,23 @@ const Conffeti = () => {
}))) })))
useEffect(() => { useEffect(() => {
setInterval(() => { const interval = setInterval(() => {
setParticles(parts => parts.map(part => ({ setParticles(parts => parts.map(part => ({
...part, ...part,
top: (part.top > 130 ? -30 : part.top + part.speed), top: (part.top > 130 ? -30 : part.top + part.speed),
angle: (part.angle > 360 ? 0 : part.angle + part.angle_speed), angle: (part.angle > 360 ? 0 : part.angle + part.angle_speed),
}))) })))
}, 40) }, 70);
const timeout = setTimeout(() => {
setParticles([]);
clearInterval(interval);
}, 5000);
return () => {
clearInterval(interval);
clearTimeout(timeout);
};
}, []) }, [])
const getStyle = (particle: Particle) => ({ const getStyle = (particle: Particle) => ({