blackjack logic written in vue https://luna-development.net/blackjack/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

228 lines
11 KiB

<!doctype html>
<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 http-equiv="X-UA-Compatible" content="ie=edge">
<title>BlackJack ♠</title>
<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/blackjack.css?version=1">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div id="root">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="/blackjack/">
<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">
<i class="fas fa-ellipsis-v"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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/blackjack/" target="_blank">
Development <i class="fas fa-laptop-code"></i>
</a>
</li>
<li class="nav-item">
<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>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-10">
<div class="row" id="card-space" v-if="roundActive || roundPlayed">
<div class="col-md-12 hand">
<h4>
Dealer
({{ dealerScore }})
</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
(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>
</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>
</button>
<button class="btn btn-success" @click="drawAnotherCard" v-if="roundActive">
Draw a card <i class="fas fa-hand-pointer"></i>
</button>
<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 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-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>
<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>
</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://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/LunaBank.js"></script>
<script src="js/Blackjack.js"></script>
<script src="js/Hand.js"></script>
<script src="js/CardDeck.js"></script>
<script src="js/Card.js"></script>
<script src="js/vue.js"></script>
<script src="js/app.js?version=1"></script>
</html>