mirror of https://github.com/certusone/oyster.git
fix: confetti
This commit is contained in:
parent
8620bf2be5
commit
4a8382a46f
|
@ -619,7 +619,7 @@ const Congrats = () => {
|
||||||
<Button className="congrats-button"><span>Sell it via auction</span><span>></span></Button>
|
<Button className="congrats-button"><span>Sell it via auction</span><span>></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) => ({
|
||||||
|
|
Loading…
Reference in New Issue