Add quickbets; small fixes;

css/blackjack.css

@@ -45,11 +45,26 @@ body {
     padding: 20px 5px 5px 5px;
 }
 
-#actions button {
+#actions button,
+#actions a {
     width: 100%;
     margin-bottom: 5px;
 }
 
+#quick-bet-buttons {
+    padding-left: 25px;
+    padding-right: 25px;
+}
+
+#quick-bet-buttons div {
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
+#quick-bet-buttons a {
+    padding: 5px;
+}
+
 #card-space {
     color: white;
 }
@@ -58,7 +73,7 @@ body {
     text-align: center;
     color: white;
     padding-top: 25px;
-    padding-bottom: 25px;
+    padding-bottom: 45px;
 }
 
 .navbar-toggler {
@@ -71,3 +86,7 @@ body {
     color: green;
     margin: 3px 6px 3px 6px;
 }
+
+.quick-bet {
+    height: 16px;
+}

index.htm

@@ -16,7 +16,7 @@
 <div id="root">
     <nav class="navbar navbar-expand-lg">
         <a class="navbar-brand" href="/blackjack/">
-            <img src="img/Chips/chipBlueWhite.png" alt="logo">
+            <img src="img/chips/chipBlueWhite.png" alt="logo">
             BlackJack
         </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
@@ -72,11 +72,13 @@
                     <div class="col-md-12 hand">
                         <h4>
                             Hand
-                            ({{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore }})
+                            ({{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore
+                            }})
                         </h4>
                         <div class="row">
                             <div class="col-sm-12">
-                                <img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card" v-for="card in usersHand">
+                                <img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card"
+                                     v-for="card in usersHand">
                             </div>
                         </div>
                     </div>
@@ -89,9 +91,11 @@
             </div>
             <div class="col-md-2 card" id="actions">
                 <div class="card-body">
-                    <button class="btn btn-success" @click="startRound" v-if="!roundActive">
+                    <div v-if="!roundActive">
+                        <button class="btn btn-success" @click="startRound">
                             New round <i class="fas fa-play"></i>
                         </button>
+                    </div>
 
                     <button class="btn btn-success" @click="drawAnotherCard" v-if="roundActive">
                         Draw a card <i class="fas fa-hand-pointer"></i>
@@ -111,10 +115,44 @@
                         <label>Money available:</label>
                         <span class="font-weight-bold">{{ money }}</span>
                     </div>
-                    <div class="form-group">
+                    <div class="form-group" v-if="!roundActive">
                         <label>Place your bet:</label>
-                        <input class="form-control bet-input" v-model="bet" v-if="!roundActive">
+                        <input class="form-control bet-input" type="number" v-model="bet">
-                        <input class="form-control bet-input" v-model="bet" v-else disabled/>
+                    </div>
+                    <div class="form-group" v-else>
+                        <label>Your bet:</label>
+                        <span class="font-weight-bold">{{ bet }}</span>
+                    </div>
+
+                    <label class="font-weight-bold">Quick-Bets <small class="text-muted">(100, 250, 500, 1000)</small></label>
+                    <div class="row">
+                        <div class="col-12" id="quick-bet-buttons">
+                            <div class="row">
+                                <div class="col-3">
+                                    <a class="btn btn-success" @click="quickBet(100)">
+                                        <img class="quick-bet" src="img/chips/chipBlueWhite.png"/>
+                                    </a>
+                                </div>
+
+                                <div class="col-3">
+                                    <a class="btn btn-success" @click="quickBet(250)">
+                                        <img class="quick-bet" src="img/chips/chipGreenWhite.png"/>
+                                    </a>
+                                </div>
+
+                                <div class="col-3">
+                                    <a class="btn btn-success" @click="quickBet(500)">
+                                        <img class="quick-bet" src="img/chips/chipRedWhite.png"/>
+                                    </a>
+                                </div>
+
+                                <div class="col-3">
+                                    <a class="btn btn-success" @click="quickBet(1000)">
+                                        <img class="quick-bet" src="img/chips/chipBlackWhite.png"/>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

js/app.js

@@ -13,7 +13,7 @@ let app = new Vue({
         handScore: 0,
         dealerScore: 0,
         status: '',
-        bet: 0,
+        bet: 100,
 
         bankIsActive: false,
         bank: 0,
@@ -356,6 +356,16 @@ let app = new Vue({
         isMoney(number) {
             return new Intl.NumberFormat('de-DE', {style: 'decimal'}).format(number);
         },
+
+        quickBet(bet) {
+            if (this.bet > this.money) {
+                alertify.notify('You don\'t have enough money to do this.', 'custom');
+                return false;
+            }
+
+            this.bet = bet;
+            this.startRound();
+        }
     },
     created() {
         this.cardDeck = this.generateDeck();