/* seasons.js : décor animé des thèmes saisonniers (html[data-season]). Halloween : chauves-souris, braises, brume, araignée suspendue, toiles, chapeau de sorcière. Noël : neige qui fuit la souris, guirlande lumineuse sous la barre, bonnet sur le logo. Bouton [data-season-toggle] : coupe / remet le décor (localStorage yb-season=off). */ window.YBSeason = (function () { const root = document.documentElement; const NS = 'http://www.w3.org/2000/svg'; /* Comme le reste du portfolio (choix « toujours animé ») : seul ?ybstatic=1 fige le décor. Le réglage système « réduire les animations » coupe seulement le glitch au clic (flash). */ const CALM = typeof YB_STATIC !== 'undefined' && YB_STATIC; const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; let season = '', built = false, run = false, cv, ctx, cw = 0, ch = 0, raf = 0; let gen = 0, timers = [], clickFx = null, resizeFx = null; // remis à zéro à chaque changement de fête const m = { x: -9999, y: -9999, vx: 0 }; let INK = '245,245,240', LIME = '255,123,28', S2 = '242,193,78', BG = '10,10,10', LIGHT = false; /* Quantité réglée dans l'admin (Profil → Saisons), en % par fête : multiplie les nombres, divise les délais */ const D = () => { const d = ((window.YB_SEASONS || {}).density || {})[season]; return d === undefined ? 1 : Math.max(0, d) / 100; }; const iv = ms => D() > 0 ? ms / D() : Infinity; const el = (tag, cls, html) => { const e = document.createElement(tag); if (cls) e.className = cls; if (html) e.innerHTML = html; return e; }; const rnd = (a, b) => a + Math.random() * (b - a); function colors() { const cs = getComputedStyle(root); INK = cs.getPropertyValue('--ink-rgb').trim() || INK; LIME = cs.getPropertyValue('--lime-rgb').trim() || LIME; S2 = cs.getPropertyValue('--season-2-rgb').trim() || S2; BG = cs.getPropertyValue('--bg-rgb').trim() || BG; LIGHT = root.getAttribute('data-theme') === 'light'; } function size() { const dpr = Math.min(devicePixelRatio || 1, 2); cw = innerWidth; ch = innerHeight; cv.width = cw * dpr; cv.height = ch * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } /* ── Halloween ─────────────────────────────────────────────────── */ const HAT_WITCH = ''; const SPIDER = ''; /* Toile : rayons depuis le coin + fils qui s'affaissent entre deux rayons */ const WEB = (() => { const rays = [0, 0.3, 0.62, 0.95, 1.26, Math.PI / 2], L = 150; let d = rays.map(a => 'M0 0L' + (Math.cos(a) * L).toFixed(1) + ' ' + (Math.sin(a) * L).toFixed(1)).join(''); for (let r = 22; r < 140; r += 20 + r * 0.12) for (let i = 0; i < rays.length - 1; i++) { const a1 = rays[i], a2 = rays[i + 1], am = (a1 + a2) / 2, rm = r * 0.86; d += 'M' + (Math.cos(a1) * r).toFixed(1) + ' ' + (Math.sin(a1) * r).toFixed(1) + 'Q' + (Math.cos(am) * rm).toFixed(1) + ' ' + (Math.sin(am) * rm).toFixed(1) + ' ' + (Math.cos(a2) * r).toFixed(1) + ' ' + (Math.sin(a2) * r).toFixed(1); } return ''; })(); let bats = [], embers = [], spider, nextBats = 0; function spawnBats(n, x0, y0) { const fromLeft = x0 === undefined ? Math.random() < 0.5 : x0 < cw / 2; for (let i = 0; i < n; i++) bats.push({ x: x0 !== undefined ? x0 + rnd(-20, 20) : (fromLeft ? -40 - i * 50 : cw + 40 + i * 50), y: y0 !== undefined ? y0 + rnd(-20, 20) : rnd(ch * 0.12, ch * 0.55) + rnd(-30, 30), vx: (fromLeft ? 1 : -1) * rnd(2.2, 3.6), vy: x0 !== undefined ? rnd(-3, -1.2) : 0, s: rnd(9, 17), ph: rnd(0, 6.28), f: rnd(0.24, 0.34), wob: rnd(0, 6.28) }); } function drawBat(b) { const fl = Math.sin(b.ph), s = b.s, wy = fl * s * 0.9; ctx.save(); ctx.translate(b.x, b.y); if (b.vx < 0) ctx.scale(-1, 1); ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo(-s * 0.6, -wy - s * 0.2, -s * 1.6, -wy); ctx.quadraticCurveTo(-s * 1.2, -wy * 0.3 + s * 0.15, -s * 1.1, s * 0.25 - wy * 0.2); ctx.quadraticCurveTo(-s * 0.7, s * 0.05, -s * 0.5, s * 0.35); ctx.quadraticCurveTo(-s * 0.3, s * 0.15, 0, s * 0.4); ctx.quadraticCurveTo(s * 0.3, s * 0.15, s * 0.5, s * 0.35); ctx.quadraticCurveTo(s * 0.7, s * 0.05, s * 1.1, s * 0.25 - wy * 0.2); ctx.quadraticCurveTo(s * 1.2, -wy * 0.3 + s * 0.15, s * 1.6, -wy); ctx.quadraticCurveTo(s * 0.6, -wy - s * 0.2, 0, 0); ctx.fill(); ctx.beginPath(); ctx.ellipse(0, s * 0.12, s * 0.22, s * 0.32, 0, 0, 6.283); ctx.fill(); // corps ctx.beginPath(); ctx.moveTo(-s * 0.16, -s * 0.12); ctx.lineTo(-s * 0.1, -s * 0.34); ctx.lineTo(-s * 0.02, -s * 0.14); ctx.moveTo(s * 0.16, -s * 0.12); ctx.lineTo(s * 0.1, -s * 0.34); ctx.lineTo(s * 0.02, -s * 0.14); ctx.fill(); // oreilles ctx.restore(); } function halloweenFrame(now) { ctx.clearRect(0, 0, cw, ch); // braises qui montent de la brume for (const e of embers) { e.y -= e.v; e.x += Math.sin(now / 900 + e.ph) * 0.35; if (e.y < ch * 0.35) { e.y = ch + 10; e.x = rnd(0, cw); } const life = Math.min(1, (ch - e.y) / 80) * Math.min(1, (e.y - ch * 0.35) / (ch * 0.25)); ctx.fillStyle = 'rgba(' + LIME + ',' + (0.55 * life * (0.6 + 0.4 * Math.sin(now / 200 + e.ph))) + ')'; ctx.beginPath(); ctx.arc(e.x, e.y, e.r, 0, 6.283); ctx.fill(); } // vols de chauves-souris, qui s'écartent de la souris if (now > nextBats) { spawnBats(Math.round(rnd(2, 5))); nextBats = now + iv(rnd(9000, 16000)); } ctx.fillStyle = 'rgba(' + INK + ',' + (LIGHT ? 0.82 : 0.6) + ')'; bats = bats.filter(b => b.x > -200 && b.x < cw + 200 && b.y > -200); for (const b of bats) { const dx = b.x - m.x, dy = b.y - m.y, d = Math.hypot(dx, dy); if (d < 140) { b.vy += dy / d * 0.5; b.vx += dx / d * 0.25; } b.vy = b.vy * 0.96 + Math.sin(b.wob += 0.05) * 0.06; b.x += b.vx; b.y += b.vy; b.ph += b.f * 1.5; drawBat(b); } } function buildHalloween() { const logo = document.querySelector('.site-nav__logo'); if (logo) logo.prepend(el('span', 'season-hat season-deco', HAT_WITCH)); const fog = el('div', 'season-fog season-deco', ''); fog.setAttribute('aria-hidden', 'true'); document.body.appendChild(fog); spider = el('div', 'season-spider season-deco', '' + SPIDER); spider.setAttribute('aria-hidden', 'true'); document.body.appendChild(spider); const flee = () => { if (spider.classList.contains('is-fleeing')) return; spider.classList.add('is-fleeing'); spider.style.setProperty('--drop', '0px'); setTimeout(() => { spider.classList.remove('is-fleeing'); dropSpider(); }, 2600); }; spider.querySelector('svg').addEventListener('pointerenter', flee); spider.querySelector('svg').addEventListener('click', flee); dropSpider(); const foot = document.querySelector('.site-footer'); if (foot) { foot.prepend(el('span', 'season-web season-deco', WEB)); foot.prepend(el('span', 'season-web season-web--r season-deco', WEB)); } for (let i = 0; i < Math.round(Math.min(34, innerWidth / 45) * D()); i++) embers.push({ x: rnd(0, innerWidth), y: rnd(innerHeight * 0.4, innerHeight), v: rnd(0.25, 0.7), r: rnd(0.8, 2.1), ph: rnd(0, 6.28) }); nextBats = performance.now() + 1500; clickFx = (x, y) => spawnBats(3, x, y); // clic dans le vide : une petite nuée s'envole du curseur } function dropSpider() { if (!spider || spider.classList.contains('is-fleeing')) return; const nav = (document.querySelector('.site-nav') || {}).offsetHeight || 70; const k = Math.min(1, scrollY / 900); spider.style.setProperty('--drop', Math.round(nav + 40 + k * innerHeight * 0.32) + 'px'); } /* ── Noël ──────────────────────────────────────────────────────── */ const HAT_SANTA = ''; const BULBS = ['var(--lime)', 'var(--season-2)', '#3ddc84', '#7cc8ff', '#fff3c4']; let flakes = []; function buildLights() { const nav = document.querySelector('.site-nav'); if (!nav) return; let box = nav.querySelector('.season-lights'); if (!box) { box = el('div', 'season-lights season-deco'); box.setAttribute('aria-hidden', 'true'); nav.appendChild(box); } box.innerHTML = ''; const W = nav.clientWidth, span = W < 720 ? 110 : 150, n = Math.max(2, Math.round(W / span)), sw = W / n, sag = 16; const svg = document.createElementNS(NS, 'svg'), path = document.createElementNS(NS, 'path'); let d = 'M0 2'; for (let i = 0; i < n; i++) d += ' Q' + (i * sw + sw / 2) + ' ' + (2 + sag * 2) + ' ' + ((i + 1) * sw) + ' 2'; path.setAttribute('d', d); svg.appendChild(path); box.appendChild(svg); let k = 0; for (let i = 0; i < n; i++) for (let j = 1; j <= 3; j++) { const u = j / 4, x = i * sw + sw * u, y = 2 + 2 * u * (1 - u) * sag * 2; // point sur la courbe const b = el('span', 'season-bulb'); b.style.cssText = 'left:' + x + 'px;top:' + y + 'px;--c:' + BULBS[k % BULBS.length] + ';--d:' + (-(k % 7) * 0.35) + 's;--r:' + ((u - 0.5) * -40) + 'deg'; box.appendChild(b); k++; } } function makeFlakes() { const n = Math.round(Math.min(170, cw * ch / 9000) * D()); flakes = Array.from({ length: n }, () => newFlake(true)); } function newFlake(any) { const r = Math.random() < 0.1 ? rnd(3.5, 6) : rnd(0.8, 2.6); return { x: rnd(0, cw), y: any ? rnd(-ch, ch) : rnd(-60, -10), r, v: 0.35 + r * 0.22, ph: rnd(0, 6.28), sw: rnd(0.3, 1.1), dx: 0, rot: rnd(0, 6.28) }; } function crystal(f) { ctx.save(); ctx.translate(f.x, f.y); ctx.rotate(f.rot); ctx.beginPath(); for (let a = 0; a < 6; a++) { ctx.moveTo(0, 0); ctx.lineTo(0, f.r * 1.6); ctx.moveTo(-f.r * 0.45, f.r); ctx.lineTo(0, f.r * 1.25); ctx.lineTo(f.r * 0.45, f.r); ctx.rotate(Math.PI / 3); } ctx.stroke(); ctx.restore(); } function noelFrame(now) { ctx.clearRect(0, 0, cw, ch); const col = LIGHT ? '120,140,165' : '255,255,255'; m.vx *= 0.94; ctx.lineWidth = 1; ctx.lineCap = 'round'; for (let i = 0; i < flakes.length; i++) { const f = flakes[i]; const dx = f.x - m.x, dy = f.y - m.y, d2 = dx * dx + dy * dy; if (d2 < 14400) { const d = Math.sqrt(d2) || 1, k = (1 - d / 120) * 2.2; f.dx += dx / d * k; f.y += dy / d * k * 0.5; } f.dx = f.dx * 0.95 + m.vx * 0.012 * f.r; f.y += f.v; f.x += Math.sin(now / 1400 + f.ph) * f.sw + f.dx * 0.15; f.rot += 0.004; if (f.y > ch + 10 || f.x < -30 || f.x > cw + 30) { flakes[i] = newFlake(false); continue; } const a = (f.r > 3 ? 0.7 : 0.35 + f.r * 0.18) * (LIGHT ? 0.9 : 1); if (f.r > 3) { ctx.strokeStyle = 'rgba(' + col + ',' + a + ')'; crystal(f); } else { ctx.fillStyle = 'rgba(' + col + ',' + a + ')'; ctx.beginPath(); ctx.arc(f.x, f.y, f.r, 0, 6.283); ctx.fill(); } } } function buildNoel() { const logo = document.querySelector('.site-nav__logo'); if (logo) logo.prepend(el('span', 'season-hat season-deco', HAT_SANTA)); buildLights(); resizeFx = () => { buildLights(); makeFlakes(); }; makeFlakes(); } /* ── Moteurs partagés ──────────────────────────────────────────── */ /* Feux d'artifice : fusées depuis le bas, gerbes avec gravité ; clic dans le vide = gerbe au curseur */ let rockets = [], sparks = [], nextRocket = 0, fwPal = () => ['255,255,255']; function burst(x, y, pal) { const n = Math.round(rnd(50, 80)), col = pal[Math.floor(Math.random() * pal.length)], ring = Math.random() < 0.3; for (let i = 0; i < n; i++) { const ang = (i / n) * 6.283 + rnd(-0.05, 0.05), sp = ring ? 3.4 : rnd(0.8, 4.2); sparks.push({ x, y, vx: Math.cos(ang) * sp, vy: Math.sin(ang) * sp, life: 1, dec: rnd(0.011, 0.02), c: Math.random() < 0.2 ? pal[Math.floor(Math.random() * pal.length)] : col }); } } function fireworksFrame(now, rate) { if (now > nextRocket) { const x = rnd(cw * 0.1, cw * 0.9); rockets.push({ x, y: ch + 5, vx: rnd(-0.6, 0.6), vy: -Math.sqrt(2 * 0.12 * rnd(ch * 0.45, ch * 0.8)) }); nextRocket = now + iv(rnd(rate * 0.5, rate * 1.4)); } ctx.globalCompositeOperation = LIGHT ? 'source-over' : 'lighter'; rockets = rockets.filter(r => { r.x += r.vx; r.y += r.vy; r.vy += 0.12; ctx.strokeStyle = 'rgba(' + INK + ',.6)'; ctx.lineWidth = 1.6; ctx.beginPath(); ctx.moveTo(r.x, r.y); ctx.lineTo(r.x - r.vx * 4, r.y - r.vy * 4); ctx.stroke(); if (r.vy >= -0.4) { burst(r.x, r.y, fwPal()); return false; } return true; }); ctx.lineWidth = 1.8; ctx.lineCap = 'round'; sparks = sparks.filter(p => { p.vx *= 0.985; p.vy = p.vy * 0.985 + 0.045; p.x += p.vx; p.y += p.vy; p.life -= p.dec; if (p.life <= 0) return false; ctx.strokeStyle = 'rgba(' + p.c + ',' + p.life + ')'; ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p.x - p.vx * 3, p.y - p.vy * 3); ctx.stroke(); return true; }); ctx.globalCompositeOperation = 'source-over'; } /* Objets qui tombent (ou montent si dir = -1) en tournoyant, écartés par la souris */ let drift = []; function driftFill(n, make) { drift = Array.from({ length: Math.round(n * D()) }, () => Object.assign(make(), { y: rnd(-ch, ch) })); } function driftFrame(now, make, draw) { for (let i = 0; i < drift.length; i++) { const f = drift[i]; const dx = f.x - m.x, dy = f.y - m.y, d2 = dx * dx + dy * dy; if (d2 < 14400) { const d = Math.sqrt(d2) || 1, k = (1 - d / 120) * 2.2; f.x += dx / d * k; f.y += dy / d * k * 0.5; } f.y += f.v * (f.dir || 1); f.x += Math.sin(now / 1400 + f.ph) * f.sw; f.rot += f.vr; if (f.y > ch + 40 || f.y < -60 || f.x < -60 || f.x > cw + 60) { drift[i] = make(); continue; } ctx.save(); ctx.translate(f.x, f.y); ctx.rotate(f.rot); draw(f); ctx.restore(); } } const fall = (o) => Object.assign({ x: rnd(0, cw), y: rnd(-60, -20), v: rnd(0.5, 1.2), ph: rnd(0, 6.28), sw: rnd(0.2, 0.8), rot: rnd(0, 6.28), vr: rnd(-0.02, 0.02) }, o); const rise = (o) => Object.assign(fall(o), { y: ch + rnd(10, 40), dir: -1 }); function pill(html) { let p = document.querySelector('.season-pill'); if (!p) { p = el('div', 'season-pill season-deco'); p.setAttribute('aria-live', 'polite'); document.body.appendChild(p); } p.innerHTML = html; return p; } const onEmptyClick = fn => { clickFx = fn; }; function hat(svg) { const logo = document.querySelector('.site-nav__logo'); if (logo) logo.prepend(el('span', 'season-hat season-deco', svg)); } /* ── Nouvel An : feux d'artifice or et argent, compte à rebours ─── */ const HAT_PARTY = ''; function buildNouvelAn() { hat(HAT_PARTY); fwPal = () => LIGHT ? ['138,100,0', '85,96,122', '176,18,42'] : ['242,193,78', '255,240,200', '217,221,232', '255,255,255']; const p = pill(''), pad = n => String(n).padStart(2, '0'); let wasCount = false; const tick = () => { const now = new Date(), y = now.getFullYear(); if (now.getMonth() === 0) { p.innerHTML = 'BONNE ANNÉE ' + y + ' ✦'; if (wasCount) for (let i = 0; i < 6; i++) setTimeout(() => burst(rnd(cw * 0.2, cw * 0.8), rnd(ch * 0.15, ch * 0.5), fwPal()), i * 250); // minuit ! wasCount = false; } else { const s = Math.floor((new Date(y + 1, 0, 1) - now) / 1000), d = Math.floor(s / 86400); p.innerHTML = '' + (y + 1) + ' DANS ' + (d ? d + ' J ' : '') + '' + pad(Math.floor(s / 3600) % 24) + ':' + pad(Math.floor(s / 60) % 60) + ':' + pad(s % 60) + ''; wasCount = true; } }; tick(); timers.push(setInterval(tick, 1000)); onEmptyClick((x, y) => burst(x, y, fwPal())); } /* ── 14 juillet : feux d'artifice tricolores, cocarde ─────────── */ const HAT_COCKADE = ''; function buildJuillet() { hat(HAT_COCKADE); fwPal = () => LIGHT ? ['31,63,168', '200,16,46', '120,130,150'] : ['60,110,255', '255,255,255', '255,60,80']; onEmptyClick((x, y) => burst(x, y, fwPal())); } /* ── Saint-Patrick : trèfles qui tombent, chapeau de lutin ─────── */ const HAT_LEPRE = ''; function clover(f) { const r = f.r, col = f.gold ? 'rgba(242,193,78,.9)' : 'rgba(' + LIME + ',' + f.a + ')'; ctx.fillStyle = col; for (let k = 0; k < (f.gold ? 4 : 3); k++) { ctx.rotate(6.283 / (f.gold ? 4 : 3)); ctx.beginPath(); ctx.arc(-r * 0.32, -r * 0.62, r * 0.42, 0, 6.283); ctx.arc(r * 0.32, -r * 0.62, r * 0.42, 0, 6.283); ctx.fill(); } ctx.strokeStyle = col; ctx.lineWidth = Math.max(1, r * 0.14); ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo(r * 0.3, r * 0.8, r * 0.1, r * 1.3); ctx.stroke(); } const makeClover = () => fall({ r: rnd(5, 11), a: rnd(0.35, 0.75), gold: Math.random() < 0.05 }); function buildStPatrick() { hat(HAT_LEPRE); driftFill(Math.min(46, Math.round(cw / 32)), makeClover); } /* ── Pâques : pétales, oreilles de lapin, chasse aux œufs ──────── */ const HAT_BUNNY = ''; const EGG_COLS = [['#ff9fcb', '#fff1a8'], ['#8ee6c2', '#ff9fcb'], ['#bfa2ff', '#fff1a8'], ['#ffd36e', '#8ec9ff'], ['#8ec9ff', '#ffffff']]; const eggSvg = c => ''; function petal(f) { ctx.fillStyle = 'rgba(' + f.c + ',' + f.a + ')'; ctx.beginPath(); ctx.ellipse(0, 0, f.r, f.r * 0.55, 0, 0, 6.283); ctx.fill(); } const makePetal = () => fall({ r: rnd(3, 6.5), a: rnd(0.35, 0.7), c: ['255,159,203', '255,210,230', '190,160,255', '142,230,194'][Math.floor(Math.random() * 4)], vr: rnd(-0.04, 0.04) }); function buildPaques() { hat(HAT_BUNNY); driftFill(Math.min(36, Math.round(cw / 40)), makePetal); const total = 3, H = document.documentElement.scrollHeight; let found = 0; const say = () => pill(found < total ? '' + (total - found) + ' ŒUF' + (total - found > 1 ? 'S' : '') + ' CACHÉ' + (total - found > 1 ? 'S' : '') + ' SUR CETTE PAGE' : 'BRAVO, TOUS TROUVÉS ✦'); say(); for (let i = 0; i < total; i++) { const b = el('button', 'season-egg season-deco', eggSvg(EGG_COLS[i % EGG_COLS.length])); b.type = 'button'; b.setAttribute('aria-label', 'Œuf de Pâques caché'); b.style.cssText = 'left:' + rnd(4, 92) + '%;top:' + Math.round(rnd(0.12 + i * 0.28, 0.36 + i * 0.28) * (H - 120)) + 'px;--r:' + rnd(-30, 30) + 'deg'; b.addEventListener('click', () => { if (b.classList.contains('is-found')) return; b.classList.add('is-found'); found++; say(); const r = b.getBoundingClientRect(); burst(r.left + 13, r.top + 17, PASTELS); if (found === total) for (let k = 0; k < 5; k++) setTimeout(() => burst(rnd(cw * 0.2, cw * 0.8), rnd(ch * 0.2, ch * 0.6), PASTELS), k * 220); }); document.body.appendChild(b); } } const PASTELS = ['255,159,203', '142,230,194', '255,222,120', '190,160,255', '140,200,255']; function paquesFrame(now) { driftFrame(now, makePetal, petal); fireworksFrame(now, 1e12); } /* ── Poisson d'avril : bancs de poissons, bulles, poisson collé ── */ const FISH = (c1, c2) => ''; const HAT_FISH = '' + FISH('rgb(var(--lime-rgb))', 'rgb(var(--season-2-rgb))').replace(/<\/?svg[^>]*>/g, '') + ''; let fishes = [], nextFish = 0; function drawFish(f) { const s = f.s, w = Math.sin(f.ph) * s * 0.25; ctx.save(); ctx.translate(f.x, f.y); if (f.vx < 0) ctx.scale(-1, 1); ctx.fillStyle = 'rgba(' + f.c + ',' + f.a + ')'; ctx.beginPath(); ctx.ellipse(0, 0, s, s * 0.45, 0, 0, 6.283); ctx.fill(); ctx.beginPath(); ctx.moveTo(-s * 0.85, 0); ctx.lineTo(-s * 1.5, -s * 0.45 + w); ctx.lineTo(-s * 1.5, s * 0.45 + w); ctx.closePath(); ctx.fill(); ctx.fillStyle = 'rgba(' + BG + ',' + f.a + ')'; ctx.beginPath(); ctx.arc(s * 0.55, -s * 0.08, s * 0.1, 0, 6.283); ctx.fill(); ctx.restore(); } function poissonFrame(now) { if (now > nextFish) { const left = Math.random() < 0.5, y = rnd(ch * 0.15, ch * 0.85), n = Math.round(rnd(3, 7)), c = Math.random() < 0.5 ? LIME : S2; for (let i = 0; i < n; i++) fishes.push({ x: left ? -40 - i * rnd(25, 45) : cw + 40 + i * rnd(25, 45), y: y + rnd(-40, 40), vx: (left ? 1 : -1) * rnd(1.4, 2.2), s: rnd(7, 12), ph: rnd(0, 6), c, a: rnd(0.35, 0.6) }); nextFish = now + iv(rnd(4000, 9000)); } fishes = fishes.filter(f => f.x > -300 && f.x < cw + 300); for (const f of fishes) { const dx = f.x - m.x, dy = f.y - m.y, d = Math.hypot(dx, dy); if (d < 120) { f.y += dy / d * 2.4; f.vx += Math.sign(dx) * 0.05; } f.x += f.vx; f.y += Math.sin(f.ph * 0.3) * 0.3; f.ph += 0.25; drawFish(f); } driftFrame(now, makeBubble, bubble); } function bubble(f) { ctx.strokeStyle = 'rgba(' + INK + ',' + f.a + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(0, 0, f.r, 0, 6.283); ctx.stroke(); } const makeBubble = () => rise({ r: rnd(2, 6), a: rnd(0.15, 0.35), v: rnd(0.4, 1), vr: 0 }); function buildPoisson() { hat(HAT_FISH); driftFill(Math.min(26, Math.round(cw / 55)), makeBubble); nextFish = performance.now() + 800; const paper = () => FISH(LIGHT ? '#ffd0a1' : '#ffb347', '#e56b00'); // poisson collé au premier grand titre ; un clic le décolle const h = document.querySelector('main h1, #yb-root h1, .hero__title'); if (h) { const r = h.getBoundingClientRect(), t = el('div', 'season-fish season-fish--tape season-deco', paper()); t.style.left = Math.min(r.right + scrollX - 50, document.documentElement.clientWidth - 90) + 'px'; t.style.top = (r.top + scrollY + r.height * 0.15) + 'px'; t.style.transform = 'rotate(-12deg)'; t.title = 'Poisson d\'avril !'; t.addEventListener('click', () => { t.style.transition = 'transform 1s cubic-bezier(.5,0,.8,.4), opacity 1s'; t.style.transform = 'translateY(70vh) rotate(160deg)'; t.style.opacity = '0'; pill('POISSON D\'AVRIL ! 🐟').classList.remove('is-hidden'); setTimeout(() => document.querySelector('.season-pill').classList.add('is-hidden'), 2600); }); document.body.appendChild(t); } // et un autre accroché au curseur, comme dans le dos de quelqu'un (souris uniquement) if (!matchMedia('(pointer: coarse)').matches && !CALM) { const c = el('div', 'season-fish season-deco', paper()); document.body.appendChild(c); let fx = -200, fy = -200, ang = 0; const g = gen; const follow = () => { if (g !== gen) return; if (m.x > -9000) { const tx = m.x + 14, ty = m.y + 18; ang = ang * 0.9 + Math.max(-0.6, Math.min(0.6, (tx - fx) * 0.02)) * 0.1; fx += (tx - fx) * 0.18; fy += (ty - fy) * 0.18; } c.style.transform = 'translate(' + fx + 'px,' + fy + 'px) rotate(' + (0.4 + ang) + 'rad)'; requestAnimationFrame(follow); }; follow(); } } /* ── Fête de la musique : notes, égaliseur, clic = une note jouée ─ */ const HAT_PHONES = ''; function note(f) { const r = f.r; ctx.fillStyle = ctx.strokeStyle = 'rgba(' + f.c + ',' + f.a + ')'; ctx.lineWidth = Math.max(1.2, r * 0.22); ctx.beginPath(); ctx.ellipse(0, 0, r, r * 0.72, -0.4, 0, 6.283); ctx.fill(); ctx.beginPath(); ctx.moveTo(r * 0.85, -r * 0.2); ctx.lineTo(r * 0.85, -r * 3.2); if (f.dbl) { ctx.lineTo(r * 3.6, -r * 3.7); ctx.lineTo(r * 3.6, -r * 0.7); ctx.stroke(); ctx.beginPath(); ctx.ellipse(r * 2.75, -r * 0.5, r, r * 0.72, -0.4, 0, 6.283); ctx.fill(); } else { ctx.quadraticCurveTo(r * 2.2, -r * 2.4, r * 2, -r * 1.2); ctx.stroke(); } } const makeNote = () => rise({ r: rnd(3.5, 6.5), a: rnd(0.3, 0.65), c: Math.random() < 0.5 ? LIME : S2, dbl: Math.random() < 0.35, v: rnd(0.5, 1.1), vr: rnd(-0.01, 0.01), rot: rnd(-0.3, 0.3) }); let audio, eqBars = []; function play(x) { try { audio = audio || new (window.AudioContext || window.webkitAudioContext)(); const scale = [261.6, 293.7, 329.6, 392, 440, 523.3, 587.3, 659.3, 784]; const o = audio.createOscillator(), g = audio.createGain(), t = audio.currentTime; o.type = 'triangle'; o.frequency.value = scale[Math.min(scale.length - 1, Math.floor(x / cw * scale.length))]; g.gain.setValueAtTime(0.0001, t); g.gain.exponentialRampToValueAtTime(0.12, t + 0.02); g.gain.exponentialRampToValueAtTime(0.0001, t + 0.9); o.connect(g).connect(audio.destination); o.start(t); o.stop(t + 1); } catch (e) {} } function buildMusique() { hat(HAT_PHONES); driftFill(Math.min(30, Math.round(cw / 48)), makeNote); const eq = el('div', 'season-eq season-deco'); eq.setAttribute('aria-hidden', 'true'); const n = Math.min(64, Math.round(innerWidth / 22)); for (let i = 0; i < n; i++) eqBars.push(eq.appendChild(el('i'))); document.body.appendChild(eq); onEmptyClick((x, y) => { play(x); for (let i = 0; i < 4; i++) drift.push(Object.assign(makeNote(), { x: x + rnd(-20, 20), y: y + rnd(-10, 10), v: rnd(1, 2) })); }); } function musiqueFrame(now) { driftFrame(now, makeNote, note); if (drift.length > 60) drift.length = 60; const t = now / 1000, beat = Math.exp(-((t * 2) % 1) * 5); eqBars.forEach((b, i) => { const k = i / eqBars.length, v = 0.18 + 0.32 * beat * (1 - k) + 0.25 * Math.abs(Math.sin(t * 3.1 + i * 0.7)) * Math.abs(Math.sin(t * 1.3 + i * 0.23)) + 0.12 * Math.sin(t * 7 + i); b.style.transform = 'scaleY(' + Math.max(0.06, Math.min(1, v)).toFixed(3) + ')'; }); } /* ── Black Friday : ruban jaune et noir, étiquettes qui tombent ── */ const HAT_TAG = '-100%'; const PRICES = ['-30 %', '-50 %', '-70 %', '-100 %', 'OFFERT']; function priceTag(f) { const w = f.r * 5.2, h = f.r * 2.1; ctx.fillStyle = 'rgba(255,212,0,' + f.a + ')'; ctx.beginPath(); ctx.moveTo(-w / 2, -h / 2); ctx.lineTo(w / 2, -h / 2); ctx.lineTo(w / 2, h / 2); ctx.lineTo(-w / 2, h / 2); ctx.lineTo(-w / 2 - h * 0.45, 0); ctx.closePath(); ctx.fill(); ctx.fillStyle = 'rgba(11,11,11,' + f.a + ')'; ctx.font = '800 ' + Math.round(h * 0.5) + 'px "JetBrains Mono", monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(f.t, 0, 1); } const makeTag = () => fall({ r: rnd(4, 7), a: rnd(0.45, 0.85), t: PRICES[Math.floor(Math.random() * PRICES.length)], vr: rnd(-0.015, 0.015) }); function buildBlackFriday() { hat(HAT_TAG); driftFill(Math.min(7, Math.round(cw / 220)), makeTag); const txt = 'BLACK FRIDAYCV À -100 %CONTACT GRATUITSTOCK LIMITÉ : 1 YASSER'; const tape = el('div', 'season-tape season-deco', '' + txt + txt + txt + txt + ''); tape.setAttribute('aria-hidden', 'true'); document.body.appendChild(tape); } /* ── Anniversaire : ballons à éclater, confettis, bougie ──────── */ const HAT_CANDLE = ''; const PARTY = ['46,230,197', '255,207,74', '255,107,129', '120,150,255', '190,120,255', '255,150,60']; let balloons = [], nextBalloon = 0; function confetti(f) { ctx.fillStyle = 'rgba(' + f.c + ',' + f.a + ')'; ctx.fillRect(-f.r, -f.r * 0.45, f.r * 2, f.r * 0.9); } const makeConfetti = () => fall({ r: rnd(2.5, 5), a: rnd(0.5, 0.85), c: PARTY[Math.floor(Math.random() * PARTY.length)], v: rnd(0.8, 1.6), vr: rnd(-0.12, 0.12) }); function newBalloon(any) { const r = rnd(16, 26); return { x: rnd(r, cw - r), y: any ? rnd(ch * 0.3, ch * 1.3) : ch + r * 3, r, v: rnd(0.45, 0.9), ph: rnd(0, 6.28), c: PARTY[Math.floor(Math.random() * PARTY.length)] }; } function drawBalloon(b, now) { const x = b.x + Math.sin(now / 1300 + b.ph) * 6, y = b.y, r = b.r; ctx.strokeStyle = 'rgba(' + INK + ',.3)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(x, y + r * 1.15); for (let k = 1; k <= 6; k++) ctx.lineTo(x + Math.sin(now / 500 + b.ph + k) * 3, y + r * 1.15 + k * r * 0.35); ctx.stroke(); ctx.fillStyle = 'rgba(' + b.c + ',.82)'; ctx.beginPath(); ctx.ellipse(x, y, r * 0.86, r, 0, 0, 6.283); ctx.fill(); ctx.beginPath(); ctx.moveTo(x, y + r * 0.95); ctx.lineTo(x - r * 0.14, y + r * 1.17); ctx.lineTo(x + r * 0.14, y + r * 1.17); ctx.closePath(); ctx.fill(); ctx.fillStyle = 'rgba(255,255,255,.35)'; ctx.beginPath(); ctx.ellipse(x - r * 0.32, y - r * 0.38, r * 0.16, r * 0.28, -0.5, 0, 6.283); ctx.fill(); b.sx = x; } function anniversaireFrame(now) { driftFrame(now, makeConfetti, confetti); if (now > nextBalloon && balloons.length < 9 * D()) { balloons.push(newBalloon(false)); nextBalloon = now + iv(rnd(1800, 4200)); } balloons = balloons.filter(b => b.y > -b.r * 4); for (const b of balloons) { const dx = (b.sx || b.x) - m.x, dy = b.y - m.y, d = Math.hypot(dx, dy); if (d < 90) b.x += dx / d * 1.2; b.y -= b.v; drawBalloon(b, now); } fireworksFrame(now, 1e12); } function buildAnniversaire() { hat(HAT_CANDLE); driftFill(Math.min(40, Math.round(cw / 36)), makeConfetti); balloons = Array.from({ length: Math.round(Math.min(6, cw / 220) * D()) }, () => newBalloon(true)); nextBalloon = performance.now() + 1500; const p = pill('14 MAI · C\'EST MON ANNIVERSAIRE ✦'); timers.push(setTimeout(() => p.classList.add('is-hidden'), 6000)); // clic sur un ballon : il éclate ; ailleurs : poignée de confettis clickFx = (x, y) => { const i = balloons.findIndex(b => Math.hypot((b.sx || b.x) - x, (b.y - y) * 0.86) < b.r * 1.1); if (i > -1) { const b = balloons.splice(i, 1)[0]; burst(b.sx || b.x, b.y, [b.c, '255,255,255']); } else burst(x, y, PARTY); }; } /* ── Indépendance de l'Algérie : drapeau, feux d'artifice et confettis vert / blanc / rouge ── */ const HAT_DZ = ''; const DZ = ['0,98,51', '255,255,255', '210,16,52', '47,191,113']; const makeConfettiDZ = () => fall({ r: rnd(2.5, 5), a: rnd(0.5, 0.85), c: DZ[Math.floor(Math.random() * DZ.length)], v: rnd(0.8, 1.6), vr: rnd(-0.12, 0.12) }); function buildAlgerie() { hat(HAT_DZ); fwPal = () => LIGHT ? ['0,98,51', '200,16,46', '90,110,100'] : ['47,191,113', '255,255,255', '230,57,70']; driftFill(Math.min(34, Math.round(cw / 42)), makeConfettiDZ); const p = pill('5 JUILLET · INDÉPENDANCE DE L\'ALGÉRIE ✦'); timers.push(setTimeout(() => p.classList.add('is-hidden'), 6000)); clickFx = (x, y) => burst(x, y, fwPal()); } function algerieFrame(now) { driftFrame(now, makeConfettiDZ, confetti); fireworksFrame(now, 1700); } /* ── Japon : torii, pétales de sakura, vagues seigaiha ─────────── */ const HAT_TORII = ''; function sakura(f) { ctx.fillStyle = 'rgba(' + f.c + ',' + f.a + ')'; ctx.beginPath(); // pétale : goutte avec une petite encoche au bout ctx.moveTo(0, -f.r); ctx.quadraticCurveTo(f.r * 0.9, -f.r * 0.2, 0, f.r); ctx.quadraticCurveTo(-f.r * 0.9, -f.r * 0.2, 0, -f.r); ctx.fill(); ctx.fillStyle = 'rgba(' + BG + ',' + f.a + ')'; ctx.beginPath(); ctx.moveTo(-f.r * 0.18, -f.r * 0.98); ctx.lineTo(0, -f.r * 0.7); ctx.lineTo(f.r * 0.18, -f.r * 0.98); ctx.fill(); } const SAKURA = ['255,183,197', '255,205,215', '250,160,180', '255,226,232']; const makeSakura = () => fall({ r: rnd(3.5, 7), a: rnd(0.45, 0.85), c: SAKURA[Math.floor(Math.random() * SAKURA.length)], v: rnd(0.4, 0.95), sw: rnd(0.5, 1.4), vr: rnd(-0.03, 0.03) }); function buildJapon() { hat(HAT_TORII); driftFill(Math.min(40, Math.round(cw / 38)), makeSakura); const w = el('div', 'season-waves season-deco'); w.setAttribute('aria-hidden', 'true'); document.body.appendChild(w); clickFx = (x, y) => { for (let i = 0; i < 8; i++) drift.push(Object.assign(makeSakura(), { x: x + rnd(-30, 30), y: y + rnd(-20, 10) })); if (drift.length > 90) drift.splice(0, drift.length - 90); }; } /* ── Hack (30 novembre, journée de la sécurité informatique) : pluie de code, intrusion tapée, glitch ── */ const GLYPHS = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン0123456789ABCDEF<>/{}[]$#'; const glyph = () => GLYPHS[Math.floor(Math.random() * GLYPHS.length)]; let rain = []; const STEP = 18; function newDrop(x, any) { const len = Math.round(rnd(6, 22)); return { x, y: any ? rnd(-ch, ch) : rnd(-ch * 0.6, -20), v: rnd(1.6, 4.2), len, ch: Array.from({ length: len }, glyph), boost: 0 }; } function buildRain() { const cols = Math.floor(cw / STEP), n = Math.round(cols * 0.32 * D()); const xs = Array.from({ length: cols }, (_, i) => i * STEP + 4).sort(() => Math.random() - 0.5).slice(0, n); rain = xs.map(x => newDrop(x, true)); } function hackFrame() { ctx.font = '600 14px "JetBrains Mono", ui-monospace, monospace'; ctx.textAlign = 'center'; const head = LIGHT ? '6,24,12' : '220,255,230'; for (let i = 0; i < rain.length; i++) { const d = rain[i]; d.y += d.v * (d.boost ? 1.8 : 1); if (Math.random() < 0.06) d.ch[Math.floor(Math.random() * d.len)] = glyph(); for (let k = 0; k < d.len; k++) { const y = d.y - k * STEP; if (y < -STEP || y > ch + STEP) continue; const a = k === 0 ? 0.95 : (1 - k / d.len) * (LIGHT ? 0.45 : 0.55) * (d.boost ? 1.6 : 1); ctx.fillStyle = 'rgba(' + (k === 0 ? head : LIME) + ',' + Math.min(a, 1) + ')'; ctx.fillText(d.ch[k], d.x, y); } if (d.y - d.len * STEP > ch) rain[i] = d.boost ? null : newDrop(d.x, false); } rain = rain.filter(Boolean); } /* Intrusion : fenêtre de terminal au centre, site flouté derrière, une fois par session de navigation (sessionStorage : F5 / Ctrl+R ne la rejouent pas, fermer l'onglet et revenir oui, quelle que soit la page). */ function hackIntro() { try { if (sessionStorage.getItem('yb-hack-intro')) return; sessionStorage.setItem('yb-hack-intro', '1'); } catch (e) {} if (CALM) return; const ov = el('div', 'season-hack-intro season-deco', ''); document.body.appendChild(ov); const body = ov.querySelector('.season-term__body'), g = gen; const add = html => { body.insertAdjacentHTML('beforeend', html); }; const caret = ''; let finished = false; const finish = () => { if (finished) return; finished = true; ov.classList.add('is-granted'); timers.push(setTimeout(() => ov.classList.add('is-out'), 1100)); timers.push(setTimeout(() => ov.remove(), 1900)); }; const skip = () => { if (!finished) { finished = true; ov.classList.add('is-out'); timers.push(setTimeout(() => ov.remove(), 700)); } }; ov.addEventListener('click', skip); addEventListener('keydown', function k(e) { if (e.key === 'Escape') { skip(); removeEventListener('keydown', k); } }); // étapes : [type, texte, pause après] const steps = [ ['cmd', 'ssh servyass', 250], ['out', 'Connexion établie · clé ed25519 · chiffrement chacha20-poly1305', 350], ['cmd', 'sudo ./portfolio --unlock', 220], ['out', '[sudo] mot de passe pour yass : ••••••••••', 320], ['bar', '', 250], ['out', '✓ 13 modules déchiffrés · 0 alerte', 550] ]; let si = 0; const next = () => { if (g !== gen || finished) return; if (si >= steps.length) return finish(); const [type, txt, pause] = steps[si++]; if (type === 'out') { add(txt + '\n'); return timers.push(setTimeout(next, pause)); } if (type === 'bar') { add('\n'); const bar = [...body.querySelectorAll('.t-bar')].pop(); let n = 0; const fill = () => { if (g !== gen || finished) return; n++; bar.textContent = '[' + '█'.repeat(n) + '░'.repeat(24 - n) + '] ' + Math.round(n / 24 * 100) + ' %'; timers.push(setTimeout(n < 24 ? fill : next, n < 24 ? 32 : pause)); }; return fill(); } // commande tapée lettre par lettre derrière un prompt add('yass@servyass:~$ ' + caret); const cmd = [...body.querySelectorAll('.t-cmd')].pop(); let ci = 0; const type1 = () => { if (g !== gen || finished) return; cmd.textContent = txt.slice(0, ++ci); if (ci < txt.length) return timers.push(setTimeout(type1, 26 + Math.random() * 30)); body.querySelectorAll('.season-caret').forEach(c => c.remove()); add('\n'); timers.push(setTimeout(next, pause)); }; timers.push(setTimeout(type1, 200)); }; timers.push(setTimeout(next, 650)); // laisse le rideau de page se lever } const esc = t => t.replace(/[&<>]/g, c => ({ '&': '&', '<': '<', '>': '>' }[c])); function buildHack() { const logo = document.querySelector('.site-nav__logo'); if (logo) logo.appendChild(el('span', 'season-caret season-deco')); const scan = el('div', 'season-scan season-deco'); scan.setAttribute('aria-hidden', 'true'); document.body.appendChild(scan); buildRain(); resizeFx = buildRain; hackIntro(); clickFx = x => { for (let k = -1; k <= 1; k++) rain.push(Object.assign(newDrop(Math.round(x / STEP) * STEP + 4 + k * STEP, false), { y: rnd(-60, 0), v: rnd(5, 8), boost: 1 })); if (CALM || REDUCED) return; root.classList.remove('season-glitch'); void root.offsetWidth; root.classList.add('season-glitch'); timers.push(setTimeout(() => root.classList.remove('season-glitch'), 320)); }; } /* ── Boucle commune ────────────────────────────────────────────── */ const BUILDS = { halloween: buildHalloween, noel: buildNoel, 'nouvel-an': buildNouvelAn, juillet: buildJuillet, 'st-patrick': buildStPatrick, paques: buildPaques, poisson: buildPoisson, musique: buildMusique, 'black-friday': buildBlackFriday, anniversaire: buildAnniversaire, algerie: buildAlgerie, japon: buildJapon, hack: buildHack }; const FRAMES = { halloween: halloweenFrame, noel: noelFrame, 'nouvel-an': now => fireworksFrame(now, 1400), juillet: now => fireworksFrame(now, 900), 'st-patrick': now => driftFrame(now, makeClover, clover), paques: paquesFrame, poisson: poissonFrame, musique: musiqueFrame, anniversaire: anniversaireFrame, algerie: algerieFrame, japon: now => driftFrame(now, makeSakura, sakura), hack: hackFrame, 'black-friday': now => driftFrame(now, makeTag, priceTag) }; function frame(now) { if (!run) return; try { ctx.clearRect(0, 0, cw, ch); (FRAMES[season] || (() => {}))(now); } catch (e) {} raf = requestAnimationFrame(frame); } function start() { if (run) return; if (CALM) { // mouvement réduit : une seule image fixe ctx.clearRect(0, 0, cw, ch); if (season === 'halloween') embers.forEach(e => { ctx.fillStyle = 'rgba(' + LIME + ',.4)'; ctx.beginPath(); ctx.arc(e.x, e.y, e.r, 0, 6.283); ctx.fill(); }); else if (FRAMES[season]) FRAMES[season](0); return; } run = true; raf = requestAnimationFrame(frame); } function stop() { run = false; cancelAnimationFrame(raf); if (ctx) ctx.clearRect(0, 0, cw, ch); } /* Calque commun + écouteurs, une seule fois ; chaque fête branche clickFx / resizeFx */ function setup() { if (built) return; built = true; cv = el('canvas', 'season-fx'); cv.setAttribute('aria-hidden', 'true'); document.body.appendChild(cv); ctx = cv.getContext('2d'); size(); colors(); let rt; addEventListener('resize', () => { size(); clearTimeout(rt); rt = setTimeout(() => resizeFx && resizeFx(), 200); }); addEventListener('scroll', dropSpider, { passive: true }); addEventListener('pointermove', e => { m.vx += (e.clientX - (m.x > -9000 ? m.x : e.clientX)) * 0.3; m.x = e.clientX; m.y = e.clientY; }, { passive: true }); addEventListener('touchend', () => { m.x = m.y = -9999; }); addEventListener('pointerdown', e => { if (!run || !clickFx || e.target.closest('a, button, input, textarea, select, label, [data-cursor-label], .season-wheel')) return; clickFx(e.clientX, e.clientY); }); addEventListener('yb:theme', colors); } /* Retire tout le décor de la fête en cours */ function teardown() { gen++; stop(); document.querySelectorAll('.season-deco').forEach(e => e.remove()); timers.forEach(t => { clearInterval(t); clearTimeout(t); }); timers = []; clickFx = resizeFx = null; spider = null; bats = []; embers = []; balloons = []; rain = []; root.classList.remove('season-glitch'); flakes = []; rockets = []; sparks = []; drift = []; fishes = []; eqBars = []; } /* Monte le décor d'une fête ('' = aucune) */ function mount(key) { teardown(); if (key) { root.setAttribute('data-season', key); root.removeAttribute('data-season-off'); } else { root.removeAttribute('data-season'); if (season) root.setAttribute('data-season-off', season); } if (key) season = key; setup(); colors(); if (key) { (BUILDS[key] || (() => {}))(); start(); } syncCV(); syncButton(); dispatchEvent(new CustomEvent('yb:theme', { detail: root.getAttribute('data-theme') || 'dark' })); // l'orbe relit ses couleurs } /* Bascule animée comme le mode clair / sombre : cercle qui s'étend depuis le bouton */ function swap(key, from) { if (!document.startViewTransition || CALM) { root.classList.add('theme-fade'); mount(key); return setTimeout(() => root.classList.remove('theme-fade'), 500); } const r = (from || btn || document.body).getBoundingClientRect(), x = r.left + r.width / 2, y = r.top + r.height / 2; const end = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y)); const vt = document.startViewTransition(() => mount(key)); vt.ready.then(() => root.animate( { clipPath: ['circle(0px at ' + x + 'px ' + y + 'px)', 'circle(' + end + 'px at ' + x + 'px ' + y + 'px)'] }, { duration: 750, easing: 'cubic-bezier(.7,0,.3,1)', pseudoElement: '::view-transition-new(root)' } )).catch(() => {}); } /* CV assorti : liens et aperçus [data-cv] pointent vers la version de la fête active, sinon la version par défaut */ function syncCV() { const on = root.getAttribute('data-season'), list = (window.YB_SEASONS || {}).cv || []; document.querySelectorAll('[data-cv]').forEach(e => { const attr = e.tagName === 'IMG' ? 'src' : e.hasAttribute('data-preview') && e.tagName !== 'A' ? 'data-preview' : 'href'; if (!e.dataset.cvBase) e.dataset.cvBase = e.getAttribute(e.dataset.cv || attr) || ''; const base = e.dataset.cvBase, k = on && list.indexOf(on) > -1 ? on : ''; e.setAttribute(e.dataset.cv || attr, k ? base.replace('/uploads/cv/', '/uploads/cv/saisons/' + k + '/') : base); }); } /* ── Roue de sélection ─────────────────────────────────────────── */ let btn, wheel; const DATA = () => window.YB_SEASONS || { list: {} }; function syncButton() { if (!btn) return; const on = root.getAttribute('data-season'), d = DATA().list[on || season]; if (d && btn.dataset.icon !== (on || season)) { btn.innerHTML = d.icon; btn.dataset.icon = on || season; } btn.setAttribute('aria-pressed', on ? 'true' : 'false'); btn.setAttribute('aria-label', PICK() ? 'Choisir un thème' : on ? btn.dataset.labelOff : btn.dataset.labelOn); } const PICK = () => root.hasAttribute('data-sx'); function toast(t) { const e = el('div', 'season-pill'); e.textContent = t; e.classList.add('is-hidden'); document.body.appendChild(e); requestAnimationFrame(() => requestAnimationFrame(() => e.classList.remove('is-hidden'))); setTimeout(() => { e.classList.add('is-hidden'); setTimeout(() => e.remove(), 500); }, 2200); } function flip() { const on = !PICK(); try { on ? localStorage.setItem('yb-sx', '1') : (localStorage.removeItem('yb-sx'), localStorage.removeItem('yb-sp')); } catch (e) {} on ? root.setAttribute('data-sx', '') : root.removeAttribute('data-sx'); syncButton(); toast(on ? '✦ ✦ ✦' : '✕'); if (on) return setTimeout(openWheel, 300); closeWheel(); const a = DATA().auto || ''; if (a !== (root.getAttribute('data-season') || '')) swap(a); } function listen() { const q = "&&((%'%'BA"; let n = 0; const step = c => { n = c === q.charCodeAt(n) ? n + 1 : c === q.charCodeAt(0) ? Math.min(n, 2) || 1 : 0; if (n === q.length) { n = 0; flip(); } }; addEventListener('keydown', e => { if (!e.target.closest('input, textarea, select, [contenteditable]')) step(e.keyCode); }); let t0 = null; addEventListener('touchstart', e => { const t = e.touches[0]; t0 = [t.clientX, t.clientY]; }, { passive: true }); addEventListener('touchend', e => { if (!t0) return; const t = e.changedTouches[0], dx = t.clientX - t0[0], dy = t.clientY - t0[1]; t0 = null; if (Math.max(Math.abs(dx), Math.abs(dy)) < 40) return step(n > 7 ? q.charCodeAt(n) : 0); step(Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? 39 : 37) : (dy > 0 ? 40 : 38)); }, { passive: true }); } function openWheel() { if (wheel) return closeWheel(); const L = DATA().list, keys = Object.keys(L), cur = root.getAttribute('data-season') || ''; const items = keys.map(k => ({ k, label: L[k].label, when: L[k].when, icon: L[k].icon })) .concat([{ k: '', label: 'Sans décor', when: 'le site normal', icon: '' }, { k: 'auto', label: 'Automatique', when: 'la fête du moment' + (DATA().auto ? ' : ' + L[DATA().auto].label : ' (aucune)'), icon: '' }]); const picked = (() => { try { return localStorage.getItem('yb-sp'); } catch (e) { return null; } })(); wheel = el('div', 'season-wheel'); wheel.setAttribute('role', 'dialog'); wheel.setAttribute('aria-label', 'Choisir le thème de fête'); wheel.innerHTML = '
THÈME
'; const ring = wheel.firstChild, hub = wheel.querySelector('.season-wheel__hub'), n = items.length; const show = it => { hub.querySelector('strong').textContent = it.label; hub.querySelector('span').textContent = it.when; }; items.forEach((it, i) => { const a = -Math.PI / 2 + i * 2 * Math.PI / n, b = el('button', 'season-wheel__item'); b.type = 'button'; b.innerHTML = it.icon + '' + it.label + ''; b.style.setProperty('--x', Math.cos(a).toFixed(4)); b.style.setProperty('--y', Math.sin(a).toFixed(4)); b.style.setProperty('--i', i); const active = it.k === 'auto' ? picked === null : (picked !== null && it.k === cur); if (active) b.classList.add('is-current'); const prev = () => window.YBCursor && YBCursor.preview(it.k === 'auto' ? (DATA().auto || '') : it.k); b.addEventListener('pointerenter', () => { show(it); prev(); }); b.addEventListener('focus', () => show(it)); b.addEventListener('pointerleave', () => window.YBCursor && YBCursor.preview(null)); b.addEventListener('click', () => { try { it.k === 'auto' ? localStorage.removeItem('yb-sp') : localStorage.setItem('yb-sp', it.k || 'none'); } catch (e) {} const target = it.k === 'auto' ? (DATA().auto || '') : it.k; closeWheel(); if (target !== (root.getAttribute('data-season') || '')) swap(target, b); }); ring.appendChild(b); }); show(items.find(it => it.k === cur) || items[n - 1]); wheel.addEventListener('click', e => { if (e.target === wheel) closeWheel(); }); document.body.appendChild(wheel); requestAnimationFrame(() => wheel.classList.add('is-open')); (ring.querySelector('.is-current') || ring.firstChild).focus({ preventScroll: true }); } function closeWheel() { if (!wheel) return; const w = wheel; wheel = null; if (window.YBCursor) YBCursor.preview(null); w.classList.remove('is-open'); setTimeout(() => w.remove(), 350); if (btn) btn.focus({ preventScroll: true }); } return { init() { season = root.getAttribute('data-season') || root.getAttribute('data-season-off') || ''; btn = document.querySelector('[data-season-toggle]'); if (btn) btn.addEventListener('click', () => { if (PICK()) return openWheel(); const on = root.hasAttribute('data-season'); try { localStorage.setItem('yb-season', on ? 'off' : 'on'); } catch (e) {} swap(on ? '' : season); }); addEventListener('keydown', e => { if (e.key === 'Escape') closeWheel(); }); listen(); syncButton(); syncCV(); if (root.hasAttribute('data-season')) { setup(); (BUILDS[season] || (() => {}))(); start(); } document.addEventListener('visibilitychange', () => { if (document.hidden) stop(); else if (root.hasAttribute('data-season') && built) start(); }); } }; })(); document.addEventListener('DOMContentLoaded', () => YBSeason.init());