avi/signalelsewhere
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Save point: Scene 3 multi-line recruitment text - LIKE MINDED / BELIEVE / ARE YOU A...

Browse Source
This commit is contained in:
avi
2026-05-09 17:18:06 -05:00
parent ad3a3d08f4
commit 0407d9e8f7
1 changed files with 86 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
index.html
View File

@@ -91,27 +91,31 @@
transition: opacity 1s ease;
}
#blinkCursor {
#scene3RecruitLines {
display: none;
width: 8px;
height: 14px;
background-color: #00ff00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 2rem;
}
#scene2Text {
color: #00ff00;
font-family: 'Courier New', monospace;
.scene3RecruitLine {
display: none;
flex-direction: row;
align-items: center;
font-size: 1.2rem;
line-height: 2;
text-align: center;
visibility: hidden;
padding-top: 15vh;
margin-bottom: auto;
color: #00ff00;
}
#scene3RecruitCursor {
display: none;
width: 10px;
height: 1.4em;
background-color: #00ff00;
margin-left: 4px;
flex-shrink: 0;
opacity: 1;
}
#scene2 {
@@ -287,8 +291,18 @@
<div id="scene3" class="scene">
<div id="scene3Title">LAB 484</div>
<div id="scene3Text"></div>
<div id="scene2Text"></div>
<div id="blinkCursor"></div>
<div id="scene3RecruitLines">
<div id="scene3RecruitLine1" class="scene3RecruitLine">
<span id="scene3RecruitText1"></span>
<span id="scene3RecruitCursor"></span>
</div>
<div id="scene3RecruitLine2" class="scene3RecruitLine">
<span id="scene3RecruitText2"></span>
</div>
<div id="scene3RecruitLine3" class="scene3RecruitLine">
<span id="scene3RecruitText3"></span>
</div>
</div>
<button id="creatorBtn" class="choiceBtn">CREATOR</button>
<button id="builderBtn" class="choiceBtn">BUILDER</button>
<button id="developerBtn" class="choiceBtn">DEVELOPER</button>
@@ -696,13 +710,19 @@
}, 30);
}
// Scene 3 loader with recruitment text sequence and 3 choice buttons
// Scene 3 loader with 3-line recruitment sequence and 3 choice buttons
function loadScene3(sceneElem) {
sceneElem.style.display = 'flex';
const title = document.getElementById('scene3Title');
const textContainer = document.getElementById('scene3Text');
const iAmText = document.getElementById('scene2Text');
const cursor = document.getElementById('blinkCursor');
const recruitLines = document.getElementById('scene3RecruitLines');
const rl1 = document.getElementById('scene3RecruitLine1');
const rl2 = document.getElementById('scene3RecruitLine2');
const rl3 = document.getElementById('scene3RecruitLine3');
const rt1 = document.getElementById('scene3RecruitText1');
const rt2 = document.getElementById('scene3RecruitText2');
const rt3 = document.getElementById('scene3RecruitText3');
const cursor = document.getElementById('scene3RecruitCursor');
const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn');
@@ -723,24 +743,17 @@
["LAB 484 IS AN INCUBATOR THAT HAS 11 DECENTRALIZED TECH STARTUPS UNDERNEATH IT"],
textContainer,
() => {
// After typewriter text finishes, wait 2 seconds then type recruitment text
iAmText.textContent = '';
iAmText.style.visibility = 'visible';
recruitLines.style.display = 'flex';
setTimeout(() => {
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';
rl1.style.display = 'flex';
typeCalmly(iAmText, "WE ARE LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED", () => {
blinkCursor(cursor, 3, () => {
typeCalmly(rt1, "THE LAB IS LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED", () => {
rl2.style.display = 'flex';
typeCalmly(rt2, "WHO BELIEVE THE WORLD NEEDS TO CHANGE...", () => {
rl3.style.display = 'flex';
typeCalmly(rt3, "ARE YOU A...", () => {
setTimeout(() => {
choiceBtns.forEach(btn => {
btn.style.display = 'block';
@@ -758,8 +771,9 @@
});
}, 3000);
});
}
}, 500);
});
});
});
}, 2000);
},
200
@@ -823,18 +837,28 @@
s2Btn.style.pointerEvents = 'auto';
}
// Scene 3 skip (typewriter / cursor / typing)
// Scene 3 skip (recruit text typing)
const scene3 = document.getElementById('scene3');
const cursor = document.getElementById('blinkCursor');
const iAmText = document.getElementById('scene2Text');
const recruitLines = document.getElementById('scene3RecruitLines');
const rl1 = document.getElementById('scene3RecruitLine1');
const rl2 = document.getElementById('scene3RecruitLine2');
const rl3 = document.getElementById('scene3RecruitLine3');
const rt1 = document.getElementById('scene3RecruitText1');
const rt2 = document.getElementById('scene3RecruitText2');
const rt3 = document.getElementById('scene3RecruitText3');
const rCursor = document.getElementById('scene3RecruitCursor');
const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn');
const fullText = "WE ARE LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED";
if (scene3.style.display === 'flex' && (cursor.style.display === 'block' || (iAmText.textContent.length > 0 && iAmText.textContent.length < fullText.length))) {
cursor.style.display = 'none';
iAmText.textContent = fullText;
iAmText.style.visibility = 'visible';
if (scene3.style.display === 'flex' && creatorBtn.style.visibility !== 'visible') {
rCursor.style.display = 'none';
recruitLines.style.display = 'flex';
rl1.style.display = 'flex';
rl2.style.display = 'flex';
rl3.style.display = 'flex';
rt1.textContent = "THE LAB IS LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED";
rt2.textContent = "WHO BELIEVE THE WORLD NEEDS TO CHANGE...";
rt3.textContent = "ARE YOU A...";
[creatorBtn, builderBtn, developerBtn].forEach(btn => {
btn.style.display = 'block';
btn.style.visibility = 'visible';