Separacja JS i html i dodanie resetu css.
This commit is contained in:
kplaczek
48
css/reset.css
Normal file
48
css/reset.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
@@ -39,7 +39,6 @@
|
|||||||
|
|
||||||
.group .coin.leather {
|
.group .coin.leather {
|
||||||
border-color: saddlebrown;
|
border-color: saddlebrown;
|
||||||
/*background: saddlebrown;*/
|
|
||||||
background-image: url(../leather.svg);
|
background-image: url(../leather.svg);
|
||||||
background-color: burlywood;
|
background-color: burlywood;
|
||||||
background-size: 45%
|
background-size: 45%
|
||||||
|
|||||||
305
index.html
305
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">
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/style.css"/>
|
<link rel="stylesheet" href="css/style.css"/>
|
||||||
|
<link rel="stylesheet" href="css/reset.css"/>
|
||||||
|
<script src="js/script.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
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 = '.players .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('.players .player.player1').classList.add("selected");
|
|
||||||
document.querySelector('.players .player.player2').classList.remove("selected");
|
|
||||||
jaipur.showAcceptButton();
|
|
||||||
} else if (playerId == 2) {
|
|
||||||
jaipur.activePlayer = this.player2;
|
|
||||||
|
|
||||||
document.querySelector('.players .player.player1').classList.remove("selected");
|
|
||||||
document.querySelector('.players .player.player2').classList.add("selected");
|
|
||||||
jaipur.showAcceptButton();
|
|
||||||
} else {
|
|
||||||
document.querySelector('.players .player.player1').classList.remove("selected");
|
|
||||||
document.querySelector('.players .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('.players .player.player1').addEventListener('click', function () {
|
|
||||||
jaipur.setActivePlayer(1)
|
|
||||||
});
|
|
||||||
document.querySelector('.players .player.player2').addEventListener('click', function () {
|
|
||||||
jaipur.setActivePlayer(2)
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.showAcceptButton = function () {
|
|
||||||
if (!!jaipur.activePlayer && !!document.querySelector('.coin.selected')) {
|
|
||||||
document.querySelector('.players .accept').style.visibility = 'visible';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
this.hideAcceptButton = function () {
|
|
||||||
document.querySelector('.players .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('.players .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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
board = {'goods': {}, 'bonus': {}};
|
board = {'goods': {}, 'bonus': {}};
|
||||||
board.goods.leather = [1, 1, 1, 1, 1, 1, 2, 3, 4];
|
board.goods.leather = [1, 1, 1, 1, 1, 1, 2, 3, 4];
|
||||||
@@ -328,7 +33,6 @@
|
|||||||
console.info(jaipur.isRoundOver());
|
console.info(jaipur.isRoundOver());
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@@ -385,9 +89,11 @@
|
|||||||
</span><span class="coin diamond" data-group="diamond">5
|
</span><span class="coin diamond" data-group="diamond">5
|
||||||
</span><span class="coin diamond" data-group="diamond">5
|
</span><span class="coin diamond" data-group="diamond">5
|
||||||
</span><span class="coin diamond" data-group="diamond">7
|
</span><span class="coin diamond" data-group="diamond">7
|
||||||
</span><span class="coin diamond" data-group="diamond">7</span></div>
|
</span><span class="coin diamond" data-group="diamond">7</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
<div class="scoreTable">
|
<div class="scoreTable">
|
||||||
<h1>Wynik</h1>
|
<h1>Wynik</h1>
|
||||||
|
|
||||||
@@ -410,6 +116,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
297
js/script.js
Normal file
297
js/script.js
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user