60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
// ── Pepsi gallery: shuffled on load, swipe cycles through on click ─
|
||
(function () {
|
||
const COUNT = 20;
|
||
const img = document.querySelector('.pepsi-placeholder img');
|
||
if (!img) return;
|
||
const box = img.parentElement;
|
||
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||
const src = (n) => `Pepsi/Pepsi-${n}.jpg`;
|
||
|
||
// Fisher–Yates shuffle of [1..COUNT]; clicks cycle through this order
|
||
const order = Array.from({ length: COUNT }, (_, i) => i + 1);
|
||
for (let i = order.length - 1; i > 0; i--) {
|
||
const j = Math.floor(Math.random() * (i + 1));
|
||
[order[i], order[j]] = [order[j], order[i]];
|
||
}
|
||
let pos = 0;
|
||
img.src = src(order[pos]);
|
||
const seen = (n) => { if (window.achv) window.achv.pepsi(n, COUNT); };
|
||
seen(order[pos]);
|
||
|
||
let busy = false;
|
||
box.addEventListener('click', () => {
|
||
if (busy) return;
|
||
if (window.achv) window.achv.mark('pepsi');
|
||
pos = (pos + 1) % order.length;
|
||
const next = order[pos];
|
||
|
||
if (reduceMotion.matches) {
|
||
img.src = src(next);
|
||
seen(next);
|
||
return;
|
||
}
|
||
|
||
busy = true;
|
||
const incoming = new Image();
|
||
incoming.src = src(next);
|
||
incoming.alt = img.alt;
|
||
incoming.draggable = false;
|
||
incoming.className = 'pepsi-incoming';
|
||
// Decode before animating so the swipe never reveals a half-loaded frame
|
||
incoming.decode().then(() => {
|
||
box.appendChild(incoming);
|
||
seen(next);
|
||
const opts = { duration: 300, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' };
|
||
img.animate(
|
||
[{ transform: 'translateX(0)' }, { transform: 'translateX(-100%)' }],
|
||
opts
|
||
);
|
||
incoming.animate(
|
||
[{ transform: 'translateX(100%)' }, { transform: 'translateX(0)' }],
|
||
opts
|
||
).finished.then(() => {
|
||
img.src = incoming.src; // already decoded, swaps instantly
|
||
incoming.remove();
|
||
busy = false;
|
||
});
|
||
}).catch(() => { busy = false; });
|
||
});
|
||
})();
|