-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (115 loc) · 3.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<head>
<style>
#guesses {
width: 540px;
margin: 50px auto;
}
table{
/* background-color: rgb(70, 70, 70); */
color: black;
font-size:45px;
table-layout: fixed;
width: 100%;
border-spacing: 10px;
font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: bold;
}
table tr {
height: 100px;
}
table td {
text-align: center;
padding: 10px;
border: 2px solid #ccc;
}
td.correct{
background-color: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// variables in global scope
var answersLink = "https://raw.githubusercontent.com/Josh99bit/Wordle/main/wordle-answers-alphabetical.txt"
var guessLink = "https://raw.githubusercontent.com/Josh99bit/Wordle/main/wordle-allowed-guesses.txt"
var answerList=null
var guessList=null
function runKeyBindings(){
var chars = '';
$(document).on('keypress, keydown', function(event) {
var character = String.fromCharCode(event.keyCode).toUpperCase();
console.log(answerList)
if (event.keyCode==8) {
chars=chars.slice(0,-1);
var selector = ".r1 .c"+(chars.length+1);
$(selector).text("");
}else if ((event.keyCode>=65&&event.keyCode<=90&&chars.length<5)||(event.keyCode>=97&&event.keyCode<=122&&chars.length<5)){
chars += character;
var selector = ".r1 .c"+chars.length;
$(selector).text(chars.slice(-1).toUpperCase());
}else if (event.keyCode==13 && chars.length==5){
$(".r1 .c1").addClass("correct")
$(".r1 .c4").addClass("correct")
}
});
}
// when document is ready
$(document).ready( function() {
// when answers is ready
$.get(answersLink, function(answers){
answerList=answers
$.get(guessLink,function(guess){
guessList=guess
runKeyBindings()
})
})
});
</script>
</head>
<body>
<div id="guesses">
<table>
<tr class="r1">
<td class = "c1"></td>
<td class = "c2"></td>
<td class = "c3"></td>
<td class = "c4"></td>
<td class = "c5"></td>
</tr>
<tr class="r2">
<td class = "c1"></td>
<td class = "c2"></td>
<td class = "c3"></td>
<td class = "c4"></td>
<td class = "c5"></td>
</tr>
<tr class="r3">
<td class = "c1"></td>
<td class = "c2"></td>
<td class = "c3"></td>
<td class = "c4"></td>
<td class = "c5"></td>
</tr>
<tr class="r4">
<td class = "c1"></td>
<td class = "c2"></td>
<td class = "c3"></td>
<td class = "c4"></td>
<td class = "c5"></td>
</tr>
<tr class="r5">
<td class = "c1"></td>
<td class = "c2"></td>
<td class = "c3"></td>
<td class = "c4"></td>
<td class = "c5"></td>
</tr>
<tr class="r6">
<td class = "c1"></td>
<td class = "c2"></td>
<td class = "c3"></td>
<td class = "c4"></td>
<td class = "c5"></td>
</tr>
</table>
</div>
</body>