Save point: Scene 4 content shifted down, coin grid halved, Scene 5 restructured for parallel display — hash bar removed, row-by-row removed, fade-in extended, UNCENSORABLE flipped, RETURN shows completed Scene 3 without replay

This commit is contained in:
avi
2026-05-12 21:47:21 -05:00
parent 73297889c5
commit 20e48d4217

View File

@@ -243,7 +243,7 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 1.5rem 2rem;
padding: 8rem 2rem 1.5rem;
overflow-y: auto;
}
.scene4text {
@@ -346,7 +346,7 @@
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 4px;
max-width: 30rem;
max-width: 15rem;
margin: 0 auto;
}
.coin {
@@ -424,7 +424,7 @@
max-width: 55rem;
margin-top: 1.5rem;
opacity: 0;
transition: opacity 1.2s ease;
transition: opacity 4s ease;
}
.s5visual.visible { opacity: 1; }
@@ -550,6 +550,7 @@
<div id="scene5" class="scene">
<div class="scene5text" id="s5Text"></div>
<div class="s5visual" id="s5Visual"></div>
<button class="btnNext" id="returnFromScene5">RETURN</button>
</div>
<script>
@@ -916,6 +917,8 @@
// Scene 3 loader
function loadScene3(sceneElem) {
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
scene3TypewriterTimeouts = [];
sceneElem.style.display = 'flex';
const title = document.getElementById('scene3Title');
const textContainer = document.getElementById('scene3Text');
@@ -1195,77 +1198,51 @@
typeCalmly(txt,"BITCOIN HAS NO TRUE COMPETITORS AS SOUND MONEY.",()=>{
const t1=setTimeout(()=>{
txt.innerHTML+="\n\n";
vis.classList.add('visible');
buildS5Table(vis);
typeCalmly(txt,"BUT SEVERAL COINS COMPETE IN DIFFERENT NICHES — PRIVACY, SPEED, PROGRAMMABILITY, OR STORE-OF-VALUE NARRATIVES.",()=>{
const t2=setTimeout(()=>{
txt.innerHTML+="\n\n";
typeCalmly(txt,"NONE POSSESS BITCOIN'S FULL SET OF PROPERTIES.",()=>{
txt.innerHTML+="\n\n";
typeCalmly(txt,"NONE POSSESS BITCOIN'S FULL SET OF PROPERTIES.",()=>{
const t3=setTimeout(()=>{
txt.innerHTML+="\n\n";
vis.innerHTML='<div class="hash-bar-container"><div style="text-align:center;font-size:0.8rem;color:#007700;margin-bottom:0.5rem;">BITCOIN MINING DOMINANCE</div><div class="hash-bar"><div class="hash-bar-btc">BTC 99%</div><div class="hash-bar-rest"></div></div></div>';
vis.classList.add('visible');
const t4=setTimeout(()=>{
txt.innerHTML+="\n\n";
typeCalmly(txt,"THE NETWORK EFFECT IS INSURMOUNTABLE.",()=>{
const t5=setTimeout(()=>{
txt.innerHTML+="\n\n";
typeCalmly(txt,"HERE IS THE HONEST COMPARISON.",()=>{
const t6=setTimeout(()=>{
buildS5Table(vis);
},800);
s5c.push(t6);
},35,65,s5c);
},1200);
s5c.push(t5);
},35,65,s5c);
},1000);
s5c.push(t4);
},1000);
s5c.push(t3);
},35,65,s5c);
},1500);
s5c.push(t2);
},35,65,s5c);
},1500);
typeCalmly(txt,"THE NETWORK EFFECT IS INSURMOUNTABLE.",()=>{
txt.innerHTML+="\n\n";
typeCalmly(txt,"HERE IS THE HONEST COMPARISON.",()=>{
const t6=setTimeout(()=>{
document.getElementById('returnFromScene5').style.cssText='';
showNextBtn('returnFromScene5');
},400);
s5c.push(t6);
},8,20,s5c);
},8,20,s5c);
},8,20,s5c);
},8,20,s5c);
},300);
s5c.push(t1);
},35,65,s5c);
},8,20,s5c);
}
sceneElem.style.opacity=o;
},30);
}
function buildS5Table(vis) {
vis.innerHTML+='<table class="comp-table" id="s5table"><tr><th></th><th class="btc-col">BTC</th><th>ETH</th><th>XMR</th><th>XRP</th><th>SOL</th></tr>';
const rows=[
['NICHE','<span class="nickname">SOUND MONEY</span>','PROGRAMMABILITY','PRIVACY','PAYMENTS','SPEED'],
['DECENTRALIZED?','✅ YES','⚠️ PARTIAL','✅ YES','❌ RIPPLE LABS','❌ VC/FOUNDATION'],
['FAIR LAUNCH?','✅ YES','❌ 72M PREMINE','✅ YES','❌ 100% PREMINE','❌ PREMINE'],
['SUPPLY CAP','✅ 21M','❌ NO CAP','❌ TAIL EMISSION','❌ NO CAP','❌ NO CAP'],
['CENSORABLE?','❌ NO','✅ YES (OFAC)','❌ NO','✅ YES','✅ YES'],
['UNCENSORABLE?','✅ YES','❌ NO','✅ YES','❌ NO','❌ NO'],
];
let ri=0;
function addRow(){
if(ri>=rows.length){
const pt=setTimeout(()=>{
vis.innerHTML+='<div class="punch-row"><div class="punch-card"><span class="punch-icon">🏆</span><span class="punch-text">FIRST —<br>EVERYTHING ELSE IS A COPY</span></div><div class="punch-card"><span class="punch-icon">🔒</span><span class="punch-text">MOST SECURE —<br>MOST HASH POWER BY FAR</span></div><div class="punch-card"><span class="punch-icon">🧪</span><span class="punch-text">TRULY DECENTRALIZED —<br>NO FOUNDER, NO COMPANY, NO CEO</span></div></div>';
},400);
s5c.push(pt);
return;
let html='<table class="comp-table" id="s5table"><tr><th></th><th class="btc-col">BTC</th><th>ETH</th><th>XMR</th><th>XRP</th><th>SOL</th></tr>';
for(let r=0;r<rows.length;r++){
const cells=rows[r];
html+='<tr>';
for(let c=0;c<cells.length;c++){
html+='<td'+(c===1?' class="btc-col"':'')+'>'+cells[c]+'</td>';
}
const r=rows[ri];
const rt=setTimeout(()=>{
const table=document.getElementById('s5table');
const tr=table.insertRow();
for(let c=0;c<r.length;c++){
const td=tr.insertCell();
if(c===1)td.className='btc-col';
td.innerHTML=r[c];
}
ri++;
addRow();
},350);
s5c.push(rt);
html+='</tr>';
}
addRow(0);
html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">🏆</span><span class="punch-text">FIRST —<br>EVERYTHING ELSE IS A COPY</span></div><div class="punch-card"><span class="punch-icon">🔒</span><span class="punch-text">MOST SECURE —<br>MOST HASH POWER BY FAR</span></div><div class="punch-card"><span class="punch-icon">🧪</span><span class="punch-text">TRULY DECENTRALIZED —<br>NO FOUNDER, NO COMPANY, NO CEO</span></div></div>';
vis.innerHTML+=html;
}
let s4c = [];
@@ -1304,6 +1281,22 @@
document.getElementById('scene4e').style.display = 'none';
loadScene5(document.getElementById('scene5'));
});
document.getElementById('returnFromScene5').addEventListener('click', () => {
document.getElementById('scene5').style.display = 'none';
const s3 = document.getElementById('scene3');
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
scene3TypewriterTimeouts = [];
s3.style.display = 'flex';
s3.style.opacity = '1';
document.getElementById('scene3Title').classList.add('visible');
document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nDECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
const row = document.getElementById('scene3ChoiceRow');
row.style.display = 'flex';
row.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
btn.style.opacity = '1';
btn.style.pointerEvents = 'auto';
});
});
// Keyboard shortcuts for testing
document.addEventListener('keydown', (e) => {
@@ -1415,13 +1408,12 @@
const txt = document.getElementById('s5Text');
const vis = document.getElementById('s5Visual');
txt.innerHTML = "BITCOIN HAS NO TRUE COMPETITORS AS SOUND MONEY.\n\nBUT SEVERAL COINS COMPETE IN DIFFERENT NICHES — PRIVACY, SPEED, PROGRAMMABILITY, OR STORE-OF-VALUE NARRATIVES.\n\nNONE POSSESS BITCOIN'S FULL SET OF PROPERTIES.\n\nTHE NETWORK EFFECT IS INSURMOUNTABLE.\n\nHERE IS THE HONEST COMPARISON.";
vis.innerHTML='<div class="hash-bar-container"><div style="text-align:center;font-size:0.8rem;color:#007700;margin-bottom:0.5rem;">BITCOIN MINING DOMINANCE</div><div class="hash-bar"><div class="hash-bar-btc">BTC 99%</div><div class="hash-bar-rest"></div></div></div>';
vis.innerHTML+='<table class="comp-table" id="s5table"><tr><th></th><th class="btc-col">BTC</th><th>ETH</th><th>XMR</th><th>XRP</th><th>SOL</th></tr>'
vis.innerHTML='<table class="comp-table" id="s5table"><tr><th></th><th class="btc-col">BTC</th><th>ETH</th><th>XMR</th><th>XRP</th><th>SOL</th></tr>'
+'<tr><td>NICHE</td><td class="btc-col"><span class="nickname">SOUND MONEY</span></td><td>PROGRAMMABILITY</td><td>PRIVACY</td><td>PAYMENTS</td><td>SPEED</td></tr>'
+'<tr><td>DECENTRALIZED?</td><td class="btc-col">✅ YES</td><td>⚠️ PARTIAL</td><td>✅ YES</td><td>❌ RIPPLE LABS</td><td>❌ VC/FOUNDATION</td></tr>'
+'<tr><td>FAIR LAUNCH?</td><td class="btc-col">✅ YES</td><td>❌ 72M PREMINE</td><td>✅ YES</td><td>❌ 100% PREMINE</td><td>❌ PREMINE</td></tr>'
+'<tr><td>SUPPLY CAP</td><td class="btc-col">✅ 21M</td><td>❌ NO CAP</td><td>❌ TAIL EMISSION</td><td>❌ NO CAP</td><td>❌ NO CAP</td></tr>'
+'<tr><td>CENSORABLE?</td><td class="btc-col">❌ NO</td><td>✅ YES (OFAC)</td><td>❌ NO</td><td>✅ YES</td><td>✅ YES</td></tr>'
+'<tr><td>UNCENSORABLE?</td><td class="btc-col">✅ YES</td><td>❌ NO</td><td>✅ YES</td><td>❌ NO</td><td>❌ NO</td></tr>'
+'</table>'
+'<div class="punch-row">'
+'<div class="punch-card"><span class="punch-icon">🏆</span><span class="punch-text">FIRST —<br>EVERYTHING ELSE IS A COPY</span></div>'
@@ -1429,6 +1421,8 @@
+'<div class="punch-card"><span class="punch-icon">🧪</span><span class="punch-text">TRULY DECENTRALIZED —<br>NO FOUNDER, NO COMPANY, NO CEO</span></div>'
+'</div>';
vis.classList.add('visible');
document.getElementById('returnFromScene5').style.cssText='';
showNextBtn('returnFromScene5');
}
}