-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
214 lines (210 loc) · 9.02 KB
/
index.html
File metadata and controls
214 lines (210 loc) · 9.02 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--Put meta data here-->
<!--Imports for JS and CSS files add jQuery-->
<link href="yahtzee.css" rel="stylesheet" />
<script src="Scripts/jquery-3.5.1.min.js"></script>
<script src="yahtzee.js"></script>
<title>Yahtzee</title>
</head>
<body>
<!--Banner (Add dice pics that change with each click) also use gridbox-->
<header id="banner" class="bannerCon">
<div class="bannerDie">
<img class="bannerImg" src="images/6.png" alt="6 dice"/>
</div>
<div class="bannerDie">
<h1 id="bannerHead">Yahtzee</h1>
</div>
<div class="bannerDie">
<img class="bannerImg" src="images/6.png" alt="6 dice"/>
</div>
</header>
<!--Main content-->
<main>
<!--Div to hold dice-->
<div id="dice">
<img class="die" id="dice1" src="images/q.png" alt="First dice"/>
<img class="die" id="dice2" src="images/q.png" alt="second dice"/>
<img class="die" id="dice3" src="images/q.png" alt="third dice"/>
<img class="die" id="dice4" src="images/q.png" alt="forth dice"/>
<img class="die" id="dice5" src="images/q.png" alt="fifth dice"/>
<!--Button for rolling-->
<div id="rbDiv">
<input id="rollButton" type="button" value="Roll the dice!" />
<p id="rollCount">3 roll(s) remaining.</p>
<p id="info">Click on a die to prevent rerolling. Click again to undo.</p>
</div>
</div>
<!--Div to hold the score tables-->
<div id="tableDiv">
<!--Upper score table-->
<table id="leftTable">
<tr>
<th>Category</th>
<th>Description</th>
<th>How to score</th>
<th>Points</th>
<th>Submit</th>
</tr>
<tr>
<td>Ones</td>
<td>Any combination</td>
<td>Sum of dice with "1"</td>
<td class="scoreCol" id="oneScore">0</td>
<td><input class="subButt" id="oneSub" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Twos</td>
<td>Any combination</td>
<td>Sum of dice with "2"</td>
<td class="scoreCol" id="twoScore">0</td>
<td><input class="subButt" id="twoSub" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Threes</td>
<td>Any combination</td>
<td>Sum of dice with "3"</td>
<td class="scoreCol" id="threeScore">0</td>
<td><input class="subButt" id="threeSub" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Fours</td>
<td>Any combination</td>
<td>Sum of dice with "4"</td>
<td class="scoreCol" id="fourScore">0</td>
<td><input class="subButt" id="fourSub" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Fives</td>
<td>Any combination</td>
<td>Sum of dice with "5"</td>
<td class="scoreCol" id="fiveScore">0</td>
<td><input class="subButt" id="fiveSub" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Sixes</td>
<td>Any combination</td>
<td>Sum of dice with "6"</td>
<td class="scoreCol" id="sixScore">0</td>
<td><input class="subButt" id="sixSub" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Subtotal</td>
<td>Upper subtotal</td>
<td>Sum of above six rows</td>
<td class="scoreCol" id="upperSub">0</td>
<td hidden></td>
</tr>
<tr>
<td>Bonus</td>
<td>Awarded if subtotal is 63 or more</td>
<td>Score 35</td>
<td class="scoreCol" id="upperBonus">0</td>
<td hidden></td>
</tr>
<tr>
<th colspan="3">Upper total</th>
<th class="scoreCol" id="upperTotal">0</th>
<td hidden></td>
</tr>
</table>
<!--Lower score table-->
<table id="rightTable">
<tr>
<th>Category</th>
<th>Description</th>
<th>How to score</th>
<th>Points</th>
<th>Submit</th>
</tr>
<tr>
<td>Three of a kind</td>
<td>Minimum of three dice the same</td>
<td>Sum of all dice</td>
<td class="scoreCol" id="tokScore">0</td>
<td><input class="subButt" id="tokButt" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Four of a kind</td>
<td>Minimum of four dice the same</td>
<td>Sum of all dice</td>
<td class="scoreCol" id="fokScore">0</td>
<td><input class="subButt" id="fokButt" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Full house</td>
<td>Three of one number and two of another</td>
<td>Score 25</td>
<td class="scoreCol" id="fhScore">0</td>
<td><input class="subButt" id="fhButt" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Small straight</td>
<td>Four dice in sequence</td>
<td>Score 30</td>
<td class="scoreCol" id="ssScore">0</td>
<td><input class="subButt" id="ssButt" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Large straight</td>
<td>Five dice in sequence</td>
<td>Score 40</td>
<td class="scoreCol" id="lsScore">0</td>
<td><input class="subButt" id="lsButt" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Yahtzee</td>
<td>All dice the same</td>
<td>Score 50</td>
<td class="scoreCol" id="yahScore">0</td>
<td><input class="subButt" id="yahButt" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Chance</td>
<td>Any combination</td>
<td>Sum of all dice</td>
<td class="scoreCol" id="chScore">0</td>
<td><input class="subButt" id="chButt" type="button" value="Submit" /></td>
</tr>
<tr>
<td>Yahtzee bonus</td>
<td>Additional Yahtzees</td>
<td>Score 100 each</td>
<td class="scoreCol" id="yahBonus">0</td>
<td hidden></td>
</tr>
<tr>
<th colspan="3">Lower total</th>
<th class="scoreCol" id="lowerTotal">0</th>
<td hidden></td>
</tr>
</table>
</div>
<!--Total score table-->
<div id="totalScoreDiv">
<table id="totalScoreTab">
<tr>
<th>Your total score:</th>
<th class="scoreCol" id="totalScore">0</th>
</tr>
</table>
<input id="resetButt" type="button" value="Restart game" />
</div>
</main>
<!--Footer-->
<footer>
<p>
Read the Yahtzee rules <a href="https://www.hasbro.com/common/instruct/yahtzee.pdf" target="_blank">here</a>.
<span class="badges">
Validation:
<!--HTML CSS validation links-->
<a href="https://validator.w3.org/#validate_by_input"><img src="images/200px-HTML5_logo_and_wordmark.png" alt="HTML5 validation" height="50" width="50" /></a>
<a href="https://jigsaw.w3.org/css-validator/#validate_by_input"><img src="images/CSS3_logo_and_wordmark.svg(1).png" alt="CSS validation" height="50" width="35" /></a>
</span>
</p>
</footer>
</body>
</html>