generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
240 lines (219 loc) · 12.9 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
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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!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.0">
<meta name="Description" content="A fun and free rendition of the classic card game Blackjack"/>
<link rel="stylesheet" href="assets/css/style.css">
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<title>Blackjack</title>
</head>
<body>
<header>
<!-- Page logo -->
<div id="title">
<img src="assets/images/logo-start.png" class="logo" alt="logo-start">
<h1> Blackjack </h1>
<img src="assets/images/logo-end.png" class="logo" alt="logo-end">
</div>
<!-- Menu button in the header visible only from the game table to navigate to the menu -->
<nav id="menu-btn-wrap" class ="text-align-centre">
<button data-type="menu-btn" class="btn center-margin btn-bg"><span class="key-control-indicator">M</span>ENU</button>
</nav>
</header>
<!-- Background div acting as a boarder for the main area -->
<div id="main-surround" class="center-margin">
<!-- Menu navigation (Main menu) -->
<nav id="main-menu" class="center-margin main-window txt-white">
<h2 class="text-align-centre menu-heading">Main Menu</h2>
<button data-type="play-game" class="menu-opt-btn btn-bg">CARD <span class="key-control-indicator">T</span>ABLE</button>
<button data-type="game-rules" class="menu-opt-btn btn-bg">GAME <span class="key-control-indicator">R</span>ULES</button>
<button data-type="game-options" class="menu-opt-btn btn-bg"><span class="key-control-indicator">O</span>PTIONS</button>
<button data-type="responsible-gaming" class="menu-opt-btn btn-bg">RESPONSIBLE <span class="key-control-indicator">G</span>AMING</button>
</nav>
<!-- Sub Menu Containers -->
<!-- Game Rules Sub Menu -->
<section id="rules-sub-menu" class="main-window center-margin text-align-centre txt-white sub-menu-container">
<h2 class="menu-heading">Game Rules</h2>
<!-- Accordion menu -->
<button id="objective-accordion" class="rule-heading" aria-controls="game-objective-section" aria-expanded="false">Game Objective:</button>
<div id="game-objective-section" class="rule-segment" aria-hidden="true" aria-labelledby="objective-accordion" role="region">
<p>
The aim of the game is simple, get as close to 21 as possible without going over.
</p>
<p>
You will compete against the house, taking it in turns to play your hands. The one with the highest value under 22 will win the round.
</p>
</div>
<button id="how-to-accordion" class="rule-heading" aria-controls="how-to-play-section" aria-expanded="false">How To Play:</button>
<div id="how-to-play-section" class="rule-segment" aria-hidden="true" aria-labelledby="how-to-accordion" role="region">
<p>
To draw another card from the deck, click the "HIT ME!" button on the game table.
</p>
<p>
Careful though, as if you go over 21, the jig is up, and you lose! The good news is that this applies to the house's hand too.
</p>
<p>
Once content with your hand, click the "STAND" button on the game table.
</p>
<p>
The house will always stand on a hand value greater than or equal to 17.
</p>
</div>
<button id="card-value-accordion" class="rule-heading" aria-controls="card-values-section" aria-expanded="false">Card Values:</button>
<div id="card-values-section" class="rule-segment" aria-hidden="true" aria-labelledby="card-value-accordion" role="region">
<p>
Each card is worth the same value as the number printed on it.
</p>
<p>
All picture cards (Jack, Queen, King) have a value of 10.
</p>
<p>
By default, Ace is high (equal to 11); however, if you go over 21, the system will automatically convert the Ace to have the value of 1,
which allows you to keep hitting the deck until you stand or go bust.
</p>
</div>
<button id="blackjack-accordion" class="rule-heading" aria-controls="blackjack-rules-section" aria-expanded="false">Blackjack:</button>
<div id="blackjack-rules-section" class="rule-segment" aria-hidden="true" aria-labelledby="blackjack-accordion" role="region">
<p>
Blackjack is when either the player or the house has a value of 21 with just the initial two cards dealt.
Should this occur, the round is over automatically, and the one who possesses blackjack wins.
</p>
<p>
Sadly if both the player and house have blackjack, the house will always win! Sorry, but those are the rules.
</p>
</div>
<button id="scoreboard-accordion" class="rule-heading" aria-controls="scoreboard-rules-section" aria-expanded="false">Scoreboard:</button>
<div id="scoreboard-rules-section" class="rule-segment" aria-hidden="true" aria-labelledby="scoreboard-accordion" role="region">
<p>The scoreboard keeps a tally of your wins, loses, and draws. At any point, you can reset this tally with the "CLEAR TALLY" button or the "C" key on the keyboard.</p>
</div>
<button id="keyboard-controls-accordion" class="rule-heading" aria-controls="keyboard-controls-section" aria-expanded="false">Keyboard Controls:</button>
<div id="keyboard-controls-section" class="rule-segment" aria-hidden="true" aria-labelledby="keyboard-controls-accordion" role="region">
<p>
The player can play the game from the keyboard without the need for a mouse.
</p>
<p>
All keyboard controls as marked with red letters on the relevant button i.e H = Hit Me and S = Stand.
</p>
<p>
The control keys will only work while the relevant control button is visible on the screen.
</p>
</div>
<nav>
<button id ="to-menu-btn" data-type="exit-rules" class="back-to-menu btn-bg btn">MAIN <span class="key-control-indicator">M</span>ENU</button>
<button id="to-table-btn" data-type="exit-to-table" class="back-to-menu btn-bg btn"><span class="key-control-indicator">B</span>ACK TO GAME</button>
</nav>
</section>
<!-- Options Sub Menu -->
<section id="options-sub-menu" class="main-window center-margin text-align-centre txt-white sub-menu-container">
<h2 class="menu-heading">Game Options</h2>
<h3 class="menu-sub-heading">Color Theme:</h3>
<button id="green" data-type="green" class="color-theme alt-theme-border active-theme" aria-label="green/default theme"></button>
<button id="blue" data-type="blue" class="color-theme alt-theme-border" aria-label="blue theme"></button>
<button id="purple" data-type="purple" class="color-theme alt-theme-border" aria-label="purple/pink theme"></button>
<nav>
<button data-type="exit-options" class="back-to-menu btn-bg btn">MAIN <span class="key-control-indicator">M</span>ENU</button>
</nav>
</section>
<!-- Responsible Gaming sub Menu -->
<section id="responsible-sub-menu" class="main-window center-margin text-align-centre txt-white sub-menu-container">
<h2 class="menu-heading">Responsible Gaming</h2>
<p class="rg-content">
I hate to be "that guy," but please remember that while games
like this can be a lot of fun, gambling can become a severe problem for some.
</p>
<p class="rg-content">
Should you find yourself compulsively gambling without control, please seek help from
your local health care provider, who can direct you to the support resources in your area.
</p>
<p class="rg-content">
With that said, this game is free to play, so please enjoy it responsibly.
</p>
<nav>
<button data-type="exit-rg" class="back-to-menu btn-bg btn">MAIN <span class="key-control-indicator">M</span>ENU</button>
</nav>
</section>
<!-- Game area -->
<main id="game-table" class="text-align-centre main-window center-margin txt-white">
<!-- Container for dealers cards-->
<section id="dealer-side">
<h2 class="line-break-below">House Hand</h2>
<div id="dealer-card-container" class="card-container">
</div>
</section>
<!-- Scoreboard -->
<section id="score-board" class="line-break-below">
<h3 class="line-break-below">Score board</h3>
<ul class="line-break-below">
<li class="score-tally">
Wins: <span id="wins">0</span>
</li>
<li class="score-tally">
Losses: <span id="losses">0</span>
</li>
<li class="score-tally">
Draws: <span id="draws">0</span>
</li>
</ul>
<button data-type="reset-tally" class="btn btn-bg"><span class="key-control-indicator">C</span>LEAR TALLY</button>
</section>
<!-- Results Modal surround with golden back gorund -->
<div id="modal-surround">
<section id="result-modal">
<h2 id="result">
Ready to Play?
</h2>
<p id="description">
Then click the button and lets get going!
</p>
<div>
<button id="redeal-btn" data-type="redeal" class="btn btn-bg center-margin"><span class="key-control-indicator">D</span>eal Me In</button>
</div>
</section>
</div>
<!-- Container for players hand -->
<section id="player-side">
<h2 class="line-break-below">Player Hand</h2>
<div id="player-card-container" class="card-container">
</div>
<p>Total Hand Value = <span id="player-total">0</span></p>
</section>
<!-- Users control section -->
<section id="controls" class="line-break-below">
<h3 class="line-break-below">Player Controls</h3>
<button id="hit-btn" data-type="hit" class="btn btn-bg"><span class= "key-control-indicator">H</span>IT ME!</button>
<!-- how do I make this a pop up modal? -->
<a id="rules-anchor" aria-label = "Takes you to the game rules">Game Rules</a>
<button id="stand-btn" data-type="stand" class="btn btn-bg" ><span class= "key-control-indicator">S</span>TAND</button>
</section>
</main>
</div>
<!-- Footer with social links and copyright -->
<footer class="text-align-centre">
<ul>
<li class="social-media-li">
<a href="https://www.github.com/dnlbowers" class="social-icon" target="_blank" rel="noopener" aria-label="Connect with me via GitHub (opens new tab on third party site)"><i class="fa-brands fa-github-square"></i></a>
</li>
<li class="social-media-li">
<a href="https://www.linkedin.com/in/dnlbowers/" class="social-icon" target="_blank" rel="noopener" aria-label="Connect with me via linked in (opens new tab on third party site)"><i class="fa-brands fa-linkedin"></i></a>
</li>
</ul>
<small id="copyright">
<i class="fa-solid fa-copyright"></i>reated by dnlbowers
</small>
</footer>
<!-- Font awesome script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js" crossorigin="anonymous"></script>
<!-- Link to JavaScript file -->
<script src="assets/js/script.js"></script>
<!-- No script error -->
<noscript>
<h1>JavaScript Required</h1>
<p>
Your browser either does not support JavaScript, or it is not enabled! If you wish to play this game, then
either change your browser or enable it for the use of JavaScript.
</p>
</noscript>
</body>
</html>