krzysiej/jaipur-score
1
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Przerobienie nieco na grid css. Pozwolenie na dodawanie żetonów o wartości zero i zbieranie bonusów za nie jesli te istnieją.

Browse Source
This commit is contained in:
kplaczek
2017-08-13 22:48:29 +02:00
parent 1410407272
commit 9bbcc73b33
4 changed files with 92 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
css/grid-template.css Normal file
View File

@@ -0,0 +1,21 @@
.container {
display: grid;
grid-template-areas:
"player1container acceptcontainer player2container"
"leather leather leather"
"fabric fabric fabric"
"spice spice spice"
"silver silver silver"
"gold gold gold"
"diamond diamond diamond";
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 1fr);
}
.group.leather { grid-area: leather; }
.group.fabric { grid-area: fabric; }
.group.spice { grid-area: spice; }
.group.silver { grid-area: silver; }
.group.gold { grid-area: gold; }
.group.diamond { grid-area: diamond; }

61
css/style.css
View File

@@ -79,56 +79,64 @@
background-size: 44%; background-size: 44%;
} }
.players { /* PLAYERS START */
display: flex;
justify-content: space-around;
}
.players .player { .player {
border: 2px solid dodgerblue; border: 2px solid dodgerblue;
padding: 0.5vh 4vh; padding: 0.5vh 4vh;
margin: 1.5vh 0; margin: 1.5vh auto;
width: 10vw;
color: #444; color: #444;
cursor: pointer; cursor: pointer;
border-radius: 2px; border-radius: 2px;
font-weight: bold; font-weight: bold;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
display: flex; height: 5vh;
align-items: center; width: 10vw;
height: 50px; line-height: 5vh;
text-align: center;
} }
.players .player.selected { .player.selected {
background: #6f9cc9; background: #6f9cc9;
color: #f2eeee; color: #f2eeee;
} }
.players .accept { .accept {
grid-area: acceptcontainer;
visibility: hidden; visibility: hidden;
border: 2px solid dodgerblue; border: 2px solid dodgerblue;
margin: 1.5vh 0; margin: 1.5vh auto;
height: 50px; width: 10vw;
align-items: center; height: 5vh;
display: flex;
padding: 0.5vh 4vh; padding: 0.5vh 4vh;
font-weight: bold; font-weight: bold;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
background-color: #bedfff; background-color: #bedfff;
cursor: pointer; cursor: pointer;
line-height: 5vh;
text-align: center;
} }
.players .accept.on { .accept.on {
visibility: visible; visibility: visible;
} }
.players .player.player1 { .player1container {
grid-area: player1container;
} }
.players .player.player2 { .player2container {
grid-area: player2container;
} }
.players .player .score { .player.player1 {
}
.player.player2 {
}
.player .score {
height: 50px; height: 50px;
width: 23px; width: 23px;
display: inline-block; display: inline-block;
@@ -141,7 +149,7 @@
} }
.players .player .score:first-child { .player .score:first-child {
margin-left: 15px; margin-left: 15px;
} }
@@ -158,12 +166,17 @@
display: none; display: none;
} }
/* PLAYERS END */
/* SCORE TABLE START */
.scoreTable.visible { .scoreTable.visible {
display: block; display: block;
} }
.scoreTable h1 { .scoreTable h1 {
text-align: center; text-align: center;
font-size: 10vh;
} }
@@ -184,12 +197,12 @@
cursor: pointer; cursor: pointer;
opacity: 0.1; opacity: 0.1;
} }
.camel_section .nobody { .camel_section .nobody {
opacity: 0.1; opacity: 0.1;
} }
.camel_section .player1_camel.selected, .camel_section .player2_camel.selected, .camel_section .nobody.selected .camel_section .player1_camel.selected, .camel_section .player2_camel.selected, .camel_section .nobody.selected {
{
opacity: 1; opacity: 1;
} }
@@ -202,3 +215,5 @@
.score_section.show { .score_section.show {
display: flex; display: flex;
} }
/* SCORE TABLE END */

10
index.html
View File

@@ -6,8 +6,9 @@
<meta name="viewport" <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/reset.css"/> <link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/grid-template.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/script.js"></script> <script src="js/script.js"></script>
<script> <script>
window.onload = function () { window.onload = function () {
@@ -30,16 +31,19 @@
jaipur.init(); jaipur.init();
console.info(jaipur.isRoundOver());
}; };
</script> </script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="players"> <div class="player1container">
<div class="player player1" data-player="1">Kicia</div> <div class="player player1" data-player="1">Kicia</div>
</div>
<div class="acceptcontainer">
<div class="accept">Przydziel</div> <div class="accept">Przydziel</div>
</div>
<div class="player2container">
<div class="player player2" data-player="2">Cysio</div> <div class="player player2" data-player="2">Cysio</div>
</div> </div>

32
js/script.js
View File

@@ -1,4 +1,3 @@
function coin(value, group) { function coin(value, group) {
this.value = value; this.value = value;
this.group = group; this.group = group;
@@ -13,7 +12,7 @@ function player(name, id) {
this.id = id; this.id = id;
this.selector = '.player.player' + id; this.selector = '.player.player' + id;
this.hasCamelCoin = true; this.hasCamelCoin = false;
this.calculateScore = function () { this.calculateScore = function () {
var score = 0; var score = 0;
@@ -195,17 +194,41 @@ function game(player1, player2, board) {
} }
jaipur.hideAcceptButton(); jaipur.hideAcceptButton();
} }
jaipur.removeBlankCoin(jaipur.selectedCointType);
} else { } else {
//ustawienie selected na elemencie z kliniętej grupy //ustawienie selected na elemencie z kliniętej grupy
var coinsFromRow = document.querySelectorAll('.coin.' + this.dataset.group + ':not(.selected)'); var coinsFromRow = document.querySelectorAll('.coin.' + this.dataset.group + ':not(.selected)');
[].slice.call(coinsFromRow).pop().classList.add('selected'); [].slice.call(coinsFromRow).pop().classList.add('selected');
jaipur.showAcceptButton(); jaipur.showAcceptButton();
//dodanie monety o wartości zero jeśli wybrano wszystkie monety z danej grupy
if (!!document.querySelectorAll('.coin.' + this.selectedCointType + ':not(.selected)').length == 0) {
jaipur.addBlankCoin(this.selectedCointType);
}
} }
} }
}; };
this.addBlankCoin = function (groupName) {
var blankCoin = document.createElement('span');
blankCoin.classList.add('coin');
blankCoin.classList.add(groupName);
blankCoin.classList.add('blank');
blankCoin.innerText = '0';
blankCoin.dataset.group=groupName;
blankCoin.addEventListener('click', jaipur.coinClick);
var firstElementInGroup = document.querySelector('.coin.' + groupName);
document.querySelector('.group.' + groupName).insertBefore(blankCoin, firstElementInGroup);
};
this.removeBlankCoin = function (groupName) {
document.querySelector('.coin.blank.' + groupName).remove();
};
this.showScoreBoard = function () { this.showScoreBoard = function () {
document.querySelector('.scoreTable').classList.add('visible'); document.querySelector('.scoreTable').classList.add('visible');
@@ -232,7 +255,6 @@ function game(player1, player2, board) {
var group = coins[i].dataset.group; var group = coins[i].dataset.group;
jaipur.board.goods[group].pop(); jaipur.board.goods[group].pop();
// jaipur.activePlayer.coins.push({ value: parseInt(coins[i].innerText), type: 'goods', group: group});
jaipur.activePlayer.coins.push(parseInt(coins[i].innerText)); jaipur.activePlayer.coins.push(parseInt(coins[i].innerText));
coins[i].remove(); coins[i].remove();
} }
@@ -249,11 +271,9 @@ function game(player1, player2, board) {
} }
if (!!bonus) { if (!!bonus) {
// { value: parseInt(coins[i].innerText), type: 'goods', group: group}
// jaipur.activePlayer.bonus.push({ value: parseInt(coins[i].innerText), type: 'goods', group: group});
jaipur.activePlayer.bonus.push(bonus); jaipur.activePlayer.bonus.push(bonus);
} }
//
var groups = document.querySelectorAll('.group'); var groups = document.querySelectorAll('.group');
jaipur.selectedCointType = false; jaipur.selectedCointType = false;