/** * * @constructor */ var Board = function(scoreBoard) { this.cups = []; this.dom = document.createElement('table'); this.dom.addEventListener('click', this.mark.bind(this)); this.players = []; this.currentTurn = 0; this.ready = false; this.scoreBoard = scoreBoard; this.init(); }; Board.prototype.onMark = function(cupId){}; /** * */ Board.prototype.init = function() { /* var row = document.createElement('tr'); var rowCol = document.createElement('td'); var col = document.createElement('td'); var cup = document.createElement('td'); rowCol.classList.add('boardRow'); rowCol.classList.add('bgWhite'); rowCol.setAttribute('colspan', 5); row.appendChild(rowCol); col.classList.add('boardCol'); col.classList.add('bgWhite'); cup.classList.add('gamecup'); cup.classList.add('notActive'); cup.setAttribute('marked', 'false'); cup.setAttribute('data-intent', 'gamecup'); this.dom.classList.add('gameBoard'); for (var i = 0; i < 9; i++) { this.cups.push(cup.cloneNode(true)); } for (var r, i = 0; i < 9; i += 3) { r = row.cloneNode(false); r.appendChild(this.cups[i]); r.appendChild(col.cloneNode(false)); r.appendChild(this.cups[i + 1]); r.appendChild(col.cloneNode(false)); r.appendChild(this.cups[i + 2]); this.dom.appendChild(r); if (i < 6) { this.dom.appendChild(row.cloneNode(true)); } }*/ }; /** * * @param container */ Board.prototype.bindTo = function(container) { container.appendChild(this.dom); }; Board.prototype.disableAll = function() { this.cups.forEach(function(cup) { //cup.classList.add('notActive'); }); }; Board.prototype.enableAll = function() { this.cups.forEach(function(cup) { //cup.classList.remove('notActive'); cup.setAttribute('marked', 'false'); }); }; Board.prototype.enableTurn = function() { this.cups.forEach(function(cup) { if (cup.getAttribute('marked') === 'false') { //cup.classList.remove('notActive'); cup.setAttribute('active', 'true'); } }); }; Board.prototype.highlightcups = function(pos) { var cups = this.cups; pos.forEach(function(i) { // cups[i].classList.add('colorRed'); }); cups.forEach(function(cup) { cup.setAttribute('marked', 'true'); }); }; Board.prototype.lowlightcups = function() { alert('lowlightcups'); var cups = this.cups; cups.forEach(function(cup) { //cup.classList.add('colorWhite'); }); }; /** * * @param event */ Board.prototype.mark = function(event) { var target = event.target; if (this.ready && target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') { this.onMark(this.cups.indexOf(target)); this.disableAll(); } }; /** * * @param cupId * @param label */ Board.prototype.doMark = function(cupId, label) { var cup = this.cups[cupId]; cup.textContent = label; //cup.classList.add('notActive'); // removeCup cup.setAttribute('marked', 'true'); }; /** * * @param pos */ Board.prototype.doWinner = function(pos) { this.disableAll(); this.highlightcups(pos); }; /** * */ Board.prototype.doDraw = function() { this.lowlightcups(); }; /** * */ Board.prototype.highlightScoreboard = function(playerId) { this.scoreBoard.forEach(function(score) { // score.classList.remove('active'); }); this.scoreBoard.forEach(function(board){ if (board.getAttribute('playerId') == playerId) { // board.classList.add('active'); } }); }; /** * * @returns {{win: boolean, pos: Array}} */ Board.prototype.checkWinner = function() { var winPosition = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [6, 4, 2] ]; var player = this.players[this.currentTurn]; var pos = []; var win = winPosition.some(function(win) { if (this.cups[win[0]].textContent === player.label) { var res = this.cups[win[0]].textContent === this.cups[win[1]].textContent && this.cups[win[1]].textContent === this.cups[win[2]].textContent; if (res) { pos = win; return true; } } return false; }, this); return { win: win, pos: pos }; }; /** * * @returns {boolean} */ Board.prototype.checkDraw = function() { return this.cups.every(function(cup) { return cup.textContent === this.players[0].label || cup.textContent === this.players[1].label; }, this); }; /** * * @param player */ Board.prototype.addPlayer = function(player) { if (this.players.length < 2) { var isNew = this.players.filter(function(p) { return p.id == player.id; }).length === 0; if (isNew) { this.players.push(player); if (this.players.length === 1) { this.scoreBoard[this.players.length - 1].textContent = player.label + ' ' + player.name; } else { this.scoreBoard[this.players.length - 1].textContent = player.name + ' ' + player.label; } this.scoreBoard[this.players.length - 1].setAttribute('playerId', player.id); } } };