-
Notifications
You must be signed in to change notification settings - Fork 0
/
help_older.html
154 lines (143 loc) · 6.73 KB
/
help_older.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
<!doctype html>
<html lang="en">
<head>
<!-- META TAGS -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="nmd_styles.css?v=02">
<title>Backstreet Bridge</title>
</head>
<body class="p-3">
<!-- JAVASCRIPT -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="./nmd_card_game.js?v=07"></script>
<div id="nmd-main-container" class="container">
<div class="row mb-1">
<div class="col text-center">
<a href="/"><img class="nmd-logo-header" src="/img/nmd_logo.svg" alt="New Media Dimensions Logo" /></a>
</div>
</div>
<div class="row">
<div class="col">
<h3 class="my-3">Backstreet Bridge<br><small>Winning Percentages For One-Card Hands</small>
<a class="float-end nmd-help-link" href="./index.html" target="_blank">Back to Game</a>
</h3>
<hr>
<p>This application was developed to provide insights into the best strategy for a specific scenario in Backstreet Bridge:</p>
<ul>
<li>Hand consists of 1 card dealt to each player</li>
<li>Player 1 (the player to the dealer's left) must decide what to bid</li>
</ul>
This scenario has generated some controversy:
<ul>
<li>Some experts have proposed that Player 1 should assume they will win the trick and therefore bid "1", and that all other players should bid "0" (with the exception of the dealer who will be forced to bid "1").</li>
<li>Others have proposed that Player 1 should assume they will win the trick <strong>only if they hold a trump card</strong>.</li>
</ul>
<p>This application can be used to view the win rate of Player 1 when they have a trump card and when they do not have a trump card. By using the application's "Auto-Play" feature, statistics based on thousands of single-card hands can be generated.</p>
<h5 class="mt-4">Using the Application</h5>
<p>Using the application is a 3-step process:</p>
<ul>
<li>Choose Players - Choose the number of players sitting at the virtual table</li>
<li>Play Hands - Click the "Play One" button to play a single hand; Click the "Auto-Play" button to start an atomated playing of multiple hands;</li>
<li>View Stats - Scroll down to the "Statistics" section to view the result.</li>
</ul>
<p><strong>Tips</strong></p>
<ul>
<li>Use the Auto-Play feature to allow the app to play thousands of hands. The more hands played, the more reliable the statistics. The application developer notes that after about 10,000 hands played, the statistics remain stable.</li>
<li>You can watch the statistics change while auto-play is in progress.</li>
<li>You use both the "Play One" and "Auto-Play" buttons to generate data for analysis.</li>
<li>enable the "Show Percent Decimals" option to see percentage details.</li>
</ul>
<h5 class="mt-4">How the Application Works</h5>
<p>This application was written in Javascript, and displays data using an HTML + CSS template.</p>
<p>The Javascript code performs the following operations:</p>
<ul>
<li>create a virtual deck of cards (create array)</li>
<li>shuffle the virtual deck (sort js obj)
<li>display the shuffled deck (update UI)</li>
<li>deal a hand from the top of the shuffled deck (js obj)</li>
<li>calculate the winner of the hand and store results (js logic)</li>
<li>update the displayed statistics (update UI)</li>
</ul>
<p>All the code for this application resides on Github</p>
<p class="ml-4"><a href="https://github.com/saiena/backstreeet_bridge_one_card_hands_analysis" target="_blank">View Project on Github</a></p>
</div>
</div>
<div class="row mb-3">
<div class="col">
<p>You can also view the code here by clicking the tabs below:</p>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
View JAVASCRIPT Code
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<pre id="nmd-javascript-code"></pre>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
View HTML Code
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<pre id="nmd-html-code"></pre>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
View CSS Code
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
<pre id="nmd-css-code"></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: './nmd_card_game.js?v=07',
success: function(data) {
$("#nmd-javascript-code").text(data);
}
});
$.ajax({
url: './index.html',
success: function(data) {
$("#nmd-html-code").text(data);
}
});
$.ajax({
url: './nmd_styles.css?v=02',
success: function(data) {
$("#nmd-css-code").text(data);
}
});
});
</script>
</body>
</html>