From 198f0c1f49f264a3e7426c04f51efe140debfcfb Mon Sep 17 00:00:00 2001
From: kplaczek <kplaczek@wi.ps.pl>
Date: Sun, 1 Oct 2017 19:49:55 +0200
Subject: [PATCH] =?UTF-8?q?Dodanie=20menu=20dolnego,=20dodanie=20sposobu?=
 =?UTF-8?q?=20ko=C5=84czenia=20tury,=20sass.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md            |   7 +-
 index.html           |  14 +-
 js/script.js         |  38 +++-
 sass-css/index.css   | 497 +++++++++++++++++++++++++++++++++++++++++++
 sass-css/index.map   |  24 +++
 sass/_coins.scss     |  53 +++++
 sass/_dark.scss      |   0
 sass/_grid.scss      |  32 +++
 sass/_light.scss     | 236 ++++++++++++++++++++
 sass/_reset.scss     |  48 +++++
 sass/_variables.scss |  18 ++
 sass/index.scss      |   6 +
 12 files changed, 957 insertions(+), 16 deletions(-)
 create mode 100644 sass-css/index.css
 create mode 100644 sass-css/index.map
 create mode 100644 sass/_coins.scss
 create mode 100644 sass/_dark.scss
 create mode 100644 sass/_grid.scss
 create mode 100644 sass/_light.scss
 create mode 100644 sass/_reset.scss
 create mode 100644 sass/_variables.scss
 create mode 100644 sass/index.scss

diff --git a/README.md b/README.md
index 44f575f..bfd09dc 100644
--- a/README.md
+++ b/README.md
@@ -17,11 +17,14 @@ 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
 - [ ] 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
\ No newline at end of file
+- [ ] tryb nocny
+- [ ] refaktoring 
+- [x] sass
+- [x] menu dolne takie jak w natywnych aplikacjach
\ No newline at end of file
diff --git a/index.html b/index.html
index 7686840..1e511f0 100644
--- a/index.html
+++ b/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>
diff --git a/js/script.js b/js/script.js
index 61066ec..9670191 100644
--- a/js/script.js
+++ b/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,22 +359,26 @@ function game(player1, player2, board) {
         jaipur.hideAcceptButton();
         jaipur.setActivePlayer(false);
         if (jaipur.isRoundOver()) {
-            jaipur.showScoreBoard();
-            jaipur.drawBonusCoins();
+            jaipur.endTurn();
         }
 
     };
 
-    this.drawBonusCoins = function(){
-        for(var i in jaipur.player1.bonus){
-            var group = document.querySelector('.player1_bonus .bonus'+jaipur.player1.bonus[i].group);
+    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);
             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);
+        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);
         }
diff --git a/sass-css/index.css b/sass-css/index.css
new file mode 100644
index 0000000..58af1ee
--- /dev/null
+++ b/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 {
+  border-color: darkred;
+  background-image: url(../diamond.svg);
+  background-size: 48%;
+  background-color: #f66282;
+}
+
+/*# sourceMappingURL=../sass-css/index.map */
\ No newline at end of file
diff --git a/sass-css/index.map b/sass-css/index.map
new file mode 100644
index 0000000..ab82d0f
--- /dev/null
+++ b/sass-css/index.map
@@ -0,0 +1,24 @@
+{
+	"version": 3,
+	"file": "../sass/index.css",
+	"sources": [
+		"../sass/index.scss",
+		"../sass/_reset.scss",
+		"../sass/_variables.scss",
+		"../sass/_grid.scss",
+		"../sass/_light.scss",
+		"../sass/_coins.scss",
+		"../sass/_dark.scss"
+	],
+	"sourcesContent": [
+		"@import 'reset';\r\n@import 'variables';\r\n@import 'grid';\r\n@import 'light';\r\n@import 'coins';\r\n@import 'dark';\r\n",
+		"/* http://meyerweb.com/eric/tools/css/reset/\r\n   v2.0 | 20110126\r\n   License: none (public domain)\r\n*/\r\n\r\nhtml, body, div, span, applet, object, iframe,\r\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\r\na, abbr, acronym, address, big, cite, code,\r\ndel, dfn, em, img, ins, kbd, q, s, samp,\r\nsmall, strike, strong, sub, sup, tt, var,\r\nb, u, i, center,\r\ndl, dt, dd, ol, ul, li,\r\nfieldset, form, label, legend,\r\ntable, caption, tbody, tfoot, thead, tr, th, td,\r\narticle, aside, canvas, details, embed,\r\nfigure, figcaption, footer, header, hgroup,\r\nmenu, nav, output, ruby, section, summary,\r\ntime, mark, audio, video {\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  font-size: 100%;\r\n  font: inherit;\r\n  vertical-align: baseline;\r\n}\r\n/* HTML5 display-role reset for older browsers */\r\narticle, aside, details, figcaption, figure,\r\nfooter, header, hgroup, menu, nav, section {\r\n  display: block;\r\n}\r\nbody {\r\n  line-height: 1;\r\n}\r\nol, ul {\r\n  list-style: none;\r\n}\r\nblockquote, q {\r\n  quotes: none;\r\n}\r\nblockquote:before, blockquote:after,\r\nq:before, q:after {\r\n  content: '';\r\n  content: none;\r\n}\r\ntable {\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}",
+		"$coin-text-color: #000;\r\n\r\n$accept-border: dodgerblue;\r\n$accept-background-color: #bedfff;\r\n\r\n$bonus-coin-border-color: dodgerblue;\r\n$accept-bonus-coin-background-color: #fff;\r\n\r\n$player-border-color: dodgerblue;\r\n$player-selected-background-color: #6f9cc9;\r\n$player-selected-color: #f2eeee;\r\n\r\n$score-table-background: #fff;\r\n$score-table-border-color: #ccc;\r\n\r\n$menu-color: #666;\r\n$menu-color-hover: #333;\r\n$menu-background-color-hover: #eee;",
+		".container {\r\n  display: grid;\r\n  grid-template-areas:\r\n          \"player1container acceptcontainer player2container\"\r\n          \"leather leather leather\"\r\n          \"fabric fabric fabric\"\r\n          \"spice spice spice\"\r\n          \"silver silver silver\"\r\n          \"gold gold gold\"\r\n          \"diamond diamond diamond\"\r\n          \"menu menu menu\";\r\n\r\n  grid-template-columns: repeat(3, 1fr);\r\n  grid-template-rows: repeat(8, 1fr);\r\n}\r\n\r\n@media screen and (orientation: landscape){\r\n  /*.container {display: none; }*/\r\n}\r\n.group {\r\n &.leather { grid-area: leather; }\r\n &.fabric { grid-area: fabric; }\r\n &.spice { grid-area: spice; }\r\n &.silver { grid-area: silver; }\r\n &.gold { grid-area: gold; }\r\n &.diamond { grid-area: diamond; }\r\n}\r\n\r\n.player1container {grid-area: player1container; }\r\n.player2container {grid-area: player2container;}\r\n#menu { grid-area: menu; }\r\n\r\n",
+		"body {\r\n  height: 100vh;\r\n  font-family: \"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif;\r\n\r\n}\r\n\r\n#menu {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: space-around;\r\n  height: 100%;\r\n  align-items: center;\r\n  a {\r\n    max-width: 100%;\r\n    text-align: center;\r\n    line-height: 6vh;\r\n    color: $menu-color;\r\n    text-decoration: none;\r\n    padding: 1vw;\r\n    display: inline-block;\r\n\r\n    &:hover {\r\n      background-color: $menu-background-color-hover;\r\n      color: $menu-color-hover;\r\n\r\n    }\r\n  }\r\n}\r\n\r\n/* PLAYERS START */\r\n\r\n.container {\r\n  -webkit-touch-callout: none;\r\n  -webkit-user-select: none;\r\n  -khtml-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  height: 100vh;\r\n}\r\n\r\n.acceptcontainer {\r\n\r\n  .accept {\r\n    grid-area: acceptcontainer;\r\n    visibility: hidden;\r\n    border: 2px solid $accept-border;\r\n    margin: 1.5vh auto;\r\n    max-width: 100%;\r\n    height: 5vh;\r\n    padding: 0.5vh 0vw;\r\n    font-weight: bold;\r\n    background-color: $accept-background-color;\r\n    cursor: pointer;\r\n    line-height: 5vh;\r\n    text-align: center;\r\n    display: flex;\r\n    justify-items: center;\r\n    flex-direction: row;\r\n    justify-content: space-around;\r\n    &.on {\r\n      visibility: visible;\r\n    }\r\n  }\r\n\r\n  .bonus {\r\n    height: 5vh;\r\n    width: 5vh;\r\n    display: inline-block;\r\n    margin: 0;\r\n    border-radius: 50%;\r\n    border: 1px solid $bonus-coin-border-color;\r\n    background: no-repeat $accept-bonus-coin-background-color center center / 60% 60%;\r\n    display: none;\r\n\r\n    @for $i from 3 through 5 {\r\n      &.bonus#{$i} {\r\n        background-image: url(../bonus#{$i}.svg);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.player {\r\n  border: 2px solid $player-border-color;\r\n  padding: 0.5vh 4vh;\r\n  margin: 1.5vh auto;\r\n  width: 10vw;\r\n  color: #444;\r\n  cursor: pointer;\r\n  border-radius: 2px;\r\n  font-weight: bold;\r\n  font-family: \"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif;\r\n  height: 5vh;\r\n  width: 10vw;\r\n  line-height: 5vh;\r\n  text-align: center;\r\n\r\n  &.selected {\r\n    background: $player-selected-background-color;\r\n    color: $player-selected-color;\r\n  }\r\n\r\n  .score {\r\n    height: 50px;\r\n    width: 23px;\r\n    display: inline-block;\r\n    background-image: none;\r\n    background-size: auto auto;\r\n    margin: 0 5px;\r\n    background-image: url(../maharaja.svg);\r\n    background-size: 100%;\r\n    background-repeat: no-repeat;\r\n\r\n    &:first-child {\r\n      margin-left: 15px;\r\n    }\r\n  }\r\n}\r\n\r\n/* PLAYERS END */\r\n\r\n* {\r\n  font-family: \"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif;\r\n}\r\n\r\n/* SCORE TABLE START */\r\n.scoreTable {\r\n  width: 90vw;\r\n  background: $score-table-background;\r\n  content: \"\";\r\n  height: 70vh;\r\n  position: absolute;\r\n  top: 15vh;\r\n  left: 5vw;\r\n  box-shadow: 0 0 207px #000000;\r\n  border: 3px solid $score-table-border-color;\r\n  display: none;\r\n\r\n  h1 {\r\n    text-align: center;\r\n    font-size: 10vh;\r\n  }\r\n  &.visible {\r\n    display: block;\r\n  }\r\n\r\n  .score_section {\r\n    display: none;\r\n    font-size: 35px;\r\n    justify-content: space-around;\r\n\r\n    &.show {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  .bonus_section {\r\n    display: none;\r\n    justify-content: center;\r\n    &.show {\r\n      display: flex;\r\n    }\r\n  }\r\n\r\n  .players_section, .camel_section {\r\n    display: flex;\r\n    justify-content: space-around;\r\n    font-size: 45px;\r\n\r\n  }\r\n\r\n  .camel_section .player1_camel, .camel_section .player2_camel {\r\n    background: url('../camel.svg') no-repeat 0 0 / 10vh 10vh;\r\n    height: 10vh;\r\n    width: 10vh;\r\n    cursor: pointer;\r\n    opacity: 0.1;\r\n  }\r\n\r\n  .camel_section .nobody {\r\n    opacity: 0.1;\r\n  }\r\n\r\n  .camel_section .player1_camel.selected, .camel_section .player2_camel.selected, .camel_section .nobody.selected {\r\n    opacity: 1;\r\n  }\r\n\r\n  .player1_bonus {\r\n    text-align: right;\r\n    margin-right: 3.5vh;\r\n  }\r\n\r\n  .player1_bonus .bonus3, .player1_bonus .bonus4, .player1_bonus .bonus5 {\r\n    display: flex;\r\n    flex-direction: row-reverse;\r\n  }\r\n\r\n  .bonus_section {\r\n    span:first-child {\r\n      margin-left: 0;\r\n    }\r\n    span {\r\n      height: 6vh;\r\n      width: 6vh;\r\n      display: inline-block;\r\n      margin-left: -30px;\r\n      border-radius: 50%;\r\n      border: 1px solid $bonus-coin-border-color;\r\n      background: no-repeat #fff center center / 60% 60%;\r\n      /*display: none;*/\r\n    }\r\n    .player1_bonus {\r\n      span:first-child {\r\n        margin-left: -30px;\r\n      }\r\n    }\r\n\r\n    .player2_bonus, .player1_bonus {\r\n      width: 50%;\r\n    }\r\n\r\n    .player2_bonus {\r\n      margin-left: 3.5vh;\r\n    }\r\n\r\n    @for $i from 3 through 5 {\r\n      .bonus#{$i} span {\r\n        background-image: url(../bonus#{$i}.svg);\r\n      }\r\n    }\r\n  }\r\n\r\n}\r\n\r\n\r\n",
+		".group {\r\n  clear: both;\r\n  &.inactive {\r\n    opacity: 0.4;\r\n  }\r\n  .coin {\r\n    border-radius: 90px;\r\n    display: inline-block;\r\n    height: 9vh;\r\n    width: 9vh;\r\n    text-align: center;\r\n    border: 1px solid transparent;\r\n    margin: 5px 0vh 5px -4vh;\r\n    font-family: \"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif;\r\n    background-position: center 72%;\r\n    background-repeat: no-repeat;\r\n    color: $coin-text-color;\r\n    cursor: pointer;\r\n    text-shadow: 0 0 2px #fff;\r\n    font-size: 3vh;\r\n\r\n    &:first-child {\r\n      margin: 5px 0vh 5px 0vh;\r\n    }\r\n    &.selected {\r\n      float: right;\r\n    }\r\n\r\n    &.blank {\r\n      opacity: 0.7;\r\n      &.selected {\r\n        opacity: 1;\r\n        &:first-child {\r\n          margin: 5px 0vh 5px -4vh;\r\n        }\r\n      }\r\n    }\r\n\r\n    @each $icon, $border_color, $background_color, $background_size in (leather, saddlebrown, burlywood, 45%),\r\n            (fabric, purple, #f5d6f5, 71%),\r\n            (spice, forestgreen, #dff9b6, 60%),\r\n            (silver, silver, #879fc6, 44%),\r\n            (gold, goldenrod, #fcf4ca, 40%),\r\n            (diamond, darkred, #f66282, 48%), {\r\n      &.#{$icon} {\r\n        border-color: #{$border_color};\r\n        background-image: url(../#{$icon}.svg);\r\n        background-size: #{$background_size};\r\n        background-color: #{$background_color};\r\n      }\r\n    }\r\n  }\r\n}\r\n",
+		""
+	],
+	"mappings": "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",
+	"names": []
+}
\ No newline at end of file
diff --git a/sass/_coins.scss b/sass/_coins.scss
new file mode 100644
index 0000000..1a2ff5b
--- /dev/null
+++ b/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};
+      }
+    }
+  }
+}
diff --git a/sass/_dark.scss b/sass/_dark.scss
new file mode 100644
index 0000000..e69de29
diff --git a/sass/_grid.scss b/sass/_grid.scss
new file mode 100644
index 0000000..b1efc80
--- /dev/null
+++ b/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; }
+
diff --git a/sass/_light.scss b/sass/_light.scss
new file mode 100644
index 0000000..681e5bd
--- /dev/null
+++ b/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);
+      }
+    }
+  }
+
+}
+
+
diff --git a/sass/_reset.scss b/sass/_reset.scss
new file mode 100644
index 0000000..3df61e8
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/sass/_variables.scss b/sass/_variables.scss
new file mode 100644
index 0000000..f31dc4a
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/sass/index.scss b/sass/index.scss
new file mode 100644
index 0000000..5636757
--- /dev/null
+++ b/sass/index.scss
@@ -0,0 +1,6 @@
+@import 'reset';
+@import 'variables';
+@import 'grid';
+@import 'light';
+@import 'coins';
+@import 'dark';