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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      css/app.css
  2. 122
      index.htm
  3. 5
      js/Blackjack.js
  4. 8
      js/app.js

33
css/app.css
Unescape View File

@ -1,7 +1,6 @@ @@ -1,7 +1,6 @@
body {
background-color: #0f0f0f;
background-image: url('../img/background.jpg');
color: white;
}
.container {
@ -9,8 +8,8 @@ body { @@ -9,8 +8,8 @@ body {
}
.playing-card {
max-width: 100%;
margin: 10px;
max-width: 75px;
margin: 0.2em;
}
#status {
@ -39,5 +38,29 @@ body { @@ -39,5 +38,29 @@ body {
}
.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;
}

122
index.htm
Unescape View File

@ -2,7 +2,8 @@ @@ -2,7 +2,8 @@
<html lang="en">
<head>
<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">
<title>BlackJack ♠</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
@ -18,8 +19,9 @@ @@ -18,8 +19,9 @@
<img src="img/Chips/chipBlueWhite.png" alt="logo">
BlackJack
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-ellipsis-v"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
@ -40,7 +42,8 @@ @@ -40,7 +42,8 @@
</a>
</li>
<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>
</a>
</li>
@ -50,54 +53,82 @@ @@ -50,54 +53,82 @@
<div class="container">
<div class="row">
<div class="col-md-12">
<button class="btn btn-light btn-lg" @click="startRound" v-if="!roundActive">
New round <i class="fas fa-play"></i>
</button>
<div class="form-group float-right">
<label>Money: {{ money }}</label><br/>
<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 class="col-md-10">
<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>
<button class="btn btn-light btn-lg" @click="drawAnotherCard" v-if="roundActive">
Draw a card <i class="fas fa-hand-pointer"></i>
</button>
<button class="btn btn-light btn-lg" @click="pass" v-if="roundActive">
Stand <i class="fas fa-hand-paper"></i>
</button>
<button class="btn btn-light btn-lg" @click="endRound" v-if="roundActive">
Cancel round <i class="fas fa-stop"></i>
</button>
</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>
</button>
<button class="btn btn-success" @click="drawAnotherCard" v-if="roundActive">
Draw a card <i class="fas fa-hand-pointer"></i>
</button>
<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">
<button class="btn btn-success" @click="pass" v-if="roundActive">
Stand <i class="fas fa-hand-paper"></i>
</button>
<button class="btn btn-success" @click="endRound" v-if="roundActive">
Cancel round <i class="fas fa-stop"></i>
</button>
<hr/>
<div class="form-group">
<label>Money available:</label>
<span class="font-weight-bold">{{ money }}</span>
</div>
</div>
</div>
<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-sm-12">
<img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card" v-for="card in usersHand">
<div class="form-group">
<label>Place your 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>
</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-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>
<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>
@ -164,7 +195,8 @@ @@ -164,7 +195,8 @@
</button>
</div>
<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>
</div>
@ -176,9 +208,15 @@ @@ -176,9 +208,15 @@
</div>
</body>
<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://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://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
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://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></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 { @@ -3,9 +3,10 @@ class Blackjack {
bank;
bet;
roundActive = false;
vue;
constructor(vue) {
this.vue = vue;
this.vue = new Vue();
this.deck = CardDeck.createAndShuffle(vue);
this.bank = LunaBank.createEmpty();
// this.bank = new LunaBank(vue);
@ -21,7 +22,6 @@ class Blackjack { @@ -21,7 +22,6 @@ class Blackjack {
}
this.bank.money -= this.bet;
this.roundActive = true;
this.player.pickCard(this.deck.takeOneCard());
@ -38,7 +38,6 @@ class Blackjack { @@ -38,7 +38,6 @@ class Blackjack {
}
console.log('Round has started');
return true;
}
pass() {

8
js/app.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save