// Daodejing reader: seal-script bamboo slips fanned across a jade field. // Needs: daodejing-reading (1).json, ddjStyle (fonts + stylesheet), player, slatSync. const DDJ = await FileAttachment("daodejing-reading (1).json").json(); const CHAPTERS = DDJ.chapters || DDJ; const BREAK = DDJ.character_breakdowns || {}; const TITLE_DX=0.035; const TITLE_ROWS=9; // Rows off the BOTTOM of each title slip. Bottom only: the shared glyph column must stay in register. const TITLE_TRIM=[2.6, 0, -1.5, 3]; const TIP_DELAY=150; const TIP_GAP=14; const TIP_MARGIN=10; const TIP_MIN=170, TIP_MAX=310; const { serif:SERIF_STACK, glossSize:GLOSS_SIZE, seal:SEAL_STACK, tipRadius:TIP_RADIUS, tipCaret:TIP_CARET, tipCaretLen:TIP_CARET_LEN } = ddjStyle; const TIP_GLYPH=40; const TIP_ACROSS=false; const TIP_SOUND='sound'; // To swap the motif: draw the new corner as the TOP-LEFT one, tails running to the tile's bottom and right edges. const RING_MOTIF={ vb:36.5, rail:0.5, deep:18.5, d:'M.5,36.5 L.5,18.5 L9.5,18.5 L9.5,.5 L.5,.5 L.5,9.5 L18.5,9.5 L18.5,.5 L36.5,.5' }; const RING_SIZE=16; const RING_STROKE=0.075; const RING_TRACK=true; const RING_REF_W=54; const RING_MIN=13, RING_MAX=34; const RING_GAP=6.25; const RING_KEEP_CLEAR=false; const RING_CLEAR=2; const SHADOW_SCALE=1.25; const SHADOW_TILTS=true; const PARTNER_MARK=true; const TAG_FADE_SLATS=2; const PLAY_HIT_MAX=56; const PLAY_HIT_BLEED=14; const PLAY_HIT_ESCAPES=true; const clamp = (v,a,b)=> vb?b : v; const lerp = (a,b,t)=> a+(b-a)*t; const smooth= t=> t*t*(3-2*t); const prand = x=>{ const s=Math.sin(x*127.1+311.7)*43758.5453; return s-Math.floor(s); }; const CNUM='零一二三四五六七八九'; function cnNum(n){ if(n<=0) return '零'; if(n<10) return CNUM[n]; if(n===10) return '十'; if(n<20) return '十'+CNUM[n-10]; const t=Math.floor(n/10), o=n%10; return CNUM[t]+'十'+(o?CNUM[o]:''); } const reduced = matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; const jitY=i=>(prand(i+3.1)-.5)*10; const isFullscreen = ()=> (document.fullscreenElement||document.webkitFullscreenElement)===root; // plank index == slat index — the audio map and the scrubber both count in these. let planks=[], N=0, chapStarts=[]; function buildPlankList(){ planks=[]; for(const chap of CHAPTERS){ (chap.sentences||[]).forEach((s,si)=>{ const chars=(s.characters||[]).map(c=>({ c:c.char, py:c.pinyin||'', g:(c.contextual_definition&&c.contextual_definition.trim())||c.gloss||'', base:c.gloss||'' })); let units=null; if(Array.isArray(s.reading_units)&&s.reading_units.length){ units=[]; let off=0; for(const ru of s.reading_units){ const n=ru.n||1; units.push({from:off, to:off+n-1, en:ru.en||'', note:ru.note||''}); off+=n; } } planks.push({ chapter:chap.chapter, lineNo:si+1, text:s.text||'', lr:s.literal_reading||'', cm:s.commentary||'', enriched:!!s.enriched, chapStart:si===0, chars, units, group:null, groupIdx:null, diffs:null }); }); } mergeToSlats(); N=planks.length; chapStarts=planks.map((p,i)=>p.chapStart?i:-1).filter(i=>i>=0); inferGroups(); } // Folds joined rows into one slat; bails unchanged if the map and the JSON have drifted apart. function mergeToSlats(){ const g=slatSync&&slatSync.slats; if(!g||g.length===planks.length) return; const out=[]; for(const s of g){ const base=planks[s.rows[0]]; if(!base) return; const m=Object.assign({},base); m.chars=base.chars.slice(); m.units=base.units?base.units.map(u=>Object.assign({},u)):null; for(let k=1;k({from:u.from+off,to:u.to+off,en:u.en,note:u.note}))); else m.units=null; } m.group=null; m.groupIdx=null; m.diffs=null; m._geomSize=-1; out.push(m); } planks=out; } function inferGroups(){ let gid=0; const pair=(a,b)=>{ if(a.chapter!==b.chapter) return false; if(a.chars.length!==b.chars.length||a.chars.length<4) return false; let same=0,diff=0; for(let i=0;i=1&&diff>=2; }; for(let i=0;ii){ const g='g'+(gid++); for(let k=i;k<=j;k++) planks[k].group=g; } } const members={}; planks.forEach((p,i)=>{ if(p.group)(members[p.group]??=[]).push(i); }); for(const g in members){ const idxs=members[g], L=planks[idxs[0]].chars.length, diffs=[]; for(let s=0;splanks[ix].chars[s].c!==first)) diffs.push(s); } idxs.forEach(ix=>{ planks[ix].diffs=diffs; planks[ix].groupIdx=idxs; }); } } buildPlankList(); const root=document.createElement('div'); root.className='ddj-root'; root.style.cssText=`position:relative;width:100%;height:640px;max-height:1500px; overflow:${PLAY_HIT_ESCAPES?'visible':'hidden'};border-radius:12px;isolation:isolate; background:#dfe9dc; color:#4a5245;`; root.tabIndex=0; root.style.setProperty('--tip-glyph',TIP_GLYPH+'px'); const HALO_R=3, HALO_N=16; root.style.setProperty('--count-halo', Array.from({length:HALO_N},(_,i)=>{ const a=2*Math.PI*i/HALO_N; return `${(Math.cos(a)*HALO_R).toFixed(2)}px ${(Math.sin(a)*HALO_R).toFixed(2)}px 0 var(--jade,#dfe9dc)`; }).join(',')); root.style.setProperty('--shadow-scale',SHADOW_SCALE); root.classList.toggle('shadow-flat',!SHADOW_TILTS); const deck=document.createElement('div'); deck.className='ddj-deck'; root.appendChild(deck); const scrub=document.createElement('div'); scrub.className='ddj-scrub'; const sRead=document.createElement('div'); sRead.className='ddj-sread'; const sLeft=document.createElement('div'); sLeft.className='ddj-sleft'; const sHandle=document.createElement('div'); sHandle.className='ddj-shandle'; const sLbl=document.createElement('div'); sLbl.className='ddj-slbl'; scrub.append(sRead,sLeft,sHandle,sLbl); root.appendChild(scrub); const YT_PLAYING=1; const ytCall=(fn,...a)=>{ try{ return player?.[fn]?.(...a); }catch(_){ return undefined; } }; const syncOK=()=>slatSync.n===planks.length; if(!syncOK()) console.warn(`[ddj] slat map has ${slatSync.n} slats but the reader built ${N} planks — audio follow disabled. Regenerate the map.`); const ICON_PLAY=``; const ICON_PAUSE=``; const playBtn=document.createElement('button'); playBtn.className='ddj-strip ddj-play'; playBtn.type='button'; const playIco=document.createElement('span'); playIco.className='ddj-ico'; const playLbl=document.createElement('span'); playLbl.className='ddj-lbl'; playLbl.textContent='Audio'; playBtn.append(playIco,playLbl); function setTransportIcon(on){ playIco.innerHTML=on?ICON_PAUSE:ICON_PLAY; playBtn.setAttribute('aria-label',on?'Pause':'Play'); } const FOLLOW_MS=150; let following=false, followTimer=null; let seekFloor=-1, seekFloorUntil=0; function sizePlayHit(){ const ico=playBtn.querySelector('.ddj-ico')||playBtn; const rr=root.getBoundingClientRect(), br=ico.getBoundingClientRect(), pr=playBtn.getBoundingClientRect(); if(!rr.height||!br.height) return; const cx=(br.left+br.right)/2, cy=(br.top+br.bottom)/2; const bleed=PLAY_HIT_ESCAPES?PLAY_HIT_BLEED:0; let L=cx-rr.left+bleed, B=rr.bottom-cy+bleed, R=PLAY_HIT_MAX, T=cy-pr.top; for(const el of [scrub,...root.querySelectorAll('.ddj-strip')]){ if(el===playBtn) continue; const r=el.getBoundingClientRect(); if(!r.width||!r.height) continue; if(r.left>cx && r.bottom>cy-T && r.topcy && r.right>cx-L && r.leftMath.max(v,11).toFixed(1)+'px'; S.setProperty('--hit-l',px(L)); S.setProperty('--hit-r',px(R)); S.setProperty('--hit-t',px(T)); S.setProperty('--hit-b',px(B)); } const centredSlat=()=> clamp(Math.round(target),0,N-1); function nextTimed(i){ for(let k=clamp(i,0,N-1);k=0;k--) if(slatSync.isRead(k)) return k; return clamp(i,0,N-1); } function playFromCentred(){ if(!syncOK()){ ytCall('playVideo'); return; } const want=centredSlat(), i=nextTimed(want); if(i!==want) go(i); // a seek can land early; do not let follow jerk the deck back seekFloor=i; seekFloorUntil=performance.now()+1200; ytCall('seekTo',slatSync.timeOf(i)+0.08,true); ytCall('playVideo'); } function followTick(){ if(!following||!syncOK()) return; const t=ytCall('getCurrentTime'); if(typeof t!=='number') return; let i=slatSync.slatAt(t); if(performance.now(){ if(owns) reclaimKeys(); },KEY_TICK); } } const onDownAnywhere=e=>ownKeys(root.contains(e.target)); document.addEventListener('pointerdown',onDownAnywhere,true); const typing=t=> !!t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName||'')); const SPACE_MIN_VIS=40; function readerOnScreen(){ if(isFullscreen()) return true; const r=root.getBoundingClientRect(); const vh=window.innerHeight||document.documentElement.clientHeight||0; return Math.min(r.bottom,vh)-Math.max(r.top,0) >= Math.min(SPACE_MIN_VIS,r.height); } function spaceHandler(e){ if(e.key!==' '&&e.code!=='Space') return; if(e.repeat||e.metaKey||e.ctrlKey||e.altKey) return; if(typing(e.target)&&!root.contains(e.target)) return; if(!owns&&!readerOnScreen()) return; const now=performance.now(); if(now-lastSpace<90) return; lastSpace=now; e.preventDefault(); ownKeys(true); toggleTransport(); deferReclaim(); } // capture on window first: the key must be seen before anything on the page can stop it const keyTargets=[window,document,root]; try{ if(window.parent&&window.parent!==window) keyTargets.push(window.parent); }catch(_){ } for(const w of keyTargets){ try{ w.addEventListener('keydown',spaceHandler,true); }catch(_){ } } function toggleTransport(){ holdCancel(); const st=ytCall('getPlayerState'); const on=(st===YT_PLAYING)||(typeof st!=='number'&&wantPlay); if(on){ wantPlay=false; ytCall('pauseVideo'); setTransportIcon(false); } else{ wantPlay=true; playFromCentred(); setTransportIcon(true); } ownKeys(true); } playBtn.addEventListener('click',()=>{ ownKeys(true); toggleTransport(); }); setTransportIcon(false); root.appendChild(playBtn); try{ player?.addEventListener?.('onStateChange',syncTransport); }catch(_){} syncTransport(); const ICON_EXPAND=``; const ICON_CONTRACT=``; const fsBtn=document.createElement('button'); fsBtn.className='ddj-strip ddj-fs'; fsBtn.type='button'; const fsLbl=document.createElement('span'); fsLbl.className='ddj-lbl'; const fsIco=document.createElement('span'); fsIco.className='ddj-ico'; fsBtn.append(fsLbl,fsIco); function setFsIcon(on){ fsIco.innerHTML=on?ICON_CONTRACT:ICON_EXPAND; const t=on?'Exit full screen':'Full screen'; fsLbl.textContent=t; fsBtn.setAttribute('aria-label',t); fsBtn.title=t; } setFsIcon(false); fsBtn.addEventListener('click',()=>{ if(document.fullscreenElement===root) document.exitFullscreen?.(); else (root.requestFullscreen?.()||root.webkitRequestFullscreen?.()); }); root.appendChild(fsBtn); const onFsChange=()=>{ const on=(document.fullscreenElement||document.webkitFullscreenElement)===root; setFsIcon(on); setTimeout(rebuildAll,60); }; document.addEventListener('fullscreenchange',onFsChange); document.addEventListener('webkitfullscreenchange',onFsChange); const countL=document.createElement('div'); countL.className='ddj-count'; countL.style.left='24px'; const countR=document.createElement('div'); countR.className='ddj-count'; countR.style.right='24px'; countR.style.textAlign='right'; root.append(countL,countR); const ctagEls=new Map(); function makeCTag(slat){ const t=document.createElement('div'); t.className='ddj-chap ddj-ctag'; const ch=planks[slat].chapter; t.innerHTML=`第${cnNum(ch)}章CH ${ch}`; t.addEventListener('click',e=>{ e.stopPropagation(); userNav(); go(slat); }); t.style.opacity='0'; root.appendChild(t); return t; } const gloss=document.createElement('div'); gloss.className='ddj-gloss'; root.appendChild(gloss); const tip=document.createElement('div'); tip.className='ddj-tip'; tip.style.display='none'; root.appendChild(tip); let tipReg=null, tipTimer=null, tipRaf=null, tipHideT=null; const TIP_NS='http://www.w3.org/2000/svg'; const tipEdge=document.createElementNS(TIP_NS,'svg'); tipEdge.setAttribute('class','ddj-tip-edge'); const tipEdgePath=document.createElementNS(TIP_NS,'path'); tipEdge.appendChild(tipEdgePath); // Panel and caret as ONE path: it is both the clip and the stroke, so the two cannot disagree. function tipShape(w,h,side,cy){ const len=TIP_CARET>0?TIP_CARET_LEN:0; const r=Math.min(TIP_RADIUS,Math.min(w-len,h)/2); const half=Math.min(TIP_CARET,Math.max(0,(h-2*r)/2)); const x0=side==='l'?len:0, x1=side==='r'?w-len:w; const n=v=>v.toFixed(2); const d=[`M${n(x0+r)},0`,`H${n(x1-r)}`,`A${n(r)},${n(r)} 0 0 1 ${n(x1)},${n(r)}`]; if(side==='r'&&half>0){ d.push(`V${n(cy-half)}`,`L${n(x1+len)},${n(cy)}`,`L${n(x1)},${n(cy+half)}`); } d.push(`V${n(h-r)}`,`A${n(r)},${n(r)} 0 0 1 ${n(x1-r)},${n(h)}`, `H${n(x0+r)}`,`A${n(r)},${n(r)} 0 0 1 ${n(x0)},${n(h-r)}`); if(side==='l'&&half>0){ d.push(`V${n(cy+half)}`,`L${n(x0-len)},${n(cy)}`,`L${n(x0)},${n(cy-half)}`); } d.push(`V${n(r)}`,`A${n(r)},${n(r)} 0 0 1 ${n(x0+r)},0`,'Z'); return d.join(' '); } const tipEsc=s=>String(s??'').replace(/[&<>]/g,m=>({'&':'&','<':'<','>':'>'}[m])); const TIP_HAN=/\p{Script=Han}+/gu; const tipTxt=s=>tipEsc(s).replace(TIP_HAN,m=>''+m+''); const TIP_TONE='āáǎàēéěèīíǐìōóǒòūúǔùǖǘǚǜüńňǹ'; const TIP_LAT='A-Za-zü'+TIP_TONE; const TIP_NOTE=/\s*$\s*(sound|meaning|sense)([^)]*)$\s*$/i; const TIP_PY=new RegExp('^(['+TIP_LAT+']+(?:\\s*/\\s*['+TIP_LAT+']+)*)(?=[,:;]|$)'); const TIP_PY2=new RegExp('['+TIP_LAT+']*['+TIP_TONE+']['+TIP_LAT+']*(?:\\s*[→/]\\s*['+TIP_LAT+']+)*'); const tipTone=s=>[...s].some(ch=>TIP_TONE.includes(ch)); function tipPart(c){ let body=String(c.m||''), role=c.role||'', extra=''; const m=body.match(TIP_NOTE); if(m){ body=body.slice(0,m.index); extra=m[2]||''; role=(m[1].toLowerCase()==='sound') ? (/\band\s+(sense|meaning)\b/i.test(extra)?'both':'phonetic') : 'semantic'; } body=body.trim(); if(role==='phonetic'){ const g=body.match(TIP_PY); if(g&&tipTone(g[1])) return {c:c.c,role,text:g[1],py:true}; const e=extra.match(TIP_PY2); if(e) return {c:c.c,role,text:e[0].trim(),py:true}; } return {c:c.c,role,text:body,py:false}; } function tipHTML(ch,py){ const b=BREAK[ch]; let h='

'+tipEsc(py||'')+'

' +'

'; if(b&&b.meaning) h+='

'+tipTxt(b.meaning)+'

'; h+='

'; if(!b) return h; h+='

' +'

'+tipEsc(ch)+'

'; if(b.formation) h+='

'+tipTxt(b.formation)+'

'; h+='

'; const comps=(b.components||[]).filter(c=>c&&c.c).map(tipPart); if(comps.length){ h+='

'; for(const p of comps){ h+='

'+tipEsc(p.c)+'

' +'

' +tipTxt(p.text)+'

'; if(p.role==='phonetic') h+='

'+tipEsc(TIP_SOUND)+'

'; h+='

'; } h+='

'; } return h; } function placeTip(reg){ if(!reg.isConnected){ hideTip(); return; } const rr=root.getBoundingClientRect(), r=reg.getBoundingClientRect(); const availL=(r.left-rr.left)-TIP_GAP-TIP_MARGIN; const ap=planks[activeIdx]; const xR=Math.max(r.right-rr.left, (ap&&ap._x!=null)?ap._x+plankW+14+(ap._glossW||0):0)+TIP_GAP; const availR=rr.width-TIP_MARGIN-xR; const onLeft=availL>=TIP_MIN||availL>=availR; tip.classList.toggle('tip-caret-r',onLeft&&TIP_CARET>0); tip.classList.toggle('tip-caret-l',!onLeft&&TIP_CARET>0); tip.style.maxWidth=Math.min(Math.max(onLeft?availL:availR,TIP_MIN),TIP_MAX)+'px'; tip.style.maxHeight=Math.max(rr.height-TIP_MARGIN*2,90)+'px'; const tw=tip.offsetWidth, th=tip.offsetHeight; let x=onLeft ? (r.left-rr.left)-TIP_GAP-tw : xR; x=clamp(x,TIP_MARGIN,Math.max(TIP_MARGIN,rr.width-TIP_MARGIN-tw)); let y=(r.top+r.bottom)/2-rr.top-th/2; y=clamp(y,TIP_MARGIN,Math.max(TIP_MARGIN,rr.height-TIP_MARGIN-th)); x=Math.round(x); y=Math.round(y); tip.style.transform=`translate3d(${x}px,${y}px,0)`; const gy=(r.top+r.bottom)/2-rr.top-y; const lo=TIP_RADIUS+TIP_CARET, hi=Math.max(lo,th-TIP_RADIUS-TIP_CARET); const d=tipShape(tw,th,onLeft?'r':'l',clamp(gy,lo,hi)); tip.style.clipPath=`path("${d}")`; tip.style.webkitClipPath=`path("${d}")`; tipEdge.setAttribute('width',tw); tipEdge.setAttribute('height',th); tipEdgePath.setAttribute('d',d); } function showTip(reg,ch,py){ tipReg=reg; clearTimeout(tipTimer); clearTimeout(tipHideT); tipTimer=setTimeout(()=>{ if(tipReg!==reg) return; tip.innerHTML=tipHTML(ch,py); tip.appendChild(tipEdge); tip.style.display='block'; placeTip(reg); if(tipRaf) cancelAnimationFrame(tipRaf); tipRaf=requestAnimationFrame(()=>{ tipRaf=null; if(tipReg===reg) tip.classList.add('show'); }); },TIP_DELAY); } function hideTip(){ tipReg=null; clearTimeout(tipTimer); if(tipRaf){ cancelAnimationFrame(tipRaf); tipRaf=null; } if(tip.classList.contains('show')){ tip.classList.remove('show'); clearTimeout(tipHideT); tipHideT=setTimeout(()=>{ if(!tipReg) tip.style.display='none'; },200); }else{ tip.style.display='none'; } } const toast=document.createElement('div'); toast.className='ddj-toast'; root.appendChild(toast); let W=0,H=0, plankW=54, charSize=46, S=76, ACT_X=.46, BULGE=12, TOP_Y=64, LOOKL=7, LOOKR=4, PILE_LX=0, PILE_RX=0; const PILE_ACTIVE=22, PILE_BLEND=1.7; const cssPx=(name,fallback)=>{ const v=parseFloat(getComputedStyle(root).getPropertyValue(name)); return isFinite(v)?v:fallback; }; const TAG_H=46; const JIT=5; const TOP_FS_PAD=10; const FS_GAP=2; const FS_EXTRA=20; const CS_MAX=200; const TITLE_SLATS=4; const titlePadY=()=> Math.round(charSize*.55); const titleH=()=> Math.round(charSize*TITLE_ROWS*1.05+titlePadY()*2); const titleRowsAt=k=> Math.max(3,TITLE_ROWS-(TITLE_TRIM[k]||0)); const titleHAt=k=> Math.round(charSize*titleRowsAt(k)*1.05+titlePadY()*2); const titleHMax=()=>{ let m=0; for(let k=0;km) m=d; } for(let k=0;km) m=d; } return m; } function fitCharSize(avail,lo,hi){ const all=planks.map((p,i)=>i); let cs=clamp(Math.round((lo+hi)/2),lo,hi); charSize=cs; measureSetup(); let maxD=deepestAt(all); const cand=all.filter(i=>planks[i]._geom&&planks[i]._geom.h>maxD*0.85); for(let i=0;i<8&&maxD>0;i++){ const next=clamp(Math.floor(cs*avail/maxD),lo,hi); if(next===cs) break; cs=next; charSize=cs; measureSetup(); maxD=deepestAt(cand); } for(let i=0;i<12&&cs>lo&&maxD>avail;i++){ cs--; charSize=cs; measureSetup(); maxD=deepestAt(cand); } for(let i=0;i<12&&csavail) break; cs++; } let a=cs, b=Math.min(cs+1,hi); for(let i=0;i<7;i++){ const mid=(a+b)/2; charSize=mid; measureSetup(); if(deepestAt(cand)<=avail) a=mid; else b=mid; } charSize=a; measureSetup(); return a; } function rowTopPx(){ const rr=root.getBoundingClientRect(), sr=scrub.getBoundingClientRect(); if(!rr.height||!sr.height) return null; return sr.top-rr.top; } function tagTopPx(){ for(const el of ctagEls.values()){ const h=el.offsetHeight; if(h) return h+8; } return TAG_H; } function computeSizes(){ const fs=isFullscreen(); W=root.clientWidth; let maxLen=4; for(const p of planks) maxLen=Math.max(maxLen,p.chars.length); const padY=cssPx('--pad-y',8); const rowH=cssPx('--row-h',30); TOP_Y = fs ? tagTopPx()+JIT+TOP_FS_PAD : 160; if(fs){ H=root.clientHeight||640; const floor=rowTopPx() ?? (H-padY-rowH); const avail=Math.max(floor-FS_GAP+FS_EXTRA-TOP_Y,120); charSize=fitCharSize(avail,22,CS_MAX); }else{ const refH=clamp((window.innerHeight||800)-40,360,1500); const cs0=Math.floor(clamp((refH-TOP_Y-56)/(maxLen*1.22+1.1),22,46)); charSize=Math.round(Math.round(clamp(cs0*1.16,34,56))*.97); } plankW=Math.round(charSize*0.95); S=plankW+Math.round(charSize*.38); const EDGE=36; PILE_LX=EDGE+plankW/2; PILE_RX=W-EDGE-plankW/2; const MINCOL=88, MAXCOL=Math.min(260,Math.round(W*.34)), OFF=20; const GROUP_CAP=clamp(Math.round(W*0.20),130,190); const nomGloss=clamp(MAXCOL,120,200); const nomGap=nomGloss+plankW*1.2+OFF; ACT_X=clamp((W+plankW*0.5-nomGap+S)/(2*Math.max(W,1)),0.30,0.46); mCtx.font=GLOSS_SIZE+'px '+SERIF_STACK; for(let i=0;i({en:u.en, grp:u.to>u.from})) : p.chars.map(c=>({en:c.g, grp:false})); let singleW=0, groupW=0; for(const u of us){ const w=mCtx.measureText(u.en||'').width; if(u.grp) groupW=Math.max(groupW,w); else singleW=Math.max(singleW,w); } const base=Math.max(singleW, Math.min(groupW, GROUP_CAP)); p._glossW=clamp(Math.round(base)+10,MINCOL,MAXCOL); p._gap=Math.round(p._glossW+plankW*1.2+OFF); } BULGE=12; measureSetup(); if(!fs){ let maxH=0; for(const p of planks){ p._geomSize=-1; const g=plankGeom(p); if(g.h>maxH) maxH=g.h; } maxH=Math.max(maxH,titleHMax()); const cellH=Math.min(Math.ceil(TOP_Y+maxH+40),1500); if(root.style.height!==cellH+'px') root.style.height=cellH+'px'; H=cellH; } } const mCanvas=document.createElement('canvas'); const mCtx=mCanvas.getContext('2d',{willReadFrequently:true}); let metricCache=new Map(), baselineInBox=charSize*.88; function measureSetup(){ metricCache.clear(); mCanvas.width=Math.ceil(charSize*2); mCanvas.height=Math.ceil(charSize*2.2); mCtx.font=charSize+'px '+SEAL_STACK; mCtx.textBaseline='alphabetic'; const ref=mCtx.measureText('道'); const fa=ref.fontBoundingBoxAscent??charSize*.88, fd=ref.fontBoundingBoxDescent??charSize*.12; baselineInBox=(charSize-(fa+fd))/2+fa; } function glyphInk(ch){ let m=metricCache.get(ch); if(m) return m; const y0=Math.round(charSize*1.3), x0=Math.round(charSize*.4); mCtx.clearRect(0,0,mCanvas.width,mCanvas.height); mCtx.fillText(ch,x0,y0); const img=mCtx.getImageData(0,0,mCanvas.width,mCanvas.height).data; const Wc=mCanvas.width,Hc=mCanvas.height,rows=new Float32Array(Hc); let total=0; for(let y=0;y=th){topE=y;break;} } acc=0; for(let y=Hc-1;y>=0;y--){ acc+=rows[y]; if(acc>=th){botE=y;break;} } a=y0-topE; d=botE-y0; } m={t:baselineInBox-a, b:baselineInBox+d}; metricCache.set(ch,m); return m; } function plankGeom(p){ if(p._geomSize===charSize) return p._geom; const padY=Math.round(charSize*.55), items=[]; let h; if(p.group){ const pitch=charSize*1.18; p.chars.forEach((c,i)=>{ const ink=glyphInk(c.c), ih=ink.b-ink.t, slotTop=padY+i*pitch; items.push({top:slotTop+(pitch-ih)/2-ink.t, cy:slotTop+pitch/2}); }); h=padY*2+p.chars.length*pitch; }else{ const gap=charSize*.24; let y=padY; p.chars.forEach(c=>{ const ink=glyphInk(c.c), ih=Math.max(ink.b-ink.t,charSize*.28); items.push({top:y-ink.t, cy:y+ih/2}); y+=ih+gap; }); h=y-gap+padY; } p._geom={items,h}; p._geomSize=charSize; return p._geom; } const GRAIN=[]; for(let s=0;s<9;s++){ const svg=``; GRAIN.push(`url("data:image/svg+xml,${encodeURIComponent(svg)}")`); } function bambooStyle(i,el){ const r=k=>prand(i*7.31+k*13.7); const hu=33+(r(1)-.5)*9, sa=34+(r(2)-.5)*12, L=63+(r(3)-.5)*17; const base=`linear-gradient(90deg, hsl(${hu} ${sa}% ${L-7}%) 0%, hsl(${hu} ${sa}% ${L-2}%) 8%, hsl(${hu} ${sa+4}% ${L+5}%) 32%, hsl(${hu} ${sa+2}% ${L+2}%) 52%, hsl(${hu} ${sa+4}% ${L+4}%) 70%, hsl(${hu} ${sa}% ${L-3}%) 92%, hsl(${hu} ${sa}% ${L-7}%) 100%)`; const grain=GRAIN[Math.floor(r(4)*GRAIN.length)%GRAIN.length]; const stain=(w,h,x,y,a)=>`radial-gradient(${w}% ${h}% at ${x}% ${y}%, hsl(${hu} 30% ${L-16}% / ${a}), transparent 72%)`; const mottle=[ stain(70,14,r(7)*100,10+r(8)*80,.09+r(9)*.06), stain(55,10,r(10)*100,10+r(11)*80,.07+r(12)*.05), stain(80,7,r(13)*100,10+r(14)*80,.06) ].join(','); el.style.background=[grain,mottle,base].join(','); el.style.backgroundSize='100% 100%'; el.style.backgroundRepeat='no-repeat'; } const SVGNS='http://www.w3.org/2000/svg'; function ringGeom(w){ const m=RING_MOTIF; const size=RING_TRACK ? clamp(RING_SIZE*w/RING_REF_W,RING_MIN,RING_MAX) : RING_SIZE; const f=size/RING_SIZE; const k=size/m.vb; const sw=size*RING_STROKE; const rail=m.rail*k; const deep=m.deep*k+sw/2; const inset=RING_KEEP_CLEAR ? Math.max(RING_GAP*f, deep-rail+RING_CLEAR*f) : RING_GAP*f; return {size,k,sw,rail,inset,pad:inset+rail}; } function makeRing(w,h){ const g=ringGeom(w), M=g.sw+1; const CW=w+2*g.pad+2*M, CH=h+2*g.pad+2*M; const svg=document.createElementNS(SVGNS,'svg'); svg.setAttribute('class','ddj-ring'); svg.setAttribute('width',CW.toFixed(2)); svg.setAttribute('height',CH.toFixed(2)); svg.setAttribute('viewBox',`0 0 ${CW.toFixed(2)} ${CH.toFixed(2)}`); svg.setAttribute('aria-hidden','true'); svg.style.left=svg.style.top=(-(g.pad+M)).toFixed(2)+'px'; const box=document.createElementNS(SVGNS,'g'); box.setAttribute('fill','none'); box.setAttribute('stroke','var(--ring-ink)'); box.setAttribute('stroke-linecap','butt'); box.setAttribute('stroke-linejoin','miter'); box.setAttribute('stroke-miterlimit','10'); svg.appendChild(box); const x0=M, y0=M, x1=CW-M, y1=CH-M, s=g.size, r=g.rail; const rail=(ax,ay,bx,by)=>{ if((bx-ax)+(by-ay)<0.5) return; const l=document.createElementNS(SVGNS,'line'); l.setAttribute('x1',ax.toFixed(2)); l.setAttribute('y1',ay.toFixed(2)); l.setAttribute('x2',bx.toFixed(2)); l.setAttribute('y2',by.toFixed(2)); l.setAttribute('stroke-width',g.sw.toFixed(2)); box.appendChild(l); }; rail(x0+s, y0+r, x1-s, y0+r); rail(x0+s, y1-r, x1-s, y1-r); rail(x0+r, y0+s, x0+r, y1-s); rail(x1-r, y0+s, x1-r, y1-s); const c=(s/2).toFixed(2); [[x0,y0,0],[x1-s,y0,90],[x1-s,y1-s,180],[x0,y1-s,270]].forEach(([X,Y,rot])=>{ const p=document.createElementNS(SVGNS,'path'); p.setAttribute('d',RING_MOTIF.d); p.setAttribute('stroke-width',(g.sw/g.k).toFixed(3)); p.setAttribute('transform', `translate(${X.toFixed(2)},${Y.toFixed(2)}) rotate(${rot},${c},${c}) scale(${g.k.toFixed(5)})`); box.appendChild(p); }); return svg; } function makeRingFill(w,h){ const g=ringGeom(w), d=document.createElement('div'); d.className='ddj-rfill'; d.style.left=d.style.top=(-g.inset).toFixed(2)+'px'; d.style.width=(w+2*g.inset).toFixed(2)+'px'; d.style.height=(h+2*g.inset).toFixed(2)+'px'; return d; } const live=new Map(); function makePlank(i){ const p=planks[i], g=plankGeom(p); const el=document.createElement('div'); el.className='ddj-plank'; el.dataset.i=i; el.style.width=plankW+'px'; el.style.height=g.h+'px'; const body=document.createElement('div'); body.className='ddj-body'; body.style.width=plankW+'px'; body.style.height=g.h+'px'; const hc=s=>(3.5+prand(i*5.31+s)*4.5).toFixed(1); const radius=`${hc(1)}px ${hc(2)}px ${hc(3)}px ${hc(4)}px / ${hc(5)*1.5}px ${hc(6)*1.5}px ${hc(7)*1.5}px ${hc(8)*1.5}px`; body.style.borderRadius=radius; el.style.borderRadius=radius; bambooStyle(i,body); const uOf=ci=>{ if(!p.units) return ci; for(let k=0;k=p.units[k].from&&ci<=p.units[k].to) return k; return 0; }; p.chars.forEach((c,ci)=>{ const sp=document.createElement('span'); sp.className='ddj-ch'; sp.textContent=c.c; sp.dataset.ci=ci; sp.dataset.ui=uOf(ci); sp.style.fontSize=charSize+'px'; sp.style.top=g.items[ci].top+'px'; body.appendChild(sp); }); { const cys=g.items.map(it=>it.cy), n=cys.length; const bound=k=>{ if(k<=0) return cys[0]-((n>1?cys[1]-cys[0]:charSize))/2; if(k>=n) return cys[n-1]+((n>1?cys[n-1]-cys[n-2]:charSize))/2; return (cys[k-1]+cys[k])/2; }; p.chars.forEach((c,ci)=>{ const top=bound(ci), reg=document.createElement('div'); reg.className='ddj-region'; reg.dataset.ci=ci; reg.dataset.ui=uOf(ci); reg.dataset.char=c.c; reg.style.top=top+'px'; reg.style.height=(bound(ci+1)-top)+'px'; reg.addEventListener('pointerenter',e=>{ if(i!==activeIdx) return; pairHL(i,+reg.dataset.ui,true,+reg.dataset.ci); if(e.pointerType==='mouse'&&!dragging) showTip(reg,c.c,c.py); }); reg.addEventListener('pointerleave',()=>{ if(i===activeIdx) pairHL(i,+reg.dataset.ui,false,+reg.dataset.ci); hideTip(); }); body.appendChild(reg); }); } const fog=document.createElement('div'); fog.className='ddj-fog'; body.appendChild(fog); const sheen=document.createElement('div'); sheen.className='ddj-sheen'; body.appendChild(sheen); body.appendChild(makeRing(plankW,g.h)); el.appendChild(makeRingFill(plankW,g.h)); el.appendChild(body); attachPlankEvents(el,body); deck.appendChild(el); return el; } const TITLE_CHARS=['道','德','經']; let titleEls=[]; function buildTitle(){ titleEls.forEach(e=>e.remove()); titleEls=[]; const padY=titlePadY(), hFull=titleH(); const blockW=plankW*TITLE_SLATS; const pitch=(hFull-padY*2)/TITLE_CHARS.length; const big=Math.round(Math.min(blockW*0.92, pitch*0.96)); for(let k=0;k(3.5+prand(i*5.31+s)*4.5).toFixed(1); const radius=`${hc(1)}px ${hc(2)}px ${hc(3)}px ${hc(4)}px / ${hc(5)*1.5}px ${hc(6)*1.5}px ${hc(7)*1.5}px ${hc(8)*1.5}px`; body.style.borderRadius=radius; el.style.borderRadius=radius; bambooStyle(i,body); const clip=document.createElement('div'); clip.className='ddj-tclip'; const strip=document.createElement('div'); strip.className='ddj-tstrip'; strip.style.width=blockW+'px'; strip.style.left=(-k*plankW)+'px'; TITLE_CHARS.forEach((c,ci)=>{ const sp=document.createElement('span'); sp.className='ddj-tch'; sp.textContent=c; sp.style.fontSize=big+'px'; sp.style.left=`calc(50% + ${(big*TITLE_DX).toFixed(1)}px)`; sp.style.top=Math.round(padY+ci*pitch+(pitch-big)/2)+'px'; strip.appendChild(sp); }); clip.appendChild(strip); body.appendChild(clip); const fog=document.createElement('div'); fog.className='ddj-fog'; body.appendChild(fog); const sheen=document.createElement('div'); sheen.className='ddj-sheen'; body.appendChild(sheen); body.appendChild(makeRing(plankW,h)); el.appendChild(makeRingFill(plankW,h)); el.appendChild(body); attachPlankEvents(el,body); deck.appendChild(el); titleEls.push(el); } } let pos=0, target=0, raf=null, activeIdx=-1, dragging=false; let Eoff=null, lastPosE=0, EtargetLast=0; const MIN_ADV=20; function pileXY(i,depth,leftSide){ const dd=Math.min(depth,PILE_ACTIVE); return { x:(leftSide?PILE_LX+dd*.9:PILE_RX-dd*.9)+(prand(i*1.71)-.5)*6, y:TOP_Y+(prand(i*2.13)-.5)*9+dd*.5, rot:(prand(i*3.77)-.5)*4, z:Math.max(3,200-Math.round(dd*9)) }; } const shadowFor=depth=> (1-smooth(clamp(depth/13,0,1))); const FOG0=6, FOGTAU=4.5, FOGMAX=20, FOGNORM=1-Math.exp(-(FOGMAX-FOG0)/FOGTAU); function fogFor(depth){ if(depth<=FOG0) return 0; if(depth>=FOGMAX) return 1; return Math.min(1,(1-Math.exp(-(depth-FOG0)/FOGTAU))/FOGNORM); } let prevLo=0, prevHi=-1; function layout(){ const a=clamp(Math.round(pos),0,N-1); if(a!==activeIdx) setActive(a); const center=W*ACT_X; const A=clamp(Math.floor(pos),0,N-1); const gHead=lerp(planks[A]._gap||S, (planks[A+1]?planks[A+1]._gap:planks[A]._gap)||S, clamp(pos-A,0,1)); const Etarget=Math.max(gHead-S,0); EtargetLast=Etarget; if(Eoff===null) Eoff=Etarget; else if(Etarget>=Eoff){ Eoff+=(Etarget-Eoff)*(reduced?1:0.32); }else{ // rate-limited so the read pile can never slide backwards const dp=pos-lastPosE; const lim=Math.max(S-MIN_ADV,0)*Math.abs(dp); Eoff+=clamp(Etarget-Eoff,-lim,0); } lastPosE=pos; const E=Eoff, curGap=S+E; LOOKL=clamp(Math.floor((center-PILE_LX-plankW*0.5)/S),0,40); LOOKR=clamp(Math.floor((PILE_RX-center-curGap)/S)+1,0,30); const lo=Math.max(0,Math.floor(pos)-(LOOKR+PILE_ACTIVE+2)); const hi=Math.min(N-1,Math.ceil(pos)+(LOOKL+PILE_ACTIVE+2)); for(let i=prevLo;i=0&&!live.has(hoverIdx)){ hoverIdx=-1; holdSync(); } for(let i=lo;i<=hi;i++){ const p=planks[i], d=i-pos; let el=live.get(i); if(!el){ el=makePlank(i); live.set(i,el); } let x = center - d*S + E*smooth(clamp(-d,0,1)); x-=BULGE*1.5*d*Math.exp(-(d*d)/2.4); const rowX=x; let y=TOP_Y+jitY(i); let rot=(prand(i+7.7)-.5)*4*clamp(Math.abs(d),0,1); let z=320-Math.round(Math.abs(d)*8); const rDepth=(rowX-PILE_RX)/S, lDepth=(PILE_LX-rowX)/S; const depth=Math.max(lDepth,rDepth); let sh=1, fog=0; if(depth>0){ const tt=smooth(clamp(depth/PILE_BLEND,0,1)); const leftSide=lDepth>rDepth; const s=pileXY(i,depth,leftSide); const rowXc=leftSide?Math.max(rowX,PILE_LX):Math.min(rowX,PILE_RX); x=lerp(rowXc,s.x,tt); y=lerp(y,s.y,tt); rot=lerp(rot,s.rot,tt); z=Math.round(lerp(z,s.z,tt)); sh=shadowFor(depth); fog=fogFor(depth); } const van=fog<=.72?0:smooth(clamp((fog-.72)/.28,0,1)); const jx=(prand(i+13.9)-.5)*5; el.style.setProperty('--fog',fog.toFixed(2)); el.style.setProperty('--vanish',van.toFixed(2)); el.style.setProperty('--sh',sh.toFixed(2)); el.style.zIndex=String(z); el.style.transform=`translate3d(${(x+jx-plankW/2).toFixed(1)}px,${y.toFixed(1)}px,0) rotate(${rot.toFixed(2)}deg)`; el.classList.toggle('is-active',i===a); p._x=x+jx-plankW/2; p._y=y; p._fog=fog; } for(const el of titleEls){ const i=+el.dataset.i, d=i-pos; let x = center - d*S + E*smooth(clamp(-d,0,1)); x-=BULGE*1.5*d*Math.exp(-(d*d)/2.4); const rowX=x; let y=TOP_Y+jitY(i); let rot=(prand(i+7.7)-.5)*4*clamp(Math.abs(d),0,1); let z=320-Math.round(Math.abs(d)*8); const rDepth=(rowX-PILE_RX)/S, lDepth=(PILE_LX-rowX)/S; const depth=Math.max(lDepth,rDepth); let sh=1, fog=0; if(depth>0){ const tt=smooth(clamp(depth/PILE_BLEND,0,1)); const leftSide=lDepth>rDepth; const s=pileXY(i,depth,leftSide); const rowXc=leftSide?Math.max(rowX,PILE_LX):Math.min(rowX,PILE_RX); x=lerp(rowXc,s.x,tt); y=lerp(y,s.y,tt); rot=lerp(rot,s.rot,tt); z=Math.round(lerp(z,s.z,tt)); sh=shadowFor(depth); fog=fogFor(depth); } const van=fog<=.72?0:smooth(clamp((fog-.72)/.28,0,1)); const jx=(prand(i+13.9)-.5)*5; el.style.setProperty('--fog',fog.toFixed(2)); el.style.setProperty('--vanish',van.toFixed(2)); el.style.setProperty('--sh',sh.toFixed(2)); el.style.zIndex=String(z); el.style.transform=`translate3d(${(x+jx-plankW/2).toFixed(1)}px,${y.toFixed(1)}px,0) rotate(${rot.toFixed(2)}deg)`; } updateChapterTags(); updateScrubber(); positionGloss(a); if(tipReg&&tip.classList.contains('show')) placeTip(tipReg); } function slatAnchor(i){ const center=W*ACT_X, E=Eoff||0, d=i-pos; let x=center - d*S + E*smooth(clamp(-d,0,1)); x-=BULGE*1.5*d*Math.exp(-(d*d)/2.4); const rowX=x; let y=TOP_Y+jitY(i); const rDepth=(rowX-PILE_RX)/S, lDepth=(PILE_LX-rowX)/S; const depth=Math.max(lDepth,rDepth), leftSide=lDepth>rDepth; if(depth>0){ const tt=smooth(clamp(depth/PILE_BLEND,0,1)); const s=pileXY(i,depth,leftSide); const rowXc=leftSide?Math.max(rowX,PILE_LX):Math.min(rowX,PILE_RX); x=lerp(rowXc,s.x,tt); y=lerp(y,s.y,tt); } const jx=(prand(i+13.9)-.5)*5; return {cx:x+jx, top:y, depth, leftSide}; } function updateChapterTags(){ const cand=[], L=[], R=[]; let dL=Infinity, dR=Infinity; for(const slat of chapStarts){ const a=slatAnchor(slat); a.slat=slat; cand.push(a); if(a.depth>0) (a.leftSide?L:R).push(a); else if(a.leftSide) dL=Math.min(dL,-a.depth); else dR=Math.min(dR,-a.depth); } const visible=new Set(); for(const a of cand) if(a.depth<=0) visible.add(a); for(const arr of [L,R]){ if(!arr.length) continue; let front=arr[0]; for(const a of arr) if(a.deptha.depth-b.depth); const kept=[], finalVis=new Set(); for(const a of order){ // a tag on a pile is exempt from the cull so it can fade rather than vanish if(a.depth<=0 && kept.some(k=>Math.abs(k.cx-a.cx)0 ? clamp((a.leftSide?dL:dR)/TAG_FADE_SLATS,0,1) : 1; el.style.transform=`translate(${a.cx.toFixed(1)}px,${(a.top-8).toFixed(1)}px) translate(-50%,-100%)`; el.style.opacity=fade.toFixed(3); el.style.pointerEvents=fade>0.05?'auto':'none'; el.style.zIndex=String(56-Math.round(clamp(a.depth,0,18))); } } const hlSet=new Set(); function setActive(a){ activeIdx=a; hideTip(); updateCounts(a); if(hlSet.size){ for(const e of hlSet) e.classList.remove('hl'); hlSet.clear(); } live.forEach(el=>el.classList.remove('pp-partner')); const gp=planks[a].groupIdx; if(gp&&PARTNER_MARK) gp.forEach(ix=>{ if(ix!==a) live.get(ix)?.classList.add('pp-partner'); }); buildGloss(a); positionGloss(a); holdSync(); } function buildGloss(a){ const p=planks[a], g=plankGeom(p), gw=p._glossW||160; gloss.innerHTML=''; const items=[]; const units=p.units||p.chars.map((c,ci)=>({from:ci,to:ci,en:c.g,note:''})); units.forEach((u,ui)=>{ const it=document.createElement('div'); it.className='ddj-gitem'; it.dataset.ui=ui; if(u.to>u.from) it.classList.add('ddj-multi'); it.style.width=gw+'px'; const en=document.createElement('div'); en.className='ddj-gen'; en.textContent=u.en; it.appendChild(en); if(u.note){ const nt=document.createElement('div'); nt.className='ddj-gnote'; nt.textContent=u.note; it.appendChild(nt); } const cy=(g.items[u.from].cy+g.items[u.to].cy)/2; it.style.top=cy+'px'; it.dataset.cy=cy; it.addEventListener('mouseenter',()=>pairHL(a,ui,true)); it.addEventListener('mouseleave',()=>pairHL(a,ui,false)); gloss.appendChild(it); items.push(it); }); requestAnimationFrame(()=>{ const Hh=items.map(it=>it.offsetHeight); const Cc=items.map(it=>parseFloat(it.dataset.cy)); const tops=[]; let prevBot=-1e9; for(let k=0;k{ it.style.top=(tops[k]+Hh[k]/2+shift)+'px'; }); }); } function positionGloss(a){ const p=planks[a]; if(!p||p._x==null) return; gloss.style.transform=`translate3d(${p._x+plankW+14}px,${p._y}px,0)`; gloss.style.opacity=clamp(1-Math.abs(pos-a)*1.7,0,1).toFixed(2); } function pairHL(a,ui,on,ci){ const el=live.get(a); if(!el) return; const sel=(ci==null)?`.ddj-ch[data-ui="${ui}"]`:`.ddj-ch[data-ci="${ci}"]`; el.querySelectorAll(sel).forEach(ch=>{ ch.classList.toggle('hl',on); on?hlSet.add(ch):hlSet.delete(ch); }); gloss.querySelector(`.ddj-gitem[data-ui="${ui}"]`)?.classList.toggle('hl',on); } function updateCounts(a){ const ahead=N-1-a, read=a; countL.textContent=ahead>0?ahead+' ahead':''; countR.textContent=read>0?read+' read':''; } let scrubSegs=[]; function buildScrubber(){ scrub.querySelectorAll('.ddj-seg').forEach(e=>e.remove()); scrubSegs=[]; for(let k=0;k Math.max(scrub.clientWidth-HANDLE_D,0); const handleX=f=> HANDLE_R+f*handleTravel(); function updateScrubber(){ const f=clamp(pos/Math.max(N-1,1),0,1), pct=f*100; sHandle.style.left=handleX(f).toFixed(1)+'px'; sRead.style.width=pct+'%'; sLeft.style.width=Math.max(100-pct-.4,0)+'%'; for(const s of scrubSegs){ const f=clamp((pos-s.from+.5)/(s.to-s.from+1),0,1), fq=Math.round(f*50)/50; if(s.last!==fq){ s.fill.style.width=(fq*100)+'%'; s.last=fq; } } } (function scrubEvents(){ let down=false; scrub.addEventListener('pointerenter',()=>scrub.classList.add('hov')); scrub.addEventListener('pointerleave',()=>scrub.classList.remove('hov')); const frac=e=>{ const r=scrub.getBoundingClientRect(); return clamp((e.clientX-r.left-HANDLE_R)/Math.max(r.width-HANDLE_D,1),0,1); }; const label=f=>{ const idx=Math.round(f*(N-1)); let ch=1; for(let k=chapStarts.length-1;k>=0;k--) if(idx>=chapStarts[k]){ ch=planks[chapStarts[k]].chapter; break; } sLbl.textContent='CH '+ch; const half=sLbl.offsetWidth/2, x0=scrub.offsetLeft, cw=root.clientWidth; const lo=half+LBL_EDGE-x0, hi=Math.max(cw-half-LBL_EDGE-x0,lo); sLbl.style.left=clamp(handleX(f),lo,hi).toFixed(1)+'px'; }; scrub.addEventListener('pointerdown',e=>{ e.stopPropagation(); e.preventDefault(); userNav(); down=true; scrub.classList.add('scrubbing'); deck.classList.add('dragging'); dragging=true; gliding=false; if(raf){ cancelAnimationFrame(raf); raf=null; } try{ scrub.setPointerCapture(e.pointerId); }catch(_){} const f=frac(e); pos=target=f*(N-1); label(f); layout(); }); scrub.addEventListener('pointermove',e=>{ if(!down){ label(frac(e)); return; } const f=frac(e); pos=target=f*(N-1); label(f); if(!dragRaf) dragRaf=requestAnimationFrame(()=>{ dragRaf=null; if(dragging) layout(); }); }); const end=()=>{ if(!down) return; down=false; scrub.classList.remove('scrubbing'); deck.classList.remove('dragging'); dragging=false; go(Math.round(pos)); }; scrub.addEventListener('pointerup',end); scrub.addEventListener('pointercancel',end); })(); let gliding=false, glideRate=0; function go(t){ gliding=false; target=clamp(Math.round(t),0,N-1); if(Math.abs(target-pos)>60) pos=target-Math.sign(target-pos)*12; kick(); } function glide(vpf){ const dist=vpf/0.045; target=clamp(Math.round(pos+clamp(dist,-70,70)),0,N-1); const d=target-pos; if(Math.abs(d)<0.5){ gliding=false; kick(); return; } glideRate=clamp(Math.abs(vpf/d),0.048,0.2); gliding=true; kick(); } function kick(){ if(!raf&&!dragging) raf=requestAnimationFrame(tick); } function tick(){ raf=null; const d=target-pos; const posDone=Math.abs(d)<0.002; if(posDone) pos=target; else pos+=d*(gliding?glideRate:(reduced?.5:.17)); layout(); const eOpening=(EtargetLast-Eoff)>0.5; if(posDone&&!eOpening){ gliding=false; return; } raf=requestAnimationFrame(tick); } let wheelTimer=null; root.addEventListener('wheel',e=>{ if(!isFullscreen()) return; e.preventDefault(); userNav(); const dv=(Math.abs(e.deltaY)>=Math.abs(e.deltaX)?e.deltaY:e.deltaX); if(gliding){ gliding=false; target=Math.round(pos); } target=clamp(target+dv/130,0,N-1); kick(); clearTimeout(wheelTimer); wheelTimer=setTimeout(()=>{ const dir=Math.sign(target-pos); let land=Math.round(target); if(dir>0) land=Math.max(land,Math.ceil(pos-.02)); else if(dir<0) land=Math.min(land,Math.floor(pos+.02)); go(land); },120); },{passive:false}); const inControlBand=y=>[scrub,playBtn,fsBtn].some(el=>{ const r=el.getBoundingClientRect(); return y>=r.top&&y<=r.bottom; }); let pDown=null, dragRaf=null; deck.addEventListener('pointerdown',e=>{ if(e.button===2) return; if(inControlBand(e.clientY)) return; userNav(); const onPlank=e.target.closest('.ddj-plank'); if(raf){ cancelAnimationFrame(raf); raf=null; } gliding=false; target=pos; pDown={x:e.clientX,y:e.clientY,plank:onPlank,startPos:pos,moved:false,scrub:false, lastX:e.clientX,lastT:performance.now(),pid:e.pointerId, samples:[{t:performance.now(),x:e.clientX}]}; }); deck.addEventListener('pointermove',e=>{ if(!pDown) return; const dx=e.clientX-pDown.x, dy=e.clientY-pDown.y; if(!pDown.moved&&Math.abs(dx)+Math.abs(dy)>5) pDown.moved=true; if(!pDown.scrub&&Math.abs(dx)>4&&Math.abs(dx)>=Math.abs(dy)*.6){ pDown.scrub=true; dragging=true; gliding=false; deck.classList.add('dragging'); root.classList.add('ddj-noselect'); getSelection()?.removeAllRanges(); try{ deck.setPointerCapture(pDown.pid); }catch(_){} if(raf){ cancelAnimationFrame(raf); raf=null; } } if(pDown.scrub){ e.preventDefault(); const now=performance.now(); pDown.lastX=e.clientX; pDown.lastT=now; pDown.samples.push({t:now,x:e.clientX}); while(pDown.samples.length>2 && now-pDown.samples[0].t>200) pDown.samples.shift(); pos=clamp(pDown.startPos+dx/S,-.4,N-.6); target=pos; if(!dragRaf) dragRaf=requestAnimationFrame(()=>{ dragRaf=null; if(dragging) layout(); }); } },{passive:false}); deck.addEventListener('pointerup',e=>{ if(!pDown) return; const d=pDown; pDown=null; if(d.scrub){ dragging=false; deck.classList.remove('dragging'); root.classList.remove('ddj-noselect'); try{ deck.releasePointerCapture(d.pid); }catch(_){} const S0=d.samples, last=S0[S0.length-1]; let ref=S0[0]; for(let k=S0.length-1;k>=0;k--){ ref=S0[k]; if(last.t-S0[k].t>=100) break; } const dt=last.t-ref.t, vAvg=dt>0?(last.x-ref.x)/dt:0; const idle=performance.now()-d.lastT, vEff=idle>80?0:vAvg; if(Math.abs(vEff)>0.4) glide(clamp(vEff,-6,6)*16.7/S); else go(Math.round(pos)); }else if(d.plank&&!d.moved){ const i=+d.plank.dataset.i; const reg=e.target.closest?.('.ddj-region'); const ch=e.target.closest?.('.ddj-ch'); const glyph=reg?reg.dataset.char:(ch?ch.textContent:null); if(glyph&&i===activeIdx){ copyChar(glyph,e.clientX,e.clientY); go(i); } else go(i); }else if(!d.moved){ go(Math.round(pos)); } }); deck.addEventListener('pointercancel',()=>{ if(pDown&&pDown.scrub){ dragging=false; deck.classList.remove('dragging'); root.classList.remove('ddj-noselect'); go(pos); } pDown=null; }); root.addEventListener('keydown',e=>{ if(!root.contains(e.target)||typing(e.target)) return; if(['ArrowLeft','ArrowDown','ArrowRight','ArrowUp','PageDown','PageUp','Home','End'].includes(e.key)) userNav(); if(['ArrowLeft','ArrowDown'].includes(e.key)){ e.preventDefault(); go(target+1); } else if(['ArrowRight','ArrowUp'].includes(e.key)){ e.preventDefault(); go(target-1); } else if(e.key==='PageDown'){ e.preventDefault(); go(target+8); } else if(e.key==='PageUp'){ e.preventDefault(); go(target-8); } else if(e.key==='Home') go(0); else if(e.key==='End') go(N-1); }); let toastT=null; function copyChar(ch,x,y){ const r=root.getBoundingClientRect(); const done=()=>{ toast.textContent=ch+' copied'; toast.style.left=(x-r.left)+'px'; toast.style.top=(y-r.top)+'px'; toast.classList.add('show'); clearTimeout(toastT); toastT=setTimeout(()=>toast.classList.remove('show'),950); }; navigator.clipboard?.writeText(ch).then(done).catch(done) ?? done(); } const HOLD_RESUME_MS=400; const HOLD_TICK=50; const HOLD_LEAD=0.02; let hoverIdx=-1, hoverGloss=false, holdSlat=-1, holdPaused=false, holdTimer=null, holdResumeT=null; const onCentre=()=> activeIdx>=0 && (hoverGloss || hoverIdx===activeIdx); const holdEnd=k=>{ const r=slatSync.rangeOf(k); return r?r[1]:null; }; function holdStop(){ if(holdTimer){ clearInterval(holdTimer); holdTimer=null; } } function holdWatch(){ holdStop(); holdTimer=setInterval(()=>{ if(holdPaused||!onCentre()){ holdStop(); return; } // wait out BUFFERING rather than giving up, or the next slip never arms if(ytCall('getPlayerState')!==YT_PLAYING) return; const t=ytCall('getCurrentTime'), end=holdEnd(holdSlat); if(typeof t!=='number'||end==null) return; if(t>=end-HOLD_LEAD){ holdStop(); holdPaused=true; ytCall('pauseVideo'); } },HOLD_TICK); } function holdResume(){ holdResumeT=null; if(!holdPaused||onCentre()) return; const end=holdEnd(holdSlat); holdPaused=false; if(end==null) return; // do not resume over a navigation made during the cooldown const next=slatSync.slatAt(end); if(activeIdx!==holdSlat&&activeIdx!==next) return; wantPlay=true; seekFloor=next; seekFloorUntil=performance.now()+1200; ytCall('seekTo',end+0.02,true); ytCall('playVideo'); setTransportIcon(true); } function holdSync(){ if(onCentre()){ if(holdResumeT){ clearTimeout(holdResumeT); holdResumeT=null; } holdSlat=activeIdx; if(!holdPaused&&!holdTimer) holdWatch(); }else{ holdStop(); if(holdPaused&&!holdResumeT) holdResumeT=setTimeout(holdResume,HOLD_RESUME_MS); } } function onSlatHover(i,on){ if(on) hoverIdx=i; else if(hoverIdx===i) hoverIdx=-1; holdSync(); } gloss.addEventListener('pointerenter',()=>{ if(!dragging){ hoverGloss=true; holdSync(); } }); gloss.addEventListener('pointerleave',()=>{ hoverGloss=false; holdSync(); }); function holdCancel(){ holdStop(); if(holdResumeT){ clearTimeout(holdResumeT); holdResumeT=null; } holdPaused=false; } function attachPlankEvents(el,body){ const amp=reduced?0.45:1; el.addEventListener('pointermove',e=>{ if(dragging||e.pointerType!=='mouse') return; const r=el.getBoundingClientRect(); const nx=clamp((e.clientX-r.left)/r.width,0,1), ny=clamp((e.clientY-r.top)/r.height,0,1); el.style.setProperty('--rx',((.5-ny)*17*amp).toFixed(2)+'deg'); el.style.setProperty('--ry',((nx-.5)*44*amp).toFixed(2)+'deg'); body.style.setProperty('--sx',(nx*100).toFixed(1)+'%'); body.style.setProperty('--sy',(ny*100).toFixed(1)+'%'); }); el.addEventListener('pointerenter',()=>{ if(dragging) return; el.classList.add('hovering'); onSlatHover(+el.dataset.i,true); }); el.addEventListener('pointerleave',()=>{ el.classList.remove('hovering'); el.style.setProperty('--rx','0deg'); el.style.setProperty('--ry','0deg'); onSlatHover(+el.dataset.i,false); }); } function rebuildAll(){ hideTip(); for(const el of live.values()) el.remove(); live.clear(); prevLo=0; prevHi=-1; activeIdx=-1; Eoff=null; lastPosE=pos; for(const p of planks){ p._geomSize=-1; } computeSizes(); buildTitle(); buildScrubber(); layout(); sizePlayHit(); } const compChars=Object.values(BREAK).flatMap(b=>(b.components||[]).map(c=>c&&c.c).filter(Boolean)); const sample=[...new Set(planks.flatMap(p=>p.chars.map(c=>c.c)).concat(TITLE_CHARS,compChars))].join('').slice(0,900); Promise.race([ Promise.all([ document.fonts?.load(`48px SealScript`,sample)??Promise.resolve(), document.fonts?.load(`14px Lora`)??Promise.resolve(), document.fonts?.load(`600 10px Nunito`)??Promise.resolve() ]).then(()=>document.fonts?.ready), new Promise(r=>setTimeout(r,3000)) ]).then(rebuildAll); computeSizes(); buildTitle(); buildScrubber(); layout(); sizePlayHit(); requestAnimationFrame(sizePlayHit); const ro=new ResizeObserver(()=>{ clearTimeout(ro._t); ro._t=setTimeout(rebuildAll,120); }); ro.observe(root); try{ invalidation.then(()=>{ ro.disconnect(); if(raf) cancelAnimationFrame(raf); clearTimeout(tipTimer); clearTimeout(tipHideT); if(tipRaf) cancelAnimationFrame(tipRaf); stopFollow(); document.removeEventListener('fullscreenchange',onFsChange); document.removeEventListener('webkitfullscreenchange',onFsChange); document.removeEventListener('pointerdown',onDownAnywhere,true); for(const w of keyTargets){ try{ w.removeEventListener('keydown',spaceHandler,true); }catch(_){ } } if(keyTimer) clearInterval(keyTimer); holdStop(); clearTimeout(holdResumeT); try{ player?.removeEventListener?.('onStateChange',syncTransport); }catch(_){} }); }catch(_){} display(root);