initial commit
This commit is contained in:
48
static/css/reset.css
Normal file
48
static/css/reset.css
Normal file
@@ -0,0 +1,48 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
26
static/css/style.css
Normal file
26
static/css/style.css
Normal file
@@ -0,0 +1,26 @@
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
h1 {
|
||||
font-size: xx-large;
|
||||
font-weight: bolder; }
|
||||
|
||||
#topcards > .card {
|
||||
display: inline-block; }
|
||||
|
||||
.card-ace {
|
||||
position: relative;
|
||||
-webkit-transition: left 0.25s;
|
||||
-moz-transition: left 0.25s;
|
||||
-ms-transition: left 0.25s;
|
||||
-o-transition: left 0.25s;
|
||||
transition: left 0.25s;
|
||||
display: inline; }
|
||||
|
||||
.card {
|
||||
height: 100px; }
|
||||
.card svg {
|
||||
height: 100px; }
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
7
static/css/style.css.map
Normal file
7
static/css/style.css.map
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA,UAAU;EACR,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEd,EAAE;EACA,SAAS,EAAE,QAAQ;EACnB,WAAW,EAAE,MAAM;;AAErB,iBAAiB;EACf,OAAO,EAAE,YAAY;;AAEvB,SAAS;EACP,QAAQ,EAAE,QAAQ;EAClB,kBAAkB,EAAE,UAAU;EAC9B,eAAe,EAAE,UAAU;EAC3B,cAAc,EAAE,UAAU;EAC1B,aAAa,EAAE,UAAU;EACzB,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,MAAM;;AAEjB,KAAK;EACH,MAAM,EAAE,KAAK;EACb,SAAG;IACD,MAAM,EAAE,KAAK",
|
||||
"sources": ["style.sass"],
|
||||
"names": [],
|
||||
"file": "style.css"
|
||||
}
|
||||
24
static/css/style.sass
Normal file
24
static/css/style.sass
Normal file
@@ -0,0 +1,24 @@
|
||||
html, body
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
h1
|
||||
font-size: xx-large
|
||||
font-weight: bolder
|
||||
|
||||
#topcards > .card
|
||||
display: inline-block
|
||||
|
||||
.card-ace
|
||||
position: relative
|
||||
-webkit-transition: left 0.25s
|
||||
-moz-transition: left 0.25s
|
||||
-ms-transition: left 0.25s
|
||||
-o-transition: left 0.25s
|
||||
transition: left 0.25s
|
||||
display: inline
|
||||
|
||||
.card
|
||||
height: 100px
|
||||
svg
|
||||
height: 100px
|
||||
236
static/index.html
Normal file
236
static/index.html
Normal 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>
|
||||
10364
static/js/jquery-3.3.1.js
vendored
Normal file
10364
static/js/jquery-3.3.1.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
2
static/js/jquery-3.3.1.min.js
vendored
Normal file
2
static/js/jquery-3.3.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
static/js/jquery-3.3.1.min.map
Normal file
1
static/js/jquery-3.3.1.min.map
Normal file
File diff suppressed because one or more lines are too long
2
static/svg/svg-cards.svg
Normal file
2
static/svg/svg-cards.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 941 KiB |
Reference in New Issue
Block a user