236 lines
7.5 KiB
HTML
236 lines
7.5 KiB
HTML
<!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>Card Game</title>
|
|
<script src="js/jquery-3.3.1.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script>
|
|
function cardToPlayCard(card) {
|
|
let pre, post;
|
|
|
|
if (card === 'XX') {
|
|
return "svg/svg-cards.svg#back";
|
|
}
|
|
|
|
switch (card[0]) {
|
|
case 'A':
|
|
pre = '1';
|
|
break;
|
|
case 'K':
|
|
pre = 'king';
|
|
break;
|
|
case 'Q':
|
|
pre = 'queen';
|
|
break;
|
|
case 'J':
|
|
pre = 'jack';
|
|
break;
|
|
default:
|
|
pre = card.substr(0, card.length - 1);
|
|
}
|
|
switch (card.substr(card.length - 1)) {
|
|
case 'H':
|
|
post = 'heart';
|
|
break;
|
|
case 'S':
|
|
post = 'spade';
|
|
break;
|
|
case 'D':
|
|
post = 'diamond';
|
|
break;
|
|
case 'C':
|
|
post = 'club';
|
|
break;
|
|
}
|
|
|
|
return `svg/svg-cards.svg#${pre}_${post}`
|
|
|
|
}
|
|
|
|
$(function () {
|
|
let btnNewGame = $("#newgame");
|
|
let btnStartGame = $("#startgame");
|
|
let btnDoRound = $("#doround");
|
|
|
|
let txtBetName = $("#bet-name");
|
|
let selBetSuit = $("#bet-suit");
|
|
let numBetAmount = $("#bet-amount");
|
|
let btnBet = $("#bet");
|
|
|
|
let aces = {
|
|
'AS': $("#card-ace-spades"),
|
|
'AH': $("#card-ace-hearts"),
|
|
'AD': $("#card-ace-diamonds"),
|
|
'AC': $("#card-ace-clubs"),
|
|
};
|
|
|
|
let templateCard = $("#template-card").html();
|
|
|
|
let topcards = $("#topcards");
|
|
|
|
let gameBase = null;
|
|
|
|
function buildTopCards(cards) {
|
|
let html;
|
|
topcards.empty();
|
|
cards.forEach(function (card, ind, array) {
|
|
console.log(card, ind, array);
|
|
html = templateCard;
|
|
html = html.replace("{href}", cardToPlayCard(card));
|
|
topcards.append($(html));
|
|
});
|
|
}
|
|
|
|
function updateGame() {
|
|
$.ajax({
|
|
'url': gameBase
|
|
}).done(function (data) {
|
|
console.log(data);
|
|
|
|
buildTopCards(data['left_cards']);
|
|
|
|
$.each(data['aces'], function (key, value) {
|
|
aces[key].css({'left': value * 150});
|
|
});
|
|
// todo check if game is done
|
|
}).fail(function (data) {
|
|
alert(data);
|
|
console.log(data);
|
|
})
|
|
}
|
|
|
|
btnNewGame.click(function () {
|
|
$.ajax({
|
|
'url': '/game/'
|
|
}).done(function (data) {
|
|
gameBase = data['url'];
|
|
updateGame();
|
|
}).fail(function (data) {
|
|
alert(data);
|
|
console.log(data);
|
|
});
|
|
});
|
|
|
|
btnStartGame.click(function () {
|
|
$.ajax({
|
|
'url': gameBase + '/start'
|
|
}).done(function (data) {
|
|
updateGame();
|
|
}).fail(function (data) {
|
|
alert(data);
|
|
console.log(data);
|
|
});
|
|
});
|
|
|
|
btnDoRound.click(function () {
|
|
$.ajax({
|
|
'url': gameBase + '/round'
|
|
}).done(function (data) {
|
|
console.log(data); // todo display card
|
|
updateGame();
|
|
}).fail(function (data) {
|
|
alert(data);
|
|
console.log(data);
|
|
});
|
|
});
|
|
|
|
btnBet.click(function () {
|
|
let user, suit, amount;
|
|
user = txtBetName.val();
|
|
suit = selBetSuit.val();
|
|
amount = numBetAmount.val();
|
|
|
|
$.ajax({
|
|
'url': gameBase + '/bet',
|
|
'method': 'POST',
|
|
'data': {
|
|
'USER': user,
|
|
'SUIT': suit,
|
|
'AMOUNT': amount,
|
|
}
|
|
}).done(function (data) {
|
|
console.log(data);
|
|
}).fail(function (data) {
|
|
alert(data);
|
|
});
|
|
|
|
txtBetName.val("");
|
|
numBetAmount.val("")
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<nav id="header">
|
|
<h1>Kamelen Race!</h1>
|
|
</nav>
|
|
<div id="game">
|
|
<div id="control">
|
|
<div>
|
|
<button id="newgame">New Game</button>
|
|
<button id="startgame">Start Game</button>
|
|
<button id="doround">Do Round</button>
|
|
</div>
|
|
<div>
|
|
<h1>Bet</h1>
|
|
<input type="text" id="bet-name" placeholder="Name">
|
|
<label for="bet-suit">Suit</label>
|
|
<select id="bet-suit">
|
|
<option value="S">Spades</option>
|
|
<option value="H">Hearts</option>
|
|
<option value="D">Diamonds</option>
|
|
<option value="C">Clubs</option>
|
|
</select>
|
|
<input type="number" placeholder="Amount" id="bet-amount">
|
|
<button id="bet">Bet</button>
|
|
</div>
|
|
</div>
|
|
<div id="topcards">
|
|
</div>
|
|
<div id="track">
|
|
<div class="tracklane">
|
|
<div id="card-ace-spades" class="card card-ace">
|
|
<svg width="150" viewBox="0 0 262 180">
|
|
<use href="svg/svg-cards.svg#1_spade" transform="rotate(90) translate(0,-260)"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="tracklane">
|
|
<div id="card-ace-hearts" class="card card-ace">
|
|
<svg width="150" viewBox="0 0 262 180">
|
|
<use href="svg/svg-cards.svg#1_heart" transform="rotate(90) translate(0,-260)"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="tracklane">
|
|
<div id="card-ace-diamonds" class="card card-ace">
|
|
<svg width="150" viewBox="0 0 262 180">
|
|
<use href="svg/svg-cards.svg#1_diamond" transform="rotate(90) translate(0,-260)"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="tracklane">
|
|
<div id="card-ace-clubs" class="card card-ace">
|
|
<svg width="150" viewBox="0 0 262 180">
|
|
<use href="svg/svg-cards.svg#1_club" transform="rotate(90) translate(0,-260)"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script language="html/template" id="template-card">
|
|
<div class="card">
|
|
<svg width="150" viewBox="0 0 262 180">
|
|
<use href="{href}" transform="rotate(90) translate(0,-260)"></use>
|
|
</svg>
|
|
</div>
|
|
</script>
|
|
</body>
|
|
</html> |