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

New design;

feature/split
Nero Ignis 5 years ago
parent
3386e7f230
commit
50acd149b7
4 changed files with 118 additions and 50 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. 31
      css/app.css
  2. 110
      index.htm
  3. 5
      js/Blackjack.js
  4. 8
      js/app.js

31
css/app.css
Unescape View File

@ -1,7 +1,6 @@
body { body {
background-color: #0f0f0f; background-color: #0f0f0f;
background-image: url('../img/background.jpg'); background-image: url('../img/background.jpg');
color: white;
} }
.container { .container {
@ -9,8 +8,8 @@ body {
} }
.playing-card { .playing-card {
max-width: 100%; max-width: 75px;
margin: 10px; margin: 0.2em;
} }
#status { #status {
@ -39,5 +38,29 @@ body {
} }
.bet-input { .bet-input {
color: white !important; display: inline;
}
#actions .card-body {
padding: 20px 5px 5px 5px;
}
#actions button {
width: 100%;
margin-bottom: 5px;
}
#card-space {
color: white;
}
.navbar-toggler {
border: 1px solid green;
background-color: lightgreen;
}
.fa-ellipsis-v {
font-size: 1.4em;
color: green;
margin: 3px 6px 3px 6px;
} }

110
index.htm
Unescape View File

@ -2,7 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<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">
@ -18,8 +19,9 @@
<img src="img/Chips/chipBlueWhite.png" alt="logo"> <img src="img/Chips/chipBlueWhite.png" alt="logo">
BlackJack BlackJack
</a> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
<span class="navbar-toggler-icon"></span> aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-ellipsis-v"></i>
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
@ -40,7 +42,8 @@
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="https://git.luna-development.net/neroignis/blackjack/issues" target="_blank"> <a class="nav-link" href="https://git.luna-development.net/neroignis/blackjack/issues"
target="_blank">
Found a bug? <i class="fas fa-bug"></i> Found a bug? <i class="fas fa-bug"></i>
</a> </a>
</li> </li>
@ -50,54 +53,82 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-10">
<button class="btn btn-light btn-lg" @click="startRound" v-if="!roundActive"> <div class="row" id="card-space" v-if="roundActive || roundPlayed">
<div class="col-md-12 hand">
<h4>
Dealer
<template v-if="roundActive">
({{ dealerScore }})
</template>
</h4>
<div class="row">
<div class="col-sm-12">
<img :src="index > 0 ? card.asset : roundActive ? cardBack : card.asset"
:alt="card.symbol + '_' + card.points" class="playing-card"
v-for="(card, index) in dealersHand">
</div>
</div>
</div>
<div class="col-md-12 hand">
<h4>
Hand
<template v-if="roundActive">(Points:
{{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore
}})
</template>
</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">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 card" id="actions">
<div class="card-body">
<button class="btn btn-success" @click="startRound" v-if="!roundActive">
New round <i class="fas fa-play"></i> New round <i class="fas fa-play"></i>
</button> </button>
<div class="form-group float-right">
<label>Money: {{ money }}</label><br/> <button class="btn btn-success" @click="drawAnotherCard" v-if="roundActive">
<label>Bet:</label>
<input class="form-control bet-input" v-model="bet" v-if="!roundActive">
<input class="form-control bet-input" v-model="bet" v-else disabled/>
</div>
<button class="btn btn-light btn-lg" @click="drawAnotherCard" v-if="roundActive">
Draw a card <i class="fas fa-hand-pointer"></i> Draw a card <i class="fas fa-hand-pointer"></i>
</button> </button>
<button class="btn btn-light btn-lg" @click="pass" v-if="roundActive">
<button class="btn btn-success" @click="pass" v-if="roundActive">
Stand <i class="fas fa-hand-paper"></i> Stand <i class="fas fa-hand-paper"></i>
</button> </button>
<button class="btn btn-light btn-lg" @click="endRound" v-if="roundActive">
<button class="btn btn-success" @click="endRound" v-if="roundActive">
Cancel round <i class="fas fa-stop"></i> Cancel round <i class="fas fa-stop"></i>
</button> </button>
</div>
<hr/>
<div class="col-md-12 hand"> <div class="form-group">
<h4>Dealer <label>Money available:</label>
<template v-if="!roundActive">({{ dealerScore }})</template> <span class="font-weight-bold">{{ money }}</span>
</h4>
<div class="row">
<div class="col-sm-12">
<img :src="index > 0 ? card.asset : roundActive ? cardBack : card.asset" :alt="card.symbol + '_' + card.points" class="playing-card" v-for="(card, index) in dealersHand">
</div>
</div>
</div> </div>
<div class="col-md-12 hand"> <div class="form-group">
<h4>Hand (Points: {{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore }})</h4> <label>Place your bet:</label>
<div class="row"> <input class="form-control bet-input" v-model="bet" v-if="!roundActive">
<div class="col-sm-12"> <input class="form-control bet-input" v-model="bet" v-else disabled/>
<img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card" v-for="card in usersHand">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="modal fade" id="bankModal" tabindex="-1" role="dialog" aria-labelledby="bankModalLabel" aria-hidden="true"> <div class="modal fade" id="bankModal" tabindex="-1" role="dialog" aria-labelledby="bankModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content bank-modal steel-border"> <div class="modal-content bank-modal steel-border">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="bankModalLabel">Welcome to Luna Bank <i class="fas fa-piggy-bank"></i></h5> <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"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img src="assets/gui/close.png" alt=""> <img src="assets/gui/close.png" alt="">
</button> </button>
@ -164,7 +195,8 @@
</button> </button>
</div> </div>
<div class="col-6"> <div class="col-6">
<button class="btn-pixel-border" @click="transferFromBank" data-dismiss="modal" id="withdraw"> <button class="btn-pixel-border" @click="transferFromBank" data-dismiss="modal"
id="withdraw">
✔ ✔
</button> </button>
</div> </div>
@ -176,9 +208,15 @@
</div> </div>
</body> </body>
<script type="text/javascript" id="cookieinfo" src="https://cookieinfoscript.com/js/cookieinfo.min.js"></script> <script type="text/javascript" id="cookieinfo" src="https://cookieinfoscript.com/js/cookieinfo.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></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://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://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

5
js/Blackjack.js
Unescape View File

@ -3,9 +3,10 @@ class Blackjack {
bank; bank;
bet; bet;
roundActive = false; roundActive = false;
vue;
constructor(vue) { constructor(vue) {
this.vue = vue; this.vue = new Vue();
this.deck = CardDeck.createAndShuffle(vue); this.deck = CardDeck.createAndShuffle(vue);
this.bank = LunaBank.createEmpty(); this.bank = LunaBank.createEmpty();
// this.bank = new LunaBank(vue); // this.bank = new LunaBank(vue);
@ -21,7 +22,6 @@ class Blackjack {
} }
this.bank.money -= this.bet; this.bank.money -= this.bet;
this.roundActive = true; this.roundActive = true;
this.player.pickCard(this.deck.takeOneCard()); this.player.pickCard(this.deck.takeOneCard());
@ -38,7 +38,6 @@ class Blackjack {
} }
console.log('Round has started'); console.log('Round has started');
return true;
} }
pass() { pass() {

8
js/app.js
Unescape View File

@ -3,6 +3,7 @@ let app = new Vue({
data: { data: {
initiated: false, initiated: false,
roundActive: false, roundActive: false,
roundPlayed: false,
cardBack: 'img/cardBack_red5.png', cardBack: 'img/cardBack_red5.png',
cards: [], cards: [],
cardDeck: [], cardDeck: [],
@ -165,27 +166,33 @@ let app = new Vue({
if (this.isPlus(this.handScore)) { if (this.isPlus(this.handScore)) {
alertify.notify('Hand is plus, you lose.') alertify.notify('Hand is plus, you lose.')
this.roundActive = false; this.roundActive = false;
this.roundPlayed = true;
} }
}, },
pass() { pass() {
if (this.dealerScore === this.handScore) { if (this.dealerScore === this.handScore) {
this.roundActive = false; this.roundActive = false;
this.roundPlayed = true;
alertify.notify('Draw!'); alertify.notify('Draw!');
this.draw(); this.draw();
} else if (this.dealerScore > 21) { } else if (this.dealerScore > 21) {
this.roundActive = false; this.roundActive = false;
this.roundPlayed = true;
alertify.notify('Dealer is plus, you win'); alertify.notify('Dealer is plus, you win');
this.win(); this.win();
} else if (this.dealerScore > this.handScore) { } else if (this.dealerScore > this.handScore) {
this.roundActive = false; this.roundActive = false;
this.roundPlayed = true;
alertify.notify('Dealer Wins'); alertify.notify('Dealer Wins');
} else if (this.dealerScore < 17) { } else if (this.dealerScore < 17) {
this.roundActive = false; this.roundActive = false;
this.roundPlayed = true;
this.drawCardToDealer(); this.drawCardToDealer();
this.pass(); this.pass();
} 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.roundPlayed = true;
alertify.notify('You win ' + this.bet * 1.5 + '!'); alertify.notify('You win ' + this.bet * 1.5 + '!');
this.win(); this.win();
} }
@ -201,6 +208,7 @@ let app = new Vue({
endRound() { endRound() {
this.roundActive = false; this.roundActive = false;
this.roundPlayed = true;
this.lastCard = null; this.lastCard = null;
this.status = null; this.status = null;
this.dealersHand = []; this.dealersHand = [];

Write Preview
Loading…
Cancel
Save