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

Save point: Scene 3 now contains I AM A... with 3-blink cursor + CREATOR/BUILDER/DEVELOPER buttons

Browse Source
This commit is contained in:
avi
2026-05-09 16:33:16 -05:00
parent c34d6628a8
commit b25a97b184
1 changed files with 74 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
index.html
View File

@@ -199,16 +199,16 @@
<button id="followBtn">FOLLOW THEM</button> <button id="followBtn">FOLLOW THEM</button>
<div id="scene2" class="scene"> <div id="scene2" class="scene">
<div id="scene2Text"></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">
<div id="scene3Title">LAB 484</div> <div id="scene3Title">LAB 484</div>
<div id="scene3Text"></div> <div id="scene3Text"></div>
<div id="scene2Text"></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="sceneCreator" class="scene"> <div id="sceneCreator" class="scene">
@@ -447,11 +447,11 @@
} }
// Scene transition functions // Scene transition functions
function transitionToScene2() { function transitionToScene3() {
const canvas = document.getElementById('matrixCanvas'); const canvas = document.getElementById('matrixCanvas');
const textContainer = document.getElementById('textContainer'); const textContainer = document.getElementById('textContainer');
const btn = document.getElementById('followBtn'); const btn = document.getElementById('followBtn');
const scene2 = document.getElementById('scene2'); const scene3 = document.getElementById('scene3');
let opacity = 1; let opacity = 1;
const fadeOut = setInterval(() => { const fadeOut = setInterval(() => {
@@ -462,7 +462,7 @@
canvas.style.display = 'none'; canvas.style.display = 'none';
textContainer.style.display = 'none'; textContainer.style.display = 'none';
btn.style.display = 'none'; btn.style.display = 'none';
loadScene2(scene2); loadScene3(scene3);
} }
canvas.style.opacity = opacity; canvas.style.opacity = opacity;
textContainer.style.opacity = opacity; textContainer.style.opacity = opacity;
@@ -470,81 +470,15 @@
}, 30); }, 30);
} }
// Scene 2 loader with blinking cursor (5 blinks), "I AM I" text, and 3 choice buttons // Scene 2 loader (no longer used - buttons moved to Scene 3)
function loadScene2(sceneElem) { function loadScene2(sceneElem) {
sceneElem.style.display = 'flex'; sceneElem.style.display = 'flex';
const cursor = document.getElementById('blinkCursor');
const textContainer = document.getElementById('scene2Text');
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(() => {
opacity += 0.05; opacity += 0.05;
if (opacity >= 1) { if (opacity >= 1) {
opacity = 1; opacity = 1;
clearInterval(fadeIn); clearInterval(fadeIn);
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 >= 10) {
clearInterval(blinkInterval);
cursor.style.display = 'none';
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);
} }
sceneElem.style.opacity = opacity; sceneElem.style.opacity = opacity;
}, 30); }, 30);
@@ -607,11 +541,17 @@
}, 30); }, 30);
} }
// Scene 3 loader // Scene 3 loader with I AM A... sequence and 3 choice buttons
function loadScene3(sceneElem) { function loadScene3(sceneElem) {
sceneElem.style.display = 'flex'; sceneElem.style.display = 'flex';
const title = document.getElementById('scene3Title'); const title = document.getElementById('scene3Title');
const textContainer = document.getElementById('scene3Text'); const textContainer = document.getElementById('scene3Text');
const iAmText = document.getElementById('scene2Text');
const cursor = document.getElementById('blinkCursor');
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(() => {
@@ -627,7 +567,54 @@
typewriterLines( typewriterLines(
[" 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"], [" 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,
() => {}, () => {
// After typewriter text finishes, start I AM A... sequence
iAmText.textContent = '';
iAmText.style.visibility = 'visible';
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';
iAmText.textContent += segments[segIndex];
segIndex++;
setTimeout(typeNextSegment, 3000);
}
}, 500);
}
typeNextSegment();
},
200 200
); );
} }
@@ -641,15 +628,15 @@
}); });
// Button click handlers // Button click handlers
document.getElementById('followBtn').addEventListener('click', transitionToScene2); document.getElementById('followBtn').addEventListener('click', transitionToScene3);
document.getElementById('creatorBtn').addEventListener('click', () => { document.getElementById('creatorBtn').addEventListener('click', () => {
transitionToScene('scene2', loadSceneCreator, 'sceneCreator'); transitionToScene('scene3', loadSceneCreator, 'sceneCreator');
}); });
document.getElementById('builderBtn').addEventListener('click', () => { document.getElementById('builderBtn').addEventListener('click', () => {
transitionToScene('scene2', loadSceneBuilder, 'sceneBuilder'); transitionToScene('scene3', loadSceneBuilder, 'sceneBuilder');
}); });
document.getElementById('developerBtn').addEventListener('click', () => { document.getElementById('developerBtn').addEventListener('click', () => {
transitionToScene('scene2', loadSceneDeveloper, 'sceneDeveloper'); transitionToScene('scene3', loadSceneDeveloper, 'sceneDeveloper');
}); });
@@ -667,16 +654,17 @@
skipScene1(); skipScene1();
} }
// Scene 2 skip (cursor blinking) // Scene 3 skip (cursor blinking / I AM A... typing)
const scene2Text = document.getElementById('scene2Text'); const scene3 = document.getElementById('scene3');
const cursor = document.getElementById('blinkCursor'); const cursor = document.getElementById('blinkCursor');
const iAmText = document.getElementById('scene2Text');
const creatorBtn = document.getElementById('creatorBtn'); const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn'); const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn'); const developerBtn = document.getElementById('developerBtn');
if (cursor.style.display === 'block') { if (scene3.style.display === 'flex' && (cursor.style.display === 'block' || (cursor.style.display === 'none' && iAmText.textContent.length > 0 && iAmText.textContent.length < 8))) {
cursor.style.display = 'none'; cursor.style.display = 'none';
scene2Text.textContent = 'I AM A...'; iAmText.textContent = ' I AM A...';
scene2Text.style.visibility = 'visible'; iAmText.style.visibility = 'visible';
[creatorBtn, builderBtn, developerBtn].forEach(btn => { [creatorBtn, builderBtn, developerBtn].forEach(btn => {
btn.style.display = 'block'; btn.style.display = 'block';
btn.style.visibility = 'visible'; btn.style.visibility = 'visible';
@@ -691,7 +679,6 @@
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';
loadScene3(document.getElementById('scene3')); loadScene3(document.getElementById('scene3'));
} }