Skip to content

Commit 254ecb7

Browse files
codingJWilliamscodingJWilliams
committed
Added 10/10 real loading screen
1 parent 27cbd73 commit 254ecb7

File tree

5 files changed

+46
-19
lines changed

5 files changed

+46
-19
lines changed

‎assets/img/blue_room_logo.png‎

16.1 KB
Loading

‎assets/img/coding_brum.png‎

12 KB
Loading

‎assets/img/loader.gif‎

41.7 KB
Loading

‎assets/img/loader2.gif‎

63.3 KB
Loading

‎html/game.html‎

Lines changed: 46 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<html>
1+
<html style="background-color: rgb(0, 171, 255);">
22
<head>
33
<title>
44
Fruit punch!
@@ -10,7 +10,31 @@
1010
<!-- // End CSS Imports -->
1111
</head>
1212

13-
<body style="background-color: transparent;" id="tehbody">
13+
<body style="background-color: transparent" id="tehbody">
14+
<div class="loading">
15+
<center>
16+
<br>
17+
<br>
18+
<br>
19+
<br>
20+
<br>
21+
<br>
22+
<img src="/img/blue_room_logo.png"><br>
23+
<img src="/img/loader2.gif">
24+
<br>
25+
<h3>
26+
Designed at
27+
</h3>
28+
<h3 style="font-family: Consolas, monaco, monospace; color: #000000; background-color: #ffff00; display: inline">coding(brum);</h3>
29+
<h3>
30+
By:<br>
31+
Jay Williams<br>
32+
Nikash Chekuri<a href="https://snusercontent.global.ssl.fastly.net/member-profile-full/44/4288444_8862847.jpg">.</a><br>
33+
Gokul Menon<br>
34+
Rory Sharp<br>
35+
Shaquille<br>
36+
</center>
37+
</div>
1438
<!-- HACK: Preload images
1539
TODO: Theres got to be a better solution to the display flashing than this -_-
1640
-->
@@ -30,9 +54,9 @@
3054
<img src="orange2.jpg" style="display:none;" alt="" />
3155
<img src="orange3.jpg" style="display:none;" alt="" />
3256
<img src="orange4.jpg" style="display:none;" alt="" />
33-
<div id="dummy" style="display: none;"></div>
34-
<h1 id="scorecount" style="color: black; padding-left: 20px"> </h1> <!--// Create the score count display element -->
35-
<center>
57+
<div class="gamecomponent" id="dummy" style="display: none;"></div>
58+
<h1 class="gamecomponent" id="scorecount" style="color: black; padding-left: 20px"> </h1> <!--// Create the score count display element -->
59+
<center class="gamecomponent">
3660
<h1 class="words" style="font-family: captcha"></h1> <!--
3761
// Create the element to display the fruit you got to hit TODO: Refactor QUESTION: Should we create this in JS? -->
3862

@@ -93,15 +117,6 @@ <h1 class="win2" style="display: none"></h1> <!--// Cre
93117
var snd = new Audio(soundfile);
94118
snd.play()
95119
}
96-
var nanobar = new Nanobar( options );
97-
var b = 0;
98-
var meee = setInterval(function () {
99-
b++
100-
nanobar.go( Math.round( (b / 600 ) * 100 ) )
101-
if(b > 600) {
102-
clearInterval(meee)
103-
}
104-
}, 100)
105120

106121
for (var i = 0; i < fruits.length; i++){ // Go throught fruit objects
107122
out.push(fruits[i].name) // add the name of fruit to Array
@@ -118,9 +133,21 @@ <h1 class="win2" style="display: none"></h1> <!--// Cre
118133
} // TODO: Why is this method so HACK y? It doesn't need to be
119134
return out[name] // Return the choice from the array
120135
}
121-
setTimeout(function(){
122-
initPic(getImageFromName(choose(out)), choose(out)) // Set a random background and text
123-
}, 200)
136+
setTimeout(function() { // DO NOT LOOK AT THIS CODE
137+
setTimeout(function(){ // THIS IS NOT A FAKE LOADING SCREEN AT ALL
138+
initPic(getImageFromName(choose(out)), choose(out)) // Set a random background and text
139+
}, 200)
140+
var nanobar = new Nanobar( options ); // Create the time bar
141+
var b = 0;
142+
var meee = setInterval(function () { // And increment it
143+
b++
144+
nanobar.go( Math.round( (b / 6000 ) * 100 ) )
145+
if(b > 6000) {
146+
clearInterval(meee)
147+
}
148+
}, 10)
149+
$(".loading").css({"display": "none"})
150+
}, 2000)
124151

125152
function choose(choices) { // Makes a random choice from Array, eg. [1,2,5] => 1 or 2 or 5
126153
var index = Math.floor(Math.random() * choices.length);
@@ -145,7 +172,7 @@ <h1 class="win2" style="display: none"></h1> <!--// Cre
145172
getColor(pic.replace("url('", "").replace("')", ""), fruits[2].pics.indexOf(pic) !== -1, function (correctColor) { // Get the average image color
146173
$(".words").css("color", correctColor); // Then set the word's color to it
147174
})
148-
}, 70)
175+
}, 10)
149176
randomMove($(".words")) // CHANGED: Now moves text each time
150177
current.pic = pic;
151178
current.word = word;
@@ -186,7 +213,7 @@ <h1 class="win2" style="display: none"></h1> <!--// Cre
186213
})
187214
});
188215
document.onkeyup = function () {}; // Finally, set the "onkeyup" function to empty so that users can't continue playing
189-
}, 60000)
216+
}, 62000)
190217

191218
var correct = 0; // Start at 0 wins
192219
var incorrect = 0

0 commit comments

Comments
 (0)