-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (136 loc) · 6.45 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bardle</title>
<link rel="icon" type="image/png" href="static/favicon-32x32.png" sizes="32x32" />
<script src="js/main.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
<script
src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
data-auto-replace-svg="nest"
></script>
<link rel="stylesheet" href="css/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body>
<div id="container">
<div id="game">
<header>
<i class="far fa-question-circle" id="help" style="font-size: 1.3rem;"></i>
<h1 class="title">BARDLE</h1>
<i class="fas fa-chart-bar" id="stats" style="font-size: 1.4rem;"></i>
</header>
<div id="board-container">
<!--
<h2 id="final-score"></h2>
-->
<div id="board"></div>
</div>
<div id="keyboard-container">
<div class="keyboard-row">
<button class="keyboard-button" data-key="q">q</button>
<button class="keyboard-button" data-key="w">w</button>
<button class="keyboard-button" data-key="e">e</button>
<button class="keyboard-button" data-key="r">r</button>
<button class="keyboard-button" data-key="t">t</button>
<button class="keyboard-button" data-key="y">y</button>
<button class="keyboard-button" data-key="u">u</button>
<button class="keyboard-button" data-key="i">i</button>
<button class="keyboard-button" data-key="o">o</button>
<button class="keyboard-button" data-key="p">p</button>
</div>
<div class="keyboard-row">
<div class="spacer-half"></div>
<button class="keyboard-button" data-key="a">a</button>
<button class="keyboard-button" data-key="s">s</button>
<button class="keyboard-button" data-key="d">d</button>
<button class="keyboard-button" data-key="f">f</button>
<button class="keyboard-button" data-key="g">g</button>
<button class="keyboard-button" data-key="h">h</button>
<button class="keyboard-button" data-key="j">j</button>
<button class="keyboard-button" data-key="k">k</button>
<button class="keyboard-button" data-key="l">l</button>
<div class="spacer-half"></div>
</div>
<div class="keyboard-row">
<button
class="keyboard-button"
data-key="enter"
class="wide-button"
>
Enter
</button>
<button class="keyboard-button" data-key="z">z</button>
<button class="keyboard-button" data-key="x">x</button>
<button class="keyboard-button" data-key="c">c</button>
<button class="keyboard-button" data-key="v">v</button>
<button class="keyboard-button" data-key="b">b</button>
<button class="keyboard-button" data-key="n">n</button>
<button class="keyboard-button" data-key="m">m</button>
<button class="keyboard-button" data-key="del" class="wide-button">
DEL
</button>
</div>
</div>
</div>
<div id="alert"></div>
<div id="help-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close-help">×</span>
<p>Guess the BARDLE and make the Bard proud.</p>
<p>A new BARDLE is available every day.</p>
<p>
<br>The Words:
</p>
<p id="methodology">
- I wrote a Python script that takes the Bard's complete works as input and extracts every 5 letter word into one big list. I found that the Bard wrote 2,948 distinct 5 letter words. These include everything from character names to words from play titles.<br><br>
- I then removed all the uninteresting words (in my opinion) like “every” and “great” and kept all the more unique, entertaining ones like “swain” and “apish” - not to mention all the words Shakespeare invented, like “batty” and “grime”! These made it to the final game.<br><br>
- My goal in editing the word list was to ensure that each answer has a Bard "feel," meaning every word is one you'd remember reading in Shakespeare or can easily imagine him using.<br><br>
- All answers are from Shakespeare's works, but valid 5 letter words not found in Shakespeare can be used as guesses.<br><br>
- If you’re curious where and how the Bard used a BARDLE word, filter for it in his complete works on <a href="https://www.gutenberg.org/files/100/100-h/100-h.htm">Project Gutenberg</a>. Try finding all the different contexts in which he used today's BARDLE!
</p>
<p id="bard">
<img src="static/bard_noodle.jpg" id="bard-noodle"/>
<br>Pictured: Big Bill eats his bardles
</p>
<hr />
<p>
BARDLE is dedicated to Dr. Salehi and the students of his Shakespeare elective.
</p>
<hr />
<p>
BARDLE is a spinoff of <a href="https://www.nytimes.com/games/wordle/index.html">Wordle</a> created by Josh Wardle. Don’t know how to play? Check out Wordle for the rules.
</p>
<hr />
<p id="footer">
<img src="static/bard_wink.png" id="bard-wink"/>
</p>
</div>
</div>
<div id="stats-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close-stats">×</span>
<div id="stats-header">
<h2>STATISTICS</h2>
</div>
<h3><strong>Total</strong>: <span id="total-played"></span></h3>
<h3><strong>Wins</strong>: <span id="total-wins"></span></h3>
<h3><strong>Win%</strong>: <span id="win-pct"></span></h3>
<h3>
<strong>Current Streak</strong>: <span id="current-streak"></span>
</h3>
</div>
</div>
</div>
</body>
</html>