/* The ring timer A tea timer. The time is set by turning the knob round the ring, as on a kitchen timer, or with one of the teas: the matcha arc follows on a spring, the ticks under it light up and the figures roll, each in its own window. Started, the play sign folds into the pause sign, the knob draws back and the arc runs on round the whole ring: from there it is the time left, and it shrinks back to the top as the time runs down, the figures rolling down second by second. When the time is up the dial rings: it shakes like a bell, rays shoot out of the ring twice and the figures flash, then it goes back to the time set. The knob is a slider (role slider) for the keys and screen readers. */ /* ---- values to change ---- */ const MAX = 300; /* the seconds of a whole turn of the dial */ const STEP = 5; /* the knob moves by so many seconds */ const TEAS = [['Green tea', 120], ['Black tea', 240], ['Herbal', 300]]; /* the teas: name and seconds */ const SPRING = [220, 0.8]; /* the arc's spring as it follows the hand or a tea: how stiff, how held back */ const RING = 1.4; /* the seconds the dial rings when the time is up */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const root = document.querySelector('[data-timer]'); const dial = root.querySelector('[data-dial]'); const ticksEl = root.querySelector('[data-ticks]'); const arcEl = root.querySelector('[data-arc]'); const raysEl = root.querySelector('[data-rays]'); const knob = root.querySelector('[data-knob]'); const timeEl = root.querySelector('[data-time]'); const label = root.querySelector('[data-label]'); const teasEl = root.querySelector('[data-teas]'); const go = root.querySelector('[data-go]'); const resetBtn = root.querySelector('[data-reset]'); const live = root.querySelector('[data-live]'); const shapes = [...go.querySelectorAll('[data-shape]')]; const NS = 'http://www.w3.org/2000/svg'; const C = 160; /* the middle of the drawing */ const R = 130; /* the ring */ const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v)); const clock = (s) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`; const words = (s) => [Math.floor(s / 60) && `${Math.floor(s / 60)} minute${Math.floor(s / 60) > 1 ? 's' : ''}`, s % 60 && `${s % 60} seconds`].filter(Boolean).join(' ') || '0 seconds'; let total = TEAS[0][1]; /* the time set */ let left = total; /* the time left: with decimals while it runs */ let running = false; let ringing = false; let held = false; /* setting, the arc is the time on the dial's scale; once started, it is the share of the time left */ let mode = 'set'; const arc = { f: total / MAX, vel: 0 }; const aim = () => (mode === 'set' ? left / MAX : total ? left / total : 0); /* ---------------------------------------------------------------- the ticks round the ring */ const ticks = Array.from({ length: 60 }, (_, k) => { const a = (k / 60) * Math.PI * 2; const long = k % 5 === 0; const l = document.createElementNS(NS, 'line'); const r1 = long ? 96 : 102; const r2 = 110; l.setAttribute('x1', (C + r1 * Math.sin(a)).toFixed(2)); l.setAttribute('y1', (C - r1 * Math.cos(a)).toFixed(2)); l.setAttribute('x2', (C + r2 * Math.sin(a)).toFixed(2)); l.setAttribute('y2', (C - r2 * Math.cos(a)).toFixed(2)); ticksEl.append(l); return { l, at: (k / 60) * MAX, lit: false }; }); /* ---------------------------------------------------------------- drawing the arc and the knob */ /* the knob is placed by GSAP too (x and y), so its little nod (scale) and its place share one transform */ const knobX = gsap.quickSetter(knob, 'x', 'px'); const knobY = gsap.quickSetter(knob, 'y', 'px'); let drawn = ''; function draw() { const f = clamp(arc.f, 0, 1); const key = f.toFixed(5); if (key === drawn) return; drawn = key; const a = f * Math.PI * 2; const x = C + R * Math.sin(a); const y = C - R * Math.cos(a); if (f < 0.002) arcEl.setAttribute('d', ''); else if (f > 0.9995) arcEl.setAttribute('d', `M${C} ${C - R}A${R} ${R} 0 1 1 ${C} ${C + R}A${R} ${R} 0 1 1 ${C} ${C - R}`); else arcEl.setAttribute('d', `M${C} ${C - R}A${R} ${R} 0 ${f > 0.5 ? 1 : 0} 1 ${x.toFixed(2)} ${y.toFixed(2)}`); const s = dial.clientWidth / 320; knobX(x * s); knobY(y * s); ticks.forEach((t) => { const lit = t.at / MAX <= f + 0.0001 && f > 0.002; if (lit !== t.lit) { t.lit = lit; t.l.classList.toggle('is-lit', lit); } }); } /* ---------------------------------------------------------------- the figures, each in its own window */ let shownTime = ''; function showTime(str, dir = 0) { if (str === shownTime) return; const old = shownTime; shownTime = str; if (old.length !== str.length) { timeEl.replaceChildren(...[...str].map((ch) => { const slot = document.createElement('span'); slot.className = ch === ':' ? 'digit digit--colon' : 'digit'; slot.innerHTML = ''; slot.firstChild.textContent = ch; return slot; })); return; } [...str].forEach((ch, i) => { const slot = timeEl.children[i]; const cur = slot.lastElementChild; if (cur.textContent === ch) return; if (!dir || REDUCED) { cur.textContent = ch; return; } /* going down the new figure comes from above, going up from below; a roll still going finishes at once */ while (slot.children.length > 1) slot.firstElementChild.remove(); gsap.killTweensOf(cur); gsap.set(cur, { yPercent: 0 }); const next = document.createElement('span'); next.textContent = ch; slot.append(next); gsap.fromTo(next, { yPercent: dir < 0 ? -100 : 100 }, { yPercent: 0, duration: 0.38, ease: 'power3.out' }); gsap.to(cur, { yPercent: dir < 0 ? 100 : -100, duration: 0.38, ease: 'power3.out', onComplete: () => cur.remove() }); }); } function name() { const tea = TEAS.find(([, s]) => s === total); label.textContent = ringing ? 'Ready' : tea ? tea[0] : ''; teaButtons.forEach((b, i) => b.setAttribute('aria-pressed', String(TEAS[i][1] === total))); knob.setAttribute('aria-valuenow', String(total)); knob.setAttribute('aria-valuetext', words(total)); } /* ---------------------------------------------------------------- the play and pause sign */ /* two four-sided shapes: the two halves of the play triangle, or the two bars of pause */ const PLAY = [[[8, 5], [13.5, 8.5], [13.5, 15.5], [8, 19]], [[13.5, 8.5], [19, 12], [19, 12], [13.5, 15.5]]]; const PAUSE = [[[7, 5], [10.5, 5], [10.5, 19], [7, 19]], [[13.5, 5], [17, 5], [17, 19], [13.5, 19]]]; const sign = { p: 0 }; function drawSign() { shapes.forEach((el, k) => el.setAttribute('points', PLAY[k].map((pt, j) => `${(pt[0] + (PAUSE[k][j][0] - pt[0]) * sign.p).toFixed(2)},${(pt[1] + (PAUSE[k][j][1] - pt[1]) * sign.p).toFixed(2)}`).join(' '))); } function setSign(pause) { go.setAttribute('aria-label', pause ? 'Pause' : 'Start'); gsap.to(sign, { p: pause ? 1 : 0, duration: REDUCED ? 0 : 0.32, ease: 'power2.inOut', overwrite: 'auto', onUpdate: drawSign }); } /* ---------------------------------------------------------------- setting, starting, pausing */ function setTo(seconds, dir = 0) { const v = clamp(Math.round(seconds / STEP) * STEP, STEP, MAX); if (v === total && !running && left === total) return; const up = v > total ? 1 : -1; total = v; left = v; if (running) { running = false; setSign(false); } toSet(); showTime(clock(v), dir || up); name(); /* the knob gives a small nod at every step */ if (!REDUCED) gsap.fromTo(knob, { scale: 1.12 }, { scale: 1, duration: 0.3, ease: 'power2.out', overwrite: 'auto' }); } /* the knob draws back while the time runs, and comes back to set it again */ function toSet() { if (mode === 'set') return; mode = 'set'; gsap.to(knob, { scale: 1, autoAlpha: 1, duration: REDUCED ? 0 : 0.45, ease: 'back.out(2)', overwrite: 'auto' }); } function start() { if (ringing || running) return; if (left <= 0) left = total; running = true; mode = 'run'; gsap.to(knob, { scale: 0, autoAlpha: 0, duration: REDUCED ? 0 : 0.3, ease: 'back.in(2)', overwrite: 'auto' }); setSign(true); live.textContent = `Started, ${words(Math.ceil(left))}`; } function pause() { if (!running) return; running = false; setSign(false); live.textContent = `Paused, ${words(Math.ceil(left))} left`; } function reset() { if (ringing) return; running = false; setSign(false); left = total; toSet(); showTime(clock(total), 1); } go.addEventListener('click', () => (running ? pause() : start())); resetBtn.addEventListener('click', reset); const teaButtons = TEAS.map(([n, s]) => { const b = document.createElement('button'); b.className = 'tea'; b.type = 'button'; b.innerHTML = ''; b.firstChild.textContent = n; b.lastChild.textContent = clock(s); b.addEventListener('click', () => !ringing && setTo(s)); teasEl.append(b); return b; }); /* ---------------------------------------------------------------- the time is up */ function rays(delay) { for (let k = 0; k < 16; k++) { const a = (k / 16) * Math.PI * 2 + 0.2; const l = document.createElementNS(NS, 'line'); raysEl.append(l); const p = { t: 0 }; const put = () => { const r1 = 150 + 30 * p.t; const r2 = 158 + 46 * p.t; l.setAttribute('x1', (C + r1 * Math.sin(a)).toFixed(2)); l.setAttribute('y1', (C - r1 * Math.cos(a)).toFixed(2)); l.setAttribute('x2', (C + r2 * Math.sin(a)).toFixed(2)); l.setAttribute('y2', (C - r2 * Math.cos(a)).toFixed(2)); }; put(); gsap.fromTo(l, { opacity: 1 }, { opacity: 0, duration: 0.7, ease: 'power2.in', delay }); gsap.to(p, { t: 1, duration: 0.7, ease: 'power2.out', delay, onUpdate: put, onComplete: () => l.remove() }); } } function ring() { running = false; ringing = true; left = 0; setSign(false); name(); live.textContent = 'Time is up'; if (!REDUCED) { /* it shakes like a bell, rays shoot out twice and the figures flash */ gsap.fromTo(dial, { rotation: 0 }, { keyframes: { rotation: [0, -8, 7, -6, 5, -3, 2, 0] }, duration: RING, ease: 'none' }); rays(0); rays(0.45); gsap.fromTo(timeEl, { opacity: 1 }, { opacity: 0.25, duration: 0.16, repeat: Math.max(1, Math.round(RING / 0.16)) | 1, yoyo: true, ease: 'power1.inOut', onComplete: () => gsap.set(timeEl, { opacity: 1 }) }); } gsap.delayedCall(RING + 1, () => { ringing = false; left = total; toSet(); showTime(clock(total), 1); name(); }); } /* ---------------------------------------------------------------- every frame */ gsap.ticker.add((time, dt) => { const t = Math.min(dt, 100) / 1000; if (running) { left = Math.max(0, left - t); showTime(clock(Math.ceil(left - 1e-6)), -1); if (left <= 0) ring(); } /* the arc goes where it should be on a spring: a jump (a tea, starting) is a sweep, the time running is followed */ if (REDUCED) { arc.f = aim(); arc.vel = 0; } else { const k = SPRING[0]; const c = 2 * Math.sqrt(k) * SPRING[1]; const steps = Math.max(1, Math.ceil(t / 0.004)); for (let n = 0; n < steps; n++) { const h = t / steps; arc.vel += ((aim() - arc.f) * k - arc.vel * c) * h; arc.f += arc.vel * h; } } draw(); }); /* ---------------------------------------------------------------- the hand on the dial */ let hand = 0; /* where the hand is, in seconds, without the ends (it can go past them) */ let lastAngle = 0; function angleAt(e) { const r = dial.getBoundingClientRect(); const x = e.clientX - (r.left + r.width / 2); const y = e.clientY - (r.top + r.height / 2); let a = Math.atan2(x, -y); if (a < 0) a += Math.PI * 2; return { sec: (a / (Math.PI * 2)) * MAX, dist: (Math.hypot(x, y) * 320) / r.width }; } dial.addEventListener('pointerdown', (e) => { if (ringing || (e.pointerType === 'mouse' && e.button !== 0)) return; const { sec, dist } = angleAt(e); /* only on the ring (or the knob): the middle is for reading */ if (dist < 80 && e.target !== knob) return; held = e.pointerId; dial.classList.add('is-held'); try { dial.setPointerCapture(e.pointerId); } catch (err) { /* the pointer has gone already */ } hand = sec; lastAngle = sec; /* turning the knob again stops the time running and sets a new one */ if (running) pause(); setTo(sec); toSet(); }); dial.addEventListener('pointermove', (e) => { if (held !== e.pointerId) return; const { sec } = angleAt(e); /* crossing the top the angle jumps by a whole turn: the hand goes on and is held at the ends */ let d = sec - lastAngle; if (d > MAX / 2) d -= MAX; else if (d < -MAX / 2) d += MAX; lastAngle = sec; hand = clamp(hand + d, 0, MAX); setTo(hand); }); const letGo = (e) => { if (held !== e.pointerId) return; held = false; dial.classList.remove('is-held'); }; dial.addEventListener('pointerup', letGo); dial.addEventListener('pointercancel', letGo); knob.addEventListener('keydown', (e) => { let to = null; if (e.key === 'ArrowRight' || e.key === 'ArrowUp') to = total + STEP; else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') to = total - STEP; else if (e.key === 'PageUp') to = total + 60; else if (e.key === 'PageDown') to = total - 60; else if (e.key === 'Home') to = STEP; else if (e.key === 'End') to = MAX; else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (running) pause(); else start(); return; } if (to === null || ringing) return; e.preventDefault(); setTo(to); }); /* how the page is being used: the rings of the focus show for the keys, not after a finger or the mouse */ addEventListener('keydown', () => (document.documentElement.dataset.using = 'keys'), true); addEventListener('pointerdown', () => (document.documentElement.dataset.using = 'pointer'), true); addEventListener('resize', () => (drawn = '')); /* ---------------------------------------------------------------- the library's preview */ /* a click from a script (detail 0) is a pretend hand: it turns the knob down to a few seconds and starts, then chooses a tea, starts, pauses and starts over; it leaves a short countdown alone until it has rung */ let step = 0; const STEPS = [ () => { const p = { v: total }; gsap.to(p, { v: STEP, duration: 0.7, ease: 'power2.inOut', onUpdate: () => setTo(p.v, -1), onComplete: () => gsap.delayedCall(0.25, start) }); }, () => setTo(TEAS[0][1]), start, pause, reset, ]; root.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== root) return; if (ringing || (running && left < 20)) return; STEPS[step](); step = (step + 1) % STEPS.length; }); /* ---------------------------------------------------------------- it comes in */ showTime(clock(total)); name(); drawSign(); if (!REDUCED) { /* the arc sweeps in from the top, the figures and the rest rise */ arc.f = 0; gsap.from(dial, { scale: 0.92, opacity: 0, duration: 0.8, ease: 'power3.out', clearProps: 'opacity' }); gsap.from([...teaButtons, resetBtn, go], { y: 14, opacity: 0, duration: 0.6, ease: 'power3.out', stagger: 0.05, delay: 0.25, clearProps: 'transform,opacity' }); }