Skip to content

Commit dc480e6

Browse files
dmreiterdmreiter
committed
small quality upgrades
1 parent 560d5ca commit dc480e6

File tree

4 files changed

+55
-25
lines changed

4 files changed

+55
-25
lines changed

‎index.html

+7-9
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,18 @@
22
<html>
33
<head>
44
<meta charset="utf-8" />
5-
<title>Ayumu</title>
6-
<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
5+
<title>ayumu</title>
6+
<link href="https://fonts.googleapis.com/css?family=Roboto:900,500" rel="stylesheet">
77
</head>
88
<body>
99
<div id='game'></div>
1010
<div id='input'>
11-
<input id='delay' type='range' min='100' max='3000' value='210' oninput='delayout.value = delay.value + "ms"' step='10'>
12-
<br><output id='delayout'>210ms</output>
13-
<br><input id='numbers' type='range' min='1' max='9' value='9' oninput='numbersout.value = numbers.value + " number(s)"'>
14-
<br><output id='numbersout'>9 number(s)</output>
15-
</div>
16-
<div id='info'>
17-
press any key for a new round
11+
<input id='delay' type='range' min='100' max='3000' value='210' oninput='delayout.value = delay.value' step='10'>
12+
<br><input id='delayout' type='text' value='210' onkeypress='return in_range(event);' oninput='delay.value = delayout.value;' onclick='delayout.value = ""' /><span> ms</span>
13+
<br><input id='numbers' type='range' min='1' max='9' value='9' oninput='numbersout.value = numbers.value'>
14+
<br><input id='numbersout' type='text' value='9' onkeypress='return is_number(event)' oninput='numbers.value = numbersout.value;' onclick='numbersout.value = ""' /><span> number(s)</span>
1815
</div>
16+
<div id='info'> press r for a new round </div>
1917
<script src="./js/helpers.js"></script>
2018
<script src="./js/game.js"></script>
2119
<script src="./js/script.js"></script>

‎js/helpers.js

+20
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,24 @@ const get_random = n => {
1111
taken[x] = --len in taken ? taken[len] : len;
1212
}
1313
return result.sort();
14+
}
15+
16+
function is_number(evt) {
17+
evt = (evt) ? evt : window.event;
18+
var charCode = (evt.which) ? evt.which : evt.keyCode;
19+
console.log(charCode);
20+
if (charCode > 31 && (charCode < 48 || charCode > 57) || document.querySelector('#numbersout').value) {
21+
return false;
22+
}
23+
return true;
24+
}
25+
26+
function in_range(evt) {
27+
evt = (evt) ? evt : window.event;
28+
var charCode = (evt.which) ? evt.which : evt.keyCode;
29+
const nextval = `${document.querySelector('#delayout').value}${charCode - 48}`;
30+
if (charCode > 31 && (charCode < 48 || charCode > 57) || (nextval > 3000)) {
31+
return false;
32+
}
33+
return true;
1434
}

‎js/script.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
console.log('Trying to cheat now, are we?');
1+
console.log('Trying to cheat now, are we? :(');
22
const game = new Game();
33

44
document.addEventListener('keypress', (event) => {
5-
game.new_round();
5+
if (event.keyCode == 114) {
6+
game.new_round();
7+
}
68
});

‎styles.css

+24-14
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
body {
2-
background-color: #222222
2+
background-color: #222222;
3+
font-family: 'Roboto', sans-serif;
4+
font-weight: 500;
35
}
46

5-
output {
7+
span {
68
font-size: 40px;
79
color: #DDDDDD;
810
text-align: center;
9-
min-width: 1000px
1011
}
1112

1213
#game {
@@ -34,25 +35,34 @@ output {
3435
text-align: center;
3536
padding-top: 10px;
3637
color: #DDDDDD;
37-
font-family: 'Roboto', sans-serif;
3838
transition: 0.1s;
39-
border-radius: 5px
39+
border-radius: 5px;
40+
font-weight: 900;
4041
}
4142

4243
.box-number {
4344
cursor: pointer
4445
}
4546

46-
#input {
47-
padding-top: 20px;
47+
input[type=text] {
48+
height: 50px;
49+
border: 0;
50+
border-bottom: 2px solid #DDDDDD;
4851
text-align: center;
52+
width: 100px;
53+
outline: none;
54+
font-size: 40px;
55+
color: #DDDDDD;
56+
-webkit-transition: border 0.3s;
57+
transition: border 0.3s;
58+
background-color: transparent;
59+
}
60+
61+
input[type=text]:focus {
62+
border-bottom: 2px solid steelblue;
4963
}
5064

51-
#input input {
52-
margin: 5px;
53-
padding: 0 5px;
54-
border-radius: 10px;
55-
outline: none !important;
56-
border: none;
57-
height: 30px
65+
#input {
66+
padding-top: 20px;
67+
text-align: center;
5868
}

0 commit comments

Comments
 (0)