-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
54 lines (49 loc) · 2.53 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/style.css">
<title>Pig Game</title>
</head>
<body>
<div class="wrapper clearfix">
<div class="player-0-panel active">
<div class="player-name" id="name-0">PLAYER 1</div>
<div class="player-score" id="score-0">43</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-0">11</div>
</div>
</div>
<div class="player-1-panel">
<div class="player-name" id="name-1">PLAYER 2</div>
<div class="player-score" id="score-1">72</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-1">0</div>
</div>
</div>
<button class="btn-new">New game</button>
<button class="btn-roll">Roll dice</button>
<button class="btn-hold">Hold</button>
<button data-modal-target="#rules" class="btn-rules">Rules</button>
<div class="rules" id="rules">
<div class="rules-header">
<div class="title">Rules</div>
<button data-close-button class="close-button">×</button>
</div>
<div class="rules-body">
- The game has 2 players, playing in rounds
- In each turn, a player rolls a dice as many times as he whishes. Each result get added to his ROUND score<br>
- BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn<br>
- The player can choose to 'Hold', which means that his ROUND score gets added to his GLOBAL score. After that, it's the next player's turn<br>
- The first player to reach 100 points on GLOBAL score wins the game<br>
</div>
</div>
<div id="overlay"></div>
<img src="img/dice-5.png" alt="Dice" class="dice">
</div>
<script src="js/app.js"></script>
</body>
</html>