Skip to content

Commit b28a167

Browse files
xxnatcxxnatc
committed
Revised typewriter script from Echelon.JS
1 parent a31121b commit b28a167

File tree

4 files changed

+155
-0
lines changed

4 files changed

+155
-0
lines changed

‎index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
</head>
88

99
<body>
10+
<p id="line1" class="hidden">Oct.23 2115: Greetings, agent. Your mission, should you choose to accept it:</p>
11+
<p id="line2" class="hidden">Using your JavaScript coding knowledge, access the central vault of the evil OmniCorp Geoponic Industries to retrieve a relic from long ago. Good luck agent, the fate of the future rests in your JS skills.</p>
12+
<p id="cursor-line" class="visible">&gt;&gt; <span class="typed-cursor">&#9608;</span></p>
1013

1114
<script type="text/javascript" src="typing.js"></script>
1215
</body>

‎style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
font-family: monospace;
3+
}

‎text-cursor.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.hidden {
2+
display: none;
3+
visibility: hidden;
4+
}
5+
6+
/* ----- blinking cursor animation ----- */
7+
.typed-cursor{
8+
opacity: 1;
9+
-webkit-animation: blink 0.95s infinite;
10+
-moz-animation: blink 0.95s infinite;
11+
-ms-animation: blink 0.95s infinite;
12+
-o-animation: blink 0.95s infinite;
13+
animation: blink 0.95s infinite;
14+
}
15+
16+
@-keyframes blink{
17+
0% { opacity:1; }
18+
50% { opacity:0; }
19+
100% { opacity:1; }
20+
}
21+
@-webkit-keyframes blink{
22+
0% { opacity:1; }
23+
50% { opacity:0; }
24+
100% { opacity:1; }
25+
}
26+
@-moz-keyframes blink{
27+
0% { opacity:1; }
28+
50% { opacity:0; }
29+
100% { opacity:1; }
30+
}
31+
@-ms-keyframes blink{
32+
0% { opacity:1; }
33+
50% { opacity:0; }
34+
100% { opacity:1; }
35+
}
36+
@-o-keyframes blink{
37+
0% { opacity:1; }
38+
50% { opacity:0; }
39+
100% { opacity:1; }
40+
}

‎typing.js

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
// set typing speed and wait times
2+
3+
var timeInit = 1000; // initial wait before typing first line
4+
var timeGap = 1000; // wait time between each line
5+
var timeChar = 70; // time until next letter
6+
7+
var cursorChar = '&#9608;';
8+
9+
var originText = [document.getElementById('line1').innerHTML, document.getElementById('line2').innerHTML];
10+
11+
var currentTimeout;
12+
var showCursor;
13+
14+
var typeWriter = function(id, index) {
15+
var loc = document.getElementById(id);
16+
var fullText = originText[index];
17+
var letter = 0;
18+
19+
// this function types one letter per call, then calls the subsequent typeLetter()
20+
var typeLetter = function() {
21+
currentTimeout = setTimeout(function() {
22+
loc.className = 'visible';
23+
letter += 1;
24+
var showText = fullText.substring(0, letter);
25+
26+
// stops the function from recurring when all letters are typed
27+
if (letter === fullText.length) {
28+
loc.innerHTML = '&gt;&gt; ' + showText;
29+
} else {
30+
loc.innerHTML = '&gt;&gt; ' + showText + '<span class="typed-cursor">' + cursorChar + '</span>';
31+
typeLetter();
32+
}
33+
}, timeChar);
34+
};
35+
typeLetter();
36+
37+
// show cursor on next line
38+
var totalTime = fullText.length * timeChar + 100;
39+
showCursor = setTimeout(function() {
40+
document.getElementById('cursor-line').className = 'visible';
41+
}, totalTime);
42+
};
43+
44+
var typeLine1 = setTimeout(function() {
45+
document.getElementById('cursor-line').className = 'hidden';
46+
typeWriter('line1', 0);
47+
}, timeInit);
48+
49+
var delayTime1 = timeInit
50+
+ originText[0].length * timeChar
51+
+ 50 + timeGap;
52+
53+
var typeLine2 = setTimeout(function() {
54+
document.getElementById('cursor-line').className = 'hidden';
55+
typeWriter('line2', 1);
56+
}, delayTime1);
57+
58+
var delayTime2 = originText[1].length * timeChar + timeGap;
59+
60+
// specific for index.html
61+
var showLogin;
62+
if (document.getElementById('agent-login')) {
63+
showLogin = setTimeout(function() {
64+
document.getElementById('agent-login').className = 'visible';
65+
}, delayTime1 + delayTime2);
66+
}
67+
68+
// Specific for Fail.html
69+
var showReturnButton;
70+
if (document.getElementById('return-button')) {
71+
showReturnButton = setTimeout(function() {
72+
document.getElementById('return-button').className = 'visible';
73+
}, delayTime1 + delayTime2);
74+
}
75+
76+
// stops all timeouts
77+
var skip = function() {
78+
clearTimeout(currentTimeout);
79+
clearTimeout(showCursor);
80+
clearTimeout(typeLine1);
81+
clearTimeout(typeLine2);
82+
clearTimeout(showLogin);
83+
};
84+
85+
// rewrite text with value stored on page load
86+
var rewriteText = function(id, index) {
87+
var loc = document.getElementById(id);
88+
loc.innerHTML = '&gt;&gt; ' + originText[index];
89+
loc.className = 'visible';
90+
};
91+
92+
// trigger skip and rewrite on pressing enter or spacebar
93+
// $(document).keypress(function(key){
94+
window.onkeydown = function(key){
95+
if (key.which === 13 || key.which === 32) {
96+
skip();
97+
rewriteText('line1', 0);
98+
rewriteText('line2', 1);
99+
document.getElementById('cursor-line').className = 'visible';
100+
101+
// restoring element specific to page
102+
if (document.getElementById('agent-login')) {
103+
document.getElementById('agent-login').className = 'visible';
104+
}
105+
if (document.getElementById('return-button')) {
106+
document.getElementById('return-button').className = 'visible';
107+
}
108+
}
109+
};

0 commit comments

Comments
 (0)