-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
188 lines (188 loc) · 5.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
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
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src= "blackjack.js" async></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sparta Core Project 1</title>
</head>
<body>
<!-- Display for the title -->
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="jumbotron titleJumbo">
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<!-- Display for the introduction page -->
<div id = "introduction">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 intro">
<div id = "title">
<h3>Welcome to blackjack!</h3>
</div>
<div id = "objective">
<h5> Objective </h5>
<p>
The objective of the game is to obtain as much money as you can
before all the cards are played from the deck. When player cash hits 0,
the deck has less than 9 cards or player presses cash out, the current
game match ends and the amount of cash left is the player's overall
score.
</p>
</div>
<div id = "howTo">
<h5> How to play </h5>
<ul>
<li>Try and get card total as close to 21 without going over</li>
<li>Ace is worth 1 and J,Q,K is worth 10</li>
<li>Input appropriate bet amount in input box and press bet to place bet</li>
<li>Deal places 2 cards for both dealer and player</li>
<li>Hit draws an addtional card</li>
<li>Stand holds on to the player's current hand and compares it with dealer's</li>
<li>Cash out ends the match and the current cash is used as the overall score</li>
<li>If tie then player reclaims the cash betted</li>
<li>If both sides are busted then dealer wins</li>
</ul>
</div>
<div id ="playGame">
<p class ="playText">Press play to start</p>
<button type="button" id = "playButton">Play</button>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<!-- Display for the main game -->
<div id = "game">
<!-- playe options and display of game -->
<div class = "container">
<div class="row">
<div class ="col-md-6">
<!-- Bet button and input box to obtain player bet -->
Bet Amount: <input type="text" name="betting" placeholder = "Place bet to start" id ="amount"><br>
<button type="button" id = "bet">Bet</button>
<!-- Deal button to draw 2 cards for both dealer and player -->
<button type="button" id = "deal">Deal</button>
<!-- Hit button to draw 1 card for player -->
<button type="button" id = "hit">Hit</button>
<!-- Stand button to stay with player's current hand-->
<button type="button" id = "stand">Stand</button>
<!--Cash out button to end game and store value into score board-->
<button type="button" id = "cashOut">Cash out</button>
</div>
<div class = "col-md-3">
<p id="playerAmount"></p>
<p id = "betAmount"></p>
</div>
<div class = "col-md-3">
<p id="deckSize"></p>
<p id="pot"></p>
</div>
</div>
</div>
<!-- Table contianer of them for the game -->
<div class = "container"">
<div class="row " id = "table">
<div class ="col-md-12">
<!-- Player side display-->
<div class = "container">
<div class="row ">
<div class ="col-md-6">
<h3 class = "white">Player Side</h3>
</div>
<div class = "col-md-6 white">
<h4 id = "playerStats"></h4>
</div>
</div>
</div>
<!-- Player side of table -->
<div class = "container playerDisplay">
<div class="row ">
<div class ="col-md-12" id = "playerSide">
</div>
</div>
</div>
<!-- Dealer side display-->
<div class = "container">
<div class="row ">
<div class ="col-md-6">
<h3 class = "white">Dealer Side</h3>
</div>
<div class = "col-md-6 white">
<h4 id = "result"></h4>
</div>
</div>
</div>
<!-- Dealer side of table -->
<div class = "container">
<div class="row ">
<div class ="col-md-12" id = "dealerSide">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Scoreboard page where user can see their final score as well as previous entries -->
<div id = "scorepage">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 intro textCenter">
<div id = "gameover">
<h3>Game over!</h3>
</div>
<div id = "playerScoring">
<h4 id = "finalScore" class = "inLine">Your score: </h4>
<p id = "playerScore" class = "inLine"></p>
</div>
<div id ="playerNameInput">
<div class="input-group">
<input type="text" class="form-control" id = "playerName" placeholder="Player name">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id = "nameSubmit">Submit</button>
</span>
</div>
</div>
<div id = "scoreboardDisplay">
<div>
<h3 id = "highscores">Highscores</h3>
</div>
<div id = "scoreboard">
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<div>
<button type="button" id = "replay">Play again</button>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</body>
</html>