avi/SignalElsewhereGame
1
0
Fork 0
forked from avi/signalelsewhere
Code Pull Requests Activity

Save point: Scene 5 BTC vs altcoins comparison — dominance bar, animated table, punch cards, Escape skip

Browse Source
This commit is contained in:
avi
2026-05-12 20:49:09 -05:00
parent a389ba3690
commit 73297889c5
1 changed files with 190 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
index.html
View File

@@ -410,6 +410,73 @@
color: #00ff00;
line-height: 1.4;
}
/* Scene 5 */
.scene5text {
white-space: pre-wrap;
text-align: left;
width: 100%;
max-width: 55rem;
line-height: 1.8;
}
.s5visual {
width: 100%;
max-width: 55rem;
margin-top: 1.5rem;
opacity: 0;
transition: opacity 1.2s ease;
}
.s5visual.visible { opacity: 1; }
/* Hashrate dominance bar */
.hash-bar-container {
width: 100%;
max-width: 40rem;
margin: 0 auto;
}
.hash-bar {
display: flex;
height: 2.8rem;
border: 1px solid #003300;
border-radius: 4px;
overflow: hidden;
}
.hash-bar-btc {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #003300, #00ff00);
color: #000;
font-weight: bold;
font-size: 0.9rem;
flex: 99;
text-shadow: 0 0 4px #00ff00;
transition: flex 1.5s ease;
}
.hash-bar-rest {
flex: 1;
background: #1a0000;
border-left: 1px solid #003300;
}
/* Table row highlight for BTC */
.comp-table .btc-col {
background: #001a00;
border-color: #00ff00;
color: #00ff00;
font-weight: bold;
}
.comp-table .btc-col .yes { color: #44ff44; }
.comp-table .btc-col .no { color: #ff4444; }
.comp-table .nickname {
font-size: 0.75rem;
color: #007700;
}
.comp-table th.btc-col {
border-bottom-color: #00ff00;
}
.comp-table td.btc-col .no { color: #44ff44; }
.comp-table td.btc-col .yes { color: #ff4444; }
</style>
</head>
<body>
@@ -477,6 +544,12 @@
<div class="s4tl"></div>
<div class="scene4text" id="s4eText"></div>
<div class="s4visual" id="s4eVisual"></div>
<button class="btnNext" id="next4e">NEXT</button>
</div>
<div id="scene5" class="scene">
<div class="scene5text" id="s5Text"></div>
<div class="s5visual" id="s5Visual"></div>
</div>
<script>
@@ -1108,7 +1181,95 @@
},30);
}
// Scene 5 — BTC vs. Altcoins comparison
function loadScene5(sceneElem) {
s5c=[];
sceneElem.style.display='flex';
const txt=document.getElementById('s5Text');
const vis=document.getElementById('s5Visual');
txt.innerHTML='';
vis.className='s5visual';
let o=0;
const fi=setInterval(()=>{
o+=0.05;if(o>=1){o=1;clearInterval(fi);
typeCalmly(txt,"BITCOIN HAS NO TRUE COMPETITORS AS SOUND MONEY.",()=>{
const t1=setTimeout(()=>{
txt.innerHTML+="\n\n";
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.",()=>{
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);
s5c.push(t1);
},35,65,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'],
];
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;
}
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);
}
addRow(0);
}
let s4c = [];
let s5c = [];
// Initialize on load
window.addEventListener('load', () => {
@@ -1139,8 +1300,10 @@
document.getElementById('scene4d').style.display = 'none';
loadScene4e(document.getElementById('scene4e'));
});
document.getElementById('next4e').addEventListener('click', () => {
document.getElementById('scene4e').style.display = 'none';
loadScene5(document.getElementById('scene5'));
});
// Keyboard shortcuts for testing
document.addEventListener('keydown', (e) => {
@@ -1239,10 +1402,35 @@
+'<div class="punch-card"><span class="punch-icon">🚫</span><span class="punch-text">NO BANK<br>CAN FREEZE IT</span></div>'
+'</div>';
s4.querySelector('.s4visual').classList.add('visible');
document.getElementById('next4e').style.cssText = '';
showNextBtn('next4e');
}
}
}
// Scene 5 skip
const s5 = document.getElementById('scene5');
if (s5.style.display === 'flex') {
s5c.forEach(t => clearTimeout(t)); s5c = [];
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>'
+'<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>'
+'</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.classList.add('visible');
}
}
if (e.key === 'Delete') {