Przerobienie nieco na grid css. Pozwolenie na dodawanie żetonów o wartości zero i zbieranie bonusów za nie jesli te istnieją.

css/grid-template.css

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

css/style.css

@@ -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 */