diff --git a/css/app.css b/css/app.css index 061ce46..5497f73 100644 --- a/css/app.css +++ b/css/app.css @@ -1,5 +1,6 @@ body { background-color: #0f0f0f; + background-image: url('../img/background.jpg'); color: white; } @@ -14,4 +15,16 @@ body { #status { color: darkred; text-align: center; +} + +.navbar { + background-color: #349940; +} + +.navbar * { + color: white; +} + +.navbar-brand img { + width: 35px; } \ No newline at end of file diff --git a/index.htm b/index.htm index 7c6324e..bce698e 100644 --- a/index.htm +++ b/index.htm @@ -6,52 +6,181 @@ BlackJack ♠ + + -
-
-
- - - - -
-
+
+ -
-
-

Dealer

-
-
- +
+ + + + + + + + +
+
+

Dealer + +

+
+
+ +
-
-
-

Hand ({{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore }})

-
-
- +
+

Hand ({{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore }})

+
+
+ +
-
-
-

+
+ + + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js index 3979076..ed7ed9e 100644 --- a/js/app.js +++ b/js/app.js @@ -11,6 +11,14 @@ let app = new Vue({ handScore: 0, dealerScore: 0, status: '', + + bankIsActive: false, + bank: 0, + money: 0, + toBank: 0, + toMoney: 0, + username: null, + avatar: null, }, methods: { generateDeck() { @@ -145,7 +153,7 @@ let app = new Vue({ this.drawCardToUser(); if (this.isPlus(this.handScore)) { - this.status = 'Hand is plus, you lose.'; + alertify.notify('Hand is plus, you lose.') this.roundActive = false; } }, @@ -153,22 +161,20 @@ let app = new Vue({ pass() { if (this.dealerScore === this.handScore) { this.roundActive = false; - this.status = 'Draw!' + alertify.notify('Draw!'); } else if (this.dealerScore > 22) { this.roundActive = false; - this.status = 'Dealer is plus, you win'; + alertify.notify('Dealer is plus, you win'); } else if (this.dealerScore > this.handScore) { this.roundActive = false; - this.status = 'Dealer Wins'; + alertify.notify('Dealer Wins'); } else if (this.dealerScore < 17) { this.roundActive = false; this.drawCardToDealer(); this.pass(); - - // this.status = 'Dealer drawing not yet implemented'; } else if (this.handScore > this.dealerScore && this.handScore < 22) { this.roundActive = false; - this.status = 'You win!'; + alertify.notify('You win!'); } }, @@ -185,21 +191,154 @@ let app = new Vue({ this.shuffleDeck(); }, - dealerWon() { - console.log('House wins') + checkUserStatus() { + let vue = this; + axios.get('https://luna-development.net/bank/get') + .then(function (response) { + vue.bank = Number(response.data.value); + vue.username = response.data.name; + vue.avatar = '/storage/avatars/' + response.data.avatar; + vue.$forceUpdate; + + if (Number(vue.bank) <= Number(0)) { + // Removed default money here if bank empty / dead + } else { + alertify.notify('Welcome back, ' + vue.username + '!', 'custom') + } + }) + .catch(function (error) { + console.log(error); + alertify.notify("Can't connect to Luna Bank, are you logged in?", 'custom'); + + // Removed default money here if bank empty / dead + vue.username = 'Gast'; + vue.bankIsActive = false; + }); }, - userWon() { - console.log('You win') + updateBankAccount() { + let vue = this; + + if (vue.bankIsActive) { + axios.get('https://luna-development.net/bank/get') + .then(function (response) { + vue.bank = Number(response.data.value); + vue.username = response.data.name; + vue.avatar = '/storage/avatars/' + response.data.avatar; + vue.$forceUpdate; + }) + .catch(function (error) { + console.log(error); + vue.username = 'Gast'; + vue.bankIsActive = false; + vue.avatar = null; + }); + } + }, + + transferToBank() { + let vue = this; + + if (vue.toBank <= vue.money && vue.toBank > 0) { + let bankSave = vue.bank; + let moneySave = vue.money; + let toBankSave = vue.toBank; + + vue.bank = Number(vue.bank) + Number(vue.toBank); + vue.money = Number(vue.money) - Number(vue.toBank); + + axios.post('/bank/store', { + value: vue.bank, + app: 'Farm', + description: 'Deposit', + amount: toBankSave + }).then(function (response) { + // i'm the master of self-advertisement + // speaking of advertisement? check out the fresh servers at luna-development.net + alertify.notify('Successfully transfered ' + toBankSave + ' $ to your account.', 'custom'); + }).catch(function (error) { + vue.bank = bankSave; + vue.money = moneySave; + + alertify.notify('Error while process bank-transaction.', 'custom'); + }); + + vue.toBank = undefined; + } else if (vue.toBank === undefined) { + return; + } else { + vue.toBank = undefined; + } }, - testRound() { - this.startRound(); - } + transferFromBank() { + let vue = this; + + // Number() all over again + if (vue.toMoney <= vue.bank && vue.toMoney > 0) { + let bankSave = vue.bank; + let moneySave = vue.money; + let toMoneySave = vue.toMoney; + + vue.bank = Number(vue.bank) - Number(vue.toMoney); + vue.money = Number(vue.money) + Number(vue.toMoney); + + axios.post('/bank/store', { + value: vue.bank, + app: 'Farm', + description: 'Withdrawal', + amount: toMoneySave + }).then(function (response) { + // i'm the master of self-advertisement, speaking of advertisement? + // check out the fresh servers on luna-development.net + alertify.notify('Successfully got ' + toMoneySave + ' $ from your account', 'custom'); + }).catch(function (error) { + vue.bank = bankSave; + vue.money = moneySave; + + alertify.notify('Error while process bank-transaction.', 'custom'); + }); + + vue.toMoney = undefined; + } else if (vue.toMoney === undefined || vue.toMoney <= 0) { + return; + } else { + vue.toMoney = undefined; + } + }, + + bankButtonEnter(button, direction) { + let vue = this; + console.log('protocol: ' + direction); + + if (direction === 'from') { + vue.transferFromBank(); + } else if (direction === 'to') { + vue.transferToBank(); + } else { + alertify.notify('Error while process bank-transaction.', 'custom'); + return; + } + + document.getElementById(button).click(); + }, + + isMoney(number) { + return new Intl.NumberFormat('de-DE', {style: 'decimal'}).format(number); + }, }, created() { this.cardDeck = this.generateDeck(); this.cards = this.generateDeck(); this.shuffleDeck(); + + let vue = this; + + alertify.set('notifier', 'position', 'top-center'); + vue.checkUserStatus(); + + let bankInterval = setInterval(function () { + vue.updateBankAccount(); + }, 10 * 1000); } }); \ No newline at end of file