|
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta property="og:title" content="Blackjack 🂱"/>
|
|
|
|
|
<meta property="og:description" content="Blackjack 🂱"/>
|
|
|
|
|
<meta property="og:image" content="img/heartsa.png"/>
|
|
|
|
|
<meta property="og:url" content="https://luna-development.net/blackjack/">
|
|
|
|
|
<meta property="og:type" content="game">
|
|
|
|
|
<meta property="fb:app_id" content="0">
|
|
|
|
|
<link rel="manifest" href="manifest.json">
|
|
|
|
|
<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-9">
|
|
|
|
|
<div class="row" id="card-space" v-if="roundActive || roundPlayed">
|
|
|
|
|
<div class="col-md-12 hand">
|
|
|
|
|
<h4>
|
|
|
|
|
Dealer
|
|
|
|
|
<span v-if="!roundActive">({{ dealerScore }})</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 class="col-md-12 hand">
|
|
|
|
|
<h4>
|
|
|
|
|
Hand
|
|
|
|
|
({{ 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 class="row" v-else>
|
|
|
|
|
<div class="col-12" id="placeholder">
|
|
|
|
|
<h5>Place your bet and start a round.</h5>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-3 card" id="actions">
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div v-if="!roundActive">
|
|
|
|
|
<button class="btn btn-success" @click="startRound">
|
|
|
|
|
New round <i class="fas fa-play"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
<template v-if="!roundActive">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label>Place your bet:</label>
|
|
|
|
|
<input class="form-control bet-input" type="number" v-model="bet">
|
|
|
|
|
</div>
|
|
|
|
|
<label class="font-weight-bold">
|
|
|
|
|
Quick-Bets <small class="text-muted">(100, 250, 500, 1000)</small>
|
|
|
|
|
</label>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-12" id="quick-bet-buttons">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<a class="btn btn-success" @click="quickBet(100)">
|
|
|
|
|
<img class="quick-bet" src="img/chips/chipBlueWhite.png"/>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<a class="btn btn-success" @click="quickBet(250)">
|
|
|
|
|
<img class="quick-bet" src="img/chips/chipGreenWhite.png"/>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<a class="btn btn-success" @click="quickBet(500)">
|
|
|
|
|
<img class="quick-bet" src="img/chips/chipRedWhite.png"/>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<a class="btn btn-success" @click="quickBet(1000)">
|
|
|
|
|
<img class="quick-bet" src="img/chips/chipBlackWhite.png"/>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="form-group" v-else>
|
|
|
|
|
<label>Your bet:</label>
|
|
|
|
|
<span class="font-weight-bold">{{ bet }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<footer>
|
|
|
|
|
<div class="container"><p class="float-right text-right">
|
|
|
|
|
<p class="float-right text-right">
|
|
|
|
|
Assets by <a href="https://kenney.nl/" target="_blank">KenneyNL</a>
|
|
|
|
|
<i aria-hidden="true" class="fas fa-map"></i>
|
|
|
|
|
<br/>
|
|
|
|
|
Themes by <a href="https://bootswatch.com/" target="_blank">Bootswatch</a>
|
|
|
|
|
<i class="fas fa-palette"></i>
|
|
|
|
|
<br/>
|
|
|
|
|
App by <a href="/">LunaDevelopment</a> <i class="fas fa-code"></i>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<i class="fas fa-balance-scale"></i>
|
|
|
|
|
<a class="" href="/impressum" target="_blank" style="">Impressum
|
|
|
|
|
</a>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<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>
|
