Show all eight generations in the depth-over-width matrix

Extended the "2 → 4 → 8 → 16 → 32" visual to the full doubling
2→4→8→16→32→64→128→256 (510 positions), keeping the 30-position first
milestone in the caption. Matrix is now data-driven (data-n) with
icons capped at 12 + a "+" for deeper generations so 256 stays compact;
compact icon styling + horizontal scroll safety.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-08-15 06:11:16 -05:00
parent f5de98c214
commit 026b9e5d9b
3 changed files with 16 additions and 5 deletions
+8 -4
View File
@@ -12,8 +12,12 @@
if(h&&c.bridgeHeadline)h.textContent=c.bridgeHeadline;
const qs=window.location.search; if(qs){document.querySelectorAll('a[href="/start"]').forEach(a=>a.href='/start'+qs)}
}catch(e){}
for(const id of ['p8','p16']){
const node=document.getElementById(id); if(!node)continue;
const count=id==='p8'?8:16; for(let i=0;i<count;i++){const s=document.createElement('span');s.className='person';node.appendChild(s)}
}
// fill each generation's crowd from data-n; cap the rendered icons so the
// deeper generations (up to 256) stay compact — the number label is the truth
const ICON_CAP=12;
document.querySelectorAll('.people[data-n]').forEach(node=>{
const n=parseInt(node.dataset.n,10)||0, show=Math.min(n,ICON_CAP);
for(let i=0;i<show;i++){const s=document.createElement('span');s.className='person';node.appendChild(s)}
if(n>ICON_CAP){const d=document.createElement('span');d.className='person-more';d.textContent='+';node.appendChild(d)}
});
})();