initial commit
This commit is contained in:
@@ -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;
|
||||
}
|
||||
@@ -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 */
|
||||
@@ -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"
|
||||
}
|
||||
@@ -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
|
||||
@@ -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>
|
||||
Vendored
+10364
File diff suppressed because it is too large
Load Diff
Vendored
+2
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 941 KiB |
Reference in New Issue
Block a user