From 9bbcc73b33517e062a0b160d3353fd716879c556 Mon Sep 17 00:00:00 2001 From: kplaczek Date: Sun, 13 Aug 2017 22:48:29 +0200 Subject: [PATCH] =?UTF-8?q?Przerobienie=20nieco=20na=20grid=20css.=20Pozwo?= =?UTF-8?q?lenie=20na=20dodawanie=20=C5=BCeton=C3=B3w=20o=20warto=C5=9Bci?= =?UTF-8?q?=20zero=20i=20zbieranie=20bonus=C3=B3w=20za=20nie=20jesli=20te?= =?UTF-8?q?=20istniej=C4=85.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/grid-template.css | 21 +++++++++++++++ css/style.css | 61 +++++++++++++++++++++++++++---------------- index.html | 10 ++++--- js/script.js | 32 ++++++++++++++++++----- 4 files changed, 92 insertions(+), 32 deletions(-) create mode 100644 css/grid-template.css diff --git a/css/grid-template.css b/css/grid-template.css new file mode 100644 index 0000000..cc5138b --- /dev/null +++ b/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; } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 0182d86..cf07428 100644 --- a/css/style.css +++ b/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 */ \ No newline at end of file diff --git a/index.html b/index.html index 1b7826d..e74ce23 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,9 @@ - + +
-
+
Kicia
+
+
Przydziel
+
+
Cysio
diff --git a/js/script.js b/js/script.js index 3d36327..3777555 100644 --- a/js/script.js +++ b/js/script.js @@ -1,4 +1,3 @@ - function coin(value, group) { this.value = value; this.group = group; @@ -13,7 +12,7 @@ function player(name, id) { this.id = id; this.selector = '.player.player' + id; - this.hasCamelCoin = true; + this.hasCamelCoin = false; this.calculateScore = function () { var score = 0; @@ -195,17 +194,41 @@ function game(player1, player2, board) { } jaipur.hideAcceptButton(); } + jaipur.removeBlankCoin(jaipur.selectedCointType); + } else { //ustawienie selected na elemencie z kliniętej grupy var coinsFromRow = document.querySelectorAll('.coin.' + this.dataset.group + ':not(.selected)'); [].slice.call(coinsFromRow).pop().classList.add('selected'); jaipur.showAcceptButton(); + + + //dodanie monety o wartości zero jeśli wybrano wszystkie monety z danej grupy + if (!!document.querySelectorAll('.coin.' + this.selectedCointType + ':not(.selected)').length == 0) { + jaipur.addBlankCoin(this.selectedCointType); + } } } }; + this.addBlankCoin = function (groupName) { + var blankCoin = document.createElement('span'); + blankCoin.classList.add('coin'); + blankCoin.classList.add(groupName); + blankCoin.classList.add('blank'); + blankCoin.innerText = '0'; + blankCoin.dataset.group=groupName; + blankCoin.addEventListener('click', jaipur.coinClick); + var firstElementInGroup = document.querySelector('.coin.' + groupName); + document.querySelector('.group.' + groupName).insertBefore(blankCoin, firstElementInGroup); + }; + + this.removeBlankCoin = function (groupName) { + document.querySelector('.coin.blank.' + groupName).remove(); + }; + this.showScoreBoard = function () { document.querySelector('.scoreTable').classList.add('visible'); @@ -232,7 +255,6 @@ function game(player1, player2, board) { var group = coins[i].dataset.group; jaipur.board.goods[group].pop(); -// jaipur.activePlayer.coins.push({ value: parseInt(coins[i].innerText), type: 'goods', group: group}); jaipur.activePlayer.coins.push(parseInt(coins[i].innerText)); coins[i].remove(); } @@ -249,11 +271,9 @@ function game(player1, player2, board) { } if (!!bonus) { -// { value: parseInt(coins[i].innerText), type: 'goods', group: group} -// jaipur.activePlayer.bonus.push({ value: parseInt(coins[i].innerText), type: 'goods', group: group}); jaipur.activePlayer.bonus.push(bonus); } -// + var groups = document.querySelectorAll('.group'); jaipur.selectedCointType = false;