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

Save point: Scene 6 tech comparison added — Linux vs macOS/Windows/ChromeOS table, GrapheneOS vs Android/iOS table, decentralized internet punch cards, YOUR TECH button in Scene 3, Escape skip, RETURN to Scene 3

Browse Source
This commit is contained in:
avi
2026-05-12 22:08:09 -05:00
parent 20e48d4217
commit 478c926010
1 changed files with 187 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
index.html
View File

@@ -477,6 +477,61 @@
} }
.comp-table td.btc-col .no { color: #44ff44; } .comp-table td.btc-col .no { color: #44ff44; }
.comp-table td.btc-col .yes { color: #ff4444; } .comp-table td.btc-col .yes { color: #ff4444; }
/* Scene 6 */
.scene6text {
white-space: pre-wrap;
text-align: left;
width: 100%;
max-width: 55rem;
line-height: 1.8;
}
.s6visual {
width: 100%;
max-width: 55rem;
margin-top: 1.5rem;
opacity: 0;
transition: opacity 4s ease;
}
.s6visual.visible { opacity: 1; }
.s6section {
margin-top: 1.5rem;
text-align: left;
}
.s6section-title {
color: #007700;
font-size: 0.85rem;
margin-bottom: 0.5rem;
text-align: center;
}
.comp-table .linux-col {
background: #001a00;
border-color: #00ff00;
color: #00ff00;
font-weight: bold;
}
.comp-table .linux-col .no { color: #44ff44; }
.comp-table .linux-col .yes { color: #ff4444; }
.comp-table th.linux-col {
border-bottom-color: #00ff00;
}
.comp-table td.linux-col .no { color: #44ff44; }
.comp-table td.linux-col .yes { color: #ff4444; }
.comp-table .graphene-col {
background: #001a00;
border-color: #00ff00;
color: #00ff00;
font-weight: bold;
}
.comp-table .graphene-col .no { color: #44ff44; }
.comp-table .graphene-col .yes { color: #ff4444; }
.comp-table th.graphene-col {
border-bottom-color: #00ff00;
}
.comp-table td.graphene-col .no { color: #44ff44; }
.comp-table td.graphene-col .yes { color: #ff4444; }
</style> </style>
</head> </head>
<body> <body>
@@ -512,6 +567,7 @@
<button class="scene3ChoiceBtn" id="yourHealthBtn">YOUR HEALTH</button> <button class="scene3ChoiceBtn" id="yourHealthBtn">YOUR HEALTH</button>
<button class="scene3ChoiceBtn" id="yourFoodBtn">YOUR FOOD</button> <button class="scene3ChoiceBtn" id="yourFoodBtn">YOUR FOOD</button>
<button class="scene3ChoiceBtn" id="everythingBtn">EVERYTHING</button> <button class="scene3ChoiceBtn" id="everythingBtn">EVERYTHING</button>
<button class="scene3ChoiceBtn" id="yourTechBtn">YOUR TECH</button>
</div> </div>
</div> </div>
@@ -553,6 +609,12 @@
<button class="btnNext" id="returnFromScene5">RETURN</button> <button class="btnNext" id="returnFromScene5">RETURN</button>
</div> </div>
<div id="scene6" class="scene">
<div class="scene6text" id="s6Text"></div>
<div class="s6visual" id="s6Visual"></div>
<button class="btnNext" id="returnFromScene6">RETURN</button>
</div>
<script> <script>
// Testing shortcuts state // Testing shortcuts state
let skipAnimations = false; let skipAnimations = false;
@@ -1245,8 +1307,96 @@
vis.innerHTML+=html; vis.innerHTML+=html;
} }
function buildS6DesktopTable() {
const rows=[
['PROPERTY','<span class="nickname">LINUX</span>','macOS','WINDOWS','CHROMEOS'],
['OPEN SOURCE?','✅ YES','❌ NO','❌ NO','❌ NO'],
['NO TELEMETRY?','✅ YES','❌ NO','❌ NO','❌ NO'],
['USER FREEDOM','✅ YES','❌ NO','❌ NO','❌ NO'],
['FREE?','✅ YES','❌ NO','❌ NO','✅ YES'],
['RESPECTS PRIVACY?','✅ YES','❌ PARTIAL','❌ NO','❌ NO'],
];
let html='<div class="s6section"><div class="s6section-title">DESKTOP OPERATING SYSTEMS</div><table class="comp-table"><tr><th></th><th class="linux-col">LINUX</th><th>macOS</th><th>WINDOWS</th><th>CHROMEOS</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="linux-col"':'')+'>'+cells[c]+'</td>';
}
html+='</tr>';
}
html+='</table></div>';
return html;
}
function buildS6MobileTable() {
const rows=[
['PROPERTY','<span class="nickname">GRAPHENEOS</span>','ANDROID','iOS'],
['OPEN SOURCE?','✅ YES','✅ YES','❌ NO'],
['NO GOOGLE TRACKING?','✅ YES','❌ NO','✅ YES'],
['PRIVACY BY DEFAULT?','✅ YES','❌ NO','❌ PARTIAL'],
['DE-GOOGLED?','✅ YES','❌ NO','N/A'],
['SECURITY FOCUSED?','✅ YES','❌ PARTIAL','✅ YES'],
];
let html='<div class="s6section"><div class="s6section-title">MOBILE OPERATING SYSTEMS</div><table class="comp-table"><tr><th></th><th class="graphene-col">GRAPHENEOS</th><th>ANDROID</th><th>iOS</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="graphene-col"':'')+'>'+cells[c]+'</td>';
}
html+='</tr>';
}
html+='</table></div>';
return html;
}
function loadScene6(sceneElem) {
s6c=[];
sceneElem.style.display='flex';
const txt=document.getElementById('s6Text');
const vis=document.getElementById('s6Visual');
txt.innerHTML='';
vis.className='s6visual';
let o=0;
const fi=setInterval(()=>{
o+=0.05;if(o>=1){o=1;clearInterval(fi);
typeCalmly(txt,"THE BATTLE FOR CONTROL ISN'T JUST ABOUT MONEY — IT'S ABOUT EVERY TOOL YOU USE EVERY DAY.",()=>{
const t1=setTimeout(()=>{
txt.innerHTML+="\n\n";
vis.classList.add('visible');
vis.innerHTML='';
vis.innerHTML+=buildS6DesktopTable();
typeCalmly(txt,"DESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.",()=>{
txt.innerHTML+="\n\n\n";
vis.innerHTML+=buildS6MobileTable();
typeCalmly(txt,"YOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.",()=>{
txt.innerHTML+="\n\n";
vis.innerHTML+='<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
+'<div class="punch-card"><span class="punch-icon">🌐</span><span class="punch-text">MESH NETWORKS —<br>EVERY DEVICE IS A NODE</span></div>'
+'<div class="punch-card"><span class="punch-icon">🔗</span><span class="punch-text">PEER TO PEER —<br>DIRECT CONNECTION, NO MIDDLEMAN</span></div>'
+'<div class="punch-card"><span class="punch-icon">📡</span><span class="punch-text">NO ISP —<br>COMMUNITY-OWNED INFRASTRUCTURE</span></div>'
+'</div></div>';
typeCalmly(txt,"MESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.",()=>{
const t6=setTimeout(()=>{
document.getElementById('returnFromScene6').style.cssText='';
showNextBtn('returnFromScene6');
},400);
s6c.push(t6);
},8,20,s6c);
},8,20,s6c);
},8,20,s6c);
},300);
s6c.push(t1);
},8,20,s6c);
}
sceneElem.style.opacity=o;
},30);
}
let s4c = []; let s4c = [];
let s5c = []; let s5c = [];
let s6c = [];
// Initialize on load // Initialize on load
window.addEventListener('load', () => { window.addEventListener('load', () => {
@@ -1261,6 +1411,9 @@
document.getElementById('yourMoneyBtn').addEventListener('click', () => { document.getElementById('yourMoneyBtn').addEventListener('click', () => {
transitionToScene('scene3', loadScene4a, 'scene4a'); transitionToScene('scene3', loadScene4a, 'scene4a');
}); });
document.getElementById('yourTechBtn').addEventListener('click', () => {
transitionToScene('scene3', loadScene6, 'scene6');
});
document.getElementById('next4a').addEventListener('click', () => { document.getElementById('next4a').addEventListener('click', () => {
document.getElementById('scene4a').style.display = 'none'; document.getElementById('scene4a').style.display = 'none';
loadScene4b(document.getElementById('scene4b')); loadScene4b(document.getElementById('scene4b'));
@@ -1298,6 +1451,23 @@
}); });
}); });
document.getElementById('returnFromScene6').addEventListener('click', () => {
document.getElementById('scene6').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 // Keyboard shortcuts for testing
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {
@@ -1425,6 +1595,23 @@
showNextBtn('returnFromScene5'); showNextBtn('returnFromScene5');
} }
// Scene 6 skip
const s6 = document.getElementById('scene6');
if (s6.style.display === 'flex') {
s6c.forEach(t => clearTimeout(t)); s6c = [];
const txt = document.getElementById('s6Text');
const vis = document.getElementById('s6Visual');
txt.innerHTML = "THE BATTLE FOR CONTROL ISN'T JUST ABOUT MONEY — IT'S ABOUT EVERY TOOL YOU USE EVERY DAY.\n\nDESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.\n\n\nYOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.\n\nMESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.";
vis.innerHTML=buildS6DesktopTable()+buildS6MobileTable()+'<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
+'<div class="punch-card"><span class="punch-icon">🌐</span><span class="punch-text">MESH NETWORKS —<br>EVERY DEVICE IS A NODE</span></div>'
+'<div class="punch-card"><span class="punch-icon">🔗</span><span class="punch-text">PEER TO PEER —<br>DIRECT CONNECTION, NO MIDDLEMAN</span></div>'
+'<div class="punch-card"><span class="punch-icon">📡</span><span class="punch-text">NO ISP —<br>COMMUNITY-OWNED INFRASTRUCTURE</span></div>'
+'</div></div>';
vis.classList.add('visible');
document.getElementById('returnFromScene6').style.cssText='';
showNextBtn('returnFromScene6');
}
} }
if (e.key === 'Delete') { if (e.key === 'Delete') {