/* position:fixed + top:0/left:0 explicites, z-index très haut : le
calque reste calé sur le vrai écran visible et toujours au-dessus de
tout le reste de la page (carte de fin d'exercice comprise), quel que
soit l'endroit où ce widget HTML est placé dans la mise en page. */
#confetti-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
pointer-events: none;
z-index: 999999;
background: transparent;
}
#confettiCanvas {
display: block;
width: 100%;
height: 100%;
background: transparent;
}
(function () {
// =========================================================================
// CONFETTI — reprend fidèlement le moteur de particules fourni comme
// référence ("c'est cet effet que je veux") : explosion en forme de
// comètes (tête étoilée + traînée dessinée directement, dont la longueur
// dépend de la vitesse COURANTE de la particule à chaque image -> elle
// s'amenuise naturellement quand la particule ralentit, sans aucun
// bricolage de canvas), suivies d'étoiles simples scintillantes.
//
// Différences par rapport au fichier de référence (qui était une démo
// "cliquez pour rejouer") :
// - Le canvas est calé en plein écran (position fixed) et surveille la
// section .taekwon_page_complete comme le reste du site : l'effet se
// déclenche automatiquement à la fin d'un exercice, pas au clic.
// - La pluie d'étoiles est maintenant ILLIMITÉE : au lieu d'un seul lot
// fini de particules, de nouveaux petits lots sont générés en continu
// (confettiRain rappelée à intervalle régulier) tant que l'écran de
// fin d'exercice reste affiché, et s'arrêtent dès qu'il se referme.
// - Plus de dépendance externe (canvas-confetti) : ce moteur est
// autonome, ce qui règle aussi au passage tous les problèmes qu'on
// avait avec les formes figées/la rotation impossible par particule
// de cette librairie -- ici chaque comète est simplement tournée
// (ctx.rotate) selon sa propre direction de vol à chaque image.
var wrapper = document.getElementById('confetti-wrapper');
var canvas = document.getElementById('confettiCanvas');
var ctx = canvas.getContext('2d');
// Palette reprise telle quelle du fichier de référence (turquoise /
// jaune / corail / orange).
var COLORS = ['#3FC7C1', '#FFCE45', '#F2726B', '#FFA94D'];
var W, H, DPR;
function resize() {
DPR = Math.min(window.devicePixelRatio || 1, 2);
W = wrapper.clientWidth || window.innerWidth;
H = wrapper.clientHeight || window.innerHeight;
canvas.width = W * DPR;
canvas.height = H * DPR;
ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
}
window.addEventListener('resize', resize);
resize();
var MAX_PARTICLES = 500; // garde-fou : jamais un nombre illimité de
// particules à l'écran, même si la pluie
// tourne très longtemps.
var particles = [];
var rand = function (a, b) { return a + Math.random() * (b - a); };
var pick = function (arr) { return arr[(Math.random() * arr.length) | 0]; };
// Une particule = une "comète" : une petite étoile à 4 branches en tête,
// suivie d'une traînée qui s'amenuise. La traînée est dessinée en
// fonction de la vitesse courante -> elle rétrécit naturellement quand
// la particule ralentit, exactement comme demandé ("les étoiles ont
// parfois des traînées au début quand elles accélèrent, ensuite elles
// n'en ont plus"). `delay` retarde le "vrai" départ de la particule
// (utilisé par la pluie pour faire apparaître les étoiles de façon
// échelonnée plutôt que toutes d'un coup).
function spawnParticle(x, y, opts) {
if (particles.length >= MAX_PARTICLES) particles.shift(); // évite tout emballement
opts = opts || {};
var angle = opts.angle !== undefined ? opts.angle : rand(0, Math.PI * 2);
var speed = opts.speed !== undefined ? opts.speed : rand(340, 780);
var isComet = Math.random() < 0.72; // certaines restent de simples étoiles
particles.push({
x: x, y: y,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
size: opts.size !== undefined ? opts.size : rand(9, 18),
color: pick(COLORS),
isComet: isComet,
age: 0,
delay: opts.delay || 0,
// durée avant de commencer à s'estomper, puis durée du fondu
holdTime: opts.holdTime !== undefined ? opts.holdTime : rand(0.45, 0.9),
fadeTime: opts.fadeTime !== undefined ? opts.fadeTime : rand(0.7, 1.3),
// rotation propre de l'étoile (indépendante de la trajectoire)
spin: rand(-4, 4),
rot: rand(0, Math.PI * 2),
// les étoiles "résiduelles" scintillent au lieu de juste disparaître
twinkle: !isComet ? rand(3, 7) : (opts.twinkle || 0),
gravity: opts.gravity !== undefined ? opts.gravity : 260,
alpha: 1,
dead: false
});
}
function confettiBurst(x, y, count) {
count = count || 90;
for (var i = 0; i < count; i++) spawnParticle(x, y);
}
// Pluie d'étoiles qui tombent du haut de l'écran et s'évanouissent en
// cours de chute. `originX` centre la zone de chute (facultatif, sinon
// toute la largeur).
function confettiRain(originX, count, spread) {
count = count || 26;
var cx = originX === undefined ? W / 2 : originX;
var half = (spread === undefined ? W * 0.85 : spread) / 2;
for (var i = 0; i < count; i++) {
var x = cx + rand(-half, half);
var y = rand(-70, -10); // part juste au-dessus du cadre visible
spawnParticle(x, y, {
angle: Math.PI / 2 + rand(-0.15, 0.15), // vers le bas, léger dérapage
speed: rand(50, 130), // vitesse initiale faible...
gravity: 220, // ...qui s'accélère en tombant
size: rand(7, 14),
delay: rand(0, 1.3), // apparition échelonnée
holdTime: rand(0.8, 1.5),
fadeTime: rand(0.5, 0.9),
twinkle: rand(4, 8)
});
}
}
// Vide instantanément toutes les particules à l'écran.
function confettiStop() {
particles.length = 0;
}
function drawStar(cx, cy, outerR, innerR, rotation, color, alpha) {
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(rotation);
ctx.beginPath();
var spikes = 4;
for (var i = 0; i 2) {
var grad = ctx.createLinearGradient(0, 0, -tailLen, 0);
grad.addColorStop(0, p.color);
grad.addColorStop(1, 'transparent');
ctx.beginPath();
ctx.moveTo(0, -p.size * 0.35);
ctx.lineTo(-tailLen, 0);
ctx.lineTo(0, p.size * 0.35);
ctx.closePath();
ctx.fillStyle = grad;
ctx.fill();
}
ctx.restore();
// petite étoile à la tête de la comète
drawStar(p.x, p.y, p.size, p.size * 0.42, p.rot, p.color, p.alpha);
}
var boucleActive = false;
var last = 0;
function frame(now) {
if (!boucleActive) return;
if (!last) last = now;
var dt = Math.min((now - last) / 1000, 0.05);
last = now;
ctx.clearRect(0, 0, W, H); // reste transparent, pas de fillRect
for (var i = particles.length - 1; i >= 0; i--) {
var p = particles[i];
p.age += dt;
// particule en attente (delay pas encore écoulé) : invisible, immobile
if (p.age
p.holdTime) {
var t = (localAge - p.holdTime) / p.fadeTime;
baseAlpha = Math.max(0, 1 - t);
}
if (localAge > p.holdTime + p.fadeTime || baseAlpha <= 0.01) {
particles.splice(i, 1);
continue;
}
// le scintillement module juste l'alpha affiché à l'instant t, sans
// jamais s'accumuler d'une image à l'autre
p.alpha = p.twinkle
? baseAlpha * (0.55 + 0.45 * Math.sin(localAge * p.twinkle))
: baseAlpha;
if (p.isComet && localAge <p.holdTime * 0.9) { drawComet(p); } else { drawStar(p.x, p.y, p.size, p.size * 0.42, p.rot, p.color, p.alpha); } } requestAnimationFrame(frame); } function demarrerBoucle() { if (boucleActive) return; boucleActive = true; last = 0; requestAnimationFrame(frame); } function arreterBoucle() { boucleActive = false; } // ✅ Pluie continue : au lieu d'un seul lot fini de particules, on // relance confettiRain() à intervalle régulier tant que l'écran de fin // d'exercice reste affiché -- elle ne s'arrête donc jamais d'elle-même. var pluieInterval = null; function demarrerPluie() { arreterPluie(); // sécurité : jamais deux pluies en même temps pluieInterval = setInterval(function () { confettiRain(undefined, 3 + Math.floor(Math.random() * 3), W * 0.9); }, 320); } function arreterPluie() { if (pluieInterval) { clearInterval(pluieInterval); pluieInterval = null; } } var sectionVisible = false; function tirerConfettis() { resize(); demarrerBoucle(); // Explosion près du haut de l'écran ("centre haut"). confettiBurst(W / 2, H * 0.2); // La pluie enchaîne tout de suite : chaque étoile de pluie a son // propre délai d'apparition échelonné (voir confettiRain), donc la // transition avec l'explosion reste douce même sans attendre ici. demarrerPluie(); } function arreterTout() { arreterPluie(); confettiStop(); arreterBoucle(); ctx.clearRect(0, 0, W, H); } // ✅ On surveille la section .taekwon_page_complete (voir // showCompletionSection() dans taekwon-progress.js, qui passe sa // visibilité à "visible" quand l'exercice est terminé) et on tire // l'explosion exactement à ce moment-là, à chaque fois qu'elle // réapparaît -- et on arrête tout (boucle + pluie continue) dès qu'elle // se referme. function surveillerSection() { var section = document.querySelector('[class*="taekwon_page_complete"]'); if (!section) { setTimeout(surveillerSection, 200); return; } var arretDifféré = null; var observer = new MutationObserver(function () { var visible = section.style.visibility === 'visible'; if (visible) { // La section redevient (ou reste) visible : on annule un arrêt // qui aurait pu être programmé juste avant (voir ci-dessous). if (arretDifféré) { clearTimeout(arretDifféré); arretDifféré = null; } if (!sectionVisible) { sectionVisible = true; tirerConfettis(); } } else if (sectionVisible && !arretDifféré) { // On n'arrête pas tout de suite : le chargement du résumé de fin // d'exercice (badges, score, bouton "Rejouer"...) peut modifier // brièvement le style de la section pendant son rendu, ce qui // déclenche cet observer sans que la section ait vraiment été // refermée. Un arrêt immédiat sur ce simple "scintillement" // coupait la pluie de confettis en plein milieu. On attend donc // un court instant : si la section n'est toujours pas visible // passé ce délai, on arrête pour de bon. arretDifféré = setTimeout(function () { arretDifféré = null; if (section.style.visibility !== 'visible') { sectionVisible = false; arreterTout(); } }, 500); } }); observer.observe(section, { attributes: true, attributeFilter: ['style'] }); // La pluie pouvant durer longtemps, on garde le canvas à la bonne // taille si l'écran change (rotation du téléphone, etc.) pendant // qu'elle est affichée. window.addEventListener('resize', function () { if (sectionVisible) resize(); }); } surveillerSection(); })();
