Pokazywanie symbolu żetonu bonusowego jaki się dostanie za sprzedanie wybranych kart.

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
+- [x] pokazanie na przycisku przydziel że dodany zostanie bonus za dane zagranie lub nie
+- [ ] zmiana imion graczy

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; }

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;

index.html

@@ -40,7 +40,12 @@
         <div class="player player1" data-player="1">Kicia</div>
     </div>
     <div class="acceptcontainer">
-        <div class="accept">Przydziel</div>
+        <div class="accept">
+            <span class="label">Przydziel</span>
+            <span class="bonus bonus5"></span>
+            <span class="bonus bonus4"></span>
+            <span class="bonus bonus3"></span>
+        </div>
     </div>
     <div class="player2container">
         <div class="player player2" data-player="2">Cysio</div>

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();
         }