RickRongen/camel_race
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Rick Rongen
2018-06-17 20:28:44 +02:00
commit 7300faff00
14 changed files with 11091 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
static/index.html Normal file
View File

@@ -0,0 +1,236 @@
<!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>