Skip to content

Commit c539339

Browse files
AlexHedleyAlexHedley
committed
Added chips
1 parent f3c7b85 commit c539339

File tree

3 files changed

+137
-73
lines changed

3 files changed

+137
-73
lines changed

‎docs/ACKNOWLEDGEMENTS.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,8 @@
1212
## Images
1313

1414
https://www.flaticon.com/free-icon/poker-table_84480
15-
<a href="https://www.flaticon.com/free-icons/casino" title="casino icons">Casino icons created by Freepik - Flaticon</a>
15+
<a href="https://www.flaticon.com/free-icons/casino" title="casino icons">Casino icons created by Freepik - Flaticon</a>
16+
17+
Poker Chip - Anton Gajdosik
18+
https://thenounproject.com/icon/poker-chip-170742/
19+
Poker Chip by Anton Gajdosik from Noun Project (CC BY 3.0)

‎src/images/poker-chip.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/index.html‎

Lines changed: 127 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
3+
4+
<head>
45
<meta charset="utf-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
67

@@ -10,7 +11,8 @@
1011
<!-- Bootstrap CSS -->
1112
<link rel="stylesheet" href="css/vendor/bootstrap.min.css">
1213
<link rel="stylesheet" href="css/vendor/sticky-footer.css">
13-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
14+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
15+
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
1416
<!-- <link rel="stylesheet" href="css/jquery-ui.min.css"> -->
1517
<link rel="stylesheet" href="css/vendor/jquery-ui.1.12.1.min.css">
1618
<link rel="stylesheet" href="css/vendor/pivot.min.css">
@@ -23,8 +25,9 @@
2325
<!-- <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'> -->
2426

2527
<title>Poker Stats</title>
26-
</head>
27-
<body ng-app="myApp">
28+
</head>
29+
30+
<body ng-app="myApp">
2831
<main role="main" class="container">
2932

3033
<section class="jumbotron title-container text-center">
@@ -34,7 +37,8 @@ <h1>🃏 Poker Stats</h1>
3437
<div class="row justify-content-md-center">
3538
<div class="col-lg-8">
3639
<div class="input-group search-bar">
37-
<input type="text" class="form-control" ng-model='searchText' placeholder="Search for a game..." aria-label="Search">
40+
<input type="text" class="form-control" ng-model='searchText'
41+
placeholder="Search for a game..." aria-label="Search">
3842
<button type="submit" class="btn btn-success"><i class="fa fa-search"></i></button>
3943
</div>
4044
</div>
@@ -43,12 +47,17 @@ <h1>🃏 Poker Stats</h1>
4347
</div>
4448
</section>
4549

46-
<button class="btn btn-success float-right" type="button" data-toggle="collapse" data-target="#image" aria-expanded="false" aria-controls="image">
47-
Show/Hide
48-
</button>
49-
<div class="collapse" id="image">
50-
<div class="row justify-content-md-center">
51-
<img src="images/poker-table.svg" width="500px" alt="Poker Table" />
50+
<div class="row">
51+
<div class="col">
52+
<button class="btn btn-success float-right" type="button" data-toggle="collapse" data-target="#image"
53+
aria-expanded="false" aria-controls="image">
54+
Show/Hide
55+
</button>
56+
<div class="collapse" id="image">
57+
<div class="row justify-content-md-center">
58+
<img src="images/poker-table.svg" width="500px" alt="Poker Table" />
59+
</div>
60+
</div>
5261
</div>
5362
</div>
5463

@@ -60,59 +69,94 @@ <h1>🃏 Poker Stats</h1>
6069

6170
<div class="row justify-content-md-center">
6271
<div class="">
63-
64-
<table id="results" class="sortable">
65-
<thead>
66-
<tr>
67-
<th>Date</th>
68-
<th>Name</th>
69-
</tr>
70-
</thead>
71-
<tbody>
72-
<tr ng-repeat="game in games">
73-
<td>{{game.date}}</td>
74-
<td>{{game.name}}</td>
75-
</tr>
76-
</tbody>
77-
</table>
78-
79-
</div>
80-
</div>
81-
82-
<br />
83-
84-
<div class="row justify-content-md-center">
85-
<div class="">
86-
8772
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
8873
<ol class="carousel-indicators">
89-
<li ng-repeat="set in sets" data-target="#carouselExampleCaptions" data-slide-to="{{$index}}"></li>
74+
<li ng-repeat="game in games" data-target="#carouselExampleCaptions"
75+
data-slide-to="{{$index}}"></li>
9076
</ol>
9177
<div class="carousel-inner">
92-
<div ng-repeat="game in games" class="carousel-item" ng-class='{active:$first}'>
93-
<!-- <img src="/poker/{{game.image}}" class="d-block w-100" alt="{{game.name}}"> -->
78+
<div ng-repeat="game in games" class="carousel-item" ng-class="{active:$first}">
79+
<img ng-if="game.image.length > 0" ng-src="{{game.image}}" class="d-block w-100"
80+
alt="{{game.name}}" />
9481
<div class="carousel-caption d-none d-md-block">
9582
<h5>{{game.name}}</h5>
9683
<p>{{game.description}}</p>
9784
</div>
9885
</div>
9986
</div>
100-
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
87+
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
88+
data-slide="prev">
10189
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
10290
<span class="sr-only">Previous</span>
10391
</a>
104-
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
92+
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
93+
data-slide="next">
10594
<span class="carousel-control-next-icon" aria-hidden="true"></span>
10695
<span class="sr-only">Next</span>
10796
</a>
10897
</div>
98+
</div>
99+
</div>
100+
</div>
101+
102+
<div class="row justify-content-md-center">
103+
<div class="">
104+
105+
<table id="results" class="sortable">
106+
<thead>
107+
<tr>
108+
<th>Date</th>
109+
<th>Name</th>
110+
</tr>
111+
</thead>
112+
<tbody>
113+
<tr ng-repeat="game in games">
114+
<td>{{game.date}}</td>
115+
<td>{{game.name}}</td>
116+
</tr>
117+
</tbody>
118+
</table>
109119

120+
</div>
121+
</div>
122+
123+
<br />
124+
125+
<div class="row justify-content-md-center">
126+
<div class="">
127+
128+
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
129+
<ol class="carousel-indicators">
130+
<li ng-repeat="set in sets" data-target="#carouselExampleCaptions"
131+
data-slide-to="{{$index}}"></li>
132+
</ol>
133+
<div class="carousel-inner">
134+
<div ng-repeat="game in games" class="carousel-item" ng-class='{active:$first}'>
135+
<!-- <img src="/poker/{{game.image}}" class="d-block w-100" alt="{{game.name}}"> -->
136+
<div class="carousel-caption d-none d-md-block">
137+
<h5>{{game.name}}</h5>
138+
<p>{{game.description}}</p>
139+
</div>
140+
</div>
141+
</div>
142+
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
143+
data-slide="prev">
144+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
145+
<span class="sr-only">Previous</span>
146+
</a>
147+
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
148+
data-slide="next">
149+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
150+
<span class="sr-only">Next</span>
151+
</a>
110152
</div>
153+
111154
</div>
155+
</div>
112156

113-
<br />
114-
115-
<!-- <div class="row">
157+
<br />
158+
159+
<!-- <div class="row">
116160
<div class="col">
117161
118162
<div class="form-check">
@@ -123,7 +167,7 @@ <h5>{{game.name}}</h5>
123167
</div>
124168
</div> -->
125169

126-
<!-- <div class="row">
170+
<!-- <div class="row">
127171
<div class="col">
128172
129173
<div id="output" style="margin: 30px;">
@@ -133,36 +177,45 @@ <h5>{{game.name}}</h5>
133177
</div>
134178
</div> -->
135179

136-
<div class="row">
137-
<div
138-
ng-repeat="game in games | orderBy:'-id' | filter:searchText"
139-
class="col-md-3"
140-
style="margin-bottom: 50px;"
141-
>
142-
<div class="card" style="width: 18rem;" data-id="{{game.id}}">
143-
<img ng-if="game.image.length > 0" ng-src="{{game.image}}" class="card-img-top" alt="{{game.name}}">
144-
<div class="card-header">
145-
{{game.name}}
146-
</div>
147-
<div class="card-body">
148-
<p class="card-text">{{game.description}}</p>
149-
<div ng-repeat="player in game.players">
150-
<p>{{player.name}}
151-
<!-- <span class="position" title="Position">({{player.position}})</span> -->
152-
<span class="badge badge-primary" title="Position">{{player.position}}</span>
153-
<!-- <span class="buyIns" title="Buy Ins" ng-if="player.buyIns > 0">[{{player.buyIns}}]</span> -->
154-
<span class="badge badge-secondary" title="Buy Ins" ng-if="player.buyIns > 0">{{player.buyIns}}</span>
155-
<span class="winner" ng-if="player.position == 1"><strong>Winner</strong></span>
156-
</p>
157-
</div>
180+
<div class="row">
181+
<div ng-repeat="game in games | orderBy:'-id' | filter:searchText" class="col-md-3"
182+
style="margin-bottom: 50px;">
183+
<div class="card" style="width: 18rem;" data-id="{{game.id}}">
184+
<img ng-if="game.image.length > 0" ng-src="{{game.image}}" class="card-img-top"
185+
alt="{{game.name}}">
186+
<div class="card-header">
187+
{{game.name}}
188+
</div>
189+
<div class="card-body">
190+
<p class="card-text">{{game.description}}</p>
191+
<div ng-repeat="player in game.players">
192+
<p>{{player.name}}
193+
<!-- <span class="position" title="Position">({{player.position}})</span> -->
194+
<span class="badge badge-primary" title="Position">{{player.position}}</span>
195+
<!-- <span class="buyIns" title="Buy Ins" ng-if="player.buyIns > 0">[{{player.buyIns}}]</span> -->
196+
<span class="badge badge-secondary" title="Buy Ins"
197+
ng-if="player.buyIns > 0">{{player.buyIns}}</span>
198+
<span class="winner" ng-if="player.position == 1"><strong>Winner</strong></span>
199+
</p>
158200
</div>
159-
<div class="card-footer text-muted">
160-
{{game.date | toDate | date:'mediumDate'}}
201+
202+
<!-- Chips -->
203+
<hr />
204+
<div ng-if="game.chips">
205+
<strong>Chips:</strong>
206+
<span ng-repeat="chip in game.chips">
207+
<img src="images/poker-chip.svg" width="15px" style="fill:red"/>
208+
<span style="color:{{chip.colour}}">{{chip.amount}}</span> x <span>{{chip.quantity}}</span>
209+
</span>
161210
</div>
162211
</div>
212+
213+
<div class="card-footer text-muted">
214+
{{game.date | toDate | date:'mediumDate'}}
215+
</div>
163216
</div>
164217
</div>
165-
218+
166219
</div>
167220

168221
</div>
@@ -172,13 +225,14 @@ <h5>{{game.name}}</h5>
172225
<footer class="footer">
173226
<div class="container">
174227
<span class="text-muted"><a href="https://AlexHedley.github.io/">Alex Hedley</a></span>
175-
<span class="float-right"><i class="fab fa-github"></i> <a href="https://github.com/AlexHedley/poker">GitHub</a></span>
228+
<span class="float-right"><i class="fab fa-github"></i> <a
229+
href="https://github.com/AlexHedley/poker">GitHub</a></span>
176230
</div>
177231
</footer>
178232

179233
<!-- Optional JavaScript -->
180234
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
181-
<script src="js/vendor/jquery-3.3.1.min.js" ></script>
235+
<script src="js/vendor/jquery-3.3.1.min.js"></script>
182236
<script>window.jQuery || document.write('<script src="js/vendor/jquery-slim.min.js"><\/script>')</script>
183237
<script src="js/vendor/jquery-ui.min.js"></script>
184238
<!-- <script src="js/vendor/jquery-ui.1.12.1.min.js"></script> -->
@@ -193,5 +247,6 @@ <h5>{{game.name}}</h5>
193247
<script src="js/vendor/pivot.min.js"></script>
194248
<script src="js/vendor/sorttable.js"></script>
195249
<script src="js/app.js"></script>
196-
</body>
250+
</body>
251+
197252
</html>

0 commit comments

Comments
 (0)