makeRing = { const MIN = 4, MAX = 16, DEFAULT = 8; const clamp = (v,a,b) => Math.max(a, Math.min(b, v)); const lowBits = b => (1 << b) - 1; const matchingMask = n => { let m=0; for (let k=0; k+1 localStorage.setItem(key, `${n}:${mask}`); save(); const labelOf = k => fixed ? names[k] : 'T' + (k+1); const currentPairs = () => { const out = []; for (let k=0; k>k)&1) out.push([labelOf(k), labelOf((k+1)%n)]); return out; }; const emit = () => { if (opts.onChange) opts.onChange(currentPairs()); }; let sliderLabel; if (useSlider) { const ctrl = d3.select(svgSel.node().parentNode).insert('div','svg').attr('class','ctrl'); sliderLabel = ctrl.append('label'); ctrl.append('input').attr('type','range') .attr('min',MIN).attr('max',MAX).attr('step',1).attr('value',n) .on('input', function() { const newN = +this.value; mask &= lowBits(Math.min(n, newN) - 1); n = newN; save(); sliderLabel.text(`Teams: ${n}`); draw(); emit(); }); sliderLabel.text(`Teams: ${n}`); } // draw into a caller-positioned group (compact, shared svg) or take over the whole svg let root; if (opts.cx != null) { root = svgSel.append('g').attr('transform', `translate(${opts.cx},${opts.cy})`); } else { const SIZE = fixed ? 600 : 380; root = svgSel.attr('viewBox', `0 0 ${SIZE} ${SIZE}`) .append('g').attr('transform', `translate(${SIZE/2},${SIZE/2-4})`); } function draw() { root.selectAll('*').remove(); const otherOf = k => (k+1)%n; const POS = d3.range(n).map(k => { const a = -Math.PI/2 + k*2*Math.PI/n; return { k, x: R*Math.cos(a), y: R*Math.sin(a), label: labelOf(k) }; }); const EDGES = d3.range(n); const on = k => (mask >> k) & 1; const A = k => POS[k], B = k => POS[otherOf(k)]; const mid = k => [ (A(k).x+B(k).x)/2, (A(k).y+B(k).y)/2 ]; const ex1=k=>A(k).x, ey1=k=>A(k).y, ex2=k=>B(k).x, ey2=k=>B(k).y; const shown = new Array(n).fill(false); const setEdge = e => { mask &= ~(1<<((e-1+n)%n)); mask &= ~(1<<((e+1)%n)); mask |= 1< { const g = enter.append('g').attr('class','pair').style('display','none'); g.append('line').attr('class','half h1'); g.append('line').attr('class','half h2'); return g; }); pairs.each(function(k){ const a=[A(k).x,A(k).y], b=[B(k).x,B(k).y], g=d3.select(this); g.select('.h1').attr('x1',a[0]).attr('y1',a[1]).attr('x2',a[0]).attr('y2',a[1]); g.select('.h2').attr('x1',b[0]).attr('y1',b[1]).attr('x2',b[0]).attr('y2',b[1]); }); root.append('g').selectAll('line').data(EDGES).join('line') .attr('x1',ex1).attr('y1',ey1).attr('x2',ex2).attr('y2',ey2) .attr('stroke','transparent').attr('stroke-width',18).style('cursor','pointer') .on('mouseenter', (ev,k) => highlightEdge(k, true)) .on('mouseleave', (ev,k) => highlightEdge(k, false)) .on('click', (ev,k) => { if (on(k)) mask &= ~(1<`translate(${d.x},${d.y})`); const dot = nodeG.append('circle').attr('r',RNODE).classed('team-out', true); nodeG.append('title'); // hover tooltip (filled in by update) if (fixed) { nodeG.append('text').attr('class','name').each(function(d){ const ux=d.x/R, uy=d.y/R, pad=RNODE+9; d3.select(this) .attr('x', ux*pad).attr('y', uy*pad) .attr('text-anchor', ux>0.25 ? 'start' : ux<-0.25 ? 'end' : 'middle') .attr('dominant-baseline', uy>0.3 ? 'hanging' : uy<-0.3 ? 'auto' : 'middle') .text(d.label); }); } else { nodeG.append('text').attr('class','tlabel').text(d=>d.label); } const colorTeam = (team, live) => dot.filter(d => d.k === team).classed('team-ok', live).classed('team-out', !live); // hover tooltip text: who team k plays first, then second (or "either" when unmatched) const titleFor = k => { const me = labelOf(k), prevT = labelOf((k-1+n)%n), nextT = labelOf((k+1)%n); if (on(k)) return `${me} plays ${nextT} THEN ${prevT}`; // right link set if (on((k-1+n)%n)) return `${me} plays ${prevT} THEN ${nextT}`; // left link set return `${me} plays ${nextT} OR ${prevT}`; // unmatched }; // click a team to connect one of its two links, then the other; hover highlights the team nodeG.style('cursor','pointer') .on('click', (ev,d) => { const k = d.k, R = k, L = (k-1+n)%n; // team k's right / left link const occupied = j => on(j) || on((j-1+n)%n); if (on(R)) setEdge(L); // already matched on the right → toggle to the left else if (on(L)) setEdge(R); // already matched on the left → toggle to the right else { // unmatched → take an unoccupied neighbour first const rFree = !occupied((k+1)%n), lFree = !occupied((k-1+n)%n); setEdge(rFree || !lFree ? R : L); } save(); update(true); emit(); }) .on('mouseenter', (ev,d) => highlightTeam(d.k, true)) .on('mouseleave', (ev,d) => highlightTeam(d.k, false)); // hover a link → highlight the link plus both of its teams function highlightEdge(k, hl) { ringLines.filter(e => e === k).classed('hl', hl); pairs.filter(e => e === k).selectAll('.half').classed('hl', hl); dot.filter(d => d.k === k || d.k === (k+1)%n).classed('hl', hl); } // hover a team → highlight it, and (when it's paired) its link + the other team function highlightTeam(k, hl) { dot.filter(d => d.k === k).classed('hl', hl); const e = on(k) ? k : on((k-1+n)%n) ? (k-1+n)%n : -1; if (e >= 0) highlightEdge(e, hl); } function update(animate) { pairs.each(function(k){ const want = !!on(k); if (want === shown[k]) return; shown[k] = want; const g = d3.select(this), h1 = g.select('.h1'), h2 = g.select('.h2'); const a=[A(k).x,A(k).y], b=[B(k).x,B(k).y], m=mid(k); h1.classed('live',false).classed('pending',true); h2.classed('live',false).classed('pending',true); if (want) { g.style('display',null); const arrive = (half, team) => { half.classed('pending',false).classed('live',true); colorTeam(team,true); }; if (animate) { const grow = (half, fromPt, team) => { const len = Math.hypot(m[0]-fromPt[0], m[1]-fromPt[1]); const thr = len > 9 ? 1 - 4.5/len : 1; half.interrupt().transition().duration(DUR).ease(d3.easeCubicOut) .attr('x2',m[0]).attr('y2',m[1]) .tween('flip', function(){ let done=false; return t => { if (!done && t>=thr) { done=true; arrive(half,team); } }; }); }; grow(h1, a, k); grow(h2, b, otherOf(k)); } else { h1.interrupt().attr('x2',m[0]).attr('y2',m[1]); arrive(h1,k); h2.interrupt().attr('x2',m[0]).attr('y2',m[1]); arrive(h2,otherOf(k)); } } else { colorTeam(k,false); colorTeam(otherOf(k),false); const hide = () => g.style('display','none'); if (animate) { h1.interrupt().transition().duration(DUR).ease(d3.easeCubicOut).attr('x2',a[0]).attr('y2',a[1]); h2.interrupt().transition().duration(DUR).ease(d3.easeCubicOut).attr('x2',b[0]).attr('y2',b[1]).on('end',hide); } else { h1.interrupt().attr('x2',a[0]).attr('y2',a[1]); h2.interrupt().attr('x2',b[0]).attr('y2',b[1]); hide(); } } }); nodeG.select('title').text(d => titleFor(d.k)); } update(false); } draw(); emit(); } // Observable wrapper: build a self-contained container node and return it AS A VIEW — // node.value holds the current selection and an 'input' event fires whenever it changes, // so `viewof ring = makeRing(...)` exposes a live, reactive value. function makeRing(opts = {}) { const container = d3.create("div").attr("class", "vb panel" + (opts.names ? " wide" : "")); if (opts.title) container.append("div").attr("class","cap").text(opts.title); if (opts.subtitle) container.append("div").attr("class","cap2").text(opts.subtitle); container.append("svg"); const node = container.node(); buildRing(container.select("svg"), Object.assign({}, opts, { onChange: pairs => { const playing = new Set(pairs.flat()); const waiting = (opts.names || []).filter(t => !playing.has(t)); node.value = { title: opts.title, pairs, waiting }; node.dispatchEvent(new Event("input", { bubbles: true })); } })); return node; } makeRing.buildRing = buildRing; // expose the lower-level builder for compact packing return makeRing; }