Skip to content

Commit e88580c

Browse files
Broken options box
1 parent 277188e commit e88580c

File tree

3 files changed

+68
-7
lines changed

3 files changed

+68
-7
lines changed

html/game.html

Lines changed: 67 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,70 @@
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

storage/leaderboard.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
[{"name":"Jeff","score":0},{"name":"Jay","score":6},{"name":"Jay","score":53},{"name":"Yipee","score":181},{"name":"Banana","score":16}]
1+
[{"name":"Jeff","score":0},{"name":"Jay","score":6},{"name":"Jay","score":53},{"name":"Yipee","score":181},{"name":"Banana","score":16},{"name":"Points","score":10}]

0 commit comments

Comments
 (0)