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
57
assets/js/about.js
Normal file
57
assets/js/about.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
/* about.js : interactions propres à la page « Qui suis-je »
|
||||
- terminal : la commande se tape lettre par lettre, puis les lignes de la fiche apparaissent
|
||||
- portrait : légère inclinaison 3D qui suit la souris
|
||||
- parcours : la ligne de la frise se remplit selon le scroll
|
||||
Mode capture ?ybstatic=1 : tout est affiché d'emblée. */
|
||||
(function () {
|
||||
const STATIC = document.documentElement.classList.contains('yb-static');
|
||||
const TOUCH = matchMedia('(pointer: coarse)').matches;
|
||||
|
||||
/* Terminal tapé */
|
||||
const term = document.querySelector('[data-type]');
|
||||
if (term) {
|
||||
const cmd = term.querySelector('[data-type-cmd]'), rows = [...term.querySelectorAll('[data-type-row]')];
|
||||
const full = cmd ? cmd.textContent : '';
|
||||
if (STATIC) rows.forEach(r => r.classList.add('is-typed'));
|
||||
else {
|
||||
if (cmd) cmd.textContent = '';
|
||||
const io = new IntersectionObserver(es => es.forEach(en => {
|
||||
if (!en.isIntersecting) return;
|
||||
io.disconnect();
|
||||
let i = 0;
|
||||
const type = () => {
|
||||
if (cmd && i <= full.length) { cmd.textContent = full.slice(0, i++); return setTimeout(type, 45 + Math.random() * 40); }
|
||||
rows.forEach((r, k) => setTimeout(() => r.classList.add('is-typed'), 180 + k * 160));
|
||||
};
|
||||
setTimeout(type, 300);
|
||||
}), { threshold: 0.45 });
|
||||
io.observe(term);
|
||||
}
|
||||
}
|
||||
|
||||
/* Portrait incliné à la souris */
|
||||
const frame = document.querySelector('[data-tilt]');
|
||||
if (frame && !STATIC && !TOUCH) {
|
||||
const fig = frame.parentElement;
|
||||
fig.addEventListener('mousemove', e => {
|
||||
const r = frame.getBoundingClientRect();
|
||||
const x = (e.clientX - r.left) / r.width - 0.5, y = (e.clientY - r.top) / r.height - 0.5;
|
||||
frame.style.setProperty('--ry', (x * 10).toFixed(2) + 'deg');
|
||||
frame.style.setProperty('--rx', (-y * 10).toFixed(2) + 'deg');
|
||||
});
|
||||
fig.addEventListener('mouseleave', () => { frame.style.setProperty('--ry', '0deg'); frame.style.setProperty('--rx', '0deg'); });
|
||||
}
|
||||
|
||||
/* Frise du parcours */
|
||||
const tl = document.querySelector('[data-timeline]');
|
||||
if (tl && !STATIC) {
|
||||
const fill = tl.querySelector('.qs-tl__fill');
|
||||
const tick = () => {
|
||||
const r = tl.getBoundingClientRect();
|
||||
const p = Math.max(0, Math.min(1, (innerHeight * 0.6 - r.top) / r.height));
|
||||
fill.style.height = (p * 100).toFixed(1) + '%';
|
||||
requestAnimationFrame(tick);
|
||||
};
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
})();
|
||||
193
assets/js/competences.js
Normal file
193
assets/js/competences.js
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
/* competences.js : interactions propres à la page /competences/
|
||||
- chiffres du manifeste qui défilent jusqu'à leur valeur à l'entrée dans l'écran
|
||||
- méthode : l'étape au centre de l'écran s'allume, le grand numéro suit
|
||||
- preuves : la vignette du projet suit la souris (lerp, comme le curseur)
|
||||
Mode capture ?ybstatic=1 (html.yb-static) : tout reste figé dans son état final. */
|
||||
(function () {
|
||||
const STATIC = document.documentElement.classList.contains('yb-static');
|
||||
|
||||
/* Compteurs */
|
||||
const nums = document.querySelectorAll('.cp-num[data-count]');
|
||||
const show = (el, v) => {
|
||||
const pad = +el.dataset.pad || 0, suf = el.dataset.suffix || '';
|
||||
el.textContent = String(Math.round(v)).padStart(pad, '0') + suf;
|
||||
};
|
||||
if (!STATIC && nums.length) {
|
||||
nums.forEach(el => show(el, 0));
|
||||
const io = new IntersectionObserver(es => es.forEach(en => {
|
||||
if (!en.isIntersecting) return;
|
||||
io.unobserve(en.target);
|
||||
const el = en.target, to = +el.dataset.count, t0 = performance.now(), dur = 1400;
|
||||
const step = now => {
|
||||
const k = Math.min(1, (now - t0) / dur), e = 1 - Math.pow(1 - k, 3);
|
||||
show(el, to * e);
|
||||
if (k < 1) requestAnimationFrame(step);
|
||||
};
|
||||
requestAnimationFrame(step);
|
||||
}), { threshold: 0.6 });
|
||||
nums.forEach(el => io.observe(el));
|
||||
}
|
||||
|
||||
/* Méthode */
|
||||
const steps = [...document.querySelectorAll('.cp-method__step')];
|
||||
const bigs = [...document.querySelectorAll('.cp-method__num')];
|
||||
if (steps.length && !STATIC) {
|
||||
const set = i => {
|
||||
steps.forEach((s, k) => s.classList.toggle('is-on', k === i));
|
||||
bigs.forEach((b, k) => b.classList.toggle('is-on', k === i));
|
||||
};
|
||||
const io = new IntersectionObserver(es => es.forEach(en => { if (en.isIntersecting) set(+en.target.dataset.step); }),
|
||||
{ rootMargin: '-45% 0px -45% 0px' });
|
||||
steps.forEach(s => io.observe(s));
|
||||
}
|
||||
|
||||
/* ── Preuves : paquet de cartes qui suit la souris + roue de sélection ──
|
||||
- plusieurs projets : paquet (le premier devant, les autres derrière, un coin visible)
|
||||
- près du bord droit, l'aperçu passe à gauche du curseur en glissant
|
||||
- clic sur une compétence à plusieurs projets : le paquet se fige et une roue
|
||||
façon « menu d'armes » s'ouvre autour ; la direction de la souris choisit le projet */
|
||||
const prev = document.querySelector('.cp-preview');
|
||||
const wheel = document.querySelector('.cp-wheel');
|
||||
const rows = [...document.querySelectorAll('.cp-proof')];
|
||||
if (!prev || !rows.length) return;
|
||||
const TOUCH = matchMedia('(pointer: coarse)').matches;
|
||||
const esc = t => String(t).replace(/[&<>"]/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[c]));
|
||||
const itemsOf = li => [...li.querySelectorAll('a[data-thumb]')].map(a => ({ a, name: a.dataset.name, thumb: a.dataset.thumb, tag: a.dataset.tag || '', kind: a.dataset.kind || 'projet' }));
|
||||
const label = it => (it.kind === 'article' ? 'ARTICLE · ' : '') + it.name;
|
||||
|
||||
/* Paquet de cartes */
|
||||
const buildDeck = (items, frontIdx = 0) => {
|
||||
const order = [items[frontIdx], ...items.filter((_, k) => k !== frontIdx)].slice(0, 3);
|
||||
prev.innerHTML = order.map((it, k) => `<div class="cp-deck__card" style="--k:${k}"><img src="${esc(it.thumb)}" alt=""></div>`).reverse().join('')
|
||||
+ `<span class="cp-deck__name">${esc(label(order[0]))}</span>`
|
||||
+ (items.length > 1 ? `<span class="cp-deck__count">+${items.length - 1}</span>` : '');
|
||||
prev.classList.toggle('is-stack', items.length > 1);
|
||||
};
|
||||
|
||||
/* Suivi de la souris avec bascule gauche/droite fluide */
|
||||
const W = () => prev.offsetWidth || 360, GAP = 40;
|
||||
const m = { x: innerWidth / 2, y: innerHeight / 2, cx: innerWidth / 2, cy: innerHeight / 2, off: 1 };
|
||||
let hovering = false, pinned = false, curRow = null;
|
||||
if (!STATIC && !TOUCH) {
|
||||
addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; }, { passive: true });
|
||||
rows.forEach(li => {
|
||||
li.addEventListener('mouseenter', () => { if (pinned) return; curRow = li; buildDeck(itemsOf(li)); prev.classList.add('is-on'); hovering = true; });
|
||||
li.addEventListener('mouseleave', () => { if (pinned) return; prev.classList.remove('is-on'); hovering = false; });
|
||||
itemsOf(li).forEach((it, k) => it.a.addEventListener('mouseenter', () => { if (!pinned) buildDeck(itemsOf(li), k); }));
|
||||
});
|
||||
(function loop() {
|
||||
if (!pinned) {
|
||||
const w = W();
|
||||
/* Côté voulu : à droite du curseur, sauf si l'aperçu sortirait de l'écran */
|
||||
const want = (m.x + GAP + w + 24 > innerWidth) ? -1 : 1;
|
||||
m.off += (want - m.off) * 0.12; // glisse d'un côté à l'autre
|
||||
const tx = m.x + m.off * (GAP + w / 2);
|
||||
const ty = Math.max(w * 0.32 + 16, Math.min(innerHeight - w * 0.32 - 16, m.y));
|
||||
m.cx += (tx - m.cx) * 0.16; m.cy += (ty - m.cy) * 0.16;
|
||||
prev.style.left = m.cx + 'px'; prev.style.top = m.cy + 'px';
|
||||
prev.style.setProperty('--tilt', Math.max(-7, Math.min(7, (tx - m.cx) * 0.03)) + 'deg');
|
||||
}
|
||||
requestAnimationFrame(loop);
|
||||
})();
|
||||
}
|
||||
|
||||
/* ── Menu circulaire : les cartes du paquet s'écartent en cercle autour du clic ──
|
||||
2 cartes : gauche / droite ; 3 et plus : réparties en partant du haut.
|
||||
La direction de la souris (ou du doigt) choisit la carte, comme une roue de jeu. */
|
||||
if (!wheel) return;
|
||||
const ring = wheel.querySelector('.cp-wheel__svg');
|
||||
const cSkill = wheel.querySelector('.cp-wheel__skill'), cName = wheel.querySelector('.cp-wheel__name'), cHint = wheel.querySelector('.cp-wheel__hint');
|
||||
let wItems = [], cards = [], angles = [], hot = -1, wc = { x: 0, y: 0 }, rad = 230;
|
||||
const setHot = i => {
|
||||
if (i === hot) return;
|
||||
hot = i;
|
||||
cards.forEach((c, k) => c.classList.toggle('is-hot', k === i));
|
||||
wheel.classList.toggle('has-hot', i >= 0);
|
||||
const it = wItems[i];
|
||||
cName.textContent = it ? it.name : '';
|
||||
cHint.textContent = it ? (it.kind === 'article' ? it.tag : (it.tag ? it.tag.split(' · ').slice(0, 2).join(' · ') : 'VOIR LE PROJET')) : '';
|
||||
};
|
||||
function openWheel(li, x, y) {
|
||||
wItems = itemsOf(li);
|
||||
if (wItems.length < 2) { wItems[0] && wItems[0].a.click(); return; }
|
||||
pinned = true; hot = -1;
|
||||
const N = wItems.length, small = innerWidth < 720;
|
||||
const cw = small ? Math.min(132, innerWidth * 0.34) : 250, ch = cw / 1.6;
|
||||
const start = N === 2 ? Math.PI : -Math.PI / 2, step = (Math.PI * 2) / N;
|
||||
const base = wItems.map((_, k) => start + k * step);
|
||||
const maxCos = Math.max(...base.map(a => Math.abs(Math.cos(a)))) || 0.01;
|
||||
const maxSin = Math.max(...base.map(a => Math.abs(Math.sin(a)))) || 0.01;
|
||||
/* Écartement voulu, puis réduit si la carte la plus excentrée sortirait de l'écran.
|
||||
Sur téléphone le cercle devient un ovale : étroit en largeur, plus haut. */
|
||||
const want = small ? cw * 0.95 + 24 : (N === 2 ? cw * 0.82 + 40 : cw * 0.95 + 20);
|
||||
/* La carte visée grossit (×1.12) et s'écarte (×1.08) : on réserve cette place */
|
||||
const HX = 1.08, HW = 0.56;
|
||||
const rx = Math.min(want, (innerWidth / 2 - cw * HW - 10) / (maxCos * HX));
|
||||
const ry = Math.min(small ? Math.max(want, rx * 1.35, ch + 70) : want, (innerHeight / 2 - ch * HW - 10) / (maxSin * HX));
|
||||
rad = Math.max(rx, ry);
|
||||
const ex = maxCos * rx * HX + cw * HW + 10, ey = maxSin * ry * HX + ch * HW + 10;
|
||||
wc.x = Math.max(ex, Math.min(innerWidth - ex, x));
|
||||
wc.y = Math.max(ey, Math.min(innerHeight - ey, y));
|
||||
/* Angles réels des cartes (ovale) : servent à la visée par direction */
|
||||
angles = base.map(a => Math.atan2(Math.sin(a) * ry, Math.cos(a) * rx));
|
||||
const pos = base.map(a => [Math.cos(a) * rx, Math.sin(a) * ry]);
|
||||
ring.innerHTML = '';
|
||||
wheel.querySelectorAll('.cp-wheel__card').forEach(c => c.remove());
|
||||
cards = wItems.map((it, k) => {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'cp-wheel__card';
|
||||
el.style.cssText = `width:${cw}px;height:${ch}px;left:${wc.x}px;top:${wc.y}px;--d:${k * 45}ms;--tx:${pos[k][0]}px;--ty:${pos[k][1]}px`;
|
||||
el.innerHTML = `<img src="${esc(it.thumb)}" alt=""><span class="cp-wheel__label${it.kind === 'article' ? ' is-article' : ''}">${esc(label(it))}</span>`;
|
||||
el.addEventListener('pointerenter', () => setHot(k));
|
||||
wheel.appendChild(el);
|
||||
return el;
|
||||
});
|
||||
ring.style.cssText = `left:${wc.x}px;top:${wc.y}px;width:${rx * 2}px;height:${ry * 2}px`;
|
||||
const c = wheel.querySelector('.cp-wheel__center');
|
||||
c.style.left = wc.x + 'px'; c.style.top = wc.y + 'px';
|
||||
cSkill.textContent = li.querySelector('.cp-proof__skill').textContent;
|
||||
wheel.hidden = false;
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => wheel.classList.add('is-open')));
|
||||
prev.classList.add('is-pinned');
|
||||
document.body.classList.add('no-scroll');
|
||||
setHot(0);
|
||||
}
|
||||
function closeWheel() {
|
||||
if (wheel.hidden) return;
|
||||
wheel.classList.remove('is-open', 'has-hot'); prev.classList.remove('is-pinned');
|
||||
document.body.classList.remove('no-scroll');
|
||||
setTimeout(() => { wheel.hidden = true; pinned = false; if (!hovering) prev.classList.remove('is-on'); }, 380);
|
||||
}
|
||||
rows.forEach(li => li.addEventListener('click', e => {
|
||||
if (e.target.closest('a')) return; // les liens texte restent des liens
|
||||
const rect = prev.getBoundingClientRect();
|
||||
const onDeck = prev.classList.contains('is-on') && !TOUCH;
|
||||
openWheel(li, onDeck ? rect.left + rect.width / 2 : (TOUCH ? innerWidth / 2 : e.clientX), onDeck ? rect.top + rect.height / 2 : (TOUCH ? innerHeight / 2 : e.clientY));
|
||||
}));
|
||||
/* Carte la plus proche de la direction visée */
|
||||
const aim = (x, y) => {
|
||||
const dx = x - wc.x, dy = y - wc.y;
|
||||
if (Math.hypot(dx, dy) < 40) return;
|
||||
const a = Math.atan2(dy, dx);
|
||||
let best = 0, bd = 9;
|
||||
angles.forEach((b, k) => { const d = Math.abs(Math.atan2(Math.sin(a - b), Math.cos(a - b))); if (d < bd) { bd = d; best = k; } });
|
||||
setHot(best);
|
||||
};
|
||||
wheel.addEventListener('pointermove', e => aim(e.clientX, e.clientY));
|
||||
wheel.addEventListener('click', e => {
|
||||
const d = Math.hypot(e.clientX - wc.x, e.clientY - wc.y);
|
||||
const onCard = e.target.closest('.cp-wheel__card');
|
||||
if (!onCard && (d > rad * 1.9 || d < 40)) return closeWheel(); // clic au centre ou loin dehors
|
||||
if (!onCard) aim(e.clientX, e.clientY);
|
||||
const it = wItems[hot];
|
||||
if (it) { wheel.classList.add('is-go'); setTimeout(() => it.a.click(), 180); }
|
||||
});
|
||||
addEventListener('keydown', e => {
|
||||
if (wheel.hidden) return;
|
||||
if (e.key === 'Escape') closeWheel();
|
||||
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); setHot((hot + 1) % wItems.length); }
|
||||
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); setHot((hot - 1 + wItems.length) % wItems.length); }
|
||||
if (e.key === 'Enter' && wItems[hot]) wItems[hot].a.click();
|
||||
});
|
||||
addEventListener('pageshow', () => { wheel.classList.remove('is-open', 'is-go', 'has-hot'); wheel.hidden = true; pinned = false; document.body.classList.remove('no-scroll'); });
|
||||
})();
|
||||
106
assets/js/cursor.js
Normal file
106
assets/js/cursor.js
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
/* cursor.js : Curseur custom (desktop uniquement)
|
||||
YBCursor.init();
|
||||
Au repos : point accent. Sur un lien / bouton : le point s'étire en index et la main apparaît autour
|
||||
(le bout du doigt reste sur la position de la souris). data-cursor-label="VOIR LE PROJET" = label contextuel.
|
||||
La main change selon la fête quand c'est cohérent (html[data-season]), relue à chaque événement yb:theme.
|
||||
Dans la roue des projets et articles (.cp-wheel) : le point devient une loupe, elle aussi accordée à la fête. */
|
||||
window.YBCursor = (function () {
|
||||
let wrap, dot, hand, loupe, lbl, curSeason = null, override = null;
|
||||
const m = { x: -100, y: -100, cx: -100, cy: -100 };
|
||||
|
||||
/* Silhouette commune : main qui pointe, bout de l'index en (11.5, 1) */
|
||||
const SHAPE = 'M11.5 1C13.2 1 14.5 2.3 14.5 4v9.2c.5-.7 1.4-1.1 2.4-1.1 1.3 0 2.4.8 2.7 1.9.5-.5 1.3-.8 2.2-.8 1.5 0 2.7 1.1 2.8 2.5.5-.4 1.2-.6 1.9-.6 1.5 0 2.7 1.2 2.7 2.7V25c0 5.5-4 9.5-9.5 9.5h-2.3c-3.4 0-5.8-1.3-7.8-3.9l-5.4-7.1c-.9-1.2-.7-2.9.5-3.8 1.2-.9 2.8-.7 3.7.4l.1.1V4c0-1.7 1.3-3 3-3z';
|
||||
const CREASES = 'M14.5 13.2V19M19.6 14v5.5M24.6 15.7V20';
|
||||
const base = (fill, stroke, extra, crease) =>
|
||||
'<path d="' + SHAPE + '" fill="' + fill + '" stroke="' + stroke + '" stroke-width="1.4" stroke-linejoin="round"/>' +
|
||||
'<path d="' + CREASES + '" fill="none" stroke="' + (crease || stroke) + '" stroke-width="1.2" stroke-linecap="round"/>' + (extra || '');
|
||||
const HANDS = {
|
||||
'': () => base('var(--lime)', 'var(--bg)'),
|
||||
// gant squelette : os blancs sur gant noir
|
||||
halloween: () => base('#15101a', 'var(--lime)',
|
||||
'<g fill="none" stroke="#efe6d2" stroke-width="1.6" stroke-linecap="round"><path d="M11.5 3.6v3.4M11.5 9.2v3.8M11.5 15.2v4"/><path d="M17 15.6v2.6M22 16.6v2.4M27 18.4v2.2"/><path d="M12.6 23.8l2.8 5.6M17 22.6l1 6.6M21.4 22.6l-.6 6.6M25.6 23.6l-2.4 5.8"/><circle cx="18.6" cy="31.2" r="1.2" fill="#efe6d2"/></g>', '#efe6d2'),
|
||||
// gant rouge et revers en fourrure blanche
|
||||
noel: () => base('#d61f35', '#5a0b16',
|
||||
'<rect x="9.2" y="29.6" width="20.6" height="6.2" rx="3.1" fill="#fdfbf6" stroke="#5a0b16" stroke-width="1.1"/>', '#8e1222'),
|
||||
// gant vert, trèfle doré sur le dos de la main
|
||||
'st-patrick': () => base('#1b8f4c', '#0b3d21',
|
||||
'<g fill="#f2c14e" transform="translate(21 25)"><circle cx="-1.5" cy="-1.6" r="1.7"/><circle cx="1.5" cy="-1.6" r="1.7"/><circle cx="0" cy="1" r="1.7"/></g>'),
|
||||
// gant blanc de cérémonie, revers doré, étincelle au bout du doigt
|
||||
'nouvel-an': () => base('#ffffff', '#16141c',
|
||||
'<rect x="9.4" y="30" width="20.2" height="5.4" rx="2.7" fill="#f2c14e" stroke="#16141c" stroke-width="1.1"/><path class="yb-hand-spark" d="M4 2l.9 2.1L7 5l-2.1.9L4 8l-.9-2.1L1 5l2.1-.9z" fill="#f2c14e"/>', '#9aa0b0'),
|
||||
// gant de fête : turquoise, petite bague dorée
|
||||
anniversaire: () => base('var(--lime)', 'var(--bg)',
|
||||
'<path d="M8.6 15.4h5.8" stroke="#ffcf4a" stroke-width="2" stroke-linecap="round"/>')
|
||||
};
|
||||
|
||||
/* Loupe : centre de la lentille en (14, 14) = position de la souris ; manche dessiné à plat puis tourné à 45° */
|
||||
const lens = (ring, glass, handle, extra, inside) =>
|
||||
'<g transform="rotate(45 14 14)"><rect x="24" y="11.6" width="14" height="4.8" rx="2.4" fill="' + handle + '" stroke="var(--bg)" stroke-width="1"/>' + (extra || '') + '</g>' +
|
||||
'<circle cx="14" cy="14" r="10" fill="' + glass + '"/>' + (inside || '') +
|
||||
'<circle cx="14" cy="14" r="10" fill="none" stroke="' + ring + '" stroke-width="3"/>' +
|
||||
'<path d="M8.6 11.2a6 6 0 0 1 4-3.6" fill="none" stroke="#fff" stroke-opacity=".7" stroke-width="1.6" stroke-linecap="round"/>';
|
||||
const stripes = (cols, w) => cols.map((c, i) => '<rect x="' + (24 + i * w) + '" y="11.6" width="' + w + '" height="4.8" fill="' + c + '"/>').join('');
|
||||
const LOUPES = {
|
||||
'': () => lens('var(--lime)', 'rgba(255,255,255,.08)', 'var(--ink)'),
|
||||
// toile d'araignée dans le verre, manche en bois sombre
|
||||
halloween: () => lens('var(--lime)', 'rgba(255,123,28,.1)', '#9a6a3a', '',
|
||||
'<path d="M14 4.5v19M4.5 14h19M7.3 7.3l13.4 13.4M20.7 7.3 7.3 20.7M9.5 14a4.5 4.5 0 0 1 9 0 4.5 4.5 0 0 1-9 0M6.8 14a7.2 7.2 0 0 1 14.4 0 7.2 7.2 0 0 1-14.4 0" fill="none" stroke="#efe6d2" stroke-opacity=".35" stroke-width=".6"/>'),
|
||||
// manche en sucre d'orge, cerclage doré
|
||||
noel: () => lens('#f2c14e', 'rgba(255,255,255,.1)', '#fdfbf6', stripes(['#d61f35', 'transparent', '#d61f35', 'transparent', '#d61f35', 'transparent', '#d61f35'], 2)),
|
||||
'st-patrick': () => lens('#f2c14e', 'rgba(61,220,132,.12)', '#1b8f4c', '', '<g fill="#3ddc84" fill-opacity=".55" transform="translate(17.5 17.5) scale(.8)"><circle cx="-1.5" cy="-1.6" r="1.7"/><circle cx="1.5" cy="-1.6" r="1.7"/><circle cx="0" cy="1" r="1.7"/></g>'),
|
||||
'nouvel-an': () => lens('#f2c14e', 'rgba(242,193,78,.1)', '#d9dde8', stripes(['#f2c14e', '#f2c14e'], 2), '<path class="yb-hand-spark" d="M18 7l.7 1.6 1.6.7-1.6.7-.7 1.6-.7-1.6-1.6-.7 1.6-.7z" fill="#fff"/>'),
|
||||
juillet: () => lens('#ffffff', 'rgba(255,255,255,.08)', '#ffffff', stripes(['#1f3fa8', '#1f3fa8', '#ffffff', '#ffffff', '#c8102e', '#c8102e', '#c8102e'], 2)),
|
||||
'black-friday': () => lens('#ffd400', 'rgba(255,212,0,.1)', '#0b0b0b', stripes(['#ffd400', '#0b0b0b', '#ffd400', '#0b0b0b', '#ffd400', '#0b0b0b', '#ffd400'], 2)),
|
||||
anniversaire: () => lens('var(--lime)', 'rgba(46,230,197,.1)', '#ffffff', stripes(['#2ee6c5', '#ffffff', '#ff6b81', '#ffffff', '#ffcf4a', '#ffffff', '#2ee6c5'], 2)),
|
||||
poisson: () => lens('#4fd1ff', 'rgba(79,209,255,.12)', '#ffb347', '', '<circle cx="11" cy="17" r="1.6" fill="none" stroke="#fff" stroke-opacity=".5" stroke-width=".7"/><circle cx="16.5" cy="10.5" r="1" fill="none" stroke="#fff" stroke-opacity=".5" stroke-width=".7"/>')
|
||||
};
|
||||
|
||||
function paint() {
|
||||
const s = override !== null ? override : document.documentElement.getAttribute('data-season') || '';
|
||||
const k = HANDS[s] ? s : '';
|
||||
// aperçu (roue des thèmes) : la main prend aussi l'accent de la fête survolée
|
||||
const acc = override !== null && override ? (((window.YB_SEASONS || {}).list || {})[override] || {}).accent || '' : '';
|
||||
[hand, loupe].forEach(e => acc ? e.style.setProperty('--lime', acc) : e.style.removeProperty('--lime'));
|
||||
const key = s + '|' + k;
|
||||
if (key === curSeason) return;
|
||||
curSeason = key;
|
||||
hand.innerHTML = '<svg viewBox="-1 -1 34 38" width="34" height="38">' + HANDS[k]() + '</svg>';
|
||||
loupe.innerHTML = '<svg viewBox="0 0 34 34" width="34" height="34">' + (LOUPES[s] || LOUPES[''])() + '</svg>';
|
||||
}
|
||||
function setState(label, link, inWheel) {
|
||||
lbl.textContent = label || '';
|
||||
lbl.style.opacity = label ? '1' : '0';
|
||||
lbl.style.transform = label ? 'scale(1)' : 'scale(.6)';
|
||||
wrap.classList.toggle('is-loupe', !!inWheel);
|
||||
wrap.classList.toggle('is-hand', !!link && !inWheel);
|
||||
}
|
||||
function loop() {
|
||||
m.cx += (m.x - m.cx) * 0.25; m.cy += (m.y - m.cy) * 0.25;
|
||||
wrap.style.transform = 'translate(' + m.cx + 'px,' + m.cy + 'px)';
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
return {
|
||||
/* Montre la main d'une fête sans l'activer ('' = main normale, null = revenir à la fête affichée) */
|
||||
preview(key) { if (!hand) return; override = key; curSeason = null; paint(); },
|
||||
init() {
|
||||
// Animations inconditionnelles : seul ?ybstatic=1 (html.yb-static) coupe le curseur
|
||||
if (matchMedia('(pointer: coarse)').matches || document.documentElement.classList.contains('yb-static')) return;
|
||||
document.documentElement.classList.add('has-custom-cursor'); // CSS : .has-custom-cursor, .has-custom-cursor * { cursor:none }
|
||||
wrap = document.createElement('div'); wrap.className = 'yb-cursor';
|
||||
dot = document.createElement('div'); dot.className = 'yb-cursor__dot';
|
||||
hand = document.createElement('div'); hand.className = 'yb-cursor__hand';
|
||||
loupe = document.createElement('div'); loupe.className = 'yb-cursor__loupe';
|
||||
lbl = document.createElement('div'); lbl.className = 'yb-cursor__label';
|
||||
wrap.append(dot, hand, loupe, lbl); document.body.appendChild(wrap);
|
||||
paint(); addEventListener('yb:theme', paint);
|
||||
addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; });
|
||||
document.addEventListener('mouseover', e => {
|
||||
const w = e.target.closest('.cp-wheel');
|
||||
const t = e.target.closest('[data-cursor-label], a, button, [data-cursor]');
|
||||
if (!t) return setState('', false, w);
|
||||
setState(t.getAttribute('data-cursor-label') || '', true, w);
|
||||
});
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
};
|
||||
})();
|
||||
258
assets/js/effects.js
vendored
Normal file
258
assets/js/effects.js
vendored
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
/* effects.js : Scroll inertiel, nav auto-masquée, progression, rail, reveals,
|
||||
scroll horizontal + skew, blob, wipe de page, menu mobile. Vanilla JS.
|
||||
Base : handoff/theme-assets/effects.js (design v3), adapté au site :
|
||||
- animations inconditionnelles (choix de Yasser) : seul ?ybstatic=1
|
||||
(html.yb-static, posé dans header.php) les coupe, pour les captures ;
|
||||
- le wipe couvre tous les liens internes, pas seulement [data-wipe] ;
|
||||
- barres de compétences [data-bar], compteur des travaux = nb réel de cartes. */
|
||||
const YB_STATIC = document.documentElement.classList.contains('yb-static');
|
||||
const YB_TOUCH = matchMedia('(pointer: coarse)').matches;
|
||||
|
||||
/* Scroll inertiel (façon Lenis) : desktop uniquement ; sur mobile on garde le scroll natif. */
|
||||
window.YBSmooth = { v: 0, init() {
|
||||
if (YB_STATIC || YB_TOUCH) return;
|
||||
let cur = scrollY, tgt = scrollY, wt = 0;
|
||||
addEventListener('wheel', e => {
|
||||
if (e.ctrlKey || document.body.classList.contains('no-scroll')) return;
|
||||
e.preventDefault();
|
||||
const max = document.documentElement.scrollHeight - innerHeight;
|
||||
tgt = Math.max(0, Math.min(max, tgt + e.deltaY)); wt = performance.now();
|
||||
}, { passive: false });
|
||||
const tick = () => {
|
||||
if (performance.now() - wt < 1600) { cur += (tgt - cur) * 0.095; scrollTo(0, cur); }
|
||||
else { cur = tgt = scrollY; }
|
||||
this.v += ((tgt - cur) - this.v) * 0.12; // vélocité, utilisée pour le skew
|
||||
requestAnimationFrame(tick);
|
||||
};
|
||||
requestAnimationFrame(tick);
|
||||
}};
|
||||
|
||||
/* Nav qui se masque en descendant + barre de progression lime en haut */
|
||||
window.YBNav = { init(navSel, progSel) {
|
||||
const nav = document.querySelector(navSel), prog = document.querySelector(progSel);
|
||||
let last = scrollY;
|
||||
const tick = () => {
|
||||
const y = scrollY, max = Math.max(1, document.documentElement.scrollHeight - innerHeight);
|
||||
if (prog) prog.style.transform = 'scaleX(' + Math.min(1, y / max) + ')';
|
||||
if (nav && !document.body.classList.contains('no-scroll')) {
|
||||
if (y - last > 1.5 && y > 180) nav.style.transform = 'translateY(-104%)';
|
||||
else if (y - last < -1.5 || y <= 180) nav.style.transform = 'translateY(0)';
|
||||
}
|
||||
last = y; requestAnimationFrame(tick);
|
||||
};
|
||||
requestAnimationFrame(tick);
|
||||
}};
|
||||
|
||||
/* Rail vertical : chaque item [data-rail-target="#section"] s'allume quand sa section passe à mi-écran */
|
||||
window.YBRail = { init(railSel) {
|
||||
const rail = document.querySelector(railSel); if (!rail) return;
|
||||
const items = [...rail.querySelectorAll('[data-rail-target]')];
|
||||
const tick = () => {
|
||||
let act = 0;
|
||||
items.forEach((it, i) => { const s = document.querySelector(it.dataset.railTarget); if (s && s.getBoundingClientRect().top <= innerHeight * 0.5) act = i; });
|
||||
items.forEach((it, i) => it.classList.toggle('is-active', i === act));
|
||||
requestAnimationFrame(tick);
|
||||
};
|
||||
requestAnimationFrame(tick);
|
||||
}};
|
||||
|
||||
/* Reveals au scroll : [data-reveal] ; les barres [data-bar] se remplissent à leur entrée */
|
||||
window.YBReveals = { init() {
|
||||
const all = document.querySelectorAll('[data-reveal], [data-bar]');
|
||||
if (YB_STATIC) { all.forEach(el => el.classList.add('is-in')); return; }
|
||||
const io = new IntersectionObserver(es => es.forEach(en => {
|
||||
if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); }
|
||||
}), { threshold: 0.12 });
|
||||
all.forEach(el => io.observe(el));
|
||||
}};
|
||||
|
||||
/* Scroll horizontal des travaux (desktop/tablette) + skew selon la vélocité + compteur 01/06.
|
||||
Mobile (<720px) : CSS bascule la piste en scroll-snap horizontal natif (voir effects.css). */
|
||||
window.YBHScroll = { init(secSel, trackSel, countSel) {
|
||||
const sec = document.querySelector(secSel), track = document.querySelector(trackSel), count = document.querySelector(countSel);
|
||||
if (!sec || !track || YB_STATIC) return;
|
||||
const total = Math.max(1, track.querySelectorAll('.card').length);
|
||||
const pad = n => String(n).padStart(2, '0');
|
||||
const tick = () => {
|
||||
if (innerWidth >= 720) {
|
||||
const r = sec.getBoundingClientRect();
|
||||
const prog = Math.max(0, Math.min(1, -r.top / (r.height - innerHeight)));
|
||||
const dist = Math.max(0, track.scrollWidth - innerWidth);
|
||||
const skew = Math.max(-4.5, Math.min(4.5, (YBSmooth.v || 0) * 0.011));
|
||||
track.style.transform = 'translateX(' + (-prog * dist) + 'px) skewX(' + (-skew) + 'deg)';
|
||||
if (count) count.textContent = pad(Math.min(total, 1 + Math.floor(prog * total))) + ' / ' + pad(total);
|
||||
} else track.style.transform = '';
|
||||
requestAnimationFrame(tick);
|
||||
};
|
||||
requestAnimationFrame(tick);
|
||||
}};
|
||||
|
||||
/* Blob lumineux : suit la souris dans la zone, fondu + rétrécit quand elle sort */
|
||||
window.YBBlob = { init(zoneSel, blobSel) {
|
||||
const zone = document.querySelector(zoneSel), blob = document.querySelector(blobSel);
|
||||
if (!zone || !blob || YB_TOUCH || YB_STATIC) { if (blob) blob.style.display = 'none'; return; }
|
||||
const m = { x: 0, y: 0, bx: 0, by: 0, bo: 0 };
|
||||
addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; });
|
||||
const tick = () => {
|
||||
const r = zone.getBoundingClientRect();
|
||||
m.bx += (m.x - r.left - m.bx) * 0.06; m.by += (m.y - r.top - m.by) * 0.06;
|
||||
const inside = m.x >= r.left && m.x <= r.right && m.y >= r.top - 60 && m.y <= r.bottom + 60;
|
||||
m.bo += ((inside ? 1 : 0) - m.bo) * 0.08;
|
||||
blob.style.transform = 'translate(' + m.bx + 'px,' + m.by + 'px) scale(' + (0.6 + m.bo * 0.4) + ')';
|
||||
blob.style.opacity = m.bo.toFixed(3);
|
||||
requestAnimationFrame(tick);
|
||||
};
|
||||
requestAnimationFrame(tick);
|
||||
}};
|
||||
|
||||
/* Hero : légère parallaxe du bloc titre à la souris (desktop) */
|
||||
window.YBHeroParallax = { init(sel) {
|
||||
const el = document.querySelector(sel);
|
||||
if (!el || YB_TOUCH || YB_STATIC) return;
|
||||
const m = { x: innerWidth / 2, y: innerHeight / 2, cx: innerWidth / 2, cy: innerHeight / 2 };
|
||||
addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; });
|
||||
const tick = () => {
|
||||
m.cx += (m.x - m.cx) * 0.25; m.cy += (m.y - m.cy) * 0.25;
|
||||
if (el.getBoundingClientRect().bottom > 0) el.style.transform = 'translate(' + (m.cx - innerWidth / 2) * -0.012 + 'px,' + (m.cy - innerHeight / 2) * -0.008 + 'px)';
|
||||
requestAnimationFrame(tick);
|
||||
};
|
||||
requestAnimationFrame(tick);
|
||||
}};
|
||||
|
||||
/* Wipe de page : rideau lime. Le rideau (.yb-wipe) est rendu par header.php et
|
||||
couvre l'écran dès le premier paint (html.is-entering) ; il remonte une fois la page prête.
|
||||
Toute navigation interne le fait redescendre ; le libellé vient de data-wipe et
|
||||
survit au changement de page via sessionStorage (clé ybWipe). */
|
||||
/* Couleur des barres du navigateur (meta theme-color) : fond du thème, accent pendant le rideau */
|
||||
window.YBBar = (function () {
|
||||
let meta, wiping = false;
|
||||
const css = v => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
|
||||
const set = c => { if (meta && c && meta.content !== c) meta.content = c; };
|
||||
return {
|
||||
accent() { wiping = true; set(css('--lime')); },
|
||||
base() { wiping = false; set(css('--bg')); },
|
||||
init() {
|
||||
meta = document.querySelector('meta[name="theme-color"]');
|
||||
if (!meta) { meta = document.createElement('meta'); meta.name = 'theme-color'; document.head.appendChild(meta); }
|
||||
addEventListener('yb:theme', () => setTimeout(() => wiping ? this.accent() : this.base(), 0));
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
window.YBWipe = { init() {
|
||||
let w = document.querySelector('.yb-wipe');
|
||||
if (!w) {
|
||||
w = document.createElement('div');
|
||||
w.className = 'yb-wipe';
|
||||
w.innerHTML = '<span class="yb-wipe__label"></span>';
|
||||
document.body.appendChild(w);
|
||||
}
|
||||
const label = w.querySelector('.yb-wipe__label');
|
||||
try { sessionStorage.removeItem('ybWipe'); } catch (e) {}
|
||||
if (!YB_STATIC) { YBBar.accent(); setTimeout(() => YBBar.base(), 520); } else YBBar.base();
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => document.documentElement.classList.remove('is-entering')));
|
||||
if (YB_STATIC) return;
|
||||
document.addEventListener('click', e => {
|
||||
const a = e.target.closest('a[href]');
|
||||
if (!a || a.target === '_blank' || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
|
||||
const href = a.getAttribute('href');
|
||||
if (!href || href.charAt(0) === '#' || /^(mailto:|tel:|javascript:)/i.test(href)) return;
|
||||
if (a.host !== location.host) return;
|
||||
if (/\/wp-(admin|login)/.test(a.pathname) || /\.(pdf|zip|png|jpe?g|webp|svg|gif)$/i.test(a.pathname)) return;
|
||||
if (a.pathname === location.pathname && a.hash) return;
|
||||
e.preventDefault();
|
||||
const txt = a.dataset.wipe || '';
|
||||
try { sessionStorage.setItem('ybWipe', txt); } catch (err) {}
|
||||
label.textContent = txt;
|
||||
w.classList.add('is-covering'); YBBar.accent();
|
||||
setTimeout(() => { location.href = a.href; }, 480);
|
||||
});
|
||||
/* Retour arrière depuis le cache (bfcache) : ne pas rester bloqué sous le rideau */
|
||||
addEventListener('pageshow', e => { if (e.persisted) { w.classList.remove('is-covering'); YBBar.base(); } });
|
||||
}};
|
||||
|
||||
/* Coordonnées protégées contre la collecte automatique : [data-pv] (texte), [data-pv-href] (lien),
|
||||
[data-pv-copy] (bouton copier). Encodage côté PHP : ROT13 → inversion → base64.
|
||||
Décodage au premier geste humain (souris, toucher, clavier, focus, scroll). */
|
||||
window.YBProtect = (function () {
|
||||
let done = false;
|
||||
const rot13 = t => t.replace(/[a-z]/gi, c => { const b = c <= 'Z' ? 65 : 97; return String.fromCharCode((c.charCodeAt(0) - b + 13) % 26 + b); });
|
||||
const dec = v => { try { return rot13(decodeURIComponent(escape(atob(v))).split('').reverse().join('')); } catch (e) { return ''; } };
|
||||
function reveal() {
|
||||
if (done) return; done = true;
|
||||
document.querySelectorAll('[data-pv]').forEach(el => { el.textContent = dec(el.dataset.pv); el.removeAttribute('data-pv'); });
|
||||
document.querySelectorAll('[data-pv-href]').forEach(el => { el.setAttribute('href', dec(el.dataset.pvHref)); el.removeAttribute('data-pv-href'); });
|
||||
document.querySelectorAll('[data-pv-copy]').forEach(el => { el.dataset.copy = dec(el.dataset.pvCopy); el.removeAttribute('data-pv-copy'); });
|
||||
EVENTS.forEach(ev => removeEventListener(ev, reveal, true));
|
||||
}
|
||||
const EVENTS = ['pointermove', 'pointerdown', 'touchstart', 'keydown', 'focusin', 'wheel', 'scroll'];
|
||||
return { reveal, init() {
|
||||
if (!document.querySelector('[data-pv],[data-pv-href],[data-pv-copy]')) return;
|
||||
if (YB_STATIC) return reveal();
|
||||
EVENTS.forEach(ev => addEventListener(ev, reveal, { capture: true, passive: true }));
|
||||
/* Un clic sur un lien protégé avant décodage : on décode puis on relance le clic */
|
||||
document.addEventListener('click', e => {
|
||||
const a = e.target.closest('[data-pv-href]');
|
||||
if (!a) return;
|
||||
e.preventDefault(); reveal(); a.click();
|
||||
}, true);
|
||||
} };
|
||||
})();
|
||||
|
||||
/* Thème clair / sombre : bouton [data-theme-toggle], choix mémorisé (localStorage yb-theme).
|
||||
Bascule animée : un cercle s'étend depuis le bouton (View Transitions), fondu sinon. */
|
||||
window.YBTheme = { init() {
|
||||
const btn = document.querySelector('[data-theme-toggle]'); if (!btn) return;
|
||||
const root = document.documentElement;
|
||||
const cur = () => root.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
|
||||
const label = () => btn.setAttribute('aria-label', cur() === 'light' ? 'Passer en mode sombre' : 'Passer en mode clair');
|
||||
const apply = t => {
|
||||
root.setAttribute('data-theme', t);
|
||||
try { localStorage.setItem('yb-theme', t); } catch (e) {}
|
||||
label();
|
||||
dispatchEvent(new CustomEvent('yb:theme', { detail: t }));
|
||||
};
|
||||
label();
|
||||
btn.addEventListener('click', () => {
|
||||
const next = cur() === 'light' ? 'dark' : 'light';
|
||||
const r = btn.getBoundingClientRect(), x = r.left + r.width / 2, y = r.top + r.height / 2;
|
||||
if (!document.startViewTransition || YB_STATIC) {
|
||||
root.classList.add('theme-fade'); apply(next);
|
||||
setTimeout(() => root.classList.remove('theme-fade'), 500);
|
||||
return;
|
||||
}
|
||||
const end = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
|
||||
const vt = document.startViewTransition(() => apply(next));
|
||||
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)' }
|
||||
));
|
||||
});
|
||||
}};
|
||||
|
||||
/* Menu mobile plein écran : bouton [data-menu-toggle], panneau [data-menu] */
|
||||
window.YBMenu = { init() {
|
||||
const btn = document.querySelector('[data-menu-toggle]'), panel = document.querySelector('[data-menu]');
|
||||
if (!btn || !panel) return;
|
||||
const set = open => {
|
||||
panel.classList.toggle('is-open', open);
|
||||
document.body.classList.toggle('no-scroll', open);
|
||||
btn.textContent = open ? 'FERMER ✕' : 'MENU';
|
||||
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
panel.setAttribute('aria-hidden', open ? 'false' : 'true');
|
||||
};
|
||||
btn.addEventListener('click', () => set(!panel.classList.contains('is-open')));
|
||||
panel.querySelectorAll('a').forEach(a => a.addEventListener('click', () => set(false)));
|
||||
addEventListener('keydown', e => { if (e.key === 'Escape' && panel.classList.contains('is-open')) set(false); });
|
||||
}};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
YBBar.init(); YBProtect.init(); YBTheme.init(); YBSmooth.init(); YBReveals.init(); YBWipe.init(); YBMenu.init();
|
||||
YBNav.init('.site-nav', '.scroll-progress');
|
||||
YBRail.init('.section-rail');
|
||||
YBHScroll.init('#travaux', '.works-track', '.works-count');
|
||||
YBBlob.init('#apropos', '.about-blob');
|
||||
YBHeroParallax.init('.hero__content');
|
||||
if (window.YBCursor) YBCursor.init();
|
||||
if (window.YBOrb) YBOrb.init('#orb-canvas', { sections: { works: '#travaux', about: '#apropos', cta: '#cta' } });
|
||||
});
|
||||
322
assets/js/orb.js
Normal file
322
assets/js/orb.js
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
/* orb.js : Orbe de particules persistante (vanilla JS)
|
||||
<canvas id="orb-canvas"></canvas> en position:fixed; inset:0; z-index:0; pointer-events:none
|
||||
YBOrb.init('#orb-canvas', { sections: { works:'#travaux', about:'#apropos', cta:'#cta' } });
|
||||
Sur les pages internes (sans sections), l'orbe reste dans son état "hero". */
|
||||
window.YBOrb = (function () {
|
||||
let cv, ctx, cw, ch, run = false, secs = {};
|
||||
const m = { x: -9999, y: -9999 };
|
||||
const pts = [], rx = [], ry = [];
|
||||
const N = 550;
|
||||
for (let i = 0; i < N; i++) {
|
||||
const y = 1 - (i / (N - 1)) * 2, r = Math.sqrt(1 - y * y), th = i * 2.39996323;
|
||||
pts.push([Math.cos(th) * r, y, Math.sin(th) * r]);
|
||||
rx.push(Math.sin(i * 12.9898) * 0.9 + Math.sin(i * 0.7) * 0.4);
|
||||
ry.push(Math.cos(i * 78.233) * 0.9 + Math.cos(i * 1.3) * 0.4);
|
||||
}
|
||||
// États [cx, cy, R, éclatement, alpha] (fractions du viewport)
|
||||
const A = [0.72, 0.42, 0.34, 0, 1]; // hero : grande, à droite
|
||||
const B = [0.11, 0.24, 0.16, 0, 0.55]; // travaux : petite lune en haut à gauche
|
||||
const C = [0.5, 0.48, 0.46, 1, 0.4]; // à propos : éclatée en champ d'étoiles
|
||||
const D = [0.76, 0.52, 0.3, 0, 0.95]; // CTA : reformée
|
||||
const c01 = v => Math.max(0, Math.min(1, v));
|
||||
const ease = k => k * k * (3 - 2 * k);
|
||||
const mix = (a, b, k) => a.map((v, i) => v + (b[i] - v) * k);
|
||||
const top = el => el ? el.getBoundingClientRect().top : null;
|
||||
/* Couleurs lues dans le thème (--lime-rgb / --ink-rgb), relues à chaque bascule clair/sombre */
|
||||
let LIME = '211,253,80', INK = '245,245,240', GOLD = '242,193,78';
|
||||
function readColors() {
|
||||
const cs = getComputedStyle(document.documentElement);
|
||||
LIME = cs.getPropertyValue('--lime-rgb').trim() || LIME;
|
||||
INK = cs.getPropertyValue('--ink-rgb').trim() || INK;
|
||||
GOLD = cs.getPropertyValue('--season-2-rgb').trim() || GOLD;
|
||||
}
|
||||
/* Halloween : visage de citrouille (repère de la sphère, y vers le bas, rayon 1) */
|
||||
const inTri = (x, y, a, b, c) => {
|
||||
const d = (p, q, r) => (p[0] - r[0]) * (q[1] - r[1]) - (q[0] - r[0]) * (p[1] - r[1]);
|
||||
const P = [x, y], d1 = d(P, a, b), d2 = d(P, b, c), d3 = d(P, c, a);
|
||||
return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
|
||||
};
|
||||
const EYE_L = [[-0.55, -0.06], [-0.17, -0.06], [-0.36, -0.42]], EYE_R = [[0.17, -0.06], [0.55, -0.06], [0.36, -0.42]];
|
||||
const NOSE = [[-0.08, 0.13], [0.08, 0.13], [0, 0.01]];
|
||||
const smile = x => { const k = 1 - (x / 0.64) * (x / 0.64); return [0.2 + 0.13 * k, 0.27 + 0.3 * k]; };
|
||||
function inFace(x, y) {
|
||||
if (inTri(x, y, ...EYE_L) || inTri(x, y, ...EYE_R) || inTri(x, y, ...NOSE)) return true;
|
||||
if (Math.abs(x) > 0.64) return false;
|
||||
const [t, b] = smile(x);
|
||||
if (y < t || y > b) return false;
|
||||
if (Math.abs(Math.abs(x) - 0.22) < 0.07 && y < t + 0.09) return false; // dents du haut
|
||||
if (Math.abs(x) < 0.08 && y > b - 0.09) return false; // dent du bas
|
||||
return true;
|
||||
}
|
||||
/* Autres fêtes : forme de l'orbe [kx, ky], pulsation, couleur des points, décor dessous / dessus.
|
||||
point() renvoie [rgb, alpha, taille] ou rien (couleur par défaut). C = { LIME, INK, GOLD } */
|
||||
const tag = (c, x, y, w, h, txt, C, a) => { // étiquette de prix suspendue
|
||||
c.save(); c.translate(x, y); c.rotate(0.12);
|
||||
c.fillStyle = 'rgba(' + C.LIME + ',' + a + ')';
|
||||
c.beginPath(); c.moveTo(0, 0); c.lineTo(w, 0); c.lineTo(w, h); c.lineTo(0, h); c.lineTo(-h * 0.45, h / 2); c.closePath(); c.fill();
|
||||
c.fillStyle = 'rgba(0,0,0,' + a + ')'; c.font = '800 ' + Math.round(h * 0.46) + 'px "JetBrains Mono", monospace';
|
||||
c.textBaseline = 'middle'; c.fillText(txt, h * 0.12, h / 2 + 1);
|
||||
c.beginPath(); c.arc(-h * 0.12, h / 2, h * 0.09, 0, 6.283); c.fill(); c.restore();
|
||||
};
|
||||
const PASTEL = ['255,159,203', '142,230,194', '255,222,120', '190,160,255', '140,200,255'];
|
||||
const SEASON = {
|
||||
'nouvel-an': {
|
||||
point: (i, p, x, y, z, lime, a, t) => { const tw = Math.sin(t * 4 + i * 1.7); return tw > 0.75 ? ['255,255,255', Math.min(1, a + 0.5), 1.5] : [i % 2 ? GOLD_() : LIME, a * 1.1, 1]; },
|
||||
over: (c, cx, cy, R, t, k, C) => { // boule à facettes suspendue
|
||||
c.strokeStyle = 'rgba(' + C.INK + ',' + 0.3 * k + ')'; c.lineWidth = 1;
|
||||
c.beginPath(); c.moveTo(cx, 0); c.lineTo(cx, cy - R * 1.02); c.stroke();
|
||||
for (let j = 0; j < 4; j++) { const ang = t * 0.6 + j * 1.57, rr = R * 1.12; // reflets qui tournent
|
||||
c.fillStyle = 'rgba(255,255,255,' + 0.5 * k * (0.5 + 0.5 * Math.sin(t * 3 + j)) + ')';
|
||||
c.beginPath(); c.arc(cx + Math.cos(ang) * rr, cy + Math.sin(ang) * rr * 0.35, 2.2, 0, 6.283); c.fill(); }
|
||||
}
|
||||
},
|
||||
'juillet': {
|
||||
point: (i, p, x, y, z, lime, a) => [x < -0.33 ? '40,90,255' : x > 0.33 ? '255,60,80' : INK, a * 1.15, 1]
|
||||
},
|
||||
'st-patrick': {
|
||||
point: (i, p, x, y, z, lime, a, t) => i % 9 === 0 ? [GOLD, Math.min(1, a + 0.3 * (0.5 + 0.5 * Math.sin(t * 3 + i))), 1.3] : [i % 3 ? LIME : INK, a, 1],
|
||||
under: (c, cx, cy, R, t, k) => { // arc-en-ciel derrière l'orbe
|
||||
['255,80,80', '255,160,60', '255,225,80', '80,210,120', '80,150,255', '160,100,255'].forEach((col, j) => {
|
||||
c.strokeStyle = 'rgba(' + col + ',' + 0.16 * k + ')'; c.lineWidth = R * 0.035;
|
||||
c.beginPath(); c.arc(cx, cy, R * (1.42 - j * 0.04), Math.PI * 1.12, Math.PI * 1.88); c.stroke();
|
||||
});
|
||||
}
|
||||
},
|
||||
'paques': {
|
||||
shape: [0.84, 1.1],
|
||||
point: (i, p, x, y, z, lime, a) => { const band = Math.floor((p[1] + 1) * 4.5); return [band % 2 ? PASTEL[band % PASTEL.length] : INK, a * (band % 2 ? 1.25 : 0.8), band % 2 ? 1.2 : 1]; }
|
||||
},
|
||||
'poisson': {
|
||||
shape: [1.14, 0.8],
|
||||
point: (i, p, x, y, z, lime, a) => [(Math.round(x * 6) + Math.round(y * 6)) % 2 ? LIME : GOLD, a * 1.05, 1],
|
||||
over: (c, cx, cy, R, t, k, C) => {
|
||||
const w = Math.sin(t * 5) * R * 0.08;
|
||||
c.fillStyle = 'rgba(' + C.LIME + ',' + 0.55 * k + ')';
|
||||
c.beginPath(); c.moveTo(cx + R * 1.02, cy); c.lineTo(cx + R * 1.5, cy - R * 0.42 + w); c.lineTo(cx + R * 1.38, cy + w * 0.3); c.lineTo(cx + R * 1.5, cy + R * 0.42 + w); c.closePath(); c.fill(); // queue
|
||||
c.beginPath(); c.moveTo(cx - R * 0.2, cy - R * 0.74); c.quadraticCurveTo(cx + R * 0.2, cy - R * 1.12, cx + R * 0.5, cy - R * 0.66); c.closePath(); c.fill(); // nageoire
|
||||
c.fillStyle = 'rgba(' + C.INK + ',' + k + ')'; c.beginPath(); c.arc(cx - R * 0.62, cy - R * 0.12, R * 0.09, 0, 6.283); c.fill(); // œil
|
||||
c.fillStyle = 'rgba(' + C.LIME + ',' + k + ')'; c.beginPath(); c.arc(cx - R * 0.6, cy - R * 0.14, R * 0.035, 0, 6.283); c.fill();
|
||||
for (let j = 0; j < 3; j++) { const ph = (t * 0.5 + j / 3) % 1; // bulles
|
||||
c.strokeStyle = 'rgba(' + C.INK + ',' + 0.45 * k * (1 - ph) + ')'; c.lineWidth = 1.2;
|
||||
c.beginPath(); c.arc(cx - R * 1.1 - Math.sin(ph * 9) * 6, cy - R * 0.2 - ph * R * 0.9, 3 + j * 2, 0, 6.283); c.stroke(); }
|
||||
}
|
||||
},
|
||||
'musique': {
|
||||
pulse: t => { const b = (t * 2) % 1; return 1 + 0.035 * Math.exp(-b * 6); }, // 120 BPM
|
||||
point: (i, p, x, y, z, lime, a, t) => [i % 4 === 0 ? GOLD : lime ? LIME : INK, a, 1],
|
||||
under: (c, cx, cy, R, t, k, C) => { // vinyle : sillons + macaron
|
||||
c.save(); c.translate(cx, cy); c.rotate(t * 1.4);
|
||||
for (let r = 0.3; r < 0.98; r += 0.06) { c.strokeStyle = 'rgba(' + C.INK + ',' + 0.07 * k + ')'; c.lineWidth = 1; c.beginPath(); c.arc(0, 0, R * r, 0, 6.283); c.stroke(); }
|
||||
for (let j = 0; j < 2; j++) { c.strokeStyle = 'rgba(255,255,255,' + 0.1 * k + ')'; c.lineWidth = R * 0.012; c.beginPath(); c.arc(0, 0, R * (0.5 + j * 0.2), -0.3 + j * 3.14, 0.3 + j * 3.14); c.stroke(); }
|
||||
c.fillStyle = 'rgba(' + C.LIME + ',' + 0.7 * k + ')'; c.beginPath(); c.arc(0, 0, R * 0.22, 0, 6.283); c.fill();
|
||||
c.fillStyle = 'rgba(' + C.GOLD + ',' + 0.8 * k + ')'; c.fillRect(-R * 0.12, -R * 0.03, R * 0.24, R * 0.06);
|
||||
c.fillStyle = 'rgba(0,0,0,' + 0.8 * k + ')'; c.beginPath(); c.arc(0, 0, R * 0.025, 0, 6.283); c.fill();
|
||||
c.restore();
|
||||
}
|
||||
},
|
||||
'anniversaire': {
|
||||
shape: [0.9, 1.06],
|
||||
point: (i, p, x, y, z, lime, a) => [i % 5 === 0 ? GOLD : i % 5 === 1 ? '255,107,129' : lime || i % 2 ? LIME : INK, a * 1.1, 1],
|
||||
over: (c, cx, cy, R, t, k, C) => { // ballon : nœud + ficelle qui ondule
|
||||
const by = cy + R * 1.06;
|
||||
c.fillStyle = 'rgba(' + C.LIME + ',' + 0.8 * k + ')';
|
||||
c.beginPath(); c.moveTo(cx, by - R * 0.02); c.lineTo(cx - R * 0.07, by + R * 0.1); c.lineTo(cx + R * 0.07, by + R * 0.1); c.closePath(); c.fill();
|
||||
c.strokeStyle = 'rgba(' + C.INK + ',' + 0.4 * k + ')'; c.lineWidth = 1.2;
|
||||
c.beginPath(); c.moveTo(cx, by + R * 0.1);
|
||||
for (let j = 1; j <= 12; j++) c.lineTo(cx + Math.sin(t * 2 + j * 0.8) * R * 0.05 * (j / 12), by + R * 0.1 + j * R * 0.07);
|
||||
c.stroke();
|
||||
}
|
||||
},
|
||||
'algerie': {
|
||||
// drapeau : moitié verte / moitié blanche, croissant et étoile rouges au centre
|
||||
point: (i, p, x, y, z, lime, a) => [x < 0 ? '0,150,75' : INK, a * 1.2, 1],
|
||||
over: (c, cx, cy, R, t, k) => {
|
||||
c.save(); c.fillStyle = 'rgba(210,16,52,' + 0.92 * k + ')'; c.shadowColor = 'rgba(210,16,52,' + 0.6 * k + ')'; c.shadowBlur = 18;
|
||||
// croissant : arc extérieur (r1) puis arc intérieur (r2) entre leurs deux points d'intersection
|
||||
const x1 = cx + R * 0.02, r1 = R * 0.36, x2 = cx + R * 0.11, r2 = R * 0.29, d = x2 - x1;
|
||||
const ix = (d * d + r1 * r1 - r2 * r2) / (2 * d), iy = Math.sqrt(Math.max(0, r1 * r1 - ix * ix));
|
||||
const a1 = Math.atan2(iy, ix), a2 = Math.atan2(iy, ix - d);
|
||||
c.beginPath(); c.arc(x1, cy, r1, a1, 2 * Math.PI - a1, false); c.arc(x2, cy, r2, 2 * Math.PI - a2, a2, true); c.closePath(); c.fill();
|
||||
const sx = cx + R * 0.2, sr = R * 0.12; c.beginPath();
|
||||
for (let j = 0; j < 10; j++) { const ang = -Math.PI / 2 + j * Math.PI / 5, rr = j % 2 ? sr * 0.42 : sr; c.lineTo(sx + Math.cos(ang) * rr, cy + Math.sin(ang) * rr); }
|
||||
c.closePath(); c.fill(); c.restore();
|
||||
}
|
||||
},
|
||||
'japon': {
|
||||
// soleil levant derrière l'orbe, points rose sakura et encre
|
||||
point: (i, p, x, y, z, lime, a) => [i % 3 === 0 ? '255,183,197' : (lime ? LIME : INK), a * (i % 3 === 0 ? 1.3 : 1), i % 3 === 0 ? 1.2 : 1],
|
||||
under: (c, cx, cy, R, t, k) => {
|
||||
const g = c.createRadialGradient(cx, cy, R * 0.1, cx, cy, R * 0.62);
|
||||
g.addColorStop(0, 'rgba(220,40,40,' + 0.55 * k + ')'); g.addColorStop(0.85, 'rgba(200,30,30,' + 0.42 * k + ')'); g.addColorStop(1, 'rgba(200,30,30,0)');
|
||||
c.fillStyle = g; c.beginPath(); c.arc(cx, cy, R * 0.62, 0, 6.283); c.fill();
|
||||
}
|
||||
},
|
||||
'hack': {
|
||||
// radar : un balayage tourne, les points s'allument à son passage puis s'éteignent
|
||||
point: (i, p, x, y, z, lime, a, t) => {
|
||||
const sweep = (t * 1.4) % 6.283, ang = (Math.atan2(y, x) + 6.283) % 6.283;
|
||||
const d = (sweep - ang + 6.283) % 6.283, hit = d < 0.9 ? 1 - d / 0.9 : 0;
|
||||
return hit > 0 ? ['220,255,230', Math.min(1, a + hit * 0.8), 1 + hit * 0.9] : [LIME, a * 0.55, 1];
|
||||
},
|
||||
over: (c, cx, cy, R, t, k, C) => {
|
||||
const sweep = (t * 1.4) % 6.283;
|
||||
c.save();
|
||||
c.strokeStyle = 'rgba(' + C.LIME + ',' + 0.18 * k + ')'; c.lineWidth = 1;
|
||||
[0.35, 0.7, 1.02].forEach(r => { c.beginPath(); c.arc(cx, cy, R * r, 0, 6.283); c.stroke(); });
|
||||
c.beginPath(); c.moveTo(cx - R * 1.1, cy); c.lineTo(cx + R * 1.1, cy); c.moveTo(cx, cy - R * 1.1); c.lineTo(cx, cy + R * 1.1); c.stroke();
|
||||
const g = c.createConicGradient ? c.createConicGradient(sweep - 0.9, cx, cy) : null;
|
||||
if (g) {
|
||||
g.addColorStop(0, 'rgba(' + C.LIME + ',0)'); g.addColorStop(0.143, 'rgba(' + C.LIME + ',' + 0.22 * k + ')'); g.addColorStop(0.1431, 'rgba(' + C.LIME + ',0)'); g.addColorStop(1, 'rgba(' + C.LIME + ',0)');
|
||||
c.fillStyle = g; c.beginPath(); c.arc(cx, cy, R * 1.02, 0, 6.283); c.fill();
|
||||
}
|
||||
c.strokeStyle = 'rgba(' + C.LIME + ',' + 0.8 * k + ')'; c.lineWidth = 1.5;
|
||||
c.beginPath(); c.moveTo(cx, cy); c.lineTo(cx + Math.cos(sweep) * R * 1.02, cy + Math.sin(sweep) * R * 1.02); c.stroke();
|
||||
c.restore();
|
||||
}
|
||||
},
|
||||
'black-friday': {
|
||||
point: (i, p, x, y, z, lime, a) => [lime || i % 3 === 0 ? LIME : INK, a * 1.1, 1],
|
||||
over: (c, cx, cy, R, t, k, C) => {
|
||||
const ax = cx + R * 0.62, ay = cy - R * 0.8, sw = Math.sin(t * 1.6) * 0.08;
|
||||
c.strokeStyle = 'rgba(' + C.INK + ',' + 0.6 * k + ')'; c.lineWidth = 1.2;
|
||||
c.beginPath(); c.moveTo(ax, ay); c.lineTo(ax + R * 0.18, ay + R * 0.3); c.stroke();
|
||||
c.save(); c.translate(ax + R * 0.18, ay + R * 0.3); c.rotate(sw); tag(c, 0, 0, R * 0.62, R * 0.24, '-100 %', C, k); c.restore();
|
||||
}
|
||||
}
|
||||
};
|
||||
const GOLD_ = () => GOLD;
|
||||
function facePath(cx, cy, R) {
|
||||
const P = (x, y) => [cx + x * R, cy + y * R];
|
||||
ctx.beginPath();
|
||||
[EYE_L, EYE_R, NOSE].forEach(tri => { tri.forEach((v, i) => ctx[i ? 'lineTo' : 'moveTo'](...P(v[0], v[1]))); ctx.closePath(); });
|
||||
const top = [], bot = [];
|
||||
for (let k = 0; k <= 24; k++) { const x = -0.64 + k * 0.64 * 2 / 24, [t, b] = smile(x); top.push([x, t]); bot.push([x, b]); }
|
||||
// contour de la bouche avec deux dents en haut et une en bas
|
||||
ctx.moveTo(...P(top[0][0], top[0][1]));
|
||||
top.forEach(([x, t]) => {
|
||||
const tooth = Math.abs(Math.abs(x) - 0.22) < 0.07;
|
||||
ctx.lineTo(...P(x, tooth ? t + 0.09 : t));
|
||||
});
|
||||
bot.reverse().forEach(([x, b]) => ctx.lineTo(...P(x, Math.abs(x) < 0.08 ? b - 0.09 : b)));
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
function state() {
|
||||
const vh = innerHeight; let s = A, t;
|
||||
if ((t = top(secs.works)) !== null) s = mix(s, B, ease(c01(1 - t / vh)));
|
||||
if ((t = top(secs.about)) !== null) s = mix(s, C, ease(c01((vh - t) / (vh * 0.9))));
|
||||
if ((t = top(secs.cta)) !== null) s = mix(s, D, ease(c01((vh - t) / (vh * 0.9))));
|
||||
// Mobile : orbe recentrée et un peu plus petite
|
||||
if (cw < 720) s = [s[0] * 0.5 + 0.25, s[1] * 0.8, s[2] * 0.85, s[3], s[4] * 0.8];
|
||||
return s;
|
||||
}
|
||||
function draw(t) {
|
||||
ctx.clearRect(0, 0, cw, ch);
|
||||
const S = document.documentElement.getAttribute('data-season') || '';
|
||||
const [fx, fy, fr, spread, ga] = state();
|
||||
let cx = cw * fx, cy = ch * fy, R = Math.min(cw, ch) * fr;
|
||||
if (S) { R *= 0.88; cy += R * 0.17; } // saison : orbe un peu plus basse pour que l'attache de la boule de Noël sorte de sous la barre
|
||||
const H = SEASON[S], C = { LIME, INK, GOLD }, sol = ga * Math.max(0, 1 - spread * 2.2);
|
||||
if (H && H.pulse) R *= H.pulse(t);
|
||||
const kx = H && H.shape ? H.shape[0] : 1, ky = H && H.shape ? H.shape[1] : 1;
|
||||
// Orientation neutre tant que la souris/le doigt n'a pas bougé (chargement, mobile)
|
||||
const has = m.x > -9000, sx = has ? (m.x - cx) / cw : 0, sy = has ? (m.y - cy) / ch : 0;
|
||||
const rY = t * 0.35 + sx * 1.2, rX = 0.35 + sy * 0.8;
|
||||
const cY = Math.cos(rY), sY = Math.sin(rY), cX = Math.cos(rX), sX = Math.sin(rX);
|
||||
const g = ctx.createRadialGradient(cx, cy, R * 0.2, cx, cy, R * 1.6);
|
||||
g.addColorStop(0, 'rgba(' + LIME + ',' + 0.08 * ga * (1 - spread * 0.8) + ')');
|
||||
g.addColorStop(1, 'rgba(' + LIME + ',0)');
|
||||
ctx.fillStyle = g; ctx.fillRect(cx - R * 2, cy - R * 2, R * 4, R * 4);
|
||||
if (H && H.under && sol > 0.01) H.under(ctx, cx, cy, R, t, sol, C);
|
||||
for (let i = 0; i < N; i++) {
|
||||
const p = pts[i];
|
||||
let x = p[0] * cY + p[2] * sY, z = -p[0] * sY + p[2] * cY;
|
||||
const y = p[1] * cX - z * sX; z = p[1] * sX + z * cX;
|
||||
const f = 2.4 / (2.4 + z);
|
||||
let px = cx + x * kx * R * f + rx[i] * spread * cw * 0.42;
|
||||
let py = cy + y * ky * R * f + ry[i] * spread * ch * 0.42;
|
||||
let boost = 0;
|
||||
const dx = px - m.x, dy = py - m.y, d2 = dx * dx + dy * dy;
|
||||
if (d2 < 32400) { // répulsion souris, rayon 180px
|
||||
const d = Math.sqrt(d2) || 1, k = (1 - d / 180) * 46;
|
||||
px += dx / d * k; py += dy / d * k; boost = 1 - d / 180;
|
||||
}
|
||||
const s = Math.max(0.4, (1 - z) * 1.5) + boost * 2.4;
|
||||
const a = Math.max(0.05, (1 - z) * 0.5) * ga + boost * 0.55;
|
||||
const lime = boost > 0.15 || p[1] > 0.72 || x > 0.85;
|
||||
if (H && H.point) {
|
||||
const r = H.point(i, p, x, y, z, lime, a, t);
|
||||
if (r) { ctx.fillStyle = 'rgba(' + r[0] + ',' + Math.min(r[1], 1) + ')'; ctx.beginPath(); ctx.arc(px, py, s * (r[2] || 1), 0, 6.283); ctx.fill(); continue; }
|
||||
}
|
||||
if (S === 'halloween') {
|
||||
// citrouille : points orangés, le visage reste vide (la lueur est dessinée après)
|
||||
if (z < 0.1 && spread < 0.5 && inFace((px - cx) / R, (py - cy) / R)) continue;
|
||||
ctx.fillStyle = 'rgba(' + (lime ? LIME : (i % 3 ? LIME : INK)) + ',' + Math.min(a * (lime ? 1.3 : 0.85), 1) + ')';
|
||||
ctx.beginPath(); ctx.arc(px, py, s, 0, 6.283); ctx.fill();
|
||||
continue;
|
||||
}
|
||||
if (S === 'noel' && Math.abs(Math.abs(p[1]) - 0.3) < 0.075) {
|
||||
// boule de Noël : deux bandes dorées qui scintillent
|
||||
const tw = 0.6 + 0.4 * Math.sin(t * 3 + i);
|
||||
ctx.fillStyle = 'rgba(' + GOLD + ',' + Math.min((a + 0.3 * ga) * tw, 1) + ')';
|
||||
ctx.beginPath(); ctx.arc(px, py, s * 1.15, 0, 6.283); ctx.fill();
|
||||
continue;
|
||||
}
|
||||
ctx.fillStyle = lime ? 'rgba(' + LIME + ',' + Math.min(a + 0.25 * ga, 1) + ')' : 'rgba(' + INK + ',' + a + ')';
|
||||
ctx.beginPath(); ctx.arc(px, py, s, 0, 6.283); ctx.fill();
|
||||
}
|
||||
const solid = sol; // décor visible tant que l'orbe n'est pas éclatée
|
||||
if (H && H.over && solid > 0.01) H.over(ctx, cx, cy, R, t, solid, C);
|
||||
if (S === 'halloween' && solid > 0.01) {
|
||||
// lueur de bougie qui vacille
|
||||
const fl = 0.78 + 0.14 * Math.sin(t * 9) + 0.08 * Math.sin(t * 23 + 1.3);
|
||||
ctx.save();
|
||||
facePath(cx, cy, R);
|
||||
const fg = ctx.createRadialGradient(cx, cy + R * 0.1, R * 0.05, cx, cy + R * 0.1, R * 0.8);
|
||||
fg.addColorStop(0, 'rgba(255,236,150,' + solid * fl + ')');
|
||||
fg.addColorStop(1, 'rgba(' + LIME + ',' + solid * fl * 0.9 + ')');
|
||||
ctx.shadowColor = 'rgba(' + LIME + ',' + solid + ')'; ctx.shadowBlur = 28 * fl;
|
||||
ctx.fillStyle = fg; ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
if (S === 'noel' && solid > 0.01) {
|
||||
// attache dorée et fil qui pend depuis le haut de l'écran
|
||||
const w = R * 0.3, h = R * 0.15, top = cy - R * 1.02;
|
||||
ctx.strokeStyle = 'rgba(' + INK + ',' + 0.3 * solid + ')'; ctx.lineWidth = 1;
|
||||
ctx.beginPath(); ctx.moveTo(cx, 0); ctx.lineTo(cx, top - h - R * 0.08); ctx.stroke();
|
||||
ctx.strokeStyle = 'rgba(' + GOLD + ',' + solid + ')'; ctx.lineWidth = Math.max(1.5, R * 0.02);
|
||||
ctx.beginPath(); ctx.ellipse(cx, top - h - R * 0.04, R * 0.05, R * 0.06, 0, 0, 6.283); ctx.stroke();
|
||||
const cg = ctx.createLinearGradient(cx - w / 2, 0, cx + w / 2, 0);
|
||||
cg.addColorStop(0, 'rgba(' + GOLD + ',' + 0.55 * solid + ')'); cg.addColorStop(0.45, 'rgba(255,240,200,' + solid + ')'); cg.addColorStop(1, 'rgba(' + GOLD + ',' + 0.5 * solid + ')');
|
||||
ctx.fillStyle = cg; ctx.fillRect(cx - w / 2, top - h, w, h);
|
||||
}
|
||||
if (spread < 0.6) {
|
||||
ctx.strokeStyle = 'rgba(' + LIME + ',' + 0.22 * ga * (1 - spread) + ')';
|
||||
ctx.lineWidth = 1; ctx.beginPath();
|
||||
ctx.ellipse(cx, cy, R * 1.3, R * 0.4, -0.3 + sx * 0.3, 0, 6.283); ctx.stroke();
|
||||
}
|
||||
}
|
||||
function loop(ms) { if (!run) return; try { draw(ms / 1000); } catch (e) {} requestAnimationFrame(loop); }
|
||||
return {
|
||||
init(sel, opts) {
|
||||
cv = document.querySelector(sel); if (!cv) return;
|
||||
ctx = cv.getContext('2d');
|
||||
const o = (opts && opts.sections) || {};
|
||||
secs = { works: document.querySelector(o.works), about: document.querySelector(o.about), cta: document.querySelector(o.cta) };
|
||||
readColors(); addEventListener('yb:theme', () => { readColors(); if (!run) draw(0); });
|
||||
size(); addEventListener('resize', size);
|
||||
addEventListener('mousemove', e => { m.x = e.clientX; m.y = e.clientY; });
|
||||
addEventListener('touchmove', e => { const t = e.touches[0]; m.x = t.clientX; m.y = t.clientY; }, { passive: true });
|
||||
addEventListener('touchend', () => { m.x = m.y = -9999; });
|
||||
if (document.documentElement.classList.contains('yb-static')) { draw(0); return; } // ?ybstatic=1 : image fixe
|
||||
run = true; requestAnimationFrame(loop);
|
||||
},
|
||||
destroy() { run = false; }
|
||||
};
|
||||
})();
|
||||
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