/** * * @constructor */ var Board = function(scoreBoard) { this.cups = []; this.dom = document.getElementById('cont'); this.dom.addEventListener('keypress', 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() { for (var i = 1; i <= 10; i++) { var cupname = "cup" + i; var cup = document.getElementById(cupname); cup.setAttribute('marked', 'false'); cup.setAttribute('data-intent', 'gamecup'); this.cups.push(cup); } }; /** * * @param container */ Board.prototype.disableAll = function() { alert('disableAll'); this.cups.forEach(function(cup) { //cup.classList.add('notActive'); }); }; Board.prototype.enableAll = function() { alert('enableAll'); this.cups.forEach(function(cup) { //cup.classList.remove('notActive'); cup.setAttribute('marked', 'false'); }); }; Board.prototype.enableTurn = function() { alert('enableTurn'); 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; alert('highlightcups'); 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'); }); }; Board.prototype.getCup = function(code) { alert(code); switch (code) { case 'e': case 'E': //root.style.setProperty('--top325', "-350"+ "px"); ball.style.top = "-350px" ball.style.left = "-155px"; return "cup1"; break; case 'r': case 'R': //root.style.setProperty('--top325', "-350"+ "px"); ball.style.top = "-350px" ball.style.left = "-50px"; //removeCup("2"); break; case 't': case 'T': //root.style.setProperty('--top325', "-350"+ "px"); ball.style.top = "-350px" ball.style.left = "55px"; //removeCup("3"); break; case 'z': case 'Z': //root.style.setProperty('--top325', "-350"+ "px"); ball.style.top = "-350px" ball.style.left = "160px"; //removeCup("4"); break; case 'd': case 'D': //root.style.setProperty('--top325', "-290"+ "px"); ball.style.top = "-290px" ball.style.left = "-100px"; //removeCup("5"); break; case 'f': case 'F': //root.style.setProperty('--top325', "-290"+ "px"); ball.style.top = "-290px" ball.style.left = "0px"; //removeCup("6"); break; case 'g': case 'G': //root.style.setProperty('--top325', "-290"+ "px"); ball.style.top = "-290px" ball.style.left = "110px"; //removeCup("7"); break; case 'c': case 'C': //root.style.setProperty('--top325', "-220"+ "px"); ball.style.top = "-220px" ball.style.left = "-50px"; //removeCup("8"); break; case 'v': case 'V': //root.style.setProperty('--top325', "-220"+ "px"); ball.style.top = "-220px" ball.style.left = "55px"; //removeCup("9"); break; case 'b': case 'B': //root.style.setProperty('--top325', "-160"+ "px"); ball.style.top = "-160px" ball.style.left = "0px"; //removeCup("10"); break; default: break; } } /** * * @param event */ Board.prototype.mark = function(event) { alert(this.ready); if (this.ready) { var target = document.getElementById(this.getCup(event.key)); alert(target); if (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); } } };