Przerobienie nieco na grid css. Pozwolenie na dodawanie żetonów o wartości zero i zbieranie bonusów za nie jesli te istnieją.
This commit is contained in:
kplaczek
21
css/grid-template.css
Normal file
21
css/grid-template.css
Normal 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; }
|
||||
@@ -79,56 +79,64 @@
|
||||
background-size: 44%;
|
||||
}
|
||||
|
||||
.players {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
/* PLAYERS START */
|
||||
|
||||
.players .player {
|
||||
.player {
|
||||
border: 2px solid dodgerblue;
|
||||
padding: 0.5vh 4vh;
|
||||
margin: 1.5vh 0;
|
||||
margin: 1.5vh auto;
|
||||
width: 10vw;
|
||||
color: #444;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
font-weight: bold;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
height: 5vh;
|
||||
width: 10vw;
|
||||
line-height: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.players .player.selected {
|
||||
.player.selected {
|
||||
background: #6f9cc9;
|
||||
color: #f2eeee;
|
||||
|
||||
}
|
||||
|
||||
.players .accept {
|
||||
.accept {
|
||||
grid-area: acceptcontainer;
|
||||
visibility: hidden;
|
||||
border: 2px solid dodgerblue;
|
||||
margin: 1.5vh 0;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin: 1.5vh auto;
|
||||
width: 10vw;
|
||||
height: 5vh;
|
||||
padding: 0.5vh 4vh;
|
||||
font-weight: bold;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
|
||||
background-color: #bedfff;
|
||||
cursor: pointer;
|
||||
line-height: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.players .accept.on {
|
||||
.accept.on {
|
||||
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;
|
||||
width: 23px;
|
||||
display: inline-block;
|
||||
@@ -141,7 +149,7 @@
|
||||
|
||||
}
|
||||
|
||||
.players .player .score:first-child {
|
||||
.player .score:first-child {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@@ -158,12 +166,17 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* PLAYERS END */
|
||||
|
||||
/* SCORE TABLE START */
|
||||
|
||||
.scoreTable.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.scoreTable h1 {
|
||||
text-align: center;
|
||||
font-size: 10vh;
|
||||
|
||||
}
|
||||
|
||||
@@ -184,12 +197,12 @@
|
||||
cursor: pointer;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.camel_section .nobody {
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -202,3 +215,5 @@
|
||||
.score_section.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* SCORE TABLE END */
|
||||
10
index.html
10
index.html
@@ -6,8 +6,9 @@
|
||||
<meta name="viewport"
|
||||
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/grid-template.css"/>
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<script src="js/script.js"></script>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
@@ -30,16 +31,19 @@
|
||||
|
||||
jaipur.init();
|
||||
|
||||
console.info(jaipur.isRoundOver());
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="players">
|
||||
<div class="player1container">
|
||||
<div class="player player1" data-player="1">Kicia</div>
|
||||
</div>
|
||||
<div class="acceptcontainer">
|
||||
<div class="accept">Przydziel</div>
|
||||
</div>
|
||||
<div class="player2container">
|
||||
<div class="player player2" data-player="2">Cysio</div>
|
||||
</div>
|
||||
|
||||
|
||||
32
js/script.js
32
js/script.js
@@ -1,4 +1,3 @@
|
||||
|
||||
function coin(value, group) {
|
||||
this.value = value;
|
||||
this.group = group;
|
||||
@@ -13,7 +12,7 @@ function player(name, id) {
|
||||
this.id = id;
|
||||
this.selector = '.player.player' + id;
|
||||
|
||||
this.hasCamelCoin = true;
|
||||
this.hasCamelCoin = false;
|
||||
|
||||
this.calculateScore = function () {
|
||||
var score = 0;
|
||||
@@ -195,17 +194,41 @@ function game(player1, player2, board) {
|
||||
}
|
||||
jaipur.hideAcceptButton();
|
||||
}
|
||||
jaipur.removeBlankCoin(jaipur.selectedCointType);
|
||||
|
||||
} else {
|
||||
//ustawienie selected na elemencie z kliniętej grupy
|
||||
var coinsFromRow = document.querySelectorAll('.coin.' + this.dataset.group + ':not(.selected)');
|
||||
[].slice.call(coinsFromRow).pop().classList.add('selected');
|
||||
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 () {
|
||||
|
||||
document.querySelector('.scoreTable').classList.add('visible');
|
||||
@@ -232,7 +255,6 @@ function game(player1, player2, board) {
|
||||
var group = coins[i].dataset.group;
|
||||
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));
|
||||
coins[i].remove();
|
||||
}
|
||||
@@ -249,11 +271,9 @@ function game(player1, player2, board) {
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
//
|
||||
|
||||
|
||||
var groups = document.querySelectorAll('.group');
|
||||
jaipur.selectedCointType = false;
|
||||
|
||||
Reference in New Issue
Block a user