-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (90 loc) · 4.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hi-Lo Faceoff</title>
<meta name="Description"
content="A two player card game of guessing, bluffing, and reading your opponent.">
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<div id="gameArea">
<div id="buttonArea">
<button id="modalButton">Settings</button>
<a href="https://github.com/mvanbommel/hi_lo_faceoff" target="_blank" rel="noreferrer"><button id="codeButton">Code</button></a>
</div>
<div class="cards">
<ul class="center", id="playerTwoHand">
</ul>
</div>
<div class="cards", height>
<ul class="center", id="playerTwoPlayed">
</ul>
</div>
<div id="score">
<p></p>
</div>
<div class="action">
<p class="center" ></p>
<div id="relationshipButtons">
<ul class="center">
<li><button id="higher">Higher</button></li>
<li><button id="equal">Equal</button></li>
<li><button id="lower">Lower</button></li>
</ul>
</div>
</div>
<div class="cards">
<ul class="center", id="playerOnePlayed">
</ul>
</div>
<div class="cards">
<ul class="center", id="playerOneHand">
</ul>
</div>
</div>
<div id="mask"></div>
<div class="center", id="modal">
<div class="tabBar">
<button class="active" id="settingsTabButton">Settings</button>
<button id="instructionsTabButton">Instructions</button>
</div>
<div id="modalContent">
<div id="settingsTab">
<h1>Hi-Lo Faceoff</h1>
<button id="backToGameButton">Back To Game</button>
<p id="gameOutcome">""</p>
<br>
<p style="margin-bottom: 0px">Your Record:</p>
<p id="record">0-0</p>
<div id="gameType">
<button id="quickGameButton">Quick Game<br>(5 points)</button>
<button class="active" id="halfGameButton">Half Game<br>(11 points)</button>
<button id="fullGameButton">Full Game<br>(21 points)</button>
</div>
<br>
<div>
<label for="gameSpeedRange">Game Speed:</label>
<br>
Slow
<input type="range" id="gameSpeedRange" name="gameSpeedRange" min="0.25" max="1.75" step="0.25">
Fast
</div>
<br>
<button id="startNewGameButton">Start New Game</button>
</div>
<div id="instructionsTab">
<p>Hi-Lo Faceoff is a two player card game of guessing, bluffing, and reading your opponent. Each player is dealt a hand of 5 cards. Each turn begins with one player (the active player) playing a card face up and their opponent playing a card face down in response. The active player then guesses if their opponent's face down card is higher, lower, or equal to their own card (aces are low). If the active player guesses correctly, they gain 1 point (or 5 points if they correctly guess that the cards are equal), but if they guess incorrectly, their opponent gains 1 point. The played cards are discarded and play then continues to the next turn, where the players switch roles and complete the same procedure. After 5 turns, alternating roles each turn, players' hands have been emptied. The discard pile is then shuffled back into to the deck and each player is dealt a new hand of 5 cards and the turns continue from where they left off. The game ends whenever one of the players reaches (or exceeds) a predetermined number of points (commonly 5, 11, or 21) and that player wins the game!</p>
</div>
</div>
</div>
<script src="scripts/main.js"></script>
</body>
</html>