diff --git a/README.md b/README.md index 9689ae1..43ce01a 100644 --- a/README.md +++ b/README.md @@ -18,4 +18,5 @@ Do zrobienia: - [x] nie można wybrać więcej niż 7 monet na raz - [x] minimum dwie karty złota, srebra i diamentu, bez limitu dla innych kart - [ ] kończenie rozgrywki w przypadku braku kart -- [ ] pokazanie na przycisku przydziel że dodany zostanie bonus za dane zagranie lub nie \ No newline at end of file +- [x] pokazanie na przycisku przydziel że dodany zostanie bonus za dane zagranie lub nie +- [ ] zmiana imion graczy \ No newline at end of file diff --git a/css/grid-template.css b/css/grid-template.css index cc5138b..4214ee4 100644 --- a/css/grid-template.css +++ b/css/grid-template.css @@ -13,6 +13,10 @@ grid-template-rows: repeat(8, 1fr); } +@media screen and (orientation: landscape){ + /*.container {display: none; }*/ +} + .group.leather { grid-area: leather; } .group.fabric { grid-area: fabric; } .group.spice { grid-area: spice; } diff --git a/css/style.css b/css/style.css index 2d38818..98f2790 100644 --- a/css/style.css +++ b/css/style.css @@ -113,20 +113,51 @@ visibility: hidden; border: 2px solid dodgerblue; margin: 1.5vh auto; - max-width: 18vw; + max-width: 100%; height: 5vh; - padding: 0.5vh 2vw; + padding: 0.5vh 0vw; 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; + display: flex; + justify-items: center; + flex-direction: row; + justify-content: space-around; } +.acceptcontainer .bonus { + height: 5vh; + width: 5vh; + display: inline-block; + margin: 0; + border-radius: 50%; + border: 1px solid dodgerblue; + background: no-repeat #fff center center / 60% 60%; + display: none; +} + + + +.acceptcontainer .bonus.bonus5 { + background-image: url(../bonus5.svg); +} +.acceptcontainer .bonus.bonus4 { + background-image: url(../bonus4.svg); +} +.acceptcontainer .bonus.bonus3 { + background-image: url(../bonus3.svg); +} + + .accept.on { visibility: visible; } +.accept.label { + +} .player1container { grid-area: player1container; diff --git a/index.html b/index.html index 40524ec..2872846 100644 --- a/index.html +++ b/index.html @@ -40,7 +40,12 @@
Kicia
-
Przydziel
+
+ Przydziel + + + +
Cysio
diff --git a/js/script.js b/js/script.js index 53fc05f..41a900e 100644 --- a/js/script.js +++ b/js/script.js @@ -130,6 +130,26 @@ function game(player1, player2, board) { }); }; + this.showBonusCoins = function () { + + var selectedCoins = document.querySelectorAll('.coin.selected').length; + + jaipur.hideBonusCoins(); + if (selectedCoins >= 5 && !!jaipur.board.bonus.five.length) { + document.querySelector('.bonus5').style.display = 'block'; + return; + } + if (selectedCoins == 4 && !!jaipur.board.bonus.four.length) { + document.querySelector('.bonus4').style.display = 'block'; + return; + } + if (selectedCoins == 3 && !!jaipur.board.bonus.three.length) { + document.querySelector('.bonus3').style.display = 'block'; + return; + } + + }; + this.showAcceptButton = function () { console.info(jaipur.selectedCointType); @@ -148,8 +168,16 @@ function game(player1, player2, board) { this.hideAcceptButton = function () { document.querySelector('.accept').style.visibility = 'hidden'; + jaipur.hideBonusCoins(); }; + this.hideBonusCoins = function () { + document.querySelector('.bonus5').style.display = 'none'; + document.querySelector('.bonus4').style.display = 'none'; + document.querySelector('.bonus3').style.display = 'none'; + }; + + this.camelClick = function (player) { document.querySelector('.nobody').classList.remove('selected'); document.querySelector('.player1_camel').classList.remove('selected'); @@ -231,6 +259,7 @@ function game(player1, player2, board) { jaipur.addBlankCoin(this.selectedCointType); } } + jaipur.showBonusCoins(); }