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

Save point: Scene 2 reworked - I AM A... typewriter with cursor blink, CREATOR/BUILDER/DEVELOPER triangle buttons, placeholder scenes

Browse Source
This commit is contained in:
avi
2026-05-08 16:42:18 -05:00
parent 1ffd51d254
commit c34d6628a8
1 changed files with 184 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
index.html
View File

@@ -106,18 +106,23 @@
#scene2Text {
color: #00ff00;
font-family: 'Courier New', monospace;
font-size: 1.2rem;
font-size: 6rem;
line-height: 2;
text-align: center;
visibility: hidden;
padding-top: 15vh;
margin-bottom: auto;
}
#learnBtn {
position: fixed;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
z-index: 5;
#scene2 {
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.choiceBtn {
position: absolute;
padding: 1rem 3rem;
font-size: 1.1rem;
background-color: #001100;
@@ -130,12 +135,31 @@
transition: opacity 0.5s ease, background-color 0.2s ease;
font-family: 'Courier New', monospace;
letter-spacing: 2px;
display: none;
}
#learnBtn:hover {
.choiceBtn:hover {
background-color: #003300;
}
#creatorBtn {
top: 55%;
left: 50%;
transform: translateX(-50%);
}
#builderBtn {
top: 70%;
left: 35%;
transform: translateX(-50%);
}
#developerBtn {
top: 70%;
left: 65%;
transform: translateX(-50%);
}
#scene3Title {
position: absolute;
top: 2rem;
@@ -150,6 +174,17 @@
#scene3Title.visible {
opacity: 1;
}
#scene3 {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 6rem 2rem;
}
#scene3Text {
white-space: pre-wrap;
}
</style>
</head>
<body>
@@ -165,8 +200,10 @@
<div id="scene2" class="scene">
<div id="scene2Text"></div>
<button id="learnBtn">WHAT IS LAB 484?</button>
<div id="blinkCursor"></div>
<button id="creatorBtn" class="choiceBtn">CREATOR</button>
<button id="builderBtn" class="choiceBtn">BUILDER</button>
<button id="developerBtn" class="choiceBtn">DEVELOPER</button>
</div>
<div id="scene3" class="scene">
@@ -174,6 +211,18 @@
<div id="scene3Text"></div>
</div>
<div id="sceneCreator" class="scene">
<div id="creatorSceneText"></div>
</div>
<div id="sceneBuilder" class="scene">
<div id="builderSceneText"></div>
</div>
<div id="sceneDeveloper" class="scene">
<div id="developerSceneText"></div>
</div>
<script>
// Testing shortcuts state
let skipAnimations = false;
@@ -421,12 +470,15 @@
}, 30);
}
// Scene 2 loader with blinking cursor (5 blinks), and text
// Scene 2 loader with blinking cursor (5 blinks), "I AM I" text, and 3 choice buttons
function loadScene2(sceneElem) {
sceneElem.style.display = 'flex';
const cursor = document.getElementById('blinkCursor');
const textContainer = document.getElementById('scene2Text');
const learnBtn = document.getElementById('learnBtn');
const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn');
const choiceBtns = [creatorBtn, builderBtn, developerBtn];
let opacity = 0;
const fadeIn = setInterval(() => {
@@ -435,7 +487,6 @@
opacity = 1;
clearInterval(fadeIn);
// Show blinking cursor - blink 5 times (5 seconds)
cursor.style.display = 'block';
cursor.style.opacity = '1';
let blinkCount = 0;
@@ -448,30 +499,50 @@
clearInterval(blinkInterval);
cursor.style.display = 'none';
// Type the pre-LEARN text - starts calm, accelerates to normal reading speed
typewriterLines(
[
"...AND THAT AWARENESS HAS LEAD YOU HERE. YOU ARE SITTING HERE AT LAB 484 , IN FRONT OF THE SCREEN, AT THIS EXACT MOMENT IN TIME FOR A REASON..."
],
textContainer,
() => {
// Show "LEARN" button
learnBtn.style.visibility = 'visible';
let btnOpacity = 0;
const btnFadeIn = setInterval(() => {
btnOpacity += 0.05;
if (btnOpacity >= 1) {
btnOpacity = 1;
clearInterval(btnFadeIn);
learnBtn.style.pointerEvents = 'auto';
}
learnBtn.style.opacity = btnOpacity;
}, 30);
},
120,
800,
60
);
textContainer.textContent = '';
let segIndex = 0;
const segments = ["I ", "AM ", "A..."];
function typeNextSegment() {
if (segIndex >= segments.length) {
setTimeout(() => {
choiceBtns.forEach(btn => {
btn.style.display = 'block';
btn.style.visibility = 'visible';
let btnOpacity = 0;
const btnFadeIn = setInterval(() => {
btnOpacity += 0.02;
if (btnOpacity >= 1) {
btnOpacity = 1;
clearInterval(btnFadeIn);
btn.style.pointerEvents = 'auto';
}
btn.style.opacity = btnOpacity;
}, 30);
});
}, 3000);
return;
}
cursor.style.display = 'block';
cursor.style.opacity = '1';
let blinkCount = 0;
let isVisible = true;
const blinkInterval = setInterval(() => {
isVisible = !isVisible;
cursor.style.opacity = isVisible ? '1' : '0';
blinkCount++;
if (blinkCount >= 6) {
clearInterval(blinkInterval);
cursor.style.display = 'none';
textContainer.textContent += segments[segIndex];
segIndex++;
setTimeout(typeNextSegment, 100);
}
}, 500);
}
typeNextSegment();
}
}, 500);
}
@@ -479,43 +550,61 @@
}, 30);
}
// "LEARN" button click handler
function handleLearnClick() {
const learnBtn = document.getElementById('learnBtn');
const textContainer = document.getElementById('scene2Text');
// Scene transition helper
function transitionToScene(fromId, loader, toId) {
const from = document.getElementById(fromId);
from.style.display = 'none';
const to = document.getElementById(toId);
loader(to);
}
learnBtn.style.pointerEvents = 'none';
learnBtn.style.opacity = 0;
learnBtn.style.visibility = 'hidden';
// Placeholder scene loaders
function loadSceneCreator(sceneElem) {
sceneElem.style.display = 'flex';
const text = document.getElementById('creatorSceneText');
text.style.visibility = 'visible';
text.textContent = 'CREATOR';
let opacity = 0;
const fadeIn = setInterval(() => {
opacity += 0.05;
if (opacity >= 1) {
opacity = 1;
clearInterval(fadeIn);
}
sceneElem.style.opacity = opacity;
}, 30);
}
textContainer.textContent = '';
function loadSceneBuilder(sceneElem) {
sceneElem.style.display = 'flex';
const text = document.getElementById('builderSceneText');
text.style.visibility = 'visible';
text.textContent = 'BUILDER';
let opacity = 0;
const fadeIn = setInterval(() => {
opacity += 0.05;
if (opacity >= 1) {
opacity = 1;
clearInterval(fadeIn);
}
sceneElem.style.opacity = opacity;
}, 30);
}
typewriterLines(
[
"THE SIGNAL IS NOW RECEIVING.",
"PREPARE FOR THE NEXT TRANSMISSION."
],
textContainer,
() => {
// Transition to Scene 3
const scene2 = document.getElementById('scene2');
const scene3 = document.getElementById('scene3');
let opacity = 1;
const fadeOut = setInterval(() => {
opacity -= 0.05;
if (opacity <= 0) {
opacity = 0;
clearInterval(fadeOut);
scene2.style.display = 'none';
loadScene3(scene3);
}
scene2.style.opacity = opacity;
}, 30);
},
30,
200
);
function loadSceneDeveloper(sceneElem) {
sceneElem.style.display = 'flex';
const text = document.getElementById('developerSceneText');
text.style.visibility = 'visible';
text.textContent = 'DEVELOPER';
let opacity = 0;
const fadeIn = setInterval(() => {
opacity += 0.05;
if (opacity >= 1) {
opacity = 1;
clearInterval(fadeIn);
}
sceneElem.style.opacity = opacity;
}, 30);
}
// Scene 3 loader
@@ -536,10 +625,10 @@
}, 300);
typewriterLines(
["LAB 484 STANDS FOR ALL MATERIAL PROVISION FOR YOUR DIVINE LIFE PATH"],
[" IN NUMEROLOGY, THE NUMBERS 484 STAND FOR ALL MATERIAL PROVISION FOR YOUR DIVINE LIFE PATH", "\n\nLAB 484 IS A TECH INCUBATOR THAT HAS 11 STARTUPS UNDERNEATH IT"],
textContainer,
() => {},
120
200
);
}
sceneElem.style.opacity = opacity;
@@ -553,7 +642,15 @@
// Button click handlers
document.getElementById('followBtn').addEventListener('click', transitionToScene2);
document.getElementById('learnBtn').addEventListener('click', handleLearnClick);
document.getElementById('creatorBtn').addEventListener('click', () => {
transitionToScene('scene2', loadSceneCreator, 'sceneCreator');
});
document.getElementById('builderBtn').addEventListener('click', () => {
transitionToScene('scene2', loadSceneBuilder, 'sceneBuilder');
});
document.getElementById('developerBtn').addEventListener('click', () => {
transitionToScene('scene2', loadSceneDeveloper, 'sceneDeveloper');
});
@@ -570,38 +667,33 @@
skipScene1();
}
// Scene 2 pre-LEARN skip (cursor blinking)
// Scene 2 skip (cursor blinking)
const scene2Text = document.getElementById('scene2Text');
const learnBtn = document.getElementById('learnBtn');
const cursor = document.getElementById('blinkCursor');
const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn');
if (cursor.style.display === 'block') {
cursor.style.display = 'none';
scene2Text.textContent = "...AND THAT AWARENESS HAS LEAD YOU HERE. YOU ARE SITTING HERE AT LAB 484 , IN FRONT OF THE SCREEN, AT THIS EXACT MOMENT IN TIME FOR A REASON...";
scene2Text.textContent = 'I AM A...';
scene2Text.style.visibility = 'visible';
learnBtn.style.visibility = 'visible';
learnBtn.style.opacity = '1';
learnBtn.style.pointerEvents = 'auto';
[creatorBtn, builderBtn, developerBtn].forEach(btn => {
btn.style.display = 'block';
btn.style.visibility = 'visible';
btn.style.opacity = '1';
btn.style.pointerEvents = 'auto';
});
}
}
if (e.key === 'Delete') {
// Fast-forward to last scene (Scene 2 post-LEARN)
// Fast-forward to Scene 3
document.getElementById('matrixCanvas').style.display = 'none';
document.getElementById('textContainer').style.display = 'none';
document.getElementById('followBtn').style.display = 'none';
document.getElementById('scene2').style.display = 'none';
const scene2 = document.getElementById('scene2');
const textContainer = document.getElementById('scene2Text');
const learnBtn = document.getElementById('learnBtn');
const cursor = document.getElementById('blinkCursor');
scene2.style.display = 'flex';
scene2.style.opacity = '1';
cursor.style.display = 'none';
learnBtn.style.display = 'none';
textContainer.textContent = "THE SIGNAL IS NOW RECEIVING. PREPARE FOR THE NEXT TRANSMISSION.";
textContainer.style.visibility = 'visible';
loadScene3(document.getElementById('scene3'));
}
});
</script>