1nicerOli
/
blackjack
1
1
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity
Browse Source

Implement Luna Bank.

feature/split
Nero Ignis 5 years ago
parent
e41db04307
commit
18d0fbf83b
3 changed files with 324 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      css/app.css
  2. 187
      index.htm
  3. 167
      js/app.js

13
css/app.css
Unescape View File

@ -1,5 +1,6 @@
body { body {
background-color: #0f0f0f; background-color: #0f0f0f;
background-image: url('../img/background.jpg');
color: white; color: white;
} }
@ -15,3 +16,15 @@ body {
color: darkred; color: darkred;
text-align: center; text-align: center;
} }
.navbar {
background-color: #349940;
}
.navbar * {
color: white;
}
.navbar-brand img {
width: 35px;
}

187
index.htm
Unescape View File

@ -6,52 +6,181 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BlackJack ♠</title> <title>BlackJack ♠</title>
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.min.css"/>
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico">
</head> </head>
<body> <body>
<div class="container" id="root"> <div id="root">
<div class="row"> <nav class="navbar navbar-expand-lg">
<div class="col-md-12"> <a class="navbar-brand" href="#">
<button @click="testRound" v-if="!roundActive">Start round</button> <img src="img/Chips/chipBlueWhite.png" alt="logo">
<button @click="drawAnotherCard" v-if="roundActive">Draw</button> BlackJack
<button @click="pass" v-if="roundActive">Pass</button> </a>
<button @click="endRound" v-if="roundActive">End round</button> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
</div> <span class="navbar-toggler-icon"></span>
</div> </button>
<!-- <div class="row">--> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- <div class="col-md-1" v-for="card in cards">--> <ul class="navbar-nav mr-auto">
<!-- <img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card">--> <li class="nav-item" v-if="!roundActive">
<!-- </div>--> <a class="nav-link" href="javascript:" @click="startRound">
<!-- </div>--> New round <i class="fas fa-play"></i>
</a>
</li>
<li class="nav-item" v-if="roundActive">
<a class="nav-link" href="javascript:" @click="drawAnotherCard">
Draw a card <i class="fas fa-hand-pointer"></i>
</a>
</li>
<li class="nav-item" v-if="roundActive">
<a class="nav-link" href="javascript:" @click="pass">
Stand <i class="fas fa-hand-paper"></i>
</a>
</li>
<li class="nav-item" v-if="roundActive">
<a class="nav-link" href="javascript:" @click="endRound">
Cancel round <i class="fas fa-stop"></i>
</a>
</li>
<li class="nav-item" v-if="bankIsActive">
<a class="nav-link" href="javascript:" data-toggle="modal" data-target="#bankModal">
Bank <i class="fas fa-piggy-bank"></i>
</a>
</li>
<li class="nav-item" v-else>
<a class="nav-link" href="/login" target="_blank">
Login <i class="fas fa-key"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://git.luna-development.net/neroignis/farm" target="_blank">
Development <i class="fas fa-laptop-code"></i>
</a>
</li>
</ul>
</div>
</nav>
<div class="row"> <div class="container">
<div class="col-md-6"> <!-- <div class="row">-->
<h4>Dealer <template v-if="!roundActive">({{ dealerScore }})</template></h4> <!-- <div class="col-md-12">-->
<div class="row"> <!-- <button v-if="!roundActive">Start round</button>-->
<div class="col-md-4" v-for="(card, index) in dealersHand"> <!-- <button @click="drawAnotherCard" v-if="roundActive">Draw</button>-->
<img :src="index > 0 ? card.asset : roundActive ? cardBack : card.asset" :alt="card.symbol + '_' + card.points" class="playing-card"> <!-- <button @click="pass" v-if="roundActive">Pass</button>-->
<!-- <button @click="endRound" v-if="roundActive">End round</button>-->
<!-- </div>-->
<!-- </div>-->
<div class="row">
<div class="col-md-6">
<h4>Dealer
<template v-if="!roundActive">({{ dealerScore }})</template>
</h4>
<div class="row">
<div class="col-md-4" 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> </div>
</div> <div class="col-md-6">
<div class="col-md-6"> <h4>Hand ({{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore }})</h4>
<h4>Hand ({{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore }})</h4> <div class="row">
<div class="row"> <div class="col-md-4" v-for="card in usersHand">
<div class="col-md-4" v-for="card in usersHand"> <img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card">
<img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card"> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="modal fade" id="bankModal" tabindex="-1" role="dialog" aria-labelledby="bankModalLabel" aria-hidden="true">
<div class="col-md-12" id="status"> <div class="modal-dialog" role="document">
<h1 v-text="status"></h1> <div class="modal-content bank-modal steel-border">
<div class="modal-header">
<h5 class="modal-title" id="bankModalLabel">Welcome to Luna Bank <i class="fas fa-piggy-bank"></i></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img src="assets/gui/close.png" alt="">
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 user-info">
<img v-if="avatar" :src="avatar" class="float-right bank-avatar">
<p>
Welcome, {{ username }}. <br/>
<a href="/account" target="_blank">
<i class="fas fa-money-check-alt"></i> Kontoauszug
</a>
</p>
</div>
<div class="col-12">
<h4>
Account:
<span class="float-right">{{ isMoney(bank) }} $</span>
</h4>
<h4>
Money:
<span class="float-right">{{ isMoney(money) }} $</span>
</h4>
</div>
</div>
<hr/>
<div class="row">
<div class="col-6">
<div class="form-group">
<label class="label">Deposit</label>
<div class="input-group mb-2">
<input type="number"
class="form-control"
v-model="toBank"
:placeholder="'max. ' + isMoney(money)"
@keyup.enter="bankButtonEnter('withdraw', 'to');">
<div class="input-group-append">
<div class="input-group-text">$</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="label">Withdraw</label>
<div class="input-group mb-2">
<input type="number"
class="form-control"
v-model="toMoney"
:placeholder="'max. ' + isMoney(bank)"
@keyup.enter="bankButtonEnter('deposit', 'from');">
<div class="input-group-append">
<div class="input-group-text">$</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<button class="btn-pixel-border" @click="transferToBank" data-dismiss="modal" id="deposit">
✔
</button>
</div>
<div class="col-6">
<button class="btn-pixel-border" @click="transferFromBank" data-dismiss="modal" id="withdraw">
✔
</button>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
<script type="text/javascript" id="cookieinfo" src="https://cookieinfoscript.com/js/cookieinfo.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
<script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="js/vue.js"></script> <script src="js/vue.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
</html> </html>

167
js/app.js
Unescape View File

@ -11,6 +11,14 @@ let app = new Vue({
handScore: 0, handScore: 0,
dealerScore: 0, dealerScore: 0,
status: '', status: '',
bankIsActive: false,
bank: 0,
money: 0,
toBank: 0,
toMoney: 0,
username: null,
avatar: null,
}, },
methods: { methods: {
generateDeck() { generateDeck() {
@ -145,7 +153,7 @@ let app = new Vue({
this.drawCardToUser(); this.drawCardToUser();
if (this.isPlus(this.handScore)) { if (this.isPlus(this.handScore)) {
this.status = 'Hand is plus, you lose.'; alertify.notify('Hand is plus, you lose.')
this.roundActive = false; this.roundActive = false;
} }
}, },
@ -153,22 +161,20 @@ let app = new Vue({
pass() { pass() {
if (this.dealerScore === this.handScore) { if (this.dealerScore === this.handScore) {
this.roundActive = false; this.roundActive = false;
this.status = 'Draw!' alertify.notify('Draw!');
} else if (this.dealerScore > 22) { } else if (this.dealerScore > 22) {
this.roundActive = false; this.roundActive = false;
this.status = 'Dealer is plus, you win'; alertify.notify('Dealer is plus, you win');
} else if (this.dealerScore > this.handScore) { } else if (this.dealerScore > this.handScore) {
this.roundActive = false; this.roundActive = false;
this.status = 'Dealer Wins'; alertify.notify('Dealer Wins');
} else if (this.dealerScore < 17) { } else if (this.dealerScore < 17) {
this.roundActive = false; this.roundActive = false;
this.drawCardToDealer(); this.drawCardToDealer();
this.pass(); this.pass();
// this.status = 'Dealer drawing not yet implemented';
} else if (this.handScore > this.dealerScore && this.handScore < 22) { } else if (this.handScore > this.dealerScore && this.handScore < 22) {
this.roundActive = false; this.roundActive = false;
this.status = 'You win!'; alertify.notify('You win!');
} }
}, },
@ -185,21 +191,154 @@ let app = new Vue({
this.shuffleDeck(); this.shuffleDeck();
}, },
dealerWon() { checkUserStatus() {
console.log('House wins') 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() { updateBankAccount() {
console.log('You win') 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() { transferFromBank() {
this.startRound(); 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() { created() {
this.cardDeck = this.generateDeck(); this.cardDeck = this.generateDeck();
this.cards = this.generateDeck(); this.cards = this.generateDeck();
this.shuffleDeck(); this.shuffleDeck();
let vue = this;
alertify.set('notifier', 'position', 'top-center');
vue.checkUserStatus();
let bankInterval = setInterval(function () {
vue.updateBankAccount();
}, 10 * 1000);
} }
}); });
Write Preview
Loading…
Cancel
Save