Skip to content

Commit 29663b1

Browse files
codingJWilliamscodingJWilliams
committed
RELEASE #1 
1 parent aa0eee0 commit 29663b1

File tree

5 files changed

+116
-13
lines changed

5 files changed

+116
-13
lines changed

‎assets/color.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
function color(imgSrc){ // For given image source, returns eg rgb(20, 30, 40) with average color of image
1+
function color(imgSrc, isDarkImg){ // For given image source, returns eg rgb(20, 30, 40) with average color of image
22
var img = document.createElement('img');
33
img.src = imgSrc;
44
img.width = 1000;
55
img.height = 1000;
66
console.log(img)
77
var rgb = getAverageRGB(img);
8-
return "rgb(" + Math.floor(convertRange(rgb.r, [ 0, 255 ], [ 0, 200 ] )) + ", " + Math.floor(convertRange(rgb.g, [ 0, 255 ], [ 0, 200 ] )) + ", " + Math.floor(convertRange(rgb.b, [ 0, 255 ], [ 0, 200 ] )) + ")"
8+
return "rgb(" + Math.floor(convertRange(rgb.r, [ 0, 255 ], isDarkImg ? [80, 255] : [ 0, 200 ] )) + ", " + Math.floor(convertRange(rgb.g, [ 0, 255 ], isDarkImg ? [80, 255] : [ 0, 200 ] )) + ", " + Math.floor(convertRange(rgb.b, [ 0, 255 ], isDarkImg ? [80, 255] : [ 0, 200 ] )) + ")"
99
}
1010
function convertRange( value, r1, r2 ) {
1111
return ( value - r1[ 0 ] ) * ( r2[ 1 ] - r2[ 0 ] ) / ( r1[ 1 ] - r1[ 0 ] ) + r2[ 0 ];

‎assets/js/nanobar.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/nanobar/demos.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html class="no-js">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<title>nanobar.js</title>
7+
<meta name="description" content="nanobar.js - Very very lightweight progress bars">
8+
<style>
9+
* {
10+
margin:0;
11+
padding:0;
12+
}
13+
.container {
14+
margin:0 auto;
15+
max-width: 72em;
16+
}
17+
#color, #centered {
18+
padding: 1em;
19+
background: #fff;
20+
float: left;
21+
width: 50%;
22+
box-sizing: border-box;
23+
}
24+
#color .nanobar, #centered .nanobar {
25+
margin-bottom: 2em;
26+
}
27+
28+
#color .nanobar .bar {
29+
background: #38f;
30+
border-radius: 4px;
31+
box-shadow: 0 0 10px #59d;
32+
height: 6px;
33+
margin: 0 auto;
34+
}
35+
#centered .nanobar .bar {
36+
background: url('img/rainbow.gif') 100%;
37+
height: 9px;
38+
}
39+
</style>
40+
</head>
41+
<body>
42+
43+
44+
<div class="container">
45+
<br>
46+
<h1 id="nanobar">nanobar.js</h1>
47+
<br>
48+
<div class="general-buttons">
49+
<button class="doc_go" onClick="simplebar.go(30)">nanobar.go(30)</button>
50+
<button class="doc_go" onClick="simplebar.go(60)">nanobar.go(60)</button>
51+
<button class="doc_go" onClick="simplebar.go(100)">nanobar.go(100)</button>
52+
</div>
53+
<br>
54+
<hr>
55+
<br>
56+
<section id="color">
57+
<button class="doc_go" onClick="colorbar.go(30)">nanobar.go(30)</button>
58+
<button class="doc_go" onClick="colorbar.go(60)">nanobar.go(60)</button>
59+
<button class="doc_go" onClick="colorbar.go(100)">nanobar.go(100)</button>
60+
</section>
61+
<section id="centered">
62+
<button class="doc_go" onClick="centeredbar.go(30)">nanobar.go(30)</button>
63+
<button class="doc_go" onClick="centeredbar.go(60)">nanobar.go(60)</button>
64+
<button class="doc_go" onClick="centeredbar.go(100)">nanobar.go(100)</button>
65+
</section>
66+
<p>© 2016
67+
<a href="https://github.com/jacoborus">jacoborus</a> -
68+
<a href="https://raw.github.com/jacoborus/nanobar/master/LICENSE">MIT License</a>
69+
</p>
70+
</div>
71+
72+
<script src="../nanobar.js"></script>
73+
<script>
74+
var simplebar = new Nanobar();
75+
simplebar.go(50);
76+
var colorbar = new Nanobar({target: document.getElementById('color')});
77+
colorbar.go(50);
78+
var centeredbar = new Nanobar({target: document.getElementById('centered')});
79+
centeredbar.go(50);
80+
</script>
81+
</body>
82+
</html>

‎html/game.html‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@
2929
<!-- Latest compiled and minified JavaScript -->
3030
<script src="color.js"></script>
3131

32-
<body style="background-color: transparent;">
32+
<body style="background-color: transparent;" id="tehbody">
33+
<h1 id="scorecount" style="color: black; padding-left: 20px">
34+
</h1>
3335
<center>
3436
<h1 class="words" style="font-family: captcha">
3537
</h1>
@@ -48,6 +50,7 @@ <h1 class="win2" style="display: none">
4850
</body>
4951
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
5052
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
53+
<script src="js/nanobar.min.js" crossorigin="anonymous"></script>
5154
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.8/sweetalert2.min.js"></script>
5255
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.8/sweetalert2.min.css">
5356
<script>
@@ -75,6 +78,21 @@ <h1 class="win2" style="display: none">
7578
]
7679
var out = []; // Initialise array of names of fruits
7780
var mappings = {};
81+
var options = {
82+
id: 'my-id',
83+
target: document.getElementById('tehbody')
84+
};
85+
86+
var nanobar = new Nanobar( options );
87+
var b = 0;
88+
var meee = setInterval(function () {
89+
b++
90+
nanobar.go( Math.round( (b / 600 ) * 100 ) )
91+
if(b > 600) {
92+
clearInterval(meee)
93+
}
94+
}, 100)
95+
7896
for (var i = 0; i < fruits.length; i++){ // Go throught fruit objects
7997
out.push(fruits[i].name) // Else, add the name of fruit to Array
8098
console.log(fruits[i].pics)
@@ -126,7 +144,7 @@ <h1 class="win2" style="display: none">
126144
console.log("Yay")
127145
pic = "url('legendary.png')"
128146
}
129-
$(".words").css("color", color(pic.replace("url('", "").replace("')", "")));
147+
$(".words").css("color", color(pic.replace("url('", "").replace("')", ""), fruits[2].pics.indexOf(pic) !== -1));
130148
randomMove($(".words")) // CHANGED: Now moves text each time
131149
current.pic = pic;
132150
current.word = word;
@@ -136,7 +154,7 @@ <h1 class="win2" style="display: none">
136154
$("html").css("background-image", ""); // Remove background image
137155
$("html").css("background-color", "black"); // Set the background black
138156
$(".words").remove() // Remove the current word (ie banana)
139-
$(".win2").text("You scored " + rounds + " points.") // Set winning text
157+
$(".win2").text("You scored " + (correct - incorrect) + " points.") // Set winning text
140158
$(".win2").fadeIn() // Fade in the winning text
141159
$(".sboard").fadeIn() // Fade in the scoreboard
142160
swal({ // Create a dialog box:
@@ -153,7 +171,7 @@ <h1 class="win2" style="display: none">
153171
data: {},
154172
headers: {
155173
"XName": name, // The data name and score, where name is what the user put in the box
156-
"XScore": rounds
174+
"XScore": (correct - incorrect)
157175
},
158176
dataType: 'json',
159177
success: function (data) { // Then when that data is successfully sent
@@ -170,23 +188,25 @@ <h1 class="win2" style="display: none">
170188
document.onkeyup = function () {}; // Finally, set the "onkeyup" function to empty so that users can't continue playing
171189
}, 60000)
172190

173-
var rounds = 0; // Start at 0 wins
174-
191+
var correct = 0; // Start at 0 wins
192+
var incorrect = 0
175193

176194
document.onkeyup = function (e) { // When someone lets go of a key
177195
var mapped = mappings[e.code] // Get the key from "mappings", which was defined earlier
178196
if(mapped == undefined) return; // If the key isn't registered, forget about it
179197
if (mapped == current.word) { // If the key is the correct one TODO: Count incorrect keys
180198
var key = choose(out) // Then pick two random fruits
181199
var key2 = choose(out) // ^
182-
rounds++; // Add 1 to the win counter
183-
if (rounds >= 40 && rounds <= 42) {
200+
correct++; // Add 1 to the win counter
201+
$("#scorecount").text(correct - incorrect)
202+
if (correct >= 40 && correct <= 42) {
184203
initPic("url('legendary.png')", key)
185204
} else {
186205
initPic(getImageFromName(key2), key) // And set the background and text to those random fruits
187206
}
188-
}
189-
else {
207+
} else {
208+
incorrect = incorrect + 1;
209+
$("#scorecount").text(correct - incorrect)
190210
}
191211

192212

‎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},{"name":"Points","score":10},{"name":"Yayy","score":108},{"name":"Jay","score":21},{"name":"Eoin","score":38},{"name":"Matthew","score":29},{"name":"Matthew","score":49},{"name":"Jay","score":27},{"name":"Yayyy","score":302}]
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},{"name":"Yayy","score":108},{"name":"Jay","score":21},{"name":"Eoin","score":38},{"name":"Matthew","score":29},{"name":"Matthew","score":49},{"name":"Jay","score":27},{"name":"Yayyy","score":302},{"name":"Shaquile","score":43},{"name":"James @ Packg","score":46},{"name":"JayWilliams","score":352},{"name":"Jay","score":292},{"name":"Steve","score":47},{"name":"Dave","score":-52},{"name":"Steve","score":39},{"name":"Jay","score":28}]

0 commit comments

Comments
 (0)