-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
135 lines (133 loc) · 7.06 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
<!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">
<title>Yahtzee | Everyone's favorite dice game!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<header class="row">
<a href="#"><h1 class="text-center animated fadeInDown col-md-12"><img src="https://upload.wikimedia.org/wikipedia/commons/8/80/Yahtzee_logo.svg" alt="Yahtzee logo"></h1></a>
</header>
</div>
<!-- Add player and start button -->
<div id="start-wrapper" class="container">
<div class="row">
<div id="add-player" class="text-center col-md-12">
<div class="ui action input">
<input id="name-input" type="text" autofocus="0" placeholder="Enter player name ...">
<button id="add-btn" class="ui green right labeled icon button"><i class="add user icon"></i>Add Player</button>
</div>
</div>
<div id="start-game" class="text-center col-md-12 start-game">
<button id="start-btn" class="ui red button">Start Game</button>
</div>
</div>
</div>
<!-- // Add player and start button // -->
<!-- Dice board and score card -->
<div class="container">
<div class="row">
<div id="dice-board" class="dice-board col-md-6 col-sm-4">
<div>
<div id="die0" class="dice"></div>
<div id="die1" class="dice"></div>
<div id="die2" class="dice"></div>
<div id="die3" class="dice"></div>
<div id="die4" class="dice"></div>
</div>
<div id="roll-dice" class="roll-dice text-center">
<button id="roll-btn" class="ui button red">Roll Dice</button>
<div id="rolls-wrapper" class="rolls-wrapper"><strong>Remaining Roll(s):</strong> <span id="rolls-left"></span></div>
</div>
</div>
<div class="col-md-6 col-sm-8">
<div id="score-wrapper" class="score-wrapper pull-right">
<div id="players-display" class="players-display">Players</div>
<div id="score-card" class="score-card">
<table class="ui celled table">
<tbody>
<thead>
<tr class="text-center">
<th><strong>Upper Section</strong></th>
<th><strong>Score</strong></th>
<th><strong>Lower Section</strong></th>
<th><strong>Score</strong></th>
</tr>
</thead>
<tr>
<td><button id="ones" class="ui fluid button tiny transparent-btn">Ones</button></td>
<td id="ones-total" class="score"> </td>
<td><button id="threeOfAKind" class="ui fluid button tiny transparent-btn">Three-of-a-kind</button></td>
<td id="threeOfAKind-total" class="score"> </td>
</tr>
<tr>
<td><button id="twos"class="ui fluid button tiny transparent-btn">Twos</button></td>
<td id="twos-total" class="score"> </td>
<td><button id="fourOfAKind" class="ui fluid button tiny transparent-btn">Four-of-a-kind</button></td>
<td id="fourOfAKind-total" class="score"> </td>
</tr>
<tr>
<td><button id="threes" class="ui fluid button tiny transparent-btn">Threes</button></td>
<td id="threes-total" class="score"> </td>
<td><button id="fullHouse" class="ui fluid button tiny transparent-btn">Full House</button></td>
<td id="fullHouse-total" class="score"> </td>
</tr>
<tr>
<td><button id="fours" class="ui fluid button tiny transparent-btn">Fours</button></td>
<td id="fours-total" class="score"> </td>
<td><button id="smStraight" class="ui fluid button tiny transparent-btn">Sm. Straight</button></td>
<td id="smStraight-total" class="score"> </td>
</tr>
<tr>
<td><button id="fives" class="ui fluid button tiny transparent-btn">Fives</button></td>
<td id="fives-total" class="score"> </td>
<td><button id="lgStraight" class="ui fluid button tiny transparent-btn">Lg. Straight</button></td>
<td id="lgStraight-total" class="score"> </td>
</tr>
<tr>
<td><button id="sixes" class="ui fluid button tiny transparent-btn">Sixes</button></td>
<td id="sixes-total" class="score"> </td>
<td class="text-uppercase"><button id="yahtzee"class="ui fluid button tiny transparent-btn">Yahtzee</button></td>
<td id="yahtzee-total" class="score"> </td>
</tr>
<tr>
<td class="text-uppercase"><strong>Bonus <i class="ui help circle icon" data-content="If the upper section totals 63 or more, a 35 point bonus is awarded."></i></strong></td>
<td id="upper-bonus" class="score"> </td>
<td class="text-uppercase"><button id="chance" class="ui fluid button tiny transparent-btn">Chance</button></td>
<td id="chance-total" class="score"> </td>
</tr>
<tr>
<td class="text-uppercase"><strong>Sub-Total</strong></td>
<td id="upperSub" class="score"> </td>
<td class="text-uppercase"><strong>Sub-Total</strong></td>
<td id="lowerSub" class="score"> </td>
</tr>
</tbody>
</table>
<div id="new-game" class="text-right">
<button id="new-btn" class="ui red button">New Game</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>