Skip to content

Commit 9076e9f

Browse files
jspann21jspann21
committed
Refactor AnimationSystem to simplify particle creation by removing origin parameters and enhancing random positioning. Update confetti colors and adjust launch parameters for various animations. Revise CSS for improved visual effects and transitions.
1 parent 1ea234a commit 9076e9f

File tree

2 files changed

+103
-187
lines changed

2 files changed

+103
-187
lines changed

‎animations.js‎

Lines changed: 49 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ class AnimationSystem {
99
this.launchBalloons.bind(this),
1010
this.launchFireworks.bind(this),
1111
];
12-
this.confettiColors = ['#22c55e', '#14b8a6', '#3b82f6', '#f59e0b', '#f97316', '#ec4899'];
12+
this.confettiColors = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7', '#ec4899'];
1313
}
1414

1515
getStarsContainer() {
@@ -41,82 +41,46 @@ class AnimationSystem {
4141
return particle;
4242
}
4343

44-
getOriginMetrics(element) {
45-
if (!element?.getBoundingClientRect) {
46-
return {
47-
x: this.viewportWidth() / 2,
48-
y: this.viewportHeight() * 0.45,
49-
width: 120,
50-
height: 56,
51-
};
52-
}
53-
54-
const rect = element.getBoundingClientRect();
55-
return {
56-
x: rect.left + rect.width / 2,
57-
y: rect.top + rect.height / 2,
58-
width: rect.width,
59-
height: rect.height,
60-
};
61-
}
62-
63-
setParticleOrigin(particle, origin, spreadX = 0.28, spreadY = 0.2) {
64-
particle.style.left = `${origin.x + this.randomBetween(-origin.width * spreadX, origin.width * spreadX)}px`;
65-
particle.style.top = `${origin.y + this.randomBetween(-origin.height * spreadY, origin.height * spreadY)}px`;
66-
}
67-
68-
createStar(origin) {
44+
createStar() {
6945
const star = this.createParticle('star', '⭐');
70-
this.setParticleOrigin(star, origin);
71-
star.style.fontSize = `${this.randomBetween(18, 28)}px`;
72-
star.style.setProperty('--dx', `${this.randomBetween(-90, 90)}px`);
73-
star.style.setProperty('--dy', `${this.randomBetween(-120, -48)}px`);
74-
star.style.setProperty('--twirl', `${this.randomBetween(-180, 180)}deg`);
75-
star.style.animationDuration = `${this.randomBetween(0.65, 0.95)}s`;
46+
star.style.left = `${Math.random() * this.viewportWidth()}px`;
47+
star.style.fontSize = `${this.randomBetween(20, 40)}px`;
48+
star.style.animationDuration = `${this.randomBetween(0.7, 1.8)}s`;
7649
return star;
7750
}
7851

79-
createConfetti(origin) {
52+
createConfetti() {
8053
const confetti = this.createParticle('confetti');
81-
const color = this.pickRandom(this.confettiColors);
82-
this.setParticleOrigin(confetti, origin, 0.2, 0.15);
83-
confetti.style.background = `linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, ${color} 28%, ${color} 100%)`;
84-
confetti.style.width = `${this.randomBetween(7, 12)}px`;
85-
confetti.style.height = `${this.randomBetween(12, 18)}px`;
86-
confetti.style.borderRadius = `${this.randomBetween(3, 6)}px`;
87-
confetti.style.setProperty('--dx', `${this.randomBetween(-140, 140)}px`);
88-
confetti.style.setProperty('--dy', `${this.randomBetween(-90, -24)}px`);
89-
confetti.style.setProperty('--fall', `${this.randomBetween(70, 150)}px`);
90-
confetti.style.setProperty('--twirl', `${this.randomBetween(-320, 320)}deg`);
91-
confetti.style.animationDuration = `${this.randomBetween(0.75, 1.05)}s`;
54+
confetti.style.left = `${Math.random() * this.viewportWidth()}px`;
55+
confetti.style.top = '-20px';
56+
confetti.style.backgroundColor = this.pickRandom(this.confettiColors);
57+
confetti.style.width = `${this.randomBetween(8, 14)}px`;
58+
confetti.style.height = `${this.randomBetween(14, 24)}px`;
59+
confetti.style.animationDuration = `${this.randomBetween(2.2, 3.5)}s`;
9260
return confetti;
9361
}
9462

95-
createHeart(origin) {
63+
createHeart() {
9664
const heart = this.createParticle('heart', this.pickRandom(['💙', '💚', '💛', '💖']));
97-
this.setParticleOrigin(heart, origin, 0.15, 0.12);
98-
heart.style.setProperty('--dx', `${this.randomBetween(-60, 60)}px`);
99-
heart.style.setProperty('--dy', `${this.randomBetween(-165, -95)}px`);
100-
heart.style.animationDuration = `${this.randomBetween(0.9, 1.15)}s`;
65+
heart.style.left = `${Math.random() * this.viewportWidth()}px`;
66+
heart.style.top = `${this.randomBetween(this.viewportHeight() * 0.65, this.viewportHeight() * 0.9)}px`;
67+
heart.style.animationDuration = `${this.randomBetween(1.8, 2.4)}s`;
10168
return heart;
10269
}
10370

104-
createSparkle(origin) {
71+
createSparkle() {
10572
const sparkle = this.createParticle('sparkle', this.pickRandom(['✨', '✦', '✧']));
106-
this.setParticleOrigin(sparkle, origin, 0.22, 0.18);
107-
sparkle.style.setProperty('--dx', `${this.randomBetween(-80, 80)}px`);
108-
sparkle.style.setProperty('--dy', `${this.randomBetween(-95, -35)}px`);
109-
sparkle.style.setProperty('--twirl', `${this.randomBetween(-120, 120)}deg`);
110-
sparkle.style.animationDuration = `${this.randomBetween(0.55, 0.85)}s`;
73+
sparkle.style.left = `${Math.random() * this.viewportWidth()}px`;
74+
sparkle.style.top = `${this.randomBetween(this.viewportHeight() * 0.2, this.viewportHeight() * 0.75)}px`;
75+
sparkle.style.animationDuration = `${this.randomBetween(1.0, 1.8)}s`;
11176
return sparkle;
11277
}
11378

114-
createBalloon(origin) {
79+
createBalloon() {
11580
const balloon = this.createParticle('balloon', this.pickRandom(['🎈', '🎈', '🎈', '🎉']));
116-
this.setParticleOrigin(balloon, origin, 0.18, 0.12);
117-
balloon.style.setProperty('--dx', `${this.randomBetween(-40, 40)}px`);
118-
balloon.style.setProperty('--dy', `${this.randomBetween(-190, -120)}px`);
119-
balloon.style.animationDuration = `${this.randomBetween(0.95, 1.2)}s`;
81+
balloon.style.left = `${Math.random() * this.viewportWidth()}px`;
82+
balloon.style.top = `${this.viewportHeight() + this.randomBetween(10, 120)}px`;
83+
balloon.style.animationDuration = `${this.randomBetween(3.5, 4.8)}s`;
12084
return balloon;
12185
}
12286

@@ -136,54 +100,54 @@ class AnimationSystem {
136100
setTimeout(() => particle.remove(), removeAfterMs);
137101
}
138102

139-
launchStars(container, origin) {
140-
for (let index = 0; index < 8; index += 1) {
141-
this.appendAndCleanup(container, this.createStar(origin), 1200);
103+
launchStars(container) {
104+
for (let index = 0; index < 10; index += 1) {
105+
this.appendAndCleanup(container, this.createStar(), 2200);
142106
}
143107
}
144108

145-
launchConfetti(container, origin) {
146-
for (let index = 0; index < 18; index += 1) {
147-
this.appendAndCleanup(container, this.createConfetti(origin), 1400);
109+
launchConfetti(container) {
110+
for (let index = 0; index < 24; index += 1) {
111+
this.appendAndCleanup(container, this.createConfetti(), 3800);
148112
}
149113
}
150114

151-
launchHearts(container, origin) {
152-
for (let index = 0; index < 8; index += 1) {
153-
this.appendAndCleanup(container, this.createHeart(origin), 1400);
115+
launchHearts(container) {
116+
for (let index = 0; index < 12; index += 1) {
117+
this.appendAndCleanup(container, this.createHeart(), 2600);
154118
}
155119
}
156120

157-
launchSparkles(container, origin) {
158-
for (let index = 0; index < 12; index += 1) {
159-
this.appendAndCleanup(container, this.createSparkle(origin), 1000);
121+
launchSparkles(container) {
122+
for (let index = 0; index < 16; index += 1) {
123+
this.appendAndCleanup(container, this.createSparkle(), 2200);
160124
}
161125
}
162126

163-
launchBalloons(container, origin) {
164-
for (let index = 0; index < 5; index += 1) {
165-
this.appendAndCleanup(container, this.createBalloon(origin), 1500);
127+
launchBalloons(container) {
128+
for (let index = 0; index < 8; index += 1) {
129+
this.appendAndCleanup(container, this.createBalloon(), 5200);
166130
}
167131
}
168132

169-
launchFireworks(container, origin) {
170-
const burstCount = 2;
171-
const sparksPerBurst = 9;
133+
launchFireworks(container) {
134+
const burstCount = 3;
135+
const sparksPerBurst = 10;
172136

173137
for (let burstIndex = 0; burstIndex < burstCount; burstIndex += 1) {
174-
const delay = burstIndex * 90;
138+
const delay = burstIndex * 120;
175139
setTimeout(() => {
176-
const originX = origin.x + this.randomBetween(-origin.width * 0.15, origin.width * 0.15);
177-
const originY = origin.y + this.randomBetween(-origin.height * 0.2, origin.height * 0.1);
140+
const originX = this.randomBetween(this.viewportWidth() * 0.15, this.viewportWidth() * 0.85);
141+
const originY = this.randomBetween(this.viewportHeight() * 0.2, this.viewportHeight() * 0.55);
178142

179143
for (let sparkIndex = 0; sparkIndex < sparksPerBurst; sparkIndex += 1) {
180144
const baseAngle = (Math.PI * 2 * sparkIndex) / sparksPerBurst;
181145
const angle = baseAngle + this.randomBetween(-0.18, 0.18);
182-
const distance = this.randomBetween(38, 88);
146+
const distance = this.randomBetween(45, 110);
183147
this.appendAndCleanup(
184148
container,
185149
this.createFireworkSpark(originX, originY, angle, distance),
186-
1000
150+
1300
187151
);
188152
}
189153
}, delay);
@@ -201,13 +165,12 @@ class AnimationSystem {
201165
if (!this.prefersReducedMotion) {
202166
const starsContainer = this.getStarsContainer();
203167
if (starsContainer && this.celebrationEffects.length) {
204-
const origin = this.getOriginMetrics(selectedOption);
205168
const effect = this.pickRandom(this.celebrationEffects);
206-
effect(starsContainer, origin);
169+
effect(starsContainer);
207170
}
208171
}
209172

210-
setTimeout(() => callback?.(), this.prefersReducedMotion ? 250 : 1000);
173+
setTimeout(callback, this.prefersReducedMotion ? 250 : 1000);
211174
}
212175

213176
handleWrongAnswer(option) {

0 commit comments

Comments
 (0)