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

Save point: Scene 3 incubator text uses typeCalmly, 4-line recruitment with cursor blink between lines 2 and 4, buttons renamed to CREATORS/BUILDERS/DEVELOPERS

Browse Source
This commit is contained in:
avi
2026-05-09 17:28:13 -05:00
parent 0407d9e8f7
commit 083b10e2af
1 changed files with 39 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
index.html
View File

@@ -108,7 +108,8 @@
color: #00ff00; color: #00ff00;
} }
#scene3RecruitCursor { #scene3RecruitCursor,
#scene3RecruitCursor2 {
display: none; display: none;
width: 10px; width: 10px;
height: 1.4em; height: 1.4em;
@@ -118,6 +119,10 @@
opacity: 1; opacity: 1;
} }
#scene3RecruitLine3 {
min-height: 2em;
}
#scene2 { #scene2 {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -300,12 +305,15 @@
<span id="scene3RecruitText2"></span> <span id="scene3RecruitText2"></span>
</div> </div>
<div id="scene3RecruitLine3" class="scene3RecruitLine"> <div id="scene3RecruitLine3" class="scene3RecruitLine">
<span id="scene3RecruitText3"></span> <span id="scene3RecruitCursor2"></span>
</div>
<div id="scene3RecruitLine4" class="scene3RecruitLine">
<span id="scene3RecruitText4"></span>
</div> </div>
</div> </div>
<button id="creatorBtn" class="choiceBtn">CREATOR</button> <button id="creatorBtn" class="choiceBtn">CREATORS</button>
<button id="builderBtn" class="choiceBtn">BUILDER</button> <button id="builderBtn" class="choiceBtn">BUILDERS</button>
<button id="developerBtn" class="choiceBtn">DEVELOPER</button> <button id="developerBtn" class="choiceBtn">DEVELOPERS</button>
</div> </div>
<div id="sceneCreator" class="scene"> <div id="sceneCreator" class="scene">
@@ -710,7 +718,7 @@
}, 30); }, 30);
} }
// Scene 3 loader with 3-line recruitment sequence and 3 choice buttons // Scene 3 loader with 4-line recruitment 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');
@@ -719,10 +727,12 @@
const rl1 = document.getElementById('scene3RecruitLine1'); const rl1 = document.getElementById('scene3RecruitLine1');
const rl2 = document.getElementById('scene3RecruitLine2'); const rl2 = document.getElementById('scene3RecruitLine2');
const rl3 = document.getElementById('scene3RecruitLine3'); const rl3 = document.getElementById('scene3RecruitLine3');
const rl4 = document.getElementById('scene3RecruitLine4');
const rt1 = document.getElementById('scene3RecruitText1'); const rt1 = document.getElementById('scene3RecruitText1');
const rt2 = document.getElementById('scene3RecruitText2'); const rt2 = document.getElementById('scene3RecruitText2');
const rt3 = document.getElementById('scene3RecruitText3'); const rt4 = document.getElementById('scene3RecruitText4');
const cursor = document.getElementById('scene3RecruitCursor'); const cursor = document.getElementById('scene3RecruitCursor');
const cursor2 = document.getElementById('scene3RecruitCursor2');
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');
@@ -739,21 +749,21 @@
title.classList.add('visible'); title.classList.add('visible');
}, 300); }, 300);
typewriterLines( typeCalmly(textContainer, "- IS AN INCUBATOR THAT HAS 11 DECENTRALIZED TECH STARTUPS UNDERNEATH IT", () => {
["LAB 484 IS AN INCUBATOR THAT HAS 11 DECENTRALIZED TECH STARTUPS UNDERNEATH IT"], recruitLines.style.display = 'flex';
textContainer,
() => {
recruitLines.style.display = 'flex';
setTimeout(() => { setTimeout(() => {
rl1.style.display = 'flex'; rl1.style.display = 'flex';
blinkCursor(cursor, 3, () => { blinkCursor(cursor, 3, () => {
typeCalmly(rt1, "THE LAB IS LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED", () => { typeCalmly(rt1, "THE LAB IS LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED", () => {
rl2.style.display = 'flex'; rl2.style.display = 'flex';
typeCalmly(rt2, "WHO BELIEVE THE WORLD NEEDS TO CHANGE...", () => { typeCalmly(rt2, "WHO BELIEVE THE WORLD NEEDS TO CHANGE...", () => {
rl3.style.display = 'flex'; rl3.style.display = 'flex';
typeCalmly(rt3, "ARE YOU A...", () => {
blinkCursor(cursor2, 3, () => {
rl4.style.display = 'flex';
typeCalmly(rt4, "ARE YOU A...", () => {
setTimeout(() => { setTimeout(() => {
choiceBtns.forEach(btn => { choiceBtns.forEach(btn => {
btn.style.display = 'block'; btn.style.display = 'block';
@@ -774,10 +784,9 @@
}); });
}); });
}); });
}, 2000); });
}, }, 2000);
200 });
);
} }
sceneElem.style.opacity = opacity; sceneElem.style.opacity = opacity;
}, 30); }, 30);
@@ -843,22 +852,26 @@
const rl1 = document.getElementById('scene3RecruitLine1'); const rl1 = document.getElementById('scene3RecruitLine1');
const rl2 = document.getElementById('scene3RecruitLine2'); const rl2 = document.getElementById('scene3RecruitLine2');
const rl3 = document.getElementById('scene3RecruitLine3'); const rl3 = document.getElementById('scene3RecruitLine3');
const rl4 = document.getElementById('scene3RecruitLine4');
const rt1 = document.getElementById('scene3RecruitText1'); const rt1 = document.getElementById('scene3RecruitText1');
const rt2 = document.getElementById('scene3RecruitText2'); const rt2 = document.getElementById('scene3RecruitText2');
const rt3 = document.getElementById('scene3RecruitText3'); const rt4 = document.getElementById('scene3RecruitText4');
const rCursor = document.getElementById('scene3RecruitCursor'); const rCursor = document.getElementById('scene3RecruitCursor');
const rCursor2 = document.getElementById('scene3RecruitCursor2');
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 (scene3.style.display === 'flex' && creatorBtn.style.visibility !== 'visible') { if (scene3.style.display === 'flex' && creatorBtn.style.visibility !== 'visible') {
rCursor.style.display = 'none'; rCursor.style.display = 'none';
rCursor2.style.display = 'none';
recruitLines.style.display = 'flex'; recruitLines.style.display = 'flex';
rl1.style.display = 'flex'; rl1.style.display = 'flex';
rl2.style.display = 'flex'; rl2.style.display = 'flex';
rl3.style.display = 'flex'; rl3.style.display = 'flex';
rl4.style.display = 'flex';
rt1.textContent = "THE LAB IS LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED"; rt1.textContent = "THE LAB IS LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED";
rt2.textContent = "WHO BELIEVE THE WORLD NEEDS TO CHANGE..."; rt2.textContent = "WHO BELIEVE THE WORLD NEEDS TO CHANGE...";
rt3.textContent = "ARE YOU A..."; rt4.textContent = "ARE YOU A...";
[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';