Prezentacja bonusowych żetonów zdobytych przez graczy - pierwsza wersja.

README.md

@@ -20,3 +20,7 @@ Do zrobienia:
 - [ ] kończenie rozgrywki w przypadku braku kart
 - [x] pokazanie na przycisku przydziel że dodany zostanie bonus za dane zagranie lub nie
 - [ ] zmiana imion graczy
+- [ ] wersja landscape
+- [ ] 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

css/grid-template.css

@@ -10,7 +10,7 @@
     "diamond diamond diamond";
 
     grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(8, 1fr);
+    grid-template-rows: repeat(7, 1fr);
 }
 
 @media screen and (orientation: landscape){

css/style.css

@@ -10,9 +10,11 @@
 .group .coin:first-child {
     margin: 5px 0vh 5px 0vh;
 }
+
 .group .coin.blank {
     opacity: 0.7;
 }
+
 .group .coin.blank.selected {
     opacity: 1;
 }
@@ -139,22 +141,22 @@
     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 {
 
 }
@@ -200,7 +202,7 @@
     left: 5vw;
     box-shadow: 0 0 207px #0000027F;
     border: 3px solid #ccc;
-    display: none;
+    /*display: none;*/
 }
 
 /* PLAYERS END */
@@ -253,4 +255,66 @@
     display: flex;
 }
 
+.bonus_section {
+    display: flex;
+    justify-content: center;
+}
+
+.player1_bonus {
+    text-align: right;
+}
+
+.player2_bonus {
+
+}
+
+.bonus_section span:first-child {
+    margin: 1vh 0 1vh 1vw;
+}
+
+.bonus_section span {
+    height: 5vh;
+    width: 5vh;
+    display: inline-block;
+    margin: 1vh 0 1vh -3vw;
+    border-radius: 50%;
+    border: 1px solid dodgerblue;
+    background: no-repeat #fff center center / 60% 60%;
+    /*display: none;*/
+}
+
+.bonus_section .bonus3 span {
+    background-image: url(../bonus3.svg);
+}
+
+.bonus_section .bonus4 span {
+    background-image: url(../bonus4.svg);
+}
+
+.bonus_section .bonus5 span {
+    background-image: url(../bonus5.svg);
+}
+
 /* SCORE TABLE END */
+
+/*.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);*/
+/*}*/
+

index.html

@@ -104,8 +104,6 @@
 </div>
 <div class="scoreTable">
     <h1>Wynik</h1>
-
-
     <div class="players_section">
         <div class="player1_name">Kicia</div>
         <div></div>
@@ -120,7 +118,39 @@
         <div class="player1_score">0</div>
         <div class="separator">:</div>
         <div class="player2_score">0</div>
+    </div>
+    <div class="bonus_section">
+        <div class="player1_bonus">
+            <div class="bonus3">
+                <span></span>
+                <span></span>
+                <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">
+                <span></span>
+                <span></span>
+            </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

@@ -200,8 +200,15 @@ function game(player1, player2, board) {
         jaipur.player1.calculateScore();
         jaipur.player2.calculateScore();
         jaipur.showScore();
+        jaipur.showBonus();
     };
 
+    this.showBonus  = function(){
+
+
+    };
+
+
     this.coinClick = function () {
 
         if (!jaipur.selectedCointType) {