-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (139 loc) · 6.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/reset.css">
<link rel="stylesheet" href="./styles/home.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>Zilch</title>
</head>
<body>
<div class="wrap">
<div class="login">
<h1>Zilch:</h1>
<form id="form">
<label>Player One
<input type="text" id="player-one-name" name="player1" placeholder="Name" required></label>
<label>Player Two
<input type="text" id="player-two-name" name="player2" placeholder="Name" required></label>
<label>Goal<input id="set-score" type="number" value="10000" min="1000" required></label>
<button>Play!</button>
</form>
<h2>The dice game.</h2>
</div>
<div class="info-buttons">
<button id="rules-button">Rules</button>
<button id="scoring-button">Scoring</button>
</div>
</div>
<div id="rules-modal">
<div class="rules-modal-wrap">
<div class="rules-modal-inner">
<h2>ZILCH RULES</h2>
<h3>Roll Dice</h3>
<p>You start your turn by rolling all six dice.</p>
<h3>Rolled scoring dice?</h3>
<p>If you rolled some scoring dice then you need to take some of those points before you can roll again. </p>
<h3>No scoring dice? You zilched!</h3>
<p>You bank no points and it's the end of your turn. If this is your third zilch in a row then you lose 500 points.</p>
<h3>Scored 300 or more? Bank the points.</h3>
<p>Once you have taken at least 300 points you can choose to bank them and end your turn or keep on rolling the dice. But careful, if you keep rolling you could zilch out.</p>
<h3>Re-roll the remaining dice</h3>
<p>You can reroll any dice that you didn't score with. Once you have scored points from all six dice
you
get a free roll!</p>
</div>
<button id="rules-modal-close">Close</button>
</div>
</div>
<div id="scoring-modal">
<div class="scoring-modal-wrap">
<h2>SCORING</h2>
<div class="scoring-modal-grid">
<div class="scoring-modal-half">
<h3>Single die</h3>
<div class="scoring-dice">
<i class="fas fa-dice-one"></i><span>100 Points Each</span>
</div>
<div class="scoring-dice">
<i class="fas fa-dice-five"></i><span>50 Points Each</span>
</div>
<h3>Three of a Kind</h3>
<div class="scoring-dice">
<i class="fas fa-dice-one"></i>
<i class="fas fa-dice-one"></i>
<i class="fas fa-dice-one"></i><span>1000 Points</span>
</div>
<div class="scoring-dice">
<i class="fas fa-dice-two"></i>
<i class="fas fa-dice-two"></i>
<i class="fas fa-dice-two"></i><span>200 Points</span>
</div>
<div class="scoring-dice">
<i class="fas fa-dice-three"></i>
<i class="fas fa-dice-three"></i>
<i class="fas fa-dice-three"></i><span>300 Points</span>
</div>
<div class="scoring-dice"><i class="fas fa-dice-four"></i>
<i class="fas fa-dice-four"></i>
<i class="fas fa-dice-four"></i><span>400Points</span>
</div>
<div class="scoring-dice">
<i class="fas fa-dice-five"></i>
<i class="fas fa-dice-five"></i>
<i class="fas fa-dice-five"></i><span>500 Points</span>
</div>
<div class="scoring-dice"><i class="fas fa-dice-six"></i>
<i class="fas fa-dice-six"></i>
<i class="fas fa-dice-six"></i><span>600 Points</span>
</div>
</div>
<div class="scoring-modal-half">
<h3> Four or More of a Kind:</h3> <div class="subtext">Every Extra Die Doubles the Three of a Kind Score</div>
<div class="scoring-dice">
<i class="fas fa-dice-three"></i>
<i class="fas fa-dice-three"></i>
<i class="fas fa-dice-three"></i>
<i class="fas fa-dice-three"></i><span>600 Points</span>
</div>
<div class="scoring-dice">
<i class="fas fa-dice-three"></i>
<i class="fas fa-dice-three"></i>
<i class="fas fa-dice-three"></i>
<i class="fas fa-dice-three"></i>
<i class="fas fa-dice-three"></i><span>1200 Points</span>
</div>
<h3>Straight</h3>
<div class="scoring-dice">
<i class="fas fa-dice-one"></i>
<i class="fas fa-dice-two"></i>
<i class="fas fa-dice-three"></i>
<i class="fas fa-dice-four"></i>
<i class="fas fa-dice-five"></i>
<i class="fas fa-dice-six"></i>
</div>
<span>1500 Points</span>
<h3>Any Three Pairs</h3>
<div class="scoring-dice">
<i class="fas fa-dice-two"></i>
<i class="fas fa-dice-two"></i>
<i class="fas fa-dice-four"></i>
<i class="fas fa-dice-four"></i>
<i class="fas fa-dice-five"></i>
<i class="fas fa-dice-five"></i>
</div>
<span>1500 Points</span>
</div>
</div>
<div class="modal-footer">No Score on First Round? No! You actually scored 500 Points</div>
<button id="scoring-modal-close">Close</button>
</div>
</div>
<script type="module" src="./app.js"></script>
</body>
</html>