Newest Version

Output/BoardServer.js

  * @param cupId
  */
 Board.prototype.mark = function(cupId) {
+  alert(' mark bsjs');
     var cup = this.cups[cupId];
 
     if (!cup) {

Output/public/js/Board.js

  */
 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;
  *
  */
 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');
 };
 
 Board.prototype.enableTurn = function() {
+  alert('enableTurn');
     this.cups.forEach(function(cup) {
         if (cup.getAttribute('marked') === 'false') {
             //cup.classList.remove('notActive');
 
 Board.prototype.highlightcups = function(pos) {
     var cups = this.cups;
+    alert('highlightcups');
     pos.forEach(function(i) {
       //  cups[i].classList.add('colorRed');
     });
     });
 };
 
+
+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();
+
+        }
     }
 };
 
  */
 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');
         }
     });
 };

Output/public/js/app.js

-var socket = new WebSocket('ws://192.168.2.131:2667');
+var socket = new WebSocket('ws://localhost:2667');
 var events = {
     outgoing: {
         JOIN_GAME: 'csJoinGame',
  *
  * @param action
  * @param data
+
  * @returns {*}
  */
 function makeMessage(action, data){
  * @param cupId
  */
 board.onMark = function(cupId){
+  alert('onMark');
     socket.send(makeMessage(events.outgoing.MARK, {playerId: hero.id, cupId: cupId}));
 };
 
         scoreBoard[1].textContent = 'waiting...';
     }
 
-    board.bindTo(container);
 }
 
 
 
             break;
         case events.incoming.MARK:
+        alert('incoming.mARK');
             board.doMark(msg.data.cupId, msg.data.player.label);
 
             break;

Output/server.js

         try {
             switch (msg.action) {
                 case events.incoming.JOIN_GAME:
-                    var player = new Player(board.players.length + 1, board.players.length === 0 ? 'X' : 'O', msg.data);
+                    var player = new Player(board.players.length + 1, board.players.length === 0 ? '1' : '2', msg.data);
                     board.addPlayer(player);
 
                     break;
                             return player.id == msg.data.playerId;
                         }).pop();
 
-                        board.mark(msg.data.cellId);
+                        board.mark(msg.data.cupId);
                     }
 
                     break;