/** * * @constructor */ var root = document.documentElement; var ball = document.getElementById("ball"); 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() { 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() { 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) { ball.classList.add("Shoot"); switch (code) { case 'q': case 'Q': root.style.setProperty('--top325', "-515"+ "px"); ball.style.top = "-515px"; ball.style.left = "-155px"; return "cup1"; break; case 'w': case 'W': root.style.setProperty('--top325', "-515"+ "px"); ball.style.top = "-515px"; ball.style.left = "-50px"; return "cup2"; //removeCup("2");j break; case 'e': case 'E': root.style.setProperty('--top325', "-515"+ "px"); ball.style.top = "-515px"; ball.style.left = "50px"; return "cup3"; //removeCup("3"); break; case 'r': case 'R': root.style.setProperty('--top325', "-515"+ "px"); ball.style.top = "-515px"; ball.style.left = "150px"; return "cup4"; //removeCup("4"); break; case 'a': case 'A': root.style.setProperty('--top325', "-430"+ "px"); ball.style.top = "-430px"; ball.style.left = "-100px"; return "cup5"; //removeCup("5"); break; case 's': case 'S': root.style.setProperty('--top325', "-430"+ "px"); ball.style.top = "-430px"; ball.style.left = "0px"; return "cup6"; //removeCup("6"); break; case 'd': case 'D': root.style.setProperty('--top325', "-430"+ "px"); ball.style.top = "-430px"; ball.style.left = "100px"; //removeCup("7"); return "cup7"; break; case 'y': case 'Y': root.style.setProperty('--top325', "-340"+ "px"); ball.style.top = "-340px" ball.style.left = "-50px"; //removeCup("8"); return "cup8"; break; case 'x': case 'X': root.style.setProperty('--top325', "-340"+ "px"); ball.style.top = "-340px" ball.style.left = "50px"; //removeCup("9"); return "cup9"; break; case 'c': case 'C': root.style.setProperty('--top325', "-250"+ "px"); ball.style.top = "-250px" ball.style.left = "0px"; //removeCup("10"); return "cup10"; break; default: break; } } /** * * @param event */ Board.prototype.mark = function(event) { if (this.ready) { var target = document.getElementById(this.getCup(event.key)); 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 setTimeout(this.cups[cupId].classList.add("fadeAway") ,1000); cup.setAttribute('marked', 'true'); setTimeout(function() { ball.style.top = "0px"; ball.style.left = "0px"; }, 1000); }; /** * * @param pos */ Board.prototype.doWinner = function(pos) { this.disableAll(); this.highlightcups(pos); }; /** * */ Board.prototype.doDraw = function() { alert('doDraw'); 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); } } };