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