Dodanie menu dolnego, dodanie sposobu kończenia tury, sass.

README.md

@@ -17,7 +17,7 @@ Do zrobienia:
 - [x] przydzielanie żetonu Maharadży
 - [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
+- [x] 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
@@ -25,3 +25,6 @@ Do zrobienia:
 - [ ] 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
+- [ ] refaktoring 
+- [x] sass
+- [x] menu dolne takie jak w natywnych aplikacjach

index.html

@@ -6,9 +6,10 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 
-    <link rel="stylesheet" href="css/reset.css"/>
-    <link rel="stylesheet" href="css/grid-template.css"/>
-    <link rel="stylesheet" href="css/style.css"/>
+    <!--<link rel="stylesheet" href="css/reset.css"/>-->
+    <!--<link rel="stylesheet" href="css/grid-template.css"/>-->
+    <!--<link rel="stylesheet" href="css/style.css"/>-->
+    <link rel="stylesheet" href="sass-css/index.css"/>
     <script src="js/script.js"></script>
     <script>
         window.onload = function () {
@@ -100,7 +101,12 @@
         </span><span class="coin diamond" data-group="diamond">7</span>
     </div>
 
-
+    <div id="menu">
+        <a href="#" id="players">gracze</a>
+        <a href="#" id="endturn">zakończ turę</a>
+        <a href="#" id="restart">restart</a>
+        <a href="#" id="share">udostępnij</a>
+    </div>
 </div>
 <div class="scoreTable">
     <h1>Wynik</h1>

js/script.js

@@ -102,6 +102,7 @@ function game(player1, player2, board) {
         this.initializeAcceptButton();
         this.initializeCoins();
         this.initializeCamels();
+        this.initializeMenu();
     };
 
     this.reset = function () {
@@ -122,6 +123,22 @@ function game(player1, player2, board) {
         return emptyRows >= 3;
     };
 
+    this.initializeMenu = function () {
+        document.querySelector('#players').addEventListener('click', function () {
+
+        });
+        document.querySelector('#endturn').addEventListener('click', function () {
+            jaipur.endTurn();
+        });
+        document.querySelector('#restart').addEventListener('click', function () {
+
+        });
+        document.querySelector('#share').addEventListener('click', function () {
+
+        });
+
+    };
+
     this.initializePlayerButtons = function () {
         document.querySelector('.player.player1').addEventListener('click', function () {
             jaipur.setActivePlayer(1)
@@ -288,10 +305,7 @@ function game(player1, player2, board) {
     };
 
     this.showScoreBoard = function () {
-
         document.querySelector('.scoreTable').classList.add('visible');
-
-
     };
 
     this.showScore = function () {
@@ -345,12 +359,16 @@ function game(player1, player2, board) {
         jaipur.hideAcceptButton();
         jaipur.setActivePlayer(false);
         if (jaipur.isRoundOver()) {
-            jaipur.showScoreBoard();
-            jaipur.drawBonusCoins();
+            jaipur.endTurn();
         }
 
     };
 
+    this.endTurn = function () {
+        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);

sass-css/index.css

@@ -0,0 +1,497 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+/* line 6, C:/Users/k/Desktop/jaipur-score/sass/_reset.scss */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+/* line 27, C:/Users/k/Desktop/jaipur-score/sass/_reset.scss */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+/* line 31, C:/Users/k/Desktop/jaipur-score/sass/_reset.scss */
+body {
+  line-height: 1;
+}
+
+/* line 34, C:/Users/k/Desktop/jaipur-score/sass/_reset.scss */
+ol, ul {
+  list-style: none;
+}
+
+/* line 37, C:/Users/k/Desktop/jaipur-score/sass/_reset.scss */
+blockquote, q {
+  quotes: none;
+}
+
+/* line 40, C:/Users/k/Desktop/jaipur-score/sass/_reset.scss */
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+/* line 45, C:/Users/k/Desktop/jaipur-score/sass/_reset.scss */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* line 1, C:/Users/k/Desktop/jaipur-score/sass/_grid.scss */
+.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"
+ "menu menu menu";
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(8, 1fr);
+}
+
+@media screen and (orientation: landscape) {
+  /*.container {display: none; }*/
+}
+
+/* line 21, C:/Users/k/Desktop/jaipur-score/sass/_grid.scss */
+.group.leather {
+  grid-area: leather;
+}
+
+/* line 22, C:/Users/k/Desktop/jaipur-score/sass/_grid.scss */
+.group.fabric {
+  grid-area: fabric;
+}
+
+/* line 23, C:/Users/k/Desktop/jaipur-score/sass/_grid.scss */
+.group.spice {
+  grid-area: spice;
+}
+
+/* line 24, C:/Users/k/Desktop/jaipur-score/sass/_grid.scss */
+.group.silver {
+  grid-area: silver;
+}
+
+/* line 25, C:/Users/k/Desktop/jaipur-score/sass/_grid.scss */
+.group.gold {
+  grid-area: gold;
+}
+
+/* line 26, C:/Users/k/Desktop/jaipur-score/sass/_grid.scss */
+.group.diamond {
+  grid-area: diamond;
+}
+
+/* line 29, C:/Users/k/Desktop/jaipur-score/sass/_grid.scss */
+.player1container {
+  grid-area: player1container;
+}
+
+/* line 30, C:/Users/k/Desktop/jaipur-score/sass/_grid.scss */
+.player2container {
+  grid-area: player2container;
+}
+
+/* line 31, C:/Users/k/Desktop/jaipur-score/sass/_grid.scss */
+#menu {
+  grid-area: menu;
+}
+
+/* line 1, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+body {
+  height: 100vh;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+}
+
+/* line 7, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+#menu {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  height: 100%;
+  align-items: center;
+}
+
+/* line 13, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+#menu a {
+  max-width: 100%;
+  text-align: center;
+  line-height: 6vh;
+  color: #666;
+  text-decoration: none;
+  padding: 1vw;
+  display: inline-block;
+}
+
+/* line 22, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+#menu a:hover {
+  background-color: #eee;
+  color: #333;
+}
+
+/* PLAYERS START */
+/* line 32, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.container {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  height: 100vh;
+}
+
+/* line 44, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.acceptcontainer .accept {
+  grid-area: acceptcontainer;
+  visibility: hidden;
+  border: 2px solid dodgerblue;
+  margin: 1.5vh auto;
+  max-width: 100%;
+  height: 5vh;
+  padding: 0.5vh 0vw;
+  font-weight: bold;
+  background-color: #bedfff;
+  cursor: pointer;
+  line-height: 5vh;
+  text-align: center;
+  display: flex;
+  justify-items: center;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+/* line 61, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.acceptcontainer .accept.on {
+  visibility: visible;
+}
+
+/* line 66, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.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;
+}
+
+/* line 77, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.acceptcontainer .bonus.bonus3 {
+  background-image: url(../bonus3.svg);
+}
+
+/* line 77, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.acceptcontainer .bonus.bonus4 {
+  background-image: url(../bonus4.svg);
+}
+
+/* line 77, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.acceptcontainer .bonus.bonus5 {
+  background-image: url(../bonus5.svg);
+}
+
+/* line 84, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.player {
+  border: 2px solid dodgerblue;
+  padding: 0.5vh 4vh;
+  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;
+  height: 5vh;
+  width: 10vw;
+  line-height: 5vh;
+  text-align: center;
+}
+
+/* line 99, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.player.selected {
+  background: #6f9cc9;
+  color: #f2eeee;
+}
+
+/* line 104, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.player .score {
+  height: 50px;
+  width: 23px;
+  display: inline-block;
+  background-image: none;
+  background-size: auto auto;
+  margin: 0 5px;
+  background-image: url(../maharaja.svg);
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+
+/* line 115, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.player .score:first-child {
+  margin-left: 15px;
+}
+
+/* PLAYERS END */
+/* line 123, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+* {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+}
+
+/* SCORE TABLE START */
+/* line 128, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable {
+  width: 90vw;
+  background: #fff;
+  content: "";
+  height: 70vh;
+  position: absolute;
+  top: 15vh;
+  left: 5vw;
+  box-shadow: 0 0 207px #000000;
+  border: 3px solid #ccc;
+  display: none;
+}
+
+/* line 140, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable h1 {
+  text-align: center;
+  font-size: 10vh;
+}
+
+/* line 144, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable.visible {
+  display: block;
+}
+
+/* line 148, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .score_section {
+  display: none;
+  font-size: 35px;
+  justify-content: space-around;
+}
+
+/* line 153, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .score_section.show {
+  display: flex;
+}
+
+/* line 158, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .bonus_section {
+  display: none;
+  justify-content: center;
+}
+
+/* line 161, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .bonus_section.show {
+  display: flex;
+}
+
+/* line 166, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .players_section, .scoreTable .camel_section {
+  display: flex;
+  justify-content: space-around;
+  font-size: 45px;
+}
+
+/* line 173, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .camel_section .player1_camel, .scoreTable .camel_section .player2_camel {
+  background: url("../camel.svg") no-repeat 0 0/10vh 10vh;
+  height: 10vh;
+  width: 10vh;
+  cursor: pointer;
+  opacity: 0.1;
+}
+
+/* line 181, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .camel_section .nobody {
+  opacity: 0.1;
+}
+
+/* line 185, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .camel_section .player1_camel.selected, .scoreTable .camel_section .player2_camel.selected, .scoreTable .camel_section .nobody.selected {
+  opacity: 1;
+}
+
+/* line 189, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .player1_bonus {
+  text-align: right;
+  margin-right: 3.5vh;
+}
+
+/* line 194, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .player1_bonus .bonus3, .scoreTable .player1_bonus .bonus4, .scoreTable .player1_bonus .bonus5 {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+/* line 200, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .bonus_section span:first-child {
+  margin-left: 0;
+}
+
+/* line 203, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .bonus_section span {
+  height: 6vh;
+  width: 6vh;
+  display: inline-block;
+  margin-left: -30px;
+  border-radius: 50%;
+  border: 1px solid dodgerblue;
+  background: no-repeat #fff center center / 60% 60%;
+  /*display: none;*/
+}
+
+/* line 214, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .bonus_section .player1_bonus span:first-child {
+  margin-left: -30px;
+}
+
+/* line 219, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .bonus_section .player2_bonus, .scoreTable .bonus_section .player1_bonus {
+  width: 50%;
+}
+
+/* line 223, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .bonus_section .player2_bonus {
+  margin-left: 3.5vh;
+}
+
+/* line 228, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .bonus_section .bonus3 span {
+  background-image: url(../bonus3.svg);
+}
+
+/* line 228, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .bonus_section .bonus4 span {
+  background-image: url(../bonus4.svg);
+}
+
+/* line 228, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.scoreTable .bonus_section .bonus5 span {
+  background-image: url(../bonus5.svg);
+}
+
+/* line 1, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group {
+  clear: both;
+}
+
+/* line 3, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group.inactive {
+  opacity: 0.4;
+}
+
+/* line 6, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin {
+  border-radius: 90px;
+  display: inline-block;
+  height: 9vh;
+  width: 9vh;
+  text-align: center;
+  border: 1px solid transparent;
+  margin: 5px 0vh 5px -4vh;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+  background-position: center 72%;
+  background-repeat: no-repeat;
+  color: #000;
+  cursor: pointer;
+  text-shadow: 0 0 2px #fff;
+  font-size: 3vh;
+}
+
+/* line 22, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin:first-child {
+  margin: 5px 0vh 5px 0vh;
+}
+
+/* line 25, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin.selected {
+  float: right;
+}
+
+/* line 29, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin.blank {
+  opacity: 0.7;
+}
+
+/* line 31, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin.blank.selected {
+  opacity: 1;
+}
+
+/* line 33, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin.blank.selected:first-child {
+  margin: 5px 0vh 5px -4vh;
+}
+
+/* line 45, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin.leather {
+  border-color: saddlebrown;
+  background-image: url(../leather.svg);
+  background-size: 45%;
+  background-color: burlywood;
+}
+
+/* line 45, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin.fabric {
+  border-color: purple;
+  background-image: url(../fabric.svg);
+  background-size: 71%;
+  background-color: #f5d6f5;
+}
+
+/* line 45, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin.spice {
+  border-color: forestgreen;
+  background-image: url(../spice.svg);
+  background-size: 60%;
+  background-color: #dff9b6;
+}
+
+/* line 45, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin.silver {
+  border-color: silver;
+  background-image: url(../silver.svg);
+  background-size: 44%;
+  background-color: #879fc6;
+}
+
+/* line 45, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin.gold {
+  border-color: goldenrod;
+  background-image: url(../gold.svg);
+  background-size: 40%;
+  background-color: #fcf4ca;
+}
+
+/* line 45, C:/Users/k/Desktop/jaipur-score/sass/_coins.scss */
+.group .coin.diamond {

sass/_coins.scss

@@ -0,0 +1,53 @@
+.group {
+  clear: both;
+  &.inactive {
+    opacity: 0.4;
+  }
+  .coin {
+    border-radius: 90px;
+    display: inline-block;
+    height: 9vh;
+    width: 9vh;
+    text-align: center;
+    border: 1px solid transparent;
+    margin: 5px 0vh 5px -4vh;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+    background-position: center 72%;
+    background-repeat: no-repeat;
+    color: $coin-text-color;
+    cursor: pointer;
+    text-shadow: 0 0 2px #fff;
+    font-size: 3vh;
+
+    &:first-child {
+      margin: 5px 0vh 5px 0vh;
+    }
+    &.selected {
+      float: right;
+    }
+
+    &.blank {
+      opacity: 0.7;
+      &.selected {
+        opacity: 1;
+        &:first-child {
+          margin: 5px 0vh 5px -4vh;
+        }
+      }
+    }
+
+    @each $icon, $border_color, $background_color, $background_size in (leather, saddlebrown, burlywood, 45%),
+            (fabric, purple, #f5d6f5, 71%),
+            (spice, forestgreen, #dff9b6, 60%),
+            (silver, silver, #879fc6, 44%),
+            (gold, goldenrod, #fcf4ca, 40%),
+            (diamond, darkred, #f66282, 48%), {
+      &.#{$icon} {
+        border-color: #{$border_color};
+        background-image: url(../#{$icon}.svg);
+        background-size: #{$background_size};
+        background-color: #{$background_color};
+      }
+    }
+  }
+}

sass/_grid.scss

@@ -0,0 +1,32 @@
+.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"
+          "menu menu menu";
+
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(8, 1fr);
+}
+
+@media screen and (orientation: landscape){
+  /*.container {display: none; }*/
+}
+.group {
+ &.leather { grid-area: leather; }
+ &.fabric { grid-area: fabric; }
+ &.spice { grid-area: spice; }
+ &.silver { grid-area: silver; }
+ &.gold { grid-area: gold; }
+ &.diamond { grid-area: diamond; }
+}
+
+.player1container {grid-area: player1container; }
+.player2container {grid-area: player2container;}
+#menu { grid-area: menu; }
+

sass/_light.scss

@@ -0,0 +1,236 @@
+body {
+  height: 100vh;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+
+}
+
+#menu {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  height: 100%;
+  align-items: center;
+  a {
+    max-width: 100%;
+    text-align: center;
+    line-height: 6vh;
+    color: $menu-color;
+    text-decoration: none;
+    padding: 1vw;
+    display: inline-block;
+
+    &:hover {
+      background-color: $menu-background-color-hover;
+      color: $menu-color-hover;
+
+    }
+  }
+}
+
+/* PLAYERS START */
+
+.container {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  height: 100vh;
+}
+
+.acceptcontainer {
+
+  .accept {
+    grid-area: acceptcontainer;
+    visibility: hidden;
+    border: 2px solid $accept-border;
+    margin: 1.5vh auto;
+    max-width: 100%;
+    height: 5vh;
+    padding: 0.5vh 0vw;
+    font-weight: bold;
+    background-color: $accept-background-color;
+    cursor: pointer;
+    line-height: 5vh;
+    text-align: center;
+    display: flex;
+    justify-items: center;
+    flex-direction: row;
+    justify-content: space-around;
+    &.on {
+      visibility: visible;
+    }
+  }
+
+  .bonus {
+    height: 5vh;
+    width: 5vh;
+    display: inline-block;
+    margin: 0;
+    border-radius: 50%;
+    border: 1px solid $bonus-coin-border-color;
+    background: no-repeat $accept-bonus-coin-background-color center center / 60% 60%;
+    display: none;
+
+    @for $i from 3 through 5 {
+      &.bonus#{$i} {
+        background-image: url(../bonus#{$i}.svg);
+      }
+    }
+  }
+}
+
+.player {
+  border: 2px solid $player-border-color;
+  padding: 0.5vh 4vh;
+  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;
+  height: 5vh;
+  width: 10vw;
+  line-height: 5vh;
+  text-align: center;
+
+  &.selected {
+    background: $player-selected-background-color;
+    color: $player-selected-color;
+  }
+
+  .score {
+    height: 50px;
+    width: 23px;
+    display: inline-block;
+    background-image: none;
+    background-size: auto auto;
+    margin: 0 5px;
+    background-image: url(../maharaja.svg);
+    background-size: 100%;
+    background-repeat: no-repeat;
+
+    &:first-child {
+      margin-left: 15px;
+    }
+  }
+}
+
+/* PLAYERS END */
+
+* {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+}
+
+/* SCORE TABLE START */
+.scoreTable {
+  width: 90vw;
+  background: $score-table-background;
+  content: "";
+  height: 70vh;
+  position: absolute;
+  top: 15vh;
+  left: 5vw;
+  box-shadow: 0 0 207px #000000;
+  border: 3px solid $score-table-border-color;
+  display: none;
+
+  h1 {
+    text-align: center;
+    font-size: 10vh;
+  }
+  &.visible {
+    display: block;
+  }
+
+  .score_section {
+    display: none;
+    font-size: 35px;
+    justify-content: space-around;
+
+    &.show {
+      display: flex;
+    }
+  }
+
+  .bonus_section {
+    display: none;
+    justify-content: center;
+    &.show {
+      display: flex;
+    }
+  }
+
+  .players_section, .camel_section {
+    display: flex;
+    justify-content: space-around;
+    font-size: 45px;
+
+  }
+
+  .camel_section .player1_camel, .camel_section .player2_camel {
+    background: url('../camel.svg') no-repeat 0 0 / 10vh 10vh;
+    height: 10vh;
+    width: 10vh;
+    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 {
+    opacity: 1;
+  }
+
+  .player1_bonus {
+    text-align: right;
+    margin-right: 3.5vh;
+  }
+
+  .player1_bonus .bonus3, .player1_bonus .bonus4, .player1_bonus .bonus5 {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .bonus_section {
+    span:first-child {
+      margin-left: 0;
+    }
+    span {
+      height: 6vh;
+      width: 6vh;
+      display: inline-block;
+      margin-left: -30px;
+      border-radius: 50%;
+      border: 1px solid $bonus-coin-border-color;
+      background: no-repeat #fff center center / 60% 60%;
+      /*display: none;*/
+    }
+    .player1_bonus {
+      span:first-child {
+        margin-left: -30px;
+      }
+    }
+
+    .player2_bonus, .player1_bonus {
+      width: 50%;
+    }
+
+    .player2_bonus {
+      margin-left: 3.5vh;
+    }
+
+    @for $i from 3 through 5 {
+      .bonus#{$i} span {
+        background-image: url(../bonus#{$i}.svg);
+      }
+    }
+  }
+
+}
+
+

sass/_reset.scss

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

sass/_variables.scss

@@ -0,0 +1,18 @@
+$coin-text-color: #000;
+
+$accept-border: dodgerblue;
+$accept-background-color: #bedfff;
+
+$bonus-coin-border-color: dodgerblue;
+$accept-bonus-coin-background-color: #fff;
+
+$player-border-color: dodgerblue;
+$player-selected-background-color: #6f9cc9;
+$player-selected-color: #f2eeee;
+
+$score-table-background: #fff;
+$score-table-border-color: #ccc;
+
+$menu-color: #666;
+$menu-color-hover: #333;
+$menu-background-color-hover: #eee;

sass/index.scss

@@ -0,0 +1,6 @@
+@import 'reset';
+@import 'variables';
+@import 'grid';
+@import 'light';
+@import 'coins';
+@import 'dark';