Wyświetlanie zdobytych bonusowych monet w podsumowaniu rundy podczas pokazywania wyniku.

README.md

@@ -24,3 +24,4 @@ Do zrobienia:
 - [ ] offline first
 - [ ] manifest.json
 - [ ] trzymanie sprzedanych kart i zdobyych bonusow w tablicy gracza w sposób pozwalający na określenie jakiego typy karty i bonusy zostały zdobyte
+- [ ] tryb nocny

css/style.css

@@ -202,7 +202,7 @@
     left: 5vw;
     box-shadow: 0 0 207px #0000027F;
     border: 3px solid #ccc;
-    /*display: none;*/
+    display: none;
 }
 
 /* PLAYERS END */
@@ -256,27 +256,45 @@
 }
 
 .bonus_section {
-    display: flex;
+    display: none;
     justify-content: center;
 }
 
+.bonus_section.show {
+    display: flex;
+}
+
 .player1_bonus {
     text-align: right;
+    margin-right: 3.5vh;
 }
 
-.player2_bonus {
+.player1_bonus .bonus3,.player1_bonus .bonus4,.player1_bonus .bonus5 {
+    display: flex;
+    flex-direction: row-reverse;
+}
 
+
+.player2_bonus {
+    margin-left: 3.5vh;
+}
+.bonus_section .player2_bonus, .bonus_section .player1_bonus {
+    width: 50%;
+}
+
+.bonus_section .player1_bonus span:first-child {
+    margin-left: -30px ;
 }
 
 .bonus_section span:first-child {
-    margin: 1vh 0 1vh 1vw;
+    margin-left: 0;
 }
 
 .bonus_section span {
-    height: 5vh;
+    height: 6vh;
-    width: 5vh;
+    width: 6vh;
     display: inline-block;
-    margin: 1vh 0 1vh -3vw;
+    margin-left: -30px ;
     border-radius: 50%;
     border: 1px solid dodgerblue;
     background: no-repeat #fff center center / 60% 60%;

index.html

@@ -121,35 +121,14 @@
     </div>
     <div class="bonus_section">
         <div class="player1_bonus">
-            <div class="bonus3">
+            <div class="bonus3"></div>
-                <span></span>
+            <div class="bonus4"></div>
-                <span></span>
+            <div class="bonus5"></div>
-                <span></span>
-            </div>
-            <div class="bonus4">
-                <span></span>
-                <span></span>
-            </div>
-            <div class="bonus5">
-                <span></span>
-            </div>
-
         </div>
         <div class="player2_bonus">
-            <div class="bonus3">
+            <div class="bonus3"></div>
-                <span></span>
+            <div class="bonus4"></div>
-                <span></span>
+            <div class="bonus5"></div>
-            </div>
-            <div class="bonus4">
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-            </div>
-            <div class="bonus5">
-                <span></span>
-                <span></span>
-            </div>
         </div>
     </div>
 </div>

js/script.js

@@ -3,6 +3,11 @@ function coin(value, group) {
     this.group = group;
 }
 
+function Bonus(group, value) {
+    this.value = value;
+    this.group = group;
+}
+
 function player(name, id) {
     this.score = 0;
     this.roundsWon = 0;
@@ -20,7 +25,7 @@ function player(name, id) {
             score += this.coins[i];
         }
         for (var i in this.bonus) {
-            score += this.bonus[i];
+            score += this.bonus[i].value;
         }
 
         if (this.hasCamelCoin) {
@@ -80,7 +85,6 @@ function game(player1, player2, board) {
             jaipur.showAcceptButton();
         } else if (playerId == 2) {
             jaipur.activePlayer = this.player2;
-
             document.querySelector('.player.player1').classList.remove("selected");
             document.querySelector('.player.player2').classList.add("selected");
             jaipur.showAcceptButton();
@@ -88,7 +92,6 @@ function game(player1, player2, board) {
             document.querySelector('.player.player1').classList.remove("selected");
             document.querySelector('.player.player2').classList.remove("selected");
             jaipur.activePlayer = false;
-
         }
 
         return this.activePlayer;
@@ -115,8 +118,6 @@ function game(player1, player2, board) {
         var emptyRows = 0;
         for (var i in board.goods) {
             emptyRows += !board.goods[i].length ? 1 : 0;
-
-            console.info(board.goods[i]);
         }
         return emptyRows >= 3;
     };
@@ -130,10 +131,9 @@ function game(player1, player2, board) {
         });
     };
 
+    //pokazuje ikonkę bonusowej monety przy przycisku przydziel
     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';
@@ -152,7 +152,6 @@ function game(player1, player2, board) {
 
     this.showAcceptButton = function () {
 
-        console.info(jaipur.selectedCointType);
         if (!!jaipur.activePlayer && !!document.querySelector('.coin.selected') &&
             ((document.querySelectorAll('.coin.selected').length >= 2 &&
                     ['silver', 'gold', 'diamond'].indexOf(jaipur.selectedCointType) > -1
@@ -203,9 +202,8 @@ function game(player1, player2, board) {
         jaipur.showBonus();
     };
 
-    this.showBonus  = function(){
+    this.showBonus = function () {
-
+        document.querySelector('.bonus_section').classList.add('show');
-
     };
 
 
@@ -318,16 +316,20 @@ function game(player1, player2, board) {
             jaipur.activePlayer.coins.push(parseInt(coins[i].innerText));
             coins[i].remove();
         }
+        //przydzielanie bonusu
         var bonus = false;
         if (coins.length == 3) {
             var bonusGroup = 'three';
-            bonus = jaipur.board.bonus.three.pop()
+            bonus = new Bonus(3, jaipur.board.bonus.three.pop()); //{3: jaipur.board.bonus.three.pop()};
+
         } else if (coins.length == 4) {
             var bonusGroup = 'four';
-            bonus = jaipur.board.bonus.four.pop()
+            bonus = new Bonus(4, jaipur.board.bonus.four.pop()); //{3: jaipur.board.bonus.three.pop()};
+            // bonus = {4: jaipur.board.bonus.four.pop()};
         } else if (coins.length >= 5) {
             var bonusGroup = 'five';
-            bonus = jaipur.board.bonus.five.pop()
+            bonus = new Bonus(5, jaipur.board.bonus.five.pop()); //{3: jaipur.board.bonus.three.pop()};
+            // bonus = {5: jaipur.board.bonus.five.pop()};
         }
 
         if (!!bonus) {
@@ -344,10 +346,26 @@ function game(player1, player2, board) {
         jaipur.setActivePlayer(false);
         if (jaipur.isRoundOver()) {
             jaipur.showScoreBoard();
+            jaipur.drawBonusCoins();
         }
 
     };
 
+    this.drawBonusCoins = function(){
+        for(var i in jaipur.player1.bonus){
+            var group = document.querySelector('.player1_bonus .bonus'+jaipur.player1.bonus[i].group);
+            var bonusCoin = document.createElement("span");
+            group.appendChild(bonusCoin);
+        }
+
+
+        for(var i in jaipur.player2.bonus){
+            var group = document.querySelector('.player2_bonus .bonus'+jaipur.player2.bonus[i].group);
+            var bonusCoin = document.createElement("span");
+            group.appendChild(bonusCoin);
+        }
+    };
+
 
     this.initializeCamels = function () {