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.
230 lines
11 KiB
230 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 |
|
<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> |
|
</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> |