From 641850ab12d5d86c033a8d670e3449335f66b3b2 Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Thu, 30 Apr 2020 01:26:28 +0200
Subject: [PATCH] Design tweaks.

---
 css/app.css |  4 ++++
 index.htm   | 17 +++++++++++------
 js/app.js   |  7 +++++--
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/css/app.css b/css/app.css
index 5497f73..bb337f3 100644
--- a/css/app.css
+++ b/css/app.css
@@ -27,4 +27,8 @@ body {
 
 .navbar-brand img {
     width: 35px;
+}
+
+.hand {
+    margin-bottom: 2em;
 }
\ No newline at end of file
diff --git a/index.htm b/index.htm
index 20e5f67..83786c9 100644
--- a/index.htm
+++ b/index.htm
@@ -72,26 +72,31 @@
         <!--                <button @click="endRound" v-if="roundActive">End round</button>-->
         <!--            </div>-->
         <!--        </div>-->
-        <div class="row">
-            <div class="col-md-6">
+        <div class="row" v-if="initiated">
+            <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">
-                <h4>Hand ({{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore }})</h4>
+            <div class="col-md-12 hand">
+                <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">
diff --git a/js/app.js b/js/app.js
index ed7ed9e..6e90a47 100644
--- a/js/app.js
+++ b/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) {