diff --git a/index.html b/index.html
index 5815a67..b7bce47 100644
--- a/index.html
+++ b/index.html
@@ -108,7 +108,8 @@
color: #00ff00;
}
- #scene3RecruitCursor {
+ #scene3RecruitCursor,
+ #scene3RecruitCursor2 {
display: none;
width: 10px;
height: 1.4em;
@@ -118,6 +119,10 @@
opacity: 1;
}
+ #scene3RecruitLine3 {
+ min-height: 2em;
+ }
+
#scene2 {
flex-direction: column;
justify-content: center;
@@ -300,12 +305,15 @@
-
+
+
+
+
-
-
-
+
+
+
@@ -710,7 +718,7 @@
}, 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) {
sceneElem.style.display = 'flex';
const title = document.getElementById('scene3Title');
@@ -719,10 +727,12 @@
const rl1 = document.getElementById('scene3RecruitLine1');
const rl2 = document.getElementById('scene3RecruitLine2');
const rl3 = document.getElementById('scene3RecruitLine3');
+ const rl4 = document.getElementById('scene3RecruitLine4');
const rt1 = document.getElementById('scene3RecruitText1');
const rt2 = document.getElementById('scene3RecruitText2');
- const rt3 = document.getElementById('scene3RecruitText3');
+ const rt4 = document.getElementById('scene3RecruitText4');
const cursor = document.getElementById('scene3RecruitCursor');
+ const cursor2 = document.getElementById('scene3RecruitCursor2');
const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn');
@@ -739,21 +749,21 @@
title.classList.add('visible');
}, 300);
- typewriterLines(
- ["LAB 484 IS AN INCUBATOR THAT HAS 11 DECENTRALIZED TECH STARTUPS UNDERNEATH IT"],
- textContainer,
- () => {
- recruitLines.style.display = 'flex';
+ typeCalmly(textContainer, "- IS AN INCUBATOR THAT HAS 11 DECENTRALIZED TECH STARTUPS UNDERNEATH IT", () => {
+ recruitLines.style.display = 'flex';
- setTimeout(() => {
- rl1.style.display = 'flex';
+ setTimeout(() => {
+ rl1.style.display = 'flex';
- 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...", () => {
+ 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';
+
+ blinkCursor(cursor2, 3, () => {
+ rl4.style.display = 'flex';
+ typeCalmly(rt4, "ARE YOU A...", () => {
setTimeout(() => {
choiceBtns.forEach(btn => {
btn.style.display = 'block';
@@ -774,10 +784,9 @@
});
});
});
- }, 2000);
- },
- 200
- );
+ });
+ }, 2000);
+ });
}
sceneElem.style.opacity = opacity;
}, 30);
@@ -843,22 +852,26 @@
const rl1 = document.getElementById('scene3RecruitLine1');
const rl2 = document.getElementById('scene3RecruitLine2');
const rl3 = document.getElementById('scene3RecruitLine3');
+ const rl4 = document.getElementById('scene3RecruitLine4');
const rt1 = document.getElementById('scene3RecruitText1');
const rt2 = document.getElementById('scene3RecruitText2');
- const rt3 = document.getElementById('scene3RecruitText3');
+ const rt4 = document.getElementById('scene3RecruitText4');
const rCursor = document.getElementById('scene3RecruitCursor');
+ const rCursor2 = document.getElementById('scene3RecruitCursor2');
const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn');
if (scene3.style.display === 'flex' && creatorBtn.style.visibility !== 'visible') {
rCursor.style.display = 'none';
+ rCursor2.style.display = 'none';
recruitLines.style.display = 'flex';
rl1.style.display = 'flex';
rl2.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";
rt2.textContent = "WHO BELIEVE THE WORLD NEEDS TO CHANGE...";
- rt3.textContent = "ARE YOU A...";
+ rt4.textContent = "ARE YOU A...";
[creatorBtn, builderBtn, developerBtn].forEach(btn => {
btn.style.display = 'block';
btn.style.visibility = 'visible';