From 141040727293be911c22b236419a8896619add1b Mon Sep 17 00:00:00 2001 From: kplaczek Date: Sun, 13 Aug 2017 15:15:16 +0200 Subject: [PATCH] Separacja JS i html i dodanie resetu css. --- css/reset.css | 48 +++++++ css/style.css | 1 - index.html | 347 ++++---------------------------------------------- js/script.js | 297 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 371 insertions(+), 322 deletions(-) create mode 100644 css/reset.css create mode 100644 js/script.js diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..5b3efe4 --- /dev/null +++ b/css/reset.css @@ -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/css/style.css b/css/style.css index 0f1c0d4..0182d86 100644 --- a/css/style.css +++ b/css/style.css @@ -39,7 +39,6 @@ .group .coin.leather { border-color: saddlebrown; - /*background: saddlebrown;*/ background-image: url(../leather.svg); background-color: burlywood; background-size: 45% diff --git a/index.html b/index.html index 4e7a188..1b7826d 100644 --- a/index.html +++ b/index.html @@ -7,304 +7,9 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> + + - @@ -385,31 +89,32 @@ 5 5 7 - 7 - - -
-

Wynik

- - -
-
Kicia
-
-
Cysio
-
-
-
-
remis
-
-
-
-
0
-
:
-
0
- -
+ 7
+ +
+

Wynik

+ + +
+
Kicia
+
+
Cysio
+
+
+
+
remis
+
+
+
+
0
+
:
+
0
+ +
+
+ diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..3d36327 --- /dev/null +++ b/js/script.js @@ -0,0 +1,297 @@ + +function coin(value, group) { + this.value = value; + this.group = group; +} + +function player(name, id) { + this.score = 0; + this.roundsWon = 0; + this.coins = []; + this.bonus = []; + this.name = name; + this.id = id; + this.selector = '.player.player' + id; + + this.hasCamelCoin = true; + + this.calculateScore = function () { + var score = 0; + for (var i in this.coins) { + score += this.coins[i]; + } + for (var i in this.bonus) { + score += this.bonus[i]; + } + + if (this.hasCamelCoin) { + score += 5; + } + return this.score = score; + }; + + this.wonRound = function () { + this.roundsWon += 1; + }; + + this.reset = function () { + this.roundsWon = 0; + this.score = 0; + this.coins = []; + }; + + this.removePoints = function () { + var playerScore = document.querySelectorAll(this.selector + ' .score'); + for (var i = 0; i < playerScore.length; i++) { + playerScore[i].remove(); + } + }; + + + this.drawPoints = function () { + this.removePoints(); + var scoreDiv = document.querySelector(this.selector); + for (var i = 0; i < this.score; i++) { + var score = document.createElement("span"); + score.classList.add('score'); + scoreDiv.appendChild(score) + } + }; + + this.addPoint = function () { + this.score++; + this.drawPoints(); + } +} + +function game(player1, player2, board) { + this.round = 1; + this.player1 = player1; + this.player2 = player2; + this.activePlayer = null; + this.board = board; + this.isOver = false; + this.selectedCointType = false; + + this.setActivePlayer = function (playerId) { + if (playerId == 1) { + jaipur.activePlayer = this.player1; + document.querySelector('.player.player1').classList.add("selected"); + document.querySelector('.player.player2').classList.remove("selected"); + jaipur.showAcceptButton(); + } else if (playerId == 2) { + jaipur.activePlayer = this.player2; + + document.querySelector('.player.player1').classList.remove("selected"); + document.querySelector('.player.player2').classList.add("selected"); + jaipur.showAcceptButton(); + } else { + document.querySelector('.player.player1').classList.remove("selected"); + document.querySelector('.player.player2').classList.remove("selected"); + jaipur.activePlayer = false; + + } + + return this.activePlayer; + }; + + this.init = function () { + this.initializePlayerButtons(); + this.initializeAcceptButton(); + this.initializeCoins(); + this.initializeCamels(); + }; + + this.reset = function () { + this.player1.reset(); + this.player2.reset(); + this.isOver = false; + }; + + /** + * sprawdza czy runda jest już zakończona (jest 3 lub mniej typów dóbr) + * @returns {boolean} + */ + this.isRoundOver = function () { + var emptyRows = 0; + for (var i in board.goods) { + emptyRows += !board.goods[i].length ? 1 : 0; + + console.info(board.goods[i]); + } + return emptyRows >= 3; + }; + + this.initializePlayerButtons = function () { + document.querySelector('.player.player1').addEventListener('click', function () { + jaipur.setActivePlayer(1) + }); + document.querySelector('.player.player2').addEventListener('click', function () { + jaipur.setActivePlayer(2) + }); + }; + + this.showAcceptButton = function () { + if (!!jaipur.activePlayer && !!document.querySelector('.coin.selected')) { + document.querySelector('.accept').style.visibility = 'visible'; + } + }; + + this.hideAcceptButton = function () { + document.querySelector('.accept').style.visibility = 'hidden'; + }; + + this.camelClick = function (player) { + document.querySelector('.nobody').classList.remove('selected'); + document.querySelector('.player1_camel').classList.remove('selected'); + document.querySelector('.player2_camel').classList.remove('selected'); + + if (player == 1) { + document.querySelector('.player1_camel').classList.add('selected'); + jaipur.player1.hasCamelCoin = true; + jaipur.player2.hasCamelCoin = false; + } else if (player == 2) { + document.querySelector('.player2_camel').classList.add('selected'); + jaipur.player1.hasCamelCoin = false; + jaipur.player2.hasCamelCoin = true; + } else if (player == 0) { + document.querySelector('.nobody').classList.add('selected'); + jaipur.player1.hasCamelCoin = false; + jaipur.player2.hasCamelCoin = false; + + } + jaipur.player1.calculateScore(); + jaipur.player2.calculateScore(); + jaipur.showScore(); + }; + + this.coinClick = function () { + + if (!jaipur.selectedCointType) { + jaipur.selectedCointType = this.dataset.group; + } + + if (jaipur.selectedCointType == this.dataset.group) { + + //ustawienie active inactive na wszystkich grupach + var groups = document.querySelectorAll('.group'); + for (var i = 0; i < groups.length; i++) { + groups[i].classList.add('inactive'); + } + + //usuniecie inactive na tej jednej klikniętej grupie + this.selectedCointType = this.dataset.group; + document.querySelector('.group.' + this.dataset.group).classList.remove('inactive'); + + if (this.classList.contains('selected')) { + //wyłaczenie selected na ostatniej wybranym żetonie + document.querySelector('.coin.selected.' + this.dataset.group).classList.remove('selected'); + + //usunięcie blokady wybranego typu żetonu + if (document.querySelectorAll('.coin.selected.' + this.dataset.group).length == 0) { + jaipur.selectedCointType = false; + for (var i = 0; i < groups.length; i++) { + groups[i].classList.remove('inactive'); + } + jaipur.hideAcceptButton(); + } + } 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(); + } + } + + + }; + + this.showScoreBoard = function () { + + document.querySelector('.scoreTable').classList.add('visible'); + + + }; + + this.showScore = function () { + document.querySelector('.player1_score').innerText = jaipur.player1.calculateScore(); + document.querySelector('.player2_score').innerText = jaipur.player2.calculateScore(); + document.querySelector('.score_section').classList.add('show'); + }; + + this.initializeAcceptButton = function () { + document.querySelector('.accept').addEventListener('click', this.clickAcceptButton) + }; + + + this.clickAcceptButton = function () { + + var coins = document.querySelectorAll('.coin.selected'); + + for (var i = 0; i < coins.length; i++) { + 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(); + } + var bonus = false; + if (coins.length == 3) { + var bonusGroup = 'three'; + bonus = jaipur.board.bonus.three.pop() + } else if (coins.length == 4) { + var bonusGroup = 'four'; + bonus = jaipur.board.bonus.four.pop() + } else if (coins.length >= 5) { + var bonusGroup = 'five'; + bonus = jaipur.board.bonus.five.pop() + } + + 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; + for (var i = 0; i < groups.length; i++) { + groups[i].classList.remove('inactive'); + } + jaipur.hideAcceptButton(); + jaipur.setActivePlayer(false); + if (jaipur.isRoundOver()) { + jaipur.showScoreBoard(); + } + + }; + + + this.initializeCamels = function () { + + document.querySelector('.player1_camel').addEventListener('click', function () { + jaipur.camelClick(1); + }); + document.querySelector('.player2_camel').addEventListener('click', function () { + jaipur.camelClick(2); + }); + document.querySelector('.nobody').addEventListener('click', function () { + jaipur.camelClick(0); + }); + + + }; + + this.initializeCoins = function () { + var coins = document.querySelectorAll('.coin'); + for (var i = 0; i < coins.length; i++) { + coins[i].addEventListener('click', jaipur.coinClick); + } + } + + +} + +