-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
374 lines (365 loc) · 23.2 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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yahtzee Score Keeper - Start Screen</title>
<script src="https://kit.fontawesome.com/b7e26214dd.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./assets/css/style.css" type="text/css">
</head>
<body>
<!-- Top Navigation Menu -->
<nav class="topnav">
<div id="navLogo">
<span>Y</span>
<span>A</span>
<span>H</span>
<span>T</span>
<span>Z</span>
<span>E</span>
<span>E</span>
</div>
<div id="navLinks">
<button class="navLink modalButton startPlayingButton" id="navStartGameButton" data-roleClass="startPlaying">Start Playing</button>
<button class="navLink" id="playAgainButton">Play Again!</button>
<button class="navLink" id="navEndGameButton">End Game</button>
<button class="navLink modalButton yahtzeeRulesButton" data-roleClass="yahtzeeRules">Yahtzee Rules</button>
<button class="navLink modalButton howSiteWorksButton" data-roleClass="howSiteWorks">How This Site Works</button>
<a href="https://github.com/petter0619/yahtzeeScoreKeeper_repo" target="_blank" class="navLink"><i class="fab fa-github"></i></a>
</div>
<button class="icon">
<i class="fa fa-bars"></i>
</button>
</nav>
<!-- //.endTopNavigationMenu -->
<!-- Start Screen -->
<div id="startScreen">
<div id="logoWrapper">
<span>Y</span>
<span>A</span>
<span>H</span>
<span>T</span>
<span>Z</span>
<span>E</span>
<span>E</span>
</div>
<h1>Score <span class="blankSpace"> </span>Keeper</h1>
<button class="modalButton startPlayingButton" data-roleClass="startPlaying">Start Playing</button>
<button class="modalButton yahtzeeRulesButton" data-roleClass="yahtzeeRules">Yahtzee Rules</button>
<button class="modalButton howSiteWorksButton" data-roleClass="howSiteWorks">How This Site Works</button>
</div>
<!-- //.endStartScreen -->
<!-- Game Screen -->
<div id="gameScreen">
<h1 id="roundCounter">Round 1 of 15</h1>
<!-- Dice Area -->
<div id="diceArea">
<div class="diceBlock">
<div class="diceHolder" data-locked="false" data-diceSlot="1"></div>
<button data-roleClass="diceLock" data-locked="false" data-diceSlot="1" disabled="true">Lock</button>
</div>
<div class="diceBlock">
<div class="diceHolder" data-locked="false" data-diceSlot="2"></div>
<button data-roleClass="diceLock" data-locked="false" data-diceSlot="2" disabled="true">Lock</button>
</div>
<div class="diceBlock">
<div class="diceHolder" data-locked="false" data-diceSlot="3"></div>
<button data-roleClass="diceLock" data-locked="false" data-diceSlot="3" disabled="true">Lock</button>
</div>
<div class="diceBlock">
<div class="diceHolder" data-locked="false" data-diceSlot="4"></div>
<button data-roleClass="diceLock" data-locked="false" data-diceSlot="4" disabled="true">Lock</button>
</div>
<div class="diceBlock">
<div class="diceHolder" data-locked="false" data-diceSlot="5"></div>
<button data-roleClass="diceLock" data-locked="false" data-diceSlot="5" disabled="true">Lock</button>
</div>
</div>
<!-- //..diceArea -->
<!-- Game Button Area -->
<div id="gameButtonArea">
<div id="rollDiceSection">
<span id="playerTurnText">(Player 1 name)'s turn</span>
<button id="rollDiceButton">Roll Dice</button>
<span id="throwsLeftText">3 throws left</span>
</div>
<div id="saveRollResultSection">
<form class="saveRollResult" autocomplete="off">
<select id="scoreSectionSelect" name="scoreSectionSelect">
<option value="--- Select Option ---">--- Select Option ---</option>
<optgroup label="Dice Values">
<option value="aces">Aces</option>
<option value="twos">Twos</option>
<option value="threes">Threes</option>
<option value="fours">Fours</option>
<option value="fives">Fives</option>
<option value="sixes">Sixes</option>
</optgroup>
<optgroup label="Poker Values">
<option value="onePair">One Pair</option>
<option value="twoPair">Two Pair</option>
<option value="threeOfAKind">Three of a Kind</option>
<option value="fourOfAKind">Four of a Kind</option>
<option value="smallStraight">Small Straight</option>
<option value="largeStraight">Large Straight</option>
<option value="fullHouse">Full House</option>
<option value="yahtzee">Yahtzee</option>
<option value="chance">Chance</option>
</optgroup>
</select>
<button type="submit" id="saveRollResultButton" disabled="true">Save Result</button>
</form>
</div>
</div>
<!-- //.gameButtonArea -->
<!-- Score Area -->
<div id="scoreArea">
<div id="gameScoreTable">
<div class="column" id="scoreCategoryCol">
<div class="catNameHolder scoreHeader">Score Category</div>
<div class="catNameHolder">Aces</div>
<div class="catNameHolder">Twos</div>
<div class="catNameHolder">Threes</div>
<div class="catNameHolder">Fours</div>
<div class="catNameHolder">Fives</div>
<div class="catNameHolder">Sixes</div>
<div class="catNameHolder" data-roleClass="upperSum">SUM</div>
<div class="catNameHolder" data-roleClass="upperBonus">BONUS</div>
<div class="catNameHolder">One Pair</div>
<div class="catNameHolder">Two Pair</div>
<div class="catNameHolder">Three of a Kind</div>
<div class="catNameHolder">Four of a Kind</div>
<div class="catNameHolder">Small Straight</div>
<div class="catNameHolder">Large Straight</div>
<div class="catNameHolder">Full House</div>
<div class="catNameHolder">Yahtzee</div>
<div class="catNameHolder">Chance</div>
<div class="catNameHolder" data-roleClass="totalScore">TOTAL SCORE</div>
</div>
<div class="column playerCol" data-playerNumber="0" data-currentPlayer="true">
<div class="scoreHeader" data-roleClass="playerName"></div>
<div class="scoreHolder" data-roleClass="aces"></div>
<div class="scoreHolder" data-roleClass="twos"></div>
<div class="scoreHolder" data-roleClass="threes"></div>
<div class="scoreHolder" data-roleClass="fours"></div>
<div class="scoreHolder" data-roleClass="fives"></div>
<div class="scoreHolder" data-roleClass="sixes"></div>
<div class="scoreHolder" data-roleClass="upperSum"></div>
<div class="scoreHolder" data-roleClass="upperBonus"></div>
<div class="scoreHolder" data-roleClass="onePair"></div>
<div class="scoreHolder" data-roleClass="twoPair"></div>
<div class="scoreHolder" data-roleClass="threeOfAKind"></div>
<div class="scoreHolder" data-roleClass="fourOfAKind"></div>
<div class="scoreHolder" data-roleClass="smallStraight"></div>
<div class="scoreHolder" data-roleClass="largeStraight"></div>
<div class="scoreHolder" data-roleClass="fullHouse"></div>
<div class="scoreHolder" data-roleClass="yahtzee"></div>
<div class="scoreHolder" data-roleClass="chance"></div>
<div class="scoreHolder" data-roleClass="totalScore"></div>
</div>
<div class="column playerCol" data-playerNumber="1" data-currentPlayer="false">
<div class="scoreHeader" data-roleClass="playerName"></div>
<div class="scoreHolder" data-roleClass="aces"></div>
<div class="scoreHolder" data-roleClass="twos"></div>
<div class="scoreHolder" data-roleClass="threes"></div>
<div class="scoreHolder" data-roleClass="fours"></div>
<div class="scoreHolder" data-roleClass="fives"></div>
<div class="scoreHolder" data-roleClass="sixes"></div>
<div class="scoreHolder" data-roleClass="upperSum"></div>
<div class="scoreHolder" data-roleClass="upperBonus"></div>
<div class="scoreHolder" data-roleClass="onePair"></div>
<div class="scoreHolder" data-roleClass="twoPair"></div>
<div class="scoreHolder" data-roleClass="threeOfAKind"></div>
<div class="scoreHolder" data-roleClass="fourOfAKind"></div>
<div class="scoreHolder" data-roleClass="smallStraight"></div>
<div class="scoreHolder" data-roleClass="largeStraight"></div>
<div class="scoreHolder" data-roleClass="fullHouse"></div>
<div class="scoreHolder" data-roleClass="yahtzee"></div>
<div class="scoreHolder" data-roleClass="chance"></div>
<div class="scoreHolder" data-roleClass="totalScore"></div>
</div>
<div class="column playerCol" data-playerNumber="2" data-currentPlayer="false">
<div class="scoreHeader" data-roleClass="playerName"></div>
<div class="scoreHolder" data-roleClass="aces"></div>
<div class="scoreHolder" data-roleClass="twos"></div>
<div class="scoreHolder" data-roleClass="threes"></div>
<div class="scoreHolder" data-roleClass="fours"></div>
<div class="scoreHolder" data-roleClass="fives"></div>
<div class="scoreHolder" data-roleClass="sixes"></div>
<div class="scoreHolder" data-roleClass="upperSum"></div>
<div class="scoreHolder" data-roleClass="upperBonus"></div>
<div class="scoreHolder" data-roleClass="onePair"></div>
<div class="scoreHolder" data-roleClass="twoPair"></div>
<div class="scoreHolder" data-roleClass="threeOfAKind"></div>
<div class="scoreHolder" data-roleClass="fourOfAKind"></div>
<div class="scoreHolder" data-roleClass="smallStraight"></div>
<div class="scoreHolder" data-roleClass="largeStraight"></div>
<div class="scoreHolder" data-roleClass="fullHouse"></div>
<div class="scoreHolder" data-roleClass="yahtzee"></div>
<div class="scoreHolder" data-roleClass="chance"></div>
<div class="scoreHolder" data-roleClass="totalScore"></div>
</div>
<div class="column playerCol" data-playerNumber="3" data-currentPlayer="false">
<div class="scoreHeader" data-roleClass="playerName"></div>
<div class="scoreHolder" data-roleClass="aces"></div>
<div class="scoreHolder" data-roleClass="twos"></div>
<div class="scoreHolder" data-roleClass="threes"></div>
<div class="scoreHolder" data-roleClass="fours"></div>
<div class="scoreHolder" data-roleClass="fives"></div>
<div class="scoreHolder" data-roleClass="sixes"></div>
<div class="scoreHolder" data-roleClass="upperSum"></div>
<div class="scoreHolder" data-roleClass="upperBonus"></div>
<div class="scoreHolder" data-roleClass="onePair"></div>
<div class="scoreHolder" data-roleClass="twoPair"></div>
<div class="scoreHolder" data-roleClass="threeOfAKind"></div>
<div class="scoreHolder" data-roleClass="fourOfAKind"></div>
<div class="scoreHolder" data-roleClass="smallStraight"></div>
<div class="scoreHolder" data-roleClass="largeStraight"></div>
<div class="scoreHolder" data-roleClass="fullHouse"></div>
<div class="scoreHolder" data-roleClass="yahtzee"></div>
<div class="scoreHolder" data-roleClass="chance"></div>
<div class="scoreHolder" data-roleClass="totalScore"></div>
</div>
<div class="column playerCol" data-playerNumber="4" data-currentPlayer="false">
<div class="scoreHeader" data-roleClass="playerName"></div>
<div class="scoreHolder" data-roleClass="aces"></div>
<div class="scoreHolder" data-roleClass="twos"></div>
<div class="scoreHolder" data-roleClass="threes"></div>
<div class="scoreHolder" data-roleClass="fours"></div>
<div class="scoreHolder" data-roleClass="fives"></div>
<div class="scoreHolder" data-roleClass="sixes"></div>
<div class="scoreHolder" data-roleClass="upperSum"></div>
<div class="scoreHolder" data-roleClass="upperBonus"></div>
<div class="scoreHolder" data-roleClass="onePair"></div>
<div class="scoreHolder" data-roleClass="twoPair"></div>
<div class="scoreHolder" data-roleClass="threeOfAKind"></div>
<div class="scoreHolder" data-roleClass="fourOfAKind"></div>
<div class="scoreHolder" data-roleClass="smallStraight"></div>
<div class="scoreHolder" data-roleClass="largeStraight"></div>
<div class="scoreHolder" data-roleClass="fullHouse"></div>
<div class="scoreHolder" data-roleClass="yahtzee"></div>
<div class="scoreHolder" data-roleClass="chance"></div>
<div class="scoreHolder" data-roleClass="totalScore"></div>
</div>
<div class="column playerCol" data-playerNumber="5" data-currentPlayer="false">
<div class="scoreHeader" data-roleClass="playerName"></div>
<div class="scoreHolder" data-roleClass="aces"></div>
<div class="scoreHolder" data-roleClass="twos"></div>
<div class="scoreHolder" data-roleClass="threes"></div>
<div class="scoreHolder" data-roleClass="fours"></div>
<div class="scoreHolder" data-roleClass="fives"></div>
<div class="scoreHolder" data-roleClass="sixes"></div>
<div class="scoreHolder" data-roleClass="upperSum"></div>
<div class="scoreHolder" data-roleClass="upperBonus"></div>
<div class="scoreHolder" data-roleClass="onePair"></div>
<div class="scoreHolder" data-roleClass="twoPair"></div>
<div class="scoreHolder" data-roleClass="threeOfAKind"></div>
<div class="scoreHolder" data-roleClass="fourOfAKind"></div>
<div class="scoreHolder" data-roleClass="smallStraight"></div>
<div class="scoreHolder" data-roleClass="largeStraight"></div>
<div class="scoreHolder" data-roleClass="fullHouse"></div>
<div class="scoreHolder" data-roleClass="yahtzee"></div>
<div class="scoreHolder" data-roleClass="chance"></div>
<div class="scoreHolder" data-roleClass="totalScore"></div>
</div>
</div>
</div>
<!-- //.scoreArea -->
</div>
<!-- //.endGameScreen -->
<!-- Modals -->
<div class="modal-outer">
<div class="modal-inner">
<span id="closeModalIcon"><i class="far fa-window-close"></i> Close</span>
<div data-roleClass="startPlaying">
<h5>Add Players</h5>
<p>
One at a time, enter the names of each player into the box below and click the button to
add them to the game. Once all players are added click the "Start Game" button at the
bottom to begin the game.
</p>
<p>
You need a minimum of 2 players, and are allowed a maximum of 6 players.
</p>
<div class="addPlayerList">
<form class="addPlayer" autocomplete="off">
<input type="text" name="playerName" id="item" required>
<button type="submit">+ Add Player</button>
</form>
<ul class="playersAdded"></ul>
</div>
<div id="startGameButtonDiv">
<button id="startGameButton">Start Game</button>
</div>
</div>
<div data-roleClass="yahtzeeRules">
<h5>Yahtzee Rules</h5>
<p>
What follows are the rules for the Swedish version of Yahtzee.
</p>
<p>
The game consists of a number of rounds. In each round, a player gets three rolls of the dice,
although they can choose to end their turn after one or two rolls. After the first roll the
player can save any dice they want and re-roll the other dice. This procedure is repeated after
the second roll. The player has complete choice as to which dice to roll. It is possible to
re-roll both dice that were or were not rolled before.
</p>
<p>
The Yahtzee scorecard contains 15 different category boxes and in each round, after the third roll,
the player must choose one of these categories. The score entered in the box depends on how well
the five dice match the scoring rule for the category. Details of the scoring rules for each category
are given below.
</p>
<p>
The Yahtzee scorecard contains 15 scoring boxes divided into 2 parts.
</p>
<h6>Part 1 - Dice Values</h6>
<p>
In the first part there are six scores. Each of these scores is determined by adding the total
number of dice matching the selected category. The categories correspond to each respective dice face.
As an example, if three of your five dice rolled a 3, and you choose to add this result to the part 1
category "Threes" you will get a score of
9 ( = 3 * 3).
</p>
<img src="./assets/media/images/yahtzeeRulesTablePart1.png" alt="">
<p>
If a player scores a total of 63 or more points in these six categories from part 1, a bonus of
50 is added to the upper section score. Although 63 points corresponds to scoring exactly
three-of-a-kind for each of the six boxes, a common way to get the bonus is by scoring
four-of-a-kind for some numbers so that fewer of other numbers are needed.
</p>
<h6>Part 2 - Poker Values</h6>
<p>
The second part contains a number of poker-themed categories with specific point values.
As an example, one of the categories is called Three of a Kind. The scoring rule for this category
means that a player only scores if at least three of the five dice are the same value. The Chance category
is often used for a turn that will not score well in any other category.
</p>
<img src="./assets/media/images/yahtzeeRulesTablePart2.png" alt="">
<p>
The game is completed after 15 rounds by each player, with each of the 15 boxes filled. The total score is
calculated by summing all thirteen boxes, together with any bonuses.
</p>
</div>
<div data-roleClass="howSiteWorks">
<h5>How This Site Works</h5>
<p><strong>Step 1)</strong> Click either the "Start Playing" button or the "Start Playing" link in the top menu.</p>
<img src="./assets/media/images/step1-startPlayingButton.png" alt="">
<p><strong>Step 2)</strong> Enter the names of the players (min. 2 and max 6) into the textbox and press 'Add Player' to add them to the list. Once all players are added, press the "Start Game" button to begin the game.</p>
<img src="./assets/media/images/step2-addPlayers+startGame.png" alt="">
<p><strong>Step 3)</strong> Click the "Roll Dice" button to roll the dice. The result of the dice roll will appear inside the yellow dice holders. You have 3 rolls per round.</p>
<img src="./assets/media/images/step3-rollDice.png" alt="">
<p><strong>Step 4)</strong> You can press the "Lock" buttons under any of the dice holders to prevent that dice from being 'thrown' during your next role. You can also 'unlock' any locked dice by pressing the 'Unlock' button.</p>
<img src="./assets/media/images/step4-pressDiceLockButtons.png" alt="">
<p><strong>Step 5)</strong> Whenever you feel you want to save the result of your 5 dice, select the category you want to save the result to using the dropdown menu and then press the "Save Result" button. The score will be calculated and added to the table below.</p>
<p>If you are on a mobile device, then only the current player's score table will show at any one time.</p>
<img src="./assets/media/images/step5-saveResult.png" alt="">
<p><strong>Step 6)</strong> After the final round, the winner will be declared in the header. Simply press 'End Game' in the top navigation or reload the page to return to the starting screen; where you can begin another game if you wish.</p>
</div>
</div>
</div>
<!-- //.modals -->
<!-- Javascript -->
<script src="./assets/javascript/script.js" type="text/javascript"></script>
</body>
</html>