1616 -o-background-size : cover;
1717 background-size : cover;
1818 }
19+ input [type = text ] {
20+ border-radius : 10px ;
21+ }
1922 @font-face {
2023 font-family : captcha;
2124 src : url ("capcha.ttf" );
2225 }
26+ /* Center the loader */
27+ # loader {
28+ position : absolute;
29+ left : 50% ;
30+ top : 50% ;
31+ z-index : 1 ;
32+ width : 150px ;
33+ height : 150px ;
34+ margin : -75px 0 0 -75px ;
35+ border : 16px solid # f3f3f3 ;
36+ border-radius : 50% ;
37+ border-top : 16px solid # 3498db ;
38+ width : 120px ;
39+ height : 120px ;
40+ -webkit-animation : spin 2s linear infinite;
41+ animation : spin 2s linear infinite;
42+ }
43+
44+ @-webkit-keyframes spin {
45+ 0% { -webkit-transform : rotate (0deg ); }
46+ 100% { -webkit-transform : rotate (360deg ); }
47+ }
48+
49+ @keyframes spin {
50+ 0% { transform : rotate (0deg ); }
51+ 100% { transform : rotate (360deg ); }
52+ }
2353 </ style >
2454 <!-- Latest compiled and minified CSS -->
2555 < link rel ="stylesheet " href ="https://bootswatch.com/cyborg/bootstrap.min.css " crossorigin ="anonymous ">
2656 <!-- Latest compiled and minified JavaScript -->
2757 < script src ="color.js "> </ script >
2858 < script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " crossorigin ="anonymous "> </ script >
2959 < body style ="background-color: transparent; ">
60+ < div id ="loader "> </ div >
61+ < div class ="container-fluid ">
62+ < div class ="row ">
63+ < div class ="col-xs-4 "> </ div >
64+ < div class ="col-xs-4 ">
65+ < div class ="panel panel-primary ">
66+ < div class ="panel-heading "> Options </ div >
67+ < div class ="panel-body ">
68+ Your Nickname | < input type ="text " id ="nick "> < br >
69+ Key Names (Like Digit5 or KeyW)< br >
70+ Banana | < input type ="text " id ="banana "> < br >
71+ Lemon | < input type ="text " id ="lemon "> < br >
72+ Lime | < input type ="text " id ="lime "> < br >
73+ Orange | < input type ="text " id ="orange "> < br >
74+ < button class ="btn btn-success "> Start Game! </ button >
75+ </ div >
76+ </ div >
77+ </ div >
78+ < div class ="col-xs-4 "> </ div >
79+ </ div >
80+ </ div >
3081 < center >
31- < br >
32- < br >
82+ </ ul >
3383 < h1 class ="words " style ="font-family: captcha ">
3484
3585 </ h1 >
@@ -50,9 +100,19 @@ <h1 class="win2" style="display: none">
50100 < script src ="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.8/sweetalert2.min.js "> </ script >
51101< link rel ="stylesheet " type ="text/css " href ="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.8/sweetalert2.min.css ">
52102 < script >
103+ var myVar ;
104+ myVar = setTimeout ( showPage , 1000 ) ; // 1000 seconds after the page loads, run showPage()
105+
106+ function showPage ( ) {
107+ /*
108+ This, basically, removes the html loading wheel and starts the game
109+ */
110+ document . getElementById ( "loader" ) . style . display = "none" ; // Remove loading wheel
111+ initPic ( bases [ choose ( out ) ] , choose ( out ) ) // Set a random background and text
112+ }
53113 var bases = {
54114 lemon : "url('lemons-base.jpg')" , // Links to fruits
55- bannana : "url('bannana -base.jpg')" ,
115+ banana : "url('banana -base.jpg')" ,
56116 lime : "url('lime-base.jpg')" ,
57117 orange : "url('orange-base.jpg')"
58118 }
@@ -63,6 +123,7 @@ <h1 class="win2" style="display: none">
63123 color ( bases [ key ] . replace ( "url('" , "" ) . replace ( "')" , "" ) )
64124 color ( bases [ key ] . replace ( "url('" , "" ) . replace ( "')" , "" ) ) // HACK: Preload the image so it won't be black on first attempt
65125 }
126+
66127 function choose ( choices ) { // Makes a random choice from Array, eg. [1,2,5] => 1 or 2 or 5
67128 var index = Math . floor ( Math . random ( ) * choices . length ) ;
68129 return choices [ index ] ;
@@ -79,7 +140,7 @@ <h1 class="win2" style="display: none">
79140 }
80141 var mappings = { // Mappings of keys to fruits
81142 KeyA : "lemon" , // TODO: Move to config?
82- KeyW : "bannana " ,
143+ KeyW : "banana " ,
83144 KeyS : "lime" ,
84145 KeyD : "orange"
85146 }
@@ -130,10 +191,10 @@ <h1 class="win2" style="display: none">
130191 } ) ;
131192 } )
132193 document . onkeyup = function ( ) { } ; // Finally, set the "onkeyup" function to empty so that users can't continue playing
133- } , 20000 )
194+ } , 21000 )
134195
135196 var rounds = 0 ; // Start at 0 wins
136- initPic ( bases [ choose ( out ) ] , choose ( out ) ) // Set a random background and text
197+
137198
138199 document . onkeyup = function ( e ) { // When someone lets go of a key
139200 var mapped = mappings [ e . code ] // Get the key from "mappings", which was defined earlier
0 commit comments