-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
213 lines (187 loc) · 8.5 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
<!DOCTYPE html>
<html>
<head>
<!-- <script src="style.scss"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<link rel="stylesheet" href="pictures/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- <script src="./lib/blackjack.js"></script> -->
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="background">
<div class='game-board'>
<div class="game-board-img" >
<div id="score-board">
</div>
<!-- The Modal -->
<button id="instructions-button">instructions</button>
<div class="instructions" >
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Welcome to CountTo21</h2>
</div>
<div class="modal-body">
<br/>
<p>This is a card counting game that uses probability to inform betting decisions.</p>
<br/>
<p>How to play:</p>
<p>- Press the center button to progress through the game.</p>
<p>- Place smaller bets during the first few rounds.</p>
<p>- Increase bet size if the probability of getting a 17 or higher is cumulatively above what it was during round 0. The larger the difference, the bigger the increase in bet size.</p>
<p>- The decision to hit or stay is informed by the expected value of the cards still in the deck.</p>
<p>- The AI will make betting decisions based on the dealer’s top card, weighing the risk of hitting against the dealer’s expected hand.</p>
<br/>
<p>Notes:</p>
<p>- There are two decks, so there typically will be 8-9 rounds.</p>
<p>- The two players to your left and right always follow the AI recommendation and were included to show a change in the probability distribution function faster.</p>
<br/>
</div>
<div class="modal-footer">
<h3>Good Luck</h3>
</div>
</div>
</div>
<div id="endModal" class="end-modal">
<div class="end-modal-content">
<div class="end-modal-header">
<span class="close-end">×</span>
<h2>Thank you for playing CountTo21</h2>
</div>
<div class="end-modal-body">
<br/>
<p id="ending-message">You have reached the end of the game!</p>
<br/>
<p>The biggest advantage the house has over players is that they are more likely to bust since they must play their hand first.</p>
<br/>
<p>Even a perfect strategy only marginally improves the odds of winning.</p>
<p>The appropriate strategy when the probability of a good first hand is less than what you started with is simply not to play and wait for a new set of decks.</p>
<br/>
<br/>
<p>Thank you for playing, please see the links below to get in touch.</p>
<br/>
<p>Lucian Stroie</p>
<br/>
</div>
<div class="end-modal-footer">
<h3></h3>
</div>
</div>
</div>
<script>
const modal = document.getElementById('myModal');
const btn = document.getElementById("instructions-button");
const span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<form class="place-bet hidden" id="place-bet">
<div class="one chip" onclick="let a = document.getElementById('quantity').value;
let b = JSON.parse(a) + 1;
document.getElementById('quantity').value = b;" >
</div>
<div class="five chip" onclick="let a = document.getElementById('quantity').value;
let b = JSON.parse(a) + 5;
document.getElementById('quantity').value = b;" >
</div>
<div class="ten chip" onclick="let a = document.getElementById('quantity').value;
let b = JSON.parse(a) + 10;
document.getElementById('quantity').value = b;" >
</div>
<div class="twentyfive chip" onclick="let a = document.getElementById('quantity').value;
let b = JSON.parse(a) + 25;
document.getElementById('quantity').value = b;" >
</div>
<div class="hundred chip" onclick="let a = document.getElementById('quantity').value;
let b = JSON.parse(a) + 100;
document.getElementById('quantity').value = b;" >
</div>
<div class="fivehundred chip" onclick="let a = document.getElementById('quantity').value;
let b = JSON.parse(a) + 500;
document.getElementById('quantity').value = b;" >
</div>
<div class="thousand chip" onclick="let a = document.getElementById('quantity').value;
let b = JSON.parse(a) + 1000;
document.getElementById('quantity').value = b;" >
</div>
<input type="submit" value="Place Bet">
Click to place bet
<input type="number" min="0" step="1" max="1000" value="5" id="quantity">
</form>
<input type="button" value="dealer's turn" class="hidden" id="dealer">
<input type="button" value="next round" class="hidden" id="next-round">
<section class="get-hit hidden" id="get-hit" onmouseover="showAi()">
<div class="popup" >
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<br/>
<input type="button" value="Hit!" id="draw" >
<input type="button" value="Stay" id="stay" >
<br/>
<input type="button" value="AI" id="ai" >
<script>
function showAi() {
const popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</section>
<body style="text-align:center">
<div class="playing-cards">
<div class="player1">
<card class="first"></card>
<card class="second"></card>
<card class="third hidden"></card>
<card class="fourth hidden"></card>
<card class="fifth hidden"></card>
</div>
<div class="player2">
<card class="first"></card>
<card class="second"></card>
<card class="third hidden"></card>
<card class="fourth hidden"></card>
<card class="fifth hidden"></card>
</div>
<div class="player3">
<card class="first"></card>
<card class="second"></card>
<card class="third hidden"></card>
<card class="fourth hidden"></card>
<card class="fifth hidden"></card>
</div>
<div class="dealer">
<card class="first"></card>
<card class="second"></card>
<card class="third hidden"></card>
<card class="fourth hidden"></card>
<card class="fifth hidden"></card>
</div>
</div>
</div>
</div>
<div class="">
<canvas id="myChart" width="400" height="200"></canvas>
</div>
<div class="not-footer">
<a href="https://lucianstroie.github.io/"><i class="fa fa-user-circle fa-3x" aria-hidden="true"></i></a>
<a href="mailto:[email protected]"><i class="fa fa-envelope-open-o fa-3x" aria-hidden="true"></i></a>
<a href="https://github.com/lucianstroie"><i class="fa fa-github fa-3x" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/lstroie/"><i class="fa fa-linkedin-square fa-3x" aria-hidden="true"></i></a>
</div>
</div>
<script src="lib/bundle.js"></script>
</body>
</html>