|
|
@@ -4,8 +4,8 @@ |
|
|
|
*/ |
|
|
|
var Board = function(scoreBoard) { |
|
|
|
this.cups = []; |
|
|
|
this.dom = document.createElement('table'); |
|
|
|
this.dom.addEventListener('click', this.mark.bind(this)); |
|
|
|
this.dom = document.getElementById('cont'); |
|
|
|
this.dom.addEventListener('keypress', this.mark.bind(this)); |
|
|
|
this.players = []; |
|
|
|
this.currentTurn = 0; |
|
|
|
this.ready = false; |
|
|
@@ -21,61 +21,30 @@ 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 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); |
|
|
|
} |
|
|
|
|
|
|
|
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() { |
|
|
|
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'); |
|
|
@@ -83,6 +52,7 @@ Board.prototype.enableAll = function() { |
|
|
|
}; |
|
|
|
|
|
|
|
Board.prototype.enableTurn = function() { |
|
|
|
alert('enableTurn'); |
|
|
|
this.cups.forEach(function(cup) { |
|
|
|
if (cup.getAttribute('marked') === 'false') { |
|
|
|
//cup.classList.remove('notActive'); |
|
|
@@ -93,6 +63,7 @@ Board.prototype.enableTurn = function() { |
|
|
|
|
|
|
|
Board.prototype.highlightcups = function(pos) { |
|
|
|
var cups = this.cups; |
|
|
|
alert('highlightcups'); |
|
|
|
pos.forEach(function(i) { |
|
|
|
// cups[i].classList.add('colorRed'); |
|
|
|
}); |
|
|
@@ -110,16 +81,101 @@ Board.prototype.lowlightcups = function() { |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
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) { |
|
|
|
var target = event.target; |
|
|
|
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') { |
|
|
|
|
|
|
|
if (this.ready && target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') { |
|
|
|
this.onMark(this.cups.indexOf(target)); |
|
|
|
this.disableAll(); |
|
|
|
this.onMark(this.cups.indexOf(target)); |
|
|
|
this.disableAll(); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
@@ -158,12 +214,12 @@ Board.prototype.doDraw = function() { |
|
|
|
*/ |
|
|
|
Board.prototype.highlightScoreboard = function(playerId) { |
|
|
|
this.scoreBoard.forEach(function(score) { |
|
|
|
// score.classList.remove('active'); |
|
|
|
score.classList.remove('active'); |
|
|
|
}); |
|
|
|
|
|
|
|
this.scoreBoard.forEach(function(board){ |
|
|
|
if (board.getAttribute('playerId') == playerId) { |
|
|
|
// board.classList.add('active'); |
|
|
|
board.classList.add('active'); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |