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.
57 lines
2.2 KiB
57 lines
2.2 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="css/app.css"> |
|
<link rel="icon" href="favicon.ico"> |
|
</head> |
|
<body> |
|
<div class="container" id="root"> |
|
<div class="row"> |
|
<div class="col-md-12"> |
|
<button @click="testRound" v-if="!roundActive">Start round</button> |
|
<button @click="drawAnotherCard" v-if="roundActive">Draw</button> |
|
<button @click="pass" v-if="roundActive">Pass</button> |
|
<button @click="endRound" v-if="roundActive">End round</button> |
|
</div> |
|
</div> |
|
|
|
<!-- <div class="row">--> |
|
<!-- <div class="col-md-1" v-for="card in cards">--> |
|
<!-- <img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card">--> |
|
<!-- </div>--> |
|
<!-- </div>--> |
|
|
|
<div class="row"> |
|
<div class="col-md-6"> |
|
<h4>Dealer <template v-if="!roundActive">({{ dealerScore }})</template></h4> |
|
<div class="row"> |
|
<div class="col-md-4" v-for="(card, index) in dealersHand"> |
|
<img :src="index > 0 ? card.asset : roundActive ? cardBack : card.asset" :alt="card.symbol + '_' + card.points" class="playing-card"> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-md-6"> |
|
<h4>Hand ({{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore }})</h4> |
|
<div class="row"> |
|
<div class="col-md-4" v-for="card in usersHand"> |
|
<img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="row"> |
|
<div class="col-md-12" id="status"> |
|
<h1 v-text="status"></h1> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
<script src="js/vue.js"></script> |
|
<script src="js/app.js"></script> |
|
</html> |