Mode clair / sombre et thèmes de saison
This commit is contained in:
parent
da05adede1
commit
17cf2c8380
19 changed files with 3563 additions and 0 deletions
813
assets/js/seasons.js
Normal file
813
assets/js/seasons.js
Normal file
|
|
@ -0,0 +1,813 @@
|
|||
/* 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 = '<svg viewBox="0 0 30 26"><path d="M2 22.5c6 2.4 20 2.4 26 0-3.6-1.7-6.5-2.1-7.4-2.2L17.3 6.6c-.4-1.5.6-3.2 3.4-4.4-3.8-.6-7.4 1.4-8.3 5.6L9.5 20.3C7.6 20.6 4.6 21.1 2 22.5z" fill="#221829" stroke="rgb(var(--lime-rgb))" stroke-width=".9" stroke-linejoin="round"/><path d="M9.8 18.6c3.4-.6 7.2-.6 10.4 0l.4 1.8c-3.6-.5-7.4-.5-11.2 0z" fill="rgb(var(--lime-rgb))"/></svg>';
|
||||
const SPIDER = '<svg viewBox="0 0 30 30"><g fill="none" stroke="rgb(var(--ink-rgb))" stroke-width="1.3" stroke-linecap="round"><path d="M11 13 4 8 2 3M11 15 3 14 1 10M11 17 3 21 1 25M12 18 6 25 5 29M19 13l7-5 2-5M19 15l8-1 2-4M19 17l8 4 2 4M18 18l6 7 1 4"/></g><ellipse cx="15" cy="16" rx="4.6" ry="5.6" fill="rgb(var(--ink-rgb))"/><circle cx="15" cy="9.6" r="3" fill="rgb(var(--ink-rgb))"/><circle cx="13.9" cy="9.4" r=".8" fill="rgb(var(--lime-rgb))"/><circle cx="16.1" cy="9.4" r=".8" fill="rgb(var(--lime-rgb))"/></svg>';
|
||||
/* 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 '<svg viewBox="0 0 150 150"><path d="' + d + '" fill="none" stroke="rgb(var(--ink-rgb))" stroke-width=".8"/></svg>';
|
||||
})();
|
||||
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', '<i></i><i></i>'); fog.setAttribute('aria-hidden', 'true');
|
||||
document.body.appendChild(fog);
|
||||
spider = el('div', 'season-spider season-deco', '<span class="season-spider__thread"></span>' + 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 = '<svg viewBox="0 0 30 26"><path d="M4 20.5C5.5 11 11 3.5 19 3.2c4.4-.2 7 2.6 7.6 7.6-1.8-2.4-4-3.3-6-2.9 2 3.2 3 7.4 3.1 12.4z" fill="rgb(var(--lime-rgb))"/><rect x="2.4" y="19" width="23.6" height="5.2" rx="2.6" fill="#fdfbf6" stroke="rgba(var(--ink-rgb),.25)" stroke-width=".6"/><circle cx="26.6" cy="11.4" r="2.7" fill="#fdfbf6" stroke="rgba(var(--ink-rgb),.25)" stroke-width=".6"/></svg>';
|
||||
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 = '<svg viewBox="0 0 30 26"><path d="M8 23 15.5 3 23 23z" fill="rgb(var(--lime-rgb))"/><path d="M10.3 17h10.4M12.4 11.4h6.2" stroke="rgb(var(--season-2-rgb))" stroke-width="2"/><circle cx="15.5" cy="3" r="2.6" fill="rgb(var(--season-2-rgb))"/></svg>';
|
||||
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 <b>' + y + '</b> ✦';
|
||||
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 = '<b>' + (y + 1) + '</b> DANS ' + (d ? d + ' J ' : '') + '<b>' + pad(Math.floor(s / 3600) % 24) + ':' + pad(Math.floor(s / 60) % 60) + ':' + pad(s % 60) + '</b>';
|
||||
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 = '<svg viewBox="0 0 30 26"><circle cx="15" cy="12" r="10" fill="#c8102e"/><circle cx="15" cy="12" r="6.8" fill="#fff"/><circle cx="15" cy="12" r="3.6" fill="#1f3fa8"/><path d="M10 20l-2.5 6 4-1.6L13 26l.8-5M20 20l2.5 6-4-1.6L17 26l-.8-5" fill="#c8102e"/></svg>';
|
||||
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 = '<svg viewBox="0 0 30 26"><ellipse cx="15" cy="22" rx="13" ry="3.4" fill="#13703a"/><path d="M8 21.5 9.5 5h11L22 21.5z" fill="#1b8f4c"/><rect x="8.6" y="15" width="12.8" height="3.4" fill="#111"/><rect x="13" y="14.4" width="4" height="4.6" fill="none" stroke="#f2c14e" stroke-width="1.2"/></svg>';
|
||||
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 = '<svg viewBox="0 0 30 26"><path d="M9 24C5.5 16 5 5 8.6 3.6 12 2.4 12.8 14 12.4 24zM17.6 24c-.4-10 .4-21.6 3.8-20.4C25 5 24.5 16 21 24z" fill="#fdfbf6" stroke="rgba(var(--ink-rgb),.3)" stroke-width=".7"/><path d="M9.3 21c-1.6-5-1.8-12.6-.2-14.4 1.4-.4 2 8 1.8 14.4zM19.4 21c.1-6.4.6-14.8 2-14.4 1.6 1.8 1.4 9.4-.2 14.4z" fill="rgb(var(--lime-rgb))"/></svg>';
|
||||
const EGG_COLS = [['#ff9fcb', '#fff1a8'], ['#8ee6c2', '#ff9fcb'], ['#bfa2ff', '#fff1a8'], ['#ffd36e', '#8ec9ff'], ['#8ec9ff', '#ffffff']];
|
||||
const eggSvg = c => '<svg viewBox="0 0 26 34"><path d="M13 1C19.6 1 25 11 25 20.4 25 28 19.7 33 13 33S1 28 1 20.4C1 11 6.4 1 13 1z" fill="' + c[0] + '" stroke="rgba(0,0,0,.2)"/><path d="M1.6 17l4 3 3.8-3 3.6 3 3.6-3 3.8 3 4-3" fill="none" stroke="' + c[1] + '" stroke-width="2.4"/><circle cx="9" cy="10" r="1.6" fill="' + c[1] + '"/><circle cx="17" cy="26" r="1.6" fill="' + c[1] + '"/></svg>';
|
||||
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 ? '<b>' + (total - found) + '</b> Œ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) => '<svg viewBox="0 0 60 30"><path d="M2 15C10 4 26 1 38 6c4 2 7 5 9 9-2 4-5 7-9 9-12 5-28 2-36-9z" fill="' + c1 + '" stroke="rgba(0,0,0,.25)" stroke-width="1"/><path d="M46 15l12-10v20z" fill="' + c1 + '" stroke="rgba(0,0,0,.25)" stroke-width="1"/><path d="M20 8c3 4 3 10 0 14M28 7c3 5 3 11 0 16" fill="none" stroke="' + c2 + '" stroke-width="1.6"/><circle cx="11" cy="13" r="2.4" fill="#111"/><circle cx="11.6" cy="12.4" r=".8" fill="#fff"/></svg>';
|
||||
const HAT_FISH = '<svg viewBox="0 0 30 26"><g transform="translate(1 6) scale(.48)">' + FISH('rgb(var(--lime-rgb))', 'rgb(var(--season-2-rgb))').replace(/<\/?svg[^>]*>/g, '') + '</g></svg>';
|
||||
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 = '<svg viewBox="0 0 30 26"><path d="M5 19v-5a10 10 0 0 1 20 0v5" fill="none" stroke="rgb(var(--ink-rgb))" stroke-width="2.2"/><rect x="2.5" y="15" width="6" height="9" rx="2.5" fill="rgb(var(--lime-rgb))"/><rect x="21.5" y="15" width="6" height="9" rx="2.5" fill="rgb(var(--lime-rgb))"/></svg>';
|
||||
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 = '<svg viewBox="0 0 30 26"><path d="M14 2.5 10 9" stroke="rgb(var(--ink-rgb))" stroke-width="1"/><g transform="rotate(14 15 15)"><path d="M6 10h20v10H6l-4-5z" fill="#ffd400"/><circle cx="5.4" cy="15" r="1" fill="#0b0b0b"/><text x="8" y="17.6" font-family="monospace" font-weight="800" font-size="7" fill="#0b0b0b">-100%</text></g></svg>';
|
||||
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 = '<em>BLACK FRIDAY</em><em>CV À -100 %</em><em>CONTACT GRATUIT</em><em>STOCK LIMITÉ : 1 YASSER</em>';
|
||||
const tape = el('div', 'season-tape season-deco', '<span>' + txt + txt + txt + txt + '</span>'); tape.setAttribute('aria-hidden', 'true');
|
||||
document.body.appendChild(tape);
|
||||
}
|
||||
|
||||
/* ── Anniversaire : ballons à éclater, confettis, bougie ──────── */
|
||||
const HAT_CANDLE = '<svg viewBox="0 0 30 26"><rect x="12.5" y="10" width="5" height="14" rx="1.2" fill="rgb(var(--lime-rgb))"/><path d="M12.5 13.5l5-2M12.5 18l5-2M12.5 22.5l5-2" stroke="#fff" stroke-width="1.1"/><path d="M15 9.6V7.6" stroke="rgb(var(--ink-rgb))" stroke-width=".9"/><path class="season-flame" d="M15 1.2c1.9 2.1 2.4 3.6 1.7 4.9-.7 1.2-2.7 1.2-3.4 0-.7-1.3-.2-2.8 1.7-4.9z" fill="#ffb238"/></svg>';
|
||||
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 = '<svg viewBox="0 0 30 26"><path d="M5 2v23" stroke="rgb(var(--ink-rgb))" stroke-width="1.2" stroke-linecap="round"/><path d="M5.6 3h10v12h-10z" fill="#006233"/><path d="M15.6 3h10v12h-10z" fill="#ffffff"/><path d="M5.6 3h20v12h-20z" fill="none" stroke="rgba(var(--ink-rgb),.25)" stroke-width=".5"/><path d="M17.3 5.4a3.8 3.8 0 1 0 0 7.2 3.05 3.05 0 1 1 0-7.2z" fill="#d21034"/><path d="M18.9 7.5l.42 1 1.08.04-.85.66.3 1.04-.95-.6-.9.62.28-1.05-.86-.64 1.08-.05z" fill="#d21034"/></svg>';
|
||||
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 = '<svg viewBox="0 0 30 26"><path d="M2 5.2c5 1.6 21 1.6 26 0l-.6 2.6c-5 1.2-19.8 1.2-24.8 0z" fill="#e8452c"/><path d="M5.5 10.2h19v2.2h-19z" fill="#e8452c"/><path d="M8 7.4h2.6V25H8zM19.4 7.4H22V25h-2.6z" fill="#e8452c"/><path d="M13.7 8.2h2.6v2h-2.6z" fill="#e8452c"/><path d="M2 5.2c5 1.6 21 1.6 26 0" fill="none" stroke="#1b1416" stroke-width="1.1"/></svg>';
|
||||
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',
|
||||
'<div class="season-term" role="dialog" aria-label="Animation d\'intrusion (Échap pour passer)">' +
|
||||
'<div class="season-term__bar"><i></i><i></i><i></i><span>yass@servyass: ~</span></div>' +
|
||||
'<pre class="season-term__body" aria-live="polite"></pre>' +
|
||||
'<div class="season-term__granted">ACCESS GRANTED</div></div>');
|
||||
document.body.appendChild(ov);
|
||||
const body = ov.querySelector('.season-term__body'), g = gen;
|
||||
const add = html => { body.insertAdjacentHTML('beforeend', html); };
|
||||
const caret = '<span class="season-caret"></span>';
|
||||
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', '<span class="t-dim">Connexion établie · clé ed25519 · chiffrement chacha20-poly1305</span>', 350],
|
||||
['cmd', 'sudo ./portfolio --unlock', 220],
|
||||
['out', '[sudo] mot de passe pour yass : <span class="t-dim">••••••••••</span>', 320],
|
||||
['bar', '', 250],
|
||||
['out', '<span class="t-ok">✓</span> 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('<span class="t-bar"></span>\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('<span class="t-prompt">yass@servyass</span>:<span class="t-path">~</span>$ <span class="t-cmd"></span>' + 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: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M6.5 17.5l11-11"/></svg>' },
|
||||
{ k: 'auto', label: 'Automatique', when: 'la fête du moment' + (DATA().auto ? ' : ' + L[DATA().auto].label : ' (aucune)'), icon: '<svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9"/><path d="M12 7v5l3 2M21 3v6h-6"/></svg>' }]);
|
||||
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 = '<div class="season-wheel__ring"></div><div class="season-wheel__hub"><small>THÈME</small><strong></strong><span></span></div>';
|
||||
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 + '<em>' + it.label + '</em>';
|
||||
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());
|
||||
Loading…
Add table
Add a link
Reference in a new issue