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

264
index.html
View File

@@ -106,18 +106,23 @@
#scene2Text { #scene2Text {
color: #00ff00; color: #00ff00;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
font-size: 1.2rem; font-size: 6rem;
line-height: 2; line-height: 2;
text-align: center; text-align: center;
visibility: hidden; visibility: hidden;
padding-top: 15vh;
margin-bottom: auto;
} }
#learnBtn { #scene2 {
position: fixed; flex-direction: column;
bottom: 5%; justify-content: center;
left: 50%; align-items: center;
transform: translateX(-50%); position: relative;
z-index: 5; }
.choiceBtn {
position: absolute;
padding: 1rem 3rem; padding: 1rem 3rem;
font-size: 1.1rem; font-size: 1.1rem;
background-color: #001100; background-color: #001100;
@@ -130,12 +135,31 @@
transition: opacity 0.5s ease, background-color 0.2s ease; transition: opacity 0.5s ease, background-color 0.2s ease;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
letter-spacing: 2px; letter-spacing: 2px;
display: none;
} }
#learnBtn:hover { .choiceBtn:hover {
background-color: #003300; 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 { #scene3Title {
position: absolute; position: absolute;
top: 2rem; top: 2rem;
@@ -150,6 +174,17 @@
#scene3Title.visible { #scene3Title.visible {
opacity: 1; opacity: 1;
} }
#scene3 {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 6rem 2rem;
}
#scene3Text {
white-space: pre-wrap;
}
</style> </style>
</head> </head>
<body> <body>
@@ -165,8 +200,10 @@
<div id="scene2" class="scene"> <div id="scene2" class="scene">
<div id="scene2Text"></div> <div id="scene2Text"></div>
<button id="learnBtn">WHAT IS LAB 484?</button>
<div id="blinkCursor"></div> <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>
<div id="scene3" class="scene"> <div id="scene3" class="scene">
@@ -174,6 +211,18 @@
<div id="scene3Text"></div> <div id="scene3Text"></div>
</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> <script>
// Testing shortcuts state // Testing shortcuts state
let skipAnimations = false; let skipAnimations = false;
@@ -421,12 +470,15 @@
}, 30); }, 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) { function loadScene2(sceneElem) {
sceneElem.style.display = 'flex'; sceneElem.style.display = 'flex';
const cursor = document.getElementById('blinkCursor'); const cursor = document.getElementById('blinkCursor');
const textContainer = document.getElementById('scene2Text'); 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; let opacity = 0;
const fadeIn = setInterval(() => { const fadeIn = setInterval(() => {
@@ -435,7 +487,6 @@
opacity = 1; opacity = 1;
clearInterval(fadeIn); clearInterval(fadeIn);
// Show blinking cursor - blink 5 times (5 seconds)
cursor.style.display = 'block'; cursor.style.display = 'block';
cursor.style.opacity = '1'; cursor.style.opacity = '1';
let blinkCount = 0; let blinkCount = 0;
@@ -448,30 +499,50 @@
clearInterval(blinkInterval); clearInterval(blinkInterval);
cursor.style.display = 'none'; cursor.style.display = 'none';
// Type the pre-LEARN text - starts calm, accelerates to normal reading speed textContainer.textContent = '';
typewriterLines( let segIndex = 0;
[ const segments = ["I ", "AM ", "A..."];
"...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..."
], function typeNextSegment() {
textContainer, if (segIndex >= segments.length) {
() => { setTimeout(() => {
// Show "LEARN" button choiceBtns.forEach(btn => {
learnBtn.style.visibility = 'visible'; btn.style.display = 'block';
btn.style.visibility = 'visible';
let btnOpacity = 0; let btnOpacity = 0;
const btnFadeIn = setInterval(() => { const btnFadeIn = setInterval(() => {
btnOpacity += 0.05; btnOpacity += 0.02;
if (btnOpacity >= 1) { if (btnOpacity >= 1) {
btnOpacity = 1; btnOpacity = 1;
clearInterval(btnFadeIn); clearInterval(btnFadeIn);
learnBtn.style.pointerEvents = 'auto'; btn.style.pointerEvents = 'auto';
} }
learnBtn.style.opacity = btnOpacity; btn.style.opacity = btnOpacity;
}, 30); }, 30);
}, });
120, }, 3000);
800, return;
60 }
);
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); }, 500);
} }
@@ -479,43 +550,61 @@
}, 30); }, 30);
} }
// "LEARN" button click handler // Scene transition helper
function handleLearnClick() { function transitionToScene(fromId, loader, toId) {
const learnBtn = document.getElementById('learnBtn'); const from = document.getElementById(fromId);
const textContainer = document.getElementById('scene2Text'); from.style.display = 'none';
const to = document.getElementById(toId);
learnBtn.style.pointerEvents = 'none'; loader(to);
learnBtn.style.opacity = 0;
learnBtn.style.visibility = 'hidden';
textContainer.textContent = '';
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;
// 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);
}
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);
}
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); }, 30);
},
30,
200
);
} }
// Scene 3 loader // Scene 3 loader
@@ -536,10 +625,10 @@
}, 300); }, 300);
typewriterLines( 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, textContainer,
() => {}, () => {},
120 200
); );
} }
sceneElem.style.opacity = opacity; sceneElem.style.opacity = opacity;
@@ -553,7 +642,15 @@
// Button click handlers // Button click handlers
document.getElementById('followBtn').addEventListener('click', transitionToScene2); 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(); skipScene1();
} }
// Scene 2 pre-LEARN skip (cursor blinking) // Scene 2 skip (cursor blinking)
const scene2Text = document.getElementById('scene2Text'); const scene2Text = document.getElementById('scene2Text');
const learnBtn = document.getElementById('learnBtn');
const cursor = document.getElementById('blinkCursor'); 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') { if (cursor.style.display === 'block') {
cursor.style.display = 'none'; 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'; scene2Text.style.visibility = 'visible';
learnBtn.style.visibility = 'visible'; [creatorBtn, builderBtn, developerBtn].forEach(btn => {
learnBtn.style.opacity = '1'; btn.style.display = 'block';
learnBtn.style.pointerEvents = 'auto'; btn.style.visibility = 'visible';
btn.style.opacity = '1';
btn.style.pointerEvents = 'auto';
});
} }
} }
if (e.key === 'Delete') { 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('matrixCanvas').style.display = 'none';
document.getElementById('textContainer').style.display = 'none'; document.getElementById('textContainer').style.display = 'none';
document.getElementById('followBtn').style.display = 'none'; document.getElementById('followBtn').style.display = 'none';
document.getElementById('scene2').style.display = 'none';
const scene2 = document.getElementById('scene2'); loadScene3(document.getElementById('scene3'));
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';
} }
}); });
</script> </script>