Beerpong/Output/public/js/Board.js

/**
 *
 * @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);
        }
    }
};