Skip to content

Commit 5bda6a1

Browse files
codingJWilliamscodingJWilliams
committed
Sort of working
1 parent e88580c commit 5bda6a1

File tree

1 file changed

+74
-54
lines changed

1 file changed

+74
-54
lines changed

‎html/game.html‎

Lines changed: 74 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -16,72 +16,88 @@
1616
-o-background-size: cover;
1717
background-size: cover;
1818
}
19-
input[type=text] {
20-
border-radius: 10px;
19+
input {
20+
color: black;
2121
}
2222
@font-face {
2323
font-family: captcha;
2424
src: url("capcha.ttf");
2525
}
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-
}
5326
</style>
5427
<!-- Latest compiled and minified CSS -->
5528
<link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" crossorigin="anonymous">
5629
<!-- Latest compiled and minified JavaScript -->
5730
<script src="color.js"></script>
58-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
31+
5932
<body style="background-color: transparent;">
60-
<div id="loader"></div>
6133
<div class="container-fluid">
6234
<div class="row">
63-
<div class="col-xs-4"></div>
64-
<div class="col-xs-4">
35+
<div class="col-xs-3"></div>
36+
<div class="col-xs-6">
6537
<div class="panel panel-primary">
6638
<div class="panel-heading"> Options </div>
6739
<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>
40+
<table class="table">
41+
<tr>
42+
<td>
43+
Your Nickname
44+
</td>
45+
<td>
46+
<input type="text" id="nick" style="color: black">
47+
</td>
48+
</tr>
49+
<tr>
50+
<td>
51+
Keys: (Like KeyW or Digit2)
52+
</td>
53+
<td>
54+
</td>
55+
</tr>
56+
<tr>
57+
<td>
58+
Banana
59+
</td>
60+
<td>
61+
<input type="text" id="banana" style="color: black">
62+
</td>
63+
</tr>
64+
<tr>
65+
<td>
66+
Lemon
67+
</td>
68+
<td>
69+
<input type="text" id="lemon" style="color: black">
70+
</td>
71+
</tr>
72+
<tr>
73+
<td>
74+
Orange
75+
</td>
76+
<td>
77+
<input type="text" id="orange" style="color: black">
78+
</td>
79+
</tr>
80+
<tr>
81+
<td>
82+
Lime
83+
</td>
84+
<td>
85+
<input type="text" id="lime" style="color: black">
86+
</td>
87+
</tr>
88+
<tr>
89+
<td>
90+
<button class="btn btn-success" onclick="startTheGame()"> Start Game! </button>
91+
</td>
92+
</tr>
7593
</div>
7694
</div>
7795
</div>
78-
<div class="col-xs-4"></div>
96+
<div class="col-xs-3"></div>
7997
</div>
8098
</div>
8199
<center>
82-
</ul>
83100
<h1 class="words" style="font-family: captcha">
84-
85101
</h1>
86102
<h1 class="win">
87103
</h1>
@@ -97,17 +113,27 @@ <h1 class="win2" style="display: none">
97113
</center>
98114
</body>
99115
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
116+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
100117
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.8/sweetalert2.min.js"></script>
101118
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.8/sweetalert2.min.css">
102119
<script>
103-
var myVar;
104-
myVar = setTimeout(showPage, 1000); // 1000 seconds after the page loads, run showPage()
105-
106-
function showPage() {
120+
var mappings = { // Mappings of keys to fruits
121+
KeyA: "lemon", // TODO: Move to config?
122+
KeyW: "banana",
123+
KeyS: "lime",
124+
KeyD: "orange"
125+
}
126+
var mappings = {}
127+
function startTheGame() {
107128
/*
108129
This, basically, removes the html loading wheel and starts the game
109130
*/
110-
document.getElementById("loader").style.display = "none"; // Remove loading wheel
131+
$(".container-fluid").css({"display": "none"});
132+
$("#banana").val() == "" ? mappings.Key1 = "banana" : mappings[$("#banana").val()] = "banana";
133+
$("#lemon").val() == "" ? mappings.Key2 = "lemon" : mappings[$("#lemon").val()] = "lemon";
134+
$("#lime").val() == "" ? mappings.Key3 = "lime" : mappings[$("#lime").val()] = "lime";
135+
$("#orange").val() == "" ? mappings.Key4 = "orange" : mappings[$("#orange").val()] = "orange";
136+
$(".words").css({"display": "inline"})
111137
initPic(bases[choose(out)], choose(out)) // Set a random background and text
112138
}
113139
var bases = {
@@ -138,12 +164,6 @@ <h1 class="win2" style="display: none">
138164
'display':'inline'
139165
})
140166
}
141-
var mappings = { // Mappings of keys to fruits
142-
KeyA: "lemon", // TODO: Move to config?
143-
KeyW: "banana",
144-
KeyS: "lime",
145-
KeyD: "orange"
146-
}
147167
var current = {};
148168

149169
function initPic(pic, word) { // Function that sets the background and word

0 commit comments

Comments
 (0)