Design tweaks.

css/app.css

@@ -27,4 +27,8 @@ body {
 
 .navbar-brand img {
     width: 35px;
+}
+
+.hand {
+    margin-bottom: 2em;
 }

index.htm

@@ -72,26 +72,31 @@
         <!--                <button @click="endRound" v-if="roundActive">End round</button>-->
         <!--            </div>-->
         <!--        </div>-->
-        <div class="row">
+        <div class="row" v-if="initiated">
-            <div class="col-md-6">
+            <div class="col-md-12 hand">
                 <h4>Dealer
                     <template v-if="!roundActive">({{ dealerScore }})</template>
                 </h4>
                 <div class="row">
-                    <div class="col-md-4" v-for="(card, index) in dealersHand">
+                    <div class="col-sm-1" v-for="(card, index) in dealersHand">
                         <img :src="index > 0 ? card.asset : roundActive ? cardBack : card.asset" :alt="card.symbol + '_' + card.points" class="playing-card">
                     </div>
                 </div>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-12 hand">
-                <h4>Hand ({{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore }})</h4>
+                <h4>Hand (Points: {{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore }})</h4>
                 <div class="row">
-                    <div class="col-md-4" v-for="card in usersHand">
+                    <div class="col-sm-1" v-for="card in usersHand">
                         <img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card">
                     </div>
                 </div>
             </div>
         </div>
+        <div class="row" v-else>
+            <button class="btn btn-light btn-lg" @click="startRound">
+                New round <i class="fas fa-play"></i>
+            </button>
+        </div>
     </div>
 
     <div class="modal fade" id="bankModal" tabindex="-1" role="dialog" aria-labelledby="bankModalLabel" aria-hidden="true">

js/app.js

@@ -1,6 +1,7 @@
 let app = new Vue({
     el: '#root',
     data: {
+        initiated: false,
         roundActive: false,
         cardBack: 'img/cardBack_red5.png',
         cards: [],
@@ -131,6 +132,7 @@ let app = new Vue({
         },
 
         startRound() {
+            this.initiated = true;
             this.endRound();
 
             this.roundActive = true;
@@ -198,6 +200,7 @@ let app = new Vue({
                     vue.bank = Number(response.data.value);
                     vue.username = response.data.name;
                     vue.avatar = '/storage/avatars/' + response.data.avatar;
+                    vue.bankIsActive = true;
                     vue.$forceUpdate;
 
                     if (Number(vue.bank) <= Number(0)) {
@@ -249,7 +252,7 @@ let app = new Vue({
 
                 axios.post('/bank/store', {
                     value: vue.bank,
-                    app: 'Farm',
+                    app: 'BlackJack',
                     description: 'Deposit',
                     amount: toBankSave
                 }).then(function (response) {
@@ -285,7 +288,7 @@ let app = new Vue({
 
                 axios.post('/bank/store', {
                     value: vue.bank,
-                    app: 'Farm',
+                    app: 'BlackJack',
                     description: 'Withdrawal',
                     amount: toMoneySave
                 }).then(function (response) {