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

Save point: Scene 2 restored with calm typing ...AND THAT AWARENESS HAS LED YOU HERE... TO LAB 484 + WHAT IS LAB 484? button

Browse Source
This commit is contained in:
avi
2026-05-09 16:43:11 -05:00
parent b25a97b184
commit f7a7eeb1b2
1 changed files with 138 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
index.html
View File

@@ -160,6 +160,52 @@
transform: translateX(-50%);
}
#scene2Line {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
line-height: 1.8;
color: #00ff00;
visibility: hidden;
padding: 2rem;
text-align: center;
}
#scene2Cursor {
display: none;
width: 10px;
height: 1.4em;
background-color: #00ff00;
margin-left: 4px;
flex-shrink: 0;
opacity: 1;
}
#whatIsLabBtn {
position: fixed;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
z-index: 3;
padding: 1rem 3rem;
font-size: 1.1rem;
background-color: #001100;
color: #00ff00;
border: 2px solid #00ff00;
cursor: pointer;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease, background-color 0.2s ease;
font-family: 'Courier New', monospace;
letter-spacing: 2px;
}
#whatIsLabBtn:hover {
background-color: #003300;
}
#scene3Title {
position: absolute;
top: 2rem;
@@ -199,6 +245,11 @@
<button id="followBtn">FOLLOW THEM</button>
<div id="scene2" class="scene">
<div id="scene2Line">
<span id="scene2Message"></span>
<span id="scene2Cursor"></span>
</div>
<button id="whatIsLabBtn">WHAT IS LAB 484?</button>
</div>
<div id="scene3" class="scene">
@@ -447,11 +498,11 @@
}
// Scene transition functions
function transitionToScene3() {
function transitionToScene2() {
const canvas = document.getElementById('matrixCanvas');
const textContainer = document.getElementById('textContainer');
const btn = document.getElementById('followBtn');
const scene3 = document.getElementById('scene3');
const scene2 = document.getElementById('scene2');
let opacity = 1;
const fadeOut = setInterval(() => {
@@ -462,7 +513,7 @@
canvas.style.display = 'none';
textContainer.style.display = 'none';
btn.style.display = 'none';
loadScene3(scene3);
loadScene2(scene2);
}
canvas.style.opacity = opacity;
textContainer.style.opacity = opacity;
@@ -470,15 +521,79 @@
}, 30);
}
// Scene 2 loader (no longer used - buttons moved to Scene 3)
// Scene 2 loader: calm typing sequence
function blinkCursor(cursor, times, callback) {
cursor.style.display = 'inline-block';
cursor.style.opacity = '1';
let count = 0;
let visible = true;
const interval = setInterval(() => {
visible = !visible;
cursor.style.opacity = visible ? '1' : '0';
count++;
if (count >= times * 2) {
clearInterval(interval);
cursor.style.display = 'none';
callback && callback();
}
}, 500);
}
function typeCalmly(elem, text, callback) {
let i = 0;
const total = text.length;
function typeChar() {
if (i >= total) {
callback && callback();
return;
}
elem.textContent += text[i];
i++;
const progress = i / total;
const delay = 70 + progress * progress * 130;
setTimeout(typeChar, delay);
}
typeChar();
}
function loadScene2(sceneElem) {
sceneElem.style.display = 'flex';
const line = document.getElementById('scene2Line');
const message = document.getElementById('scene2Message');
const cursor = document.getElementById('scene2Cursor');
const btn = document.getElementById('whatIsLabBtn');
let opacity = 0;
const fadeIn = setInterval(() => {
opacity += 0.05;
if (opacity >= 1) {
opacity = 1;
clearInterval(fadeIn);
line.style.visibility = 'visible';
blinkCursor(cursor, 5, () => {
typeCalmly(message, "...AND THAT AWARENESS HAS LED YOU HERE...", () => {
blinkCursor(cursor, 3, () => {
typeCalmly(message, " TO LAB 484", () => {
setTimeout(() => {
btn.style.visibility = 'visible';
let btnOpacity = 0;
const btnFadeIn = setInterval(() => {
btnOpacity += 0.05;
if (btnOpacity >= 1) {
btnOpacity = 1;
clearInterval(btnFadeIn);
btn.style.pointerEvents = 'auto';
}
btn.style.opacity = btnOpacity;
}, 30);
}, 3000);
});
});
});
});
}
sceneElem.style.opacity = opacity;
}, 30);
@@ -628,7 +743,7 @@
});
// Button click handlers
document.getElementById('followBtn').addEventListener('click', transitionToScene3);
document.getElementById('followBtn').addEventListener('click', transitionToScene2);
document.getElementById('creatorBtn').addEventListener('click', () => {
transitionToScene('scene3', loadSceneCreator, 'sceneCreator');
});
@@ -638,6 +753,9 @@
document.getElementById('developerBtn').addEventListener('click', () => {
transitionToScene('scene3', loadSceneDeveloper, 'sceneDeveloper');
});
document.getElementById('whatIsLabBtn').addEventListener('click', () => {
transitionToScene('scene2', loadScene3, 'scene3');
});
@@ -654,6 +772,19 @@
skipScene1();
}
// Scene 2 skip (calm typing)
const scene2 = document.getElementById('scene2');
const s2Cursor = document.getElementById('scene2Cursor');
const s2Message = document.getElementById('scene2Message');
const s2Btn = document.getElementById('whatIsLabBtn');
if (scene2.style.display === 'flex' && s2Btn.style.visibility !== 'visible') {
s2Cursor.style.display = 'none';
s2Message.textContent = '...AND THAT AWARENESS HAS LED YOU HERE... TO LAB 484';
s2Btn.style.visibility = 'visible';
s2Btn.style.opacity = '1';
s2Btn.style.pointerEvents = 'auto';
}
// Scene 3 skip (cursor blinking / I AM A... typing)
const scene3 = document.getElementById('scene3');
const cursor = document.getElementById('blinkCursor');
@@ -675,12 +806,12 @@
}
if (e.key === 'Delete') {
// Fast-forward to Scene 3
// Fast-forward to Scene 2
document.getElementById('matrixCanvas').style.display = 'none';
document.getElementById('textContainer').style.display = 'none';
document.getElementById('followBtn').style.display = 'none';
loadScene3(document.getElementById('scene3'));
loadScene2(document.getElementById('scene2'));
}
});
</script>