Dodanie lepszego(?) modala i mozliwości zmiany nicków graczy.

README.md

@@ -19,7 +19,7 @@ Do zrobienia:
 - [x] minimum dwie karty złota, srebra i diamentu, bez limitu dla innych 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
+- [x] zmiana imion graczy
 - [ ] wersja landscape
 - [ ] offline first
 - [ ] manifest.json
@@ -28,3 +28,5 @@ Do zrobienia:
 - [ ] refaktoring 
 - [x] sass
 - [x] menu dolne takie jak w natywnych aplikacjach
+- [ ] anulowanie ruchu
+- [ ] historia ruchów

index.html

@@ -31,6 +31,9 @@
             jaipur = new game(player1, player2, board);
             jaipur.init();
 
+            modal = new modal();
+            modal.init();
+
         };
     </script>
 </head>
@@ -108,7 +111,7 @@
         <a href="#" id="share">udostępnij</a>
     </div>
 </div>
-<div class="scoreTable">
+<div id="scoreTable">
     <h1>Wynik</h1>
     <div class="players_section">
         <div class="player1_name">Kicia</div>
@@ -139,5 +142,19 @@
     </div>
 </div>
 
+<div id="playerNames" class="modal">
+    <div class="close">x</div>
+    <div class="modal_content">
+        <div>
+            <h1>Zmiana nazw użytkowników</h1>
+        </div>
+        <div>
+            <input id="player1_name" placeholder="gracz 1">
+            <input id="player2_name" placeholder="gracz 2">
+            <span id="change_name">zmień</span>
+        </div>
+    </div>
+</div>
+
 </body>
 </html>

js/script.js

@@ -8,6 +8,19 @@ function Bonus(group, value) {
     this.group = group;
 }
 
+function modal() {
+
+    this.init = function () {
+        this.handleClose();
+    };
+    this.handleClose = function () {
+        document.querySelector('.modal .close').addEventListener('click', function () {
+            this.parentNode.classList.toggle('on');
+        });
+    };
+}
+
+
 function player(name, id) {
     this.score = 0;
     this.roundsWon = 0;
@@ -16,6 +29,7 @@ function player(name, id) {
     this.name = name;
     this.id = id;
     this.selector = '.player.player' + id;
+    this.scoreSelector = '.player' + id + '_name';
 
     this.hasCamelCoin = false;
 
@@ -34,6 +48,16 @@ function player(name, id) {
         return this.score = score;
     };
 
+    this.setName = function (name) {
+        this.name = name;
+        this.updateNames();
+    };
+
+    this.updateNames = function () {
+        document.querySelector(this.selector).innerText = this.name;
+        document.querySelector(this.scoreSelector).innerText = this.name;
+    };
+
     this.wonRound = function () {
         this.roundsWon += 1;
     };
@@ -125,8 +149,15 @@ function game(player1, player2, board) {
 
     this.initializeMenu = function () {
         document.querySelector('#players').addEventListener('click', function () {
-
+            jaipur.playerNamesModal();
         });
+
+
+        document.querySelector('#change_name').addEventListener('click', function () {
+            jaipur.player1.setName(document.querySelector('#player1_name').value);
+            jaipur.player2.setName(document.querySelector('#player2_name').value);
+        });
+
         document.querySelector('#endturn').addEventListener('click', function () {
             jaipur.endTurn();
         });
@@ -139,6 +170,10 @@ function game(player1, player2, board) {
 
     };
 
+    this.playerNamesModal = function () {
+        document.querySelector('#playerNames').classList.toggle('on');
+    };
+
     this.initializePlayerButtons = function () {
         document.querySelector('.player.player1').addEventListener('click', function () {
             jaipur.setActivePlayer(1)
@@ -305,7 +340,7 @@ function game(player1, player2, board) {
     };
 
     this.showScoreBoard = function () {
-        document.querySelector('.scoreTable').classList.add('visible');
+        document.querySelector('#scoreTable').classList.add('visible');
     };
 
     this.showScore = function () {

sass-css/index.css

@@ -140,16 +140,25 @@ body {
 
 /* line 13, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #menu a {
+  max-width: 100%;
   text-align: center;
   line-height: 6vh;
-  line-height: 6vh;
+  color: #666;
+  text-decoration: none;
+  padding: 1vw;
+  display: inline-block;
+  width: 25%;
+}
+
+@media screen and (max-width: 450px) {
+  /* line 13, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
   #menu a {
     background: #ddd;
     width: auto;
   }
 }
 
-/* line 22, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+/* line 28, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #menu a:hover {
   background-color: #eee;
   color: #333;
@@ -160,7 +169,7 @@ body {
 .container {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
-  -khtml-user-select: none;
+  -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
@@ -180,12 +189,12 @@ body {
   background-color: #bedfff;
   cursor: pointer;
   line-height: 5vh;
-  text-align: center;
+  text-align: center;
   display: flex;
   justify-items: center;
   flex-direction: row;
   justify-content: space-around;
-}
+}
 
 /* line 67, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 .acceptcontainer .accept.on {
@@ -197,45 +206,43 @@ body {
   height: 5vh;
   width: 5vh;
   display: inline-block;
-  margin: 0;
+  margin: 0;
   border-radius: 50%;
   border: 1px solid dodgerblue;
   background: no-repeat #fff center center/60% 60%;
   display: none;
-}
+}
 
 /* line 83, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 .acceptcontainer .bonus.bonus3 {
   background-image: url(../bonus3.svg);
-}
+}
 
 /* line 83, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 .acceptcontainer .bonus.bonus4 {
   background-image: url(../bonus4.svg);
-}
+}
 
 /* line 83, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
-.acceptcontainer .bonus.bonus5 {
+.acceptcontainer .bonus.bonus5 {
-  background-image: url(../bonus5.svg);
+  background-image: url(../bonus5.svg);
-}
 }
 
 /* line 90, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 .player {
   border: 2px solid dodgerblue;
   padding: 0.5vh 0;
-  width: 10vw;
   margin: 1.5vh 1vw;
   color: #444;
   cursor: pointer;
   border-radius: 2px;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+  font-weight: bold;
   font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
   height: 5vh;
   line-height: 5vh;
   text-align: center;
 }
-
+
 /* line 103, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 .player.selected {
   background: #6f9cc9;
@@ -248,20 +255,20 @@ body {
   width: 23px;
   display: inline-block;
   background-image: none;
-  background-size: auto auto;
+  background-size: auto auto;
   margin: 0 5px;
   background-image: url(../maharaja.svg);
   background-size: 100%;
   background-repeat: no-repeat;
 }
-
+
 /* line 119, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 .player .score:first-child {
   margin-left: 15px;
 }
 
-/* PLAYERS END */
+/* PLAYERS END */
-/* line 123, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+/* line 127, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 * {
   font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
 }
@@ -274,49 +281,49 @@ body {
   content: "";
   height: 70vh;
   position: absolute;
-  top: 15vh;
+  top: 15vh;
-  left: 5vw;
+  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 */
+/* line 144, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #scoreTable h1 {
   text-align: center;
   font-size: 10vh;
-}
+}
-
+
 /* line 148, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #scoreTable.visible {
   display: block;
 }
 
-/* line 148, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+/* line 152, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
-.scoreTable .score_section {
+#scoreTable .score_section {
   display: none;
   font-size: 35px;
   justify-content: space-around;
-}
+}
-
+
 /* line 157, 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 */
+/* line 162, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #scoreTable .bonus_section {
   display: none;
   justify-content: center;
-}
+}
-
+
 /* line 165, 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 */
+/* line 170, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
-.scoreTable .players_section, .scoreTable .camel_section {
+#scoreTable .players_section, #scoreTable .camel_section {
   display: flex;
   justify-content: space-around;
   font-size: 45px;
@@ -324,35 +331,35 @@ body {
 
 /* line 177, 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;
+  background: url("../camel.svg") no-repeat 0 0/10vh 10vh;
-  height: 10vh;
+  height: 10vh;
   width: 10vh;
   cursor: pointer;
   opacity: 0.1;
-}
+}
-
+
 /* line 185, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #scoreTable .camel_section .nobody {
   opacity: 0.1;
-}
+}
-
+
 /* line 189, 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 */
+/* line 193, 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 */
+/* line 198, 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 204, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #scoreTable .bonus_section span:first-child {
   margin-left: 0;
@@ -363,36 +370,97 @@ body {
   height: 6vh;
   width: 6vh;
   display: inline-block;
-  margin-left: -30px;
+  margin-left: -30px;
-  border-radius: 50%;
+  border-radius: 50%;
   border: 1px solid dodgerblue;
   background: no-repeat #fff center center / 60% 60%;
   /*display: none;*/
-}
+}
-
+
 /* line 218, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #scoreTable .bonus_section .player1_bonus span:first-child {
   margin-left: -30px;
-}
+}
-
+
 /* line 223, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #scoreTable .bonus_section .player2_bonus, #scoreTable .bonus_section .player1_bonus {
   width: 50%;
-}
+}
-
+
 /* line 227, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #scoreTable .bonus_section .player2_bonus {
   margin-left: 3.5vh;
-}
+}
-
+
 /* line 232, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #scoreTable .bonus_section .bonus3 span {
   background-image: url(../bonus3.svg);
-}
+}
-
+
 /* line 232, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 #scoreTable .bonus_section .bonus4 span {
   background-image: url(../bonus4.svg);
+}
+
+/* line 232, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+#scoreTable .bonus_section .bonus5 span {
+  background-image: url(../bonus5.svg);
+}
+
+/** MODAL */
+/* line 242, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.modal {
+  display: none;
+  position: absolute;
+  width: 75vw;
+  left: 12.5vw;
+  top: 25vh;
+  height: 50vh;
+  border: 1px solid #eee;
+  background: #fff;
+  border-radius: 3px;
+}
+
+/* line 253, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.modal .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 10px;
+  font-weight: bold;
+  cursor: pointer;
+  font-size: 2.5vh;
+  color: #ddd;
+}
+
+/* line 262, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.modal .close:hover {
+  color: #000;
+}
+
+/* line 268, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.modal .modal_content {
+  padding: 3vw 3vh;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+/* line 274, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.modal .modal_content h1 {
+  font-size: 4vh;
+  margin-bottom: 5vh;
+}
+
+/* line 278, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.modal .modal_content input {
+  padding: 5px 20px;
+}
+
+/* line 282, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
+.modal .modal_content .submit {
+  cursor: pointer;
+}
 
 /* line 288, C:/Users/k/Desktop/jaipur-score/sass/_light.scss */
 .modal.on {

sass/_light.scss

@@ -18,6 +18,12 @@ body {
     text-decoration: none;
     padding: 1vw;
     display: inline-block;
+    width: 25%;
+
+    @media screen and (max-width: $small-break) {
+      background: $menu-background-color;
+      width: auto;
+    }
 
     &:hover {
       background-color: $menu-background-color-hover;
@@ -83,16 +89,14 @@ body {
 
 .player {
   border: 2px solid $player-border-color;
-  padding: 0.5vh 4vh;
+  padding: 0.5vh 0;
-  margin: 1.5vh auto;
+  margin: 1.5vh 1vw;
-  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;
 
@@ -125,7 +129,7 @@ body {
 }
 
 /* SCORE TABLE START */
-.scoreTable {
+#scoreTable {
   width: 90vw;
   background: $score-table-background;
   content: "";
@@ -233,4 +237,61 @@ body {
 
 }
 
+/** MODAL */
 
+.modal {
+  display: none;
+  position: absolute;
+  width: 75vw;
+  left: 12.5vw;
+  top: 25vh;
+  height: 50vh;
+  border: 1px solid $modal-border-color;
+  background: $modal-background-color;
+  border-radius: 3px;
+
+  .close{
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 10px;
+    font-weight: bold;
+    cursor: pointer;
+    font-size: 2.5vh;
+    color: $modal-close-color;
+    &:hover {
+      color: $modal-close-color-hover;
+    }
+
+  }
+
+  .modal_content {
+    padding: 3vw 3vh;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+
+    h1 {
+      font-size: 4vh;
+      margin-bottom: 5vh;
+    }
+    input {
+      padding: 5px 20px;
+    }
+
+    .submit {
+      cursor: pointer;
+    }
+
+  }
+
+  &.on {
+    display: block;
+  }
+}
+
+/** PLAYER NAMES MODAL */
+
+#playerNames {
+
+}

sass/_variables.scss

@@ -13,6 +13,13 @@ $player-selected-color: #f2eeee;
 $score-table-background: #fff;
 $score-table-border-color: #ccc;
 
+$modal-border-color: #eee;
+$modal-background-color: #fff;
+$modal-close-color: #ddd;
+$modal-close-color-hover: #000;
+
 $menu-color: #666;
 $menu-color-hover: #333;
 $menu-background-color-hover: #eee;
+$menu-background-color: #ddd;
+$small-break: 450px;