`; track.appendChild(el); cloths.push(null); items.push(el); }); let index = COUNTRY_ORDER.indexOf(currentCountryId); if (index < 0) index = COUNTRY_ORDER.indexOf(DEFAULT_COUNTRY); let animRaf = 0; let simRaf = 0; let lastSim = performance.now(); let dragging = false; let pointerId = null; let startX = 0; let startIndex = 0; let moved = false; let lastX = 0; let lastT = 0; let velocity = 0; function wrapDelta(d) { let x = d; while (x > n / 2) x -= n; while (x < -n / 2) x += n; return x; } function scaleFor(absD) { if (absD <= 1) { return 1 - absD * (1 - CAROUSEL_SIDE_SCALE); } const extra = Math.min(1, absD - 1); return CAROUSEL_SIDE_SCALE * (1 - extra * 0.15); } function layout() { items.forEach((el, i) => { const d = wrapDelta(i - index); const x = d * carouselGapPx(); const absD = Math.abs(d); const s = scaleFor(absD); el.style.transform = `translate3d(${x}px, 0, 0) scale(${s})`; el.style.zIndex = String(Math.round(100 - absD * 20)); el.classList.toggle("is-center", absD < 0.35); el.setAttribute("aria-selected", absD < 0.35 ? "true" : "false"); el.style.opacity = absD > 1.65 ? "0" : "1"; el.style.pointerEvents = absD > 1.65 ? "none" : "auto"; if (absD <= 1.65 && isDestinationsView() && !cloths[i]) { cloths[i] = createCarouselCloth(el.querySelector(".carousel__strings"), COUNTRIES[COUNTRY_ORDER[i]]); } if (cloths[i]) cloths[i].setActive(absD <= 1.65); }); } function nearestIndex(v) { let best = Math.round(v); best = ((best % n) + n) % n; return best; } function syncToCountry(id) { const i = COUNTRY_ORDER.indexOf(id); if (i >= 0) index = i; layout(); } function animateTo(target, duration = CAROUSEL_SNAP_MS) { cancelAnimationFrame(animRaf); let delta = wrapDelta(target - index); const from = index; const to = from + delta; const t0 = performance.now(); function frame(now) { const t = Math.min(1, (now - t0) / duration); const ease = 1 - Math.pow(1 - t, 3); index = from + (to - from) * ease; if (index > n * 2 || index < -n) { index = ((index % n) + n) % n; } layout(); if (t < 1) { animRaf = requestAnimationFrame(frame); } else { index = nearestIndex(to); layout(); } } animRaf = requestAnimationFrame(frame); } function isDestinationsView() { return document.getElementById("stage")?.dataset.view === "destinations"; } function simLoop(now) { simRaf = requestAnimationFrame(simLoop); if (document.hidden || !isDestinationsView()) { lastSim = now; return; } const dt = Math.min(32, Math.max(1, now - lastSim)); lastSim = now; layout(); for (const cloth of cloths) if (cloth) cloth.tick(dt); } simRaf = requestAnimationFrame(simLoop); function brushFromEvent(e) { if (!isDestinationsView() || moved) return; for (let i = cloths.length - 1; i >= 0; i--) { const cloth = cloths[i]; if (!cloth) continue; const d = Math.abs(wrapDelta(i - index)); if (d > 1.65) continue; if (cloth.containsPoint(e.clientX, e.clientY)) { cloth.brush(e.clientX, e.clientY); return; } } } function onPointerDown(e) { if (e.button != null && e.button !== 0) return; dragging = true; moved = false; pointerId = e.pointerId; startX = e.clientX; startIndex = index; lastX = e.clientX; lastT = performance.now(); velocity = 0; cancelAnimationFrame(animRaf); root.classList.add("is-dragging"); try { root.setPointerCapture(pointerId); } catch (_) {} } function onPointerMove(e) { if (dragging && e.pointerId === pointerId) { const dx = e.clientX - startX; if (Math.abs(dx) > 4) moved = true; if (moved) { const now = performance.now(); const dt = Math.max(1, now - lastT); const vx = (e.clientX - lastX) / dt; // px / ms velocity = velocity * 0.65 + vx * 0.35; // Cap so a noisy last frame can't invent a double-skip fling velocity = Math.max(-2.2, Math.min(2.2, velocity)); lastX = e.clientX; lastT = now; index = startIndex - dx / carouselGapPx(); layout(); return; } } // Hover / light press — brush strings brushFromEvent(e); } function onPointerUp(e) { if (!dragging || e.pointerId !== pointerId) return; dragging = false; root.classList.remove("is-dragging"); try { root.releasePointerCapture(pointerId); } catch (_) {} pointerId = null; if (!moved) { const hit = e.target?.closest?.(".carousel__item"); if (hit) { const id = hit.dataset.country; const hitIndex = COUNTRY_ORDER.indexOf(id); if (hit.classList.contains("is-center") && id) { setCountry(id, { animate: false }); window.setView?.("home"); return; } if (hitIndex >= 0) { animateTo(hitIndex); return; } } animateTo(nearestIndex(index)); moved = false; return; } const gap = carouselGapPx(); // Drag-left increases index (content follows finger); fling matches -. const flickIndex = Math.max( -0.55, Math.min(0.55, (-velocity * 140) / gap) ); const releaseNearest = Math.round(index); let target = Math.round(index + flickIndex); // Never skip a country: settle at most one step from where the finger released target = Math.max(releaseNearest - 1, Math.min(releaseNearest + 1, target)); // Tiny nudge without a real flick → stay on the slide you started from const dragged = index - startIndex; if (Math.abs(dragged) < 0.2 && Math.abs(flickIndex) < 0.22) { target = Math.round(startIndex); } target = ((target % n) + n) % n; animateTo(target); moved = false; velocity = 0; } root.addEventListener("pointerdown", onPointerDown); root.addEventListener("pointermove", onPointerMove); root.addEventListener("pointerup", onPointerUp); root.addEventListener("pointercancel", onPointerUp); root.addEventListener( "wheel", (e) => { if (!isDestinationsView()) return; e.preventDefault(); const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY; cancelAnimationFrame(animRaf); index += delta / carouselGapPx(); layout(); clearTimeout(root._wheelSnap); root._wheelSnap = setTimeout(() => { // Wheel: nearest only — no fling skip animateTo(nearestIndex(index)); }, 80); }, { passive: false } ); root.addEventListener("keydown", (e) => { if (!isDestinationsView()) return; if (e.key === "ArrowLeft") { e.preventDefault(); animateTo(Math.round(index) - 1); } else if (e.key === "ArrowRight") { e.preventDefault(); animateTo(Math.round(index) + 1); } else if (e.key === "Enter") { e.preventDefault(); const id = COUNTRY_ORDER[nearestIndex(index)]; if (id) { setCountry(id, { animate: false }); window.setView?.("home"); } } }); layout(); carousel = { layout, syncToCountry, animateTo, centeredId: () => COUNTRY_ORDER[nearestIndex(index)] }; } main(); applyClothSettings(getCountry()); applyCountryCopy(getCountry()); chimes.setCountry(getCountry().id); // Build the audio graph eagerly at load (suspended) so the first strike only // has to RESUME an existing context — creating + resuming in the same first // gesture is unreliable and left the opening strikes silent until a later click. chimes.warm(); // Resume on user gestures; keep listening (capture-phase, runs before the string // handler) until the context is actually running, then detach. const warmChimes = () => chimes.ensure().then((running) => { if (running) { window.removeEventListener("pointerdown", warmChimes, true); window.removeEventListener("touchstart", warmChimes, true); window.removeEventListener("keydown", warmChimes, true); } }); window.addEventListener("pointerdown", warmChimes, { capture: true }); window.addEventListener("touchstart", warmChimes, { capture: true, passive: true }); window.addEventListener("keydown", warmChimes, { capture: true }); updateSideButtons(); initCarousel(); initViews(); bindAreaCopyLayout(); document.getElementById("btnLeft")?.addEventListener("click", () => { const id = document.getElementById("btnLeft")?.dataset.country; if (id) setCountry(id, { direction: -1 }); }); document.getElementById("btnRight")?.addEventListener("click", () => { const id = document.getElementById("btnRight")?.dataset.country; if (id) setCountry(id, { direction: 1 }); }); })();

China — golden courtyards, silk-road myths, roofs that refuse gravity

Contributions