Changed Background Picture for dark mode compatablility, Keys were changed back to 4qwer 3asd 2yx 1c. The throwing positions were adjusted to the cups.

Output/BoardServer.js

@@ -6,7 +6,7 @@ var util = require('util');
  * @constructor
  */
 var Board = function() {
-    this.cells = [];
+    this.cups = [];
     this.players = [];
     this.currentTurn = 0;
     this.ready = false;
@@ -17,7 +17,7 @@ var Board = function() {
 Board.events = {
     PLAYER_CONNECTED: 'playerConnected',
     GAME_READY: 'gameReady',
-    CELL_MARKED: 'cellMarked',
+    CUP_MARKED: 'cupMarked',
     CHANGE_TURN: 'changeTurn',
     WINNER: 'winner',
     DRAW: 'draw'
@@ -29,40 +29,40 @@ util.inherits(Board, EventEmitter);
  *
  */
 Board.prototype.init = function() {
-    for (var i = 0; i < 9; i++) {
-        this.cells.push({});
+    for (var i = 0; i <= 9; i++) {
+        this.cups.push({});
     }
 };
 
 Board.prototype.disableAll = function() {
-    this.cells.forEach(function(cell) {
-        cell.active = false;
+    this.cups.forEach(function(cup) {
+        cup.active = false;
     });
 };
 
 Board.prototype.enableAll = function() {
-    this.cells.forEach(function(cell) {
-        cell.active = true;
+    this.cups.forEach(function(cup) {
+        cup.active = true;
     });
 };
 
 /**
  *
- * @param cellId
+ * @param cupId
  */
-Board.prototype.mark = function(cellId) {
-    var cell = this.cells[cellId];
+Board.prototype.mark = function(cupId) {
+    var cup = this.cups[cupId];
 
-    if (!cell) {
+    if (!cup) {
         return false;
     }
 
-    if (this.ready && cell.active) {
+    if (this.ready && cup.active) {
         var player = this.players[this.currentTurn];
-        cell.value = player.label;
-        cell.active = false;
+        cup.value = player.label;
+        cup.active = false;
 
-        this.emit(Board.events.CELL_MARKED, {cellId: cellId, player: player});
+        this.emit(Board.events.CUP_MARKED, {cupId: cupId, player: player});
 
         var res = this.checkWinner();
         if (res.win) {
@@ -83,6 +83,7 @@ Board.prototype.mark = function(cellId) {
  * @returns {boolean}
  */
 Board.prototype.checkTurn = function(playerId) {
+  ('checkTurn');
     return this.players[this.currentTurn].id == playerId;
 };
 
@@ -108,8 +109,8 @@ Board.prototype.checkWinner = function() {
     var pos = [];
 
     var win = winPosition.some(function(win) {
-        if (this.cells[win[0]].value === player.label) {
-            var res = this.cells[win[0]].value === this.cells[win[1]].value && this.cells[win[1]].value === this.cells[win[2]].value;
+        if (this.cups[win[0]].value === player.label) {
+            var res = this.cups[win[0]].value === this.cups[win[1]].value && this.cups[win[1]].value === this.cups[win[2]].value;
 
             if (res) {
                 pos = win;
@@ -132,8 +133,8 @@ Board.prototype.checkWinner = function() {
  * @returns {boolean}
  */
 Board.prototype.checkDraw = function() {
-    return this.cells.every(function(cell) {
-        return cell.value === this.players[0].label || cell.value === this.players[1].label;
+    return this.cups.every(function(cup) {
+        return cup.value === this.players[0].label || cup.value === this.players[1].label;
     }, this);
 };
 
@@ -160,4 +161,4 @@ Board.prototype.addPlayer = function(player) {
     }
 };
 
-module.exports = Board;
+module.exports = Board;

Output/public/css/style.css

@@ -1,27 +1,167 @@
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Lato Regular'), local('Lato-Regular'), url(Lato.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+:root{
+    --top:0px;
+    --top325:325px;
+}
+*{
+    padding: 0;
+    margin: 0;
+    outline: none;
+}
+body{
+    overflow-x: hidden;
+    display: block;
+}
+ellipse{
+    fill:hsl(0, 0%, 90%);
+    stroke: black;
+    stroke-weight: 1px;
+}
+#reshoot, #restart{
+    margin: 15rem auto;
+    font-size: 2rem;
+    padding: 1rem 2rem;
+    border-radius: 0.3rem;
+    display: block;
+    color: black;
+    border: 3px solid black;
+    background-color: yellow;
+    z-index: 10;
+
+}
+#reshoot:hover, #restart:hover{
+    cursor: pointer;
+    background-color: black;
+    color: yellow;
+    z-index:
+}
+#time {
+  margin: auto;
+  display: block;
+  text-align: center;
+  font-size: 3rem;
+  font-family: sans-serif;
+  font-weight: bold;
 }
 
-@font-face {
-    font-family: 'Quicksand';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Quicksand'), local('Quicksand'), url(Quicksand.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+
+.cups{
+    margin: auto;
+    width: 1100px;
 }
+.tisch{
+  position: absolute;
+  margin-top: 0rem;
+  margin-left: -440px;
+  width: 1090px;
+  z-index: -1;
+}
+.cup{
+    width: 100px;
+    position: relative;
+}
+.row1{
+    margin-top: 00rem;
+    margin-left: 350px;
+}
+.row2{
+    margin-top: -10rem;
+    margin-left: 400px;
+}
+.row3{
+    margin-top: -10rem;
+    margin-left: 450px;
+}
+.row4{
+    margin-top: -10rem;
+    margin-left: 500px;
+}
+
+.cup5{
+    top: 5rem;
+}
+.cup6{
+    top: 5rem;
+}
+.cup7{
+    top: 5rem;
+}
+.cup8{
+    top: 10rem;
+}
+.cup9{
+    top: 10rem;
+}
+.cup10{
+    top: 15rem;
+}
+.ball{
+    width: 50px;
+    height: 50px;
+    position: relative;
+}
+.shooter{
+    position: relative;
+    top: 250px;
+    left: 125px;
+    width: 300px;
+    margin: auto;
+}
+.shootX{
+    animation: shootX 1s infinite linear;
+}
+@keyframes shootX{
+    0%{left:0px}
+    25%{left:125px}
+    50%{left:0px}
+    75%{left:-125px}
+    100%{left:0px}
+}
+.shootY{
+    animation: shootY 1s infinite linear;
+}
+@keyframes shootY{
+    0%{top:0px}
+    50%{top:175px}
+    100%{top:0px}
+}
+.fadeAway{
+    animation: fadeAway 1s;
+    opacity: 0
+}
+@keyframes fadeAway{
+    0%{opacity: 1}
+    100%{opacity: 0}
+}
+.Shoot{
+    animation: Shoot 1s;
+    animation-timing-function: ease;
+}
+@keyframes Shoot{
+    0%{top: var(--top)}
+    100%{top: var(--top325)}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 ::selection {
     background: transparent;
 }
 
-body {
-    background: #A5DAD2;
-    font-family: Quicksand, san-serif;
-}
 
 .bgWhite {
     background: #F5F2F5;

Output/public/js/Board.js

@@ -2,10 +2,13 @@
  *
  * @constructor
  */
+var root = document.documentElement;
+var ball = document.getElementById("ball");
+
 var Board = function(scoreBoard) {
-    this.cells = [];
-    this.dom = document.createElement('table');
-    this.dom.addEventListener('click', this.mark.bind(this));
+    this.cups = [];
+    this.dom = document.getElementById('cont');
+    this.dom.addEventListener('keypress', this.mark.bind(this));
     this.players = [];
     this.currentTurn = 0;
     this.ready = false;
@@ -15,49 +18,18 @@ var Board = function(scoreBoard) {
     this.init();
 };
 
-Board.prototype.onMark = function(cellId){};
+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 cell = 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');
-
-    cell.classList.add('gameCell');
-    cell.classList.add('notActive');
-    cell.setAttribute('marked', 'false');
-    cell.setAttribute('data-intent', 'gameCell');
-
-    this.dom.classList.add('gameBoard');
-
-    for (var i = 0; i < 9; i++) {
-        this.cells.push(cell.cloneNode(true));
-    }
-
-    for (var r, i = 0; i < 9; i += 3) {
-        r = row.cloneNode(false);
-        r.appendChild(this.cells[i]);
-        r.appendChild(col.cloneNode(false));
-        r.appendChild(this.cells[i + 1]);
-        r.appendChild(col.cloneNode(false));
-        r.appendChild(this.cells[i + 2]);
-
-        this.dom.appendChild(r);
-
-        if (i < 6) {
-            this.dom.appendChild(row.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);
     }
 };
 
@@ -65,73 +37,171 @@ Board.prototype.init = function() {
  *
  * @param container
  */
-Board.prototype.bindTo = function(container) {
-    container.appendChild(this.dom);
-};
+
 
 Board.prototype.disableAll = function() {
-    this.cells.forEach(function(cell) {
-        cell.classList.add('notActive');
+    this.cups.forEach(function(cup) {
+        //cup.classList.add('notActive');
     });
 };
 
 Board.prototype.enableAll = function() {
-    this.cells.forEach(function(cell) {
-        cell.classList.remove('notActive');
-        cell.setAttribute('marked', 'false');
+  alert('enableAll');
+    this.cups.forEach(function(cup) {
+        //cup.classList.remove('notActive');
+        cup.setAttribute('marked', 'false');
     });
 };
 
 Board.prototype.enableTurn = function() {
-    this.cells.forEach(function(cell) {
-        if (cell.getAttribute('marked') === 'false') {
-            cell.classList.remove('notActive');
-            cell.setAttribute('active', 'true');
+    this.cups.forEach(function(cup) {
+        if (cup.getAttribute('marked') === 'false') {
+            //cup.classList.remove('notActive');
+            cup.setAttribute('active', 'true');
         }
     });
 };
 
-Board.prototype.highlightCells = function(pos) {
-    var cells = this.cells;
+Board.prototype.highlightcups = function(pos) {
+    var cups = this.cups;
+    alert('highlightcups');
     pos.forEach(function(i) {
-        cells[i].classList.add('colorRed');
+      //  cups[i].classList.add('colorRed');
     });
 
-    cells.forEach(function(cell) {
-        cell.setAttribute('marked', 'true');
+    cups.forEach(function(cup) {
+        cup.setAttribute('marked', 'true');
     });
 };
 
-Board.prototype.lowlightCells = function() {
-    var cells = this.cells;
-    cells.forEach(function(cell) {
-        cell.classList.add('colorWhite');
+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) {
-    var target = event.target;
+    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();
 
-    if (this.ready && target.getAttribute('data-intent') === 'gameCell' && target.getAttribute('active') === 'true') {
-        this.onMark(this.cells.indexOf(target));
-        this.disableAll();
+        }
     }
 };
 
 /**
  *
- * @param cellId
+ * @param cupId
  * @param label
  */
-Board.prototype.doMark = function(cellId, label) {
-    var cell = this.cells[cellId];
-    cell.textContent = label;
-    cell.classList.add('notActive');
-    cell.setAttribute('marked', 'true');
+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);
 };
 
 /**
@@ -140,14 +210,15 @@ Board.prototype.doMark = function(cellId, label) {
  */
 Board.prototype.doWinner = function(pos) {
     this.disableAll();
-    this.highlightCells(pos);
+    this.highlightcups(pos);
 };
 
 /**
  *
  */
 Board.prototype.doDraw = function() {
-    this.lowlightCells();
+    alert('doDraw');
+    this.lowlightcups();
 };
 
 /**
@@ -155,12 +226,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');
         }
     });
 };
@@ -187,8 +258,8 @@ Board.prototype.checkWinner = function() {
     var pos = [];
 
     var win = winPosition.some(function(win) {
-        if (this.cells[win[0]].textContent === player.label) {
-            var res = this.cells[win[0]].textContent === this.cells[win[1]].textContent && this.cells[win[1]].textContent === this.cells[win[2]].textContent;
+        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;
@@ -211,8 +282,8 @@ Board.prototype.checkWinner = function() {
  * @returns {boolean}
  */
 Board.prototype.checkDraw = function() {
-    return this.cells.every(function(cell) {
-        return cell.textContent === this.players[0].label || cell.textContent === this.players[1].label;
+    return this.cups.every(function(cup) {
+        return cup.textContent === this.players[0].label || cup.textContent === this.players[1].label;
     }, this);
 };
 

Output/public/js/app.js

@@ -1,4 +1,4 @@
-var socket = new WebSocket('ws://192.168.188.23:2667');
+var socket = new WebSocket('ws://localhost:2667');
 var events = {
     outgoing: {
         JOIN_GAME: 'csJoinGame',
@@ -15,7 +15,7 @@ var events = {
         QUIT: 'scQuit'
     }
 };
-
+// container creates the startBtn
 var container = document.querySelector('#gameBoard');
 var startBtn = document.querySelector('#startBtn');
 var nameInput = document.querySelector('#nickname');
@@ -28,6 +28,7 @@ var scoreBoard = [
 var hero = {};
 var board = new Board(scoreBoard);
 
+// disable startBtn and nameInput before website finished loading
 startBtn.setAttribute('disabled', true);
 nameInput.setAttribute('disabled', true);
 nameInput.setAttribute('placeholder', 'Loading...');
@@ -36,6 +37,7 @@ nameInput.setAttribute('placeholder', 'Loading...');
  *
  * @param action
  * @param data
+
  * @returns {*}
  */
 function makeMessage(action, data){
@@ -49,10 +51,10 @@ function makeMessage(action, data){
 
 /**
  *
- * @param cellId
+ * @param cupId
  */
-board.onMark = function(cellId){
-    socket.send(makeMessage(events.outgoing.MARK, {playerId: hero.id, cellId: cellId}));
+board.onMark = function(cupId){
+    socket.send(makeMessage(events.outgoing.MARK, {playerId: hero.id, cupId: cupId}));
 };
 
 /**
@@ -67,9 +69,10 @@ function start() {
         scoreBoard[1].textContent = 'waiting...';
     }
 
-    board.bindTo(container);
 }
 
+
+// if startBtn is pressed
 startBtn.addEventListener('click', function(event) {
     var name = nameInput.value.trim();
 
@@ -84,7 +87,7 @@ socket.onmessage = function(event){
 
     switch (msg.action) {
         case events.incoming.ERROR:
-            alert('Error: ' + msg.data);
+            alert('Errorrr: ' + msg.data);
             break;
         case events.incoming.JOIN_GAME:
             board.addPlayer(msg.data);
@@ -95,15 +98,17 @@ socket.onmessage = function(event){
 
             break;
         case events.incoming.SET_TURN:
+        // change Scoreboard
             board.highlightScoreboard(msg.data.id);
             board.ready = true;
             if (msg.data.id === hero.id) {
+              // remove opponent cups
                 board.enableTurn();
             }
 
             break;
         case events.incoming.MARK:
-            board.doMark(msg.data.cellId, msg.data.player.label);
+            board.doMark(msg.data.cupId, msg.data.player.label);
 
             break;
 
@@ -119,12 +124,14 @@ socket.onmessage = function(event){
             break;
 
         case events.incoming.QUIT:
+           // close
             socket.close();
 
             break;
     }
 };
 
+// if socket is open, show startBtn and nameInput
 socket.onopen = function(event) {
     startBtn.removeAttribute('disabled');
     nameInput.removeAttribute('disabled');

Output/public/js/script.js

@@ -0,0 +1,159 @@
+var html = document.getElementById("html");
+var reshoot = document.getElementById("reshoot");
+var ball = document.getElementById("ball");
+var root = document.documentElement;
+var restartbuttonvisible = 1;
+var cupsOut = [];
+
+//function shootY(){
+    //let top = window.getComputedStyle(ball).getPropertyValue("top");
+    //ball.classList.remove("shootY");
+    //ball.classList.add("shootX");
+    //ball.style.top = top;
+    //let onclick = "shootX('".concat(top.toString(), "')");
+    //html.setAttribute("onclick", onclick);
+//}
+
+function shoot(event){
+    //let top = valueY;
+    //let topInt = parseInt(valueY);
+    //let left = window.getComputedStyle(ball).getPropertyValue("left");
+    //let leftInt = parseInt(left);
+    //let newtop = topInt-325;
+    //root.style.setProperty('--top', (topInt)+ "px");
+    //root.style.setProperty('--top325', (newtop)+ "px");
+    ball.classList.add("Shoot");
+
+
+    switch (event.key)
+    {
+      case 'e':
+      case 'E':
+      root.style.setProperty('--top325', "-350"+ "px");
+      ball.style.top = "-350px"
+      ball.style.left = "-155px";
+        removeCup("1");
+        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;
+    }
+
+    setTimeout(function(){
+        if(cupsOut.length == 10 && restartbuttonvisible == 1){
+            let restartBtn = document.createElement("BUTTON");
+            restartBtn.innerHTML = "Restart";
+            restartBtn.setAttribute("onclick","location.reload()");
+            restartBtn.setAttribute("id","restart");
+            document.body.appendChild(restartBtn);
+            restartbuttonvisible = 2;
+            ball.style.top = "0px";
+            ball.style.left = "0px";
+        }else{
+          reshot();
+            //let reshootBtn = document.createElement("BUTTON");
+            //reshootBtn.innerHTML = "Reshoot";
+            //reshootBtn.setAttribute("onclick","reshot()");
+            //reshootBtn.setAttribute("id","reshoot");
+            //document.body.appendChild(reshootBtn);
+        }
+    },1000);
+}
+
+//Cup entfernen bei Treffer
+function removeCup(cup){
+    let element = "cup".concat(cup);
+    let alreadyExists = cupsOut.includes(cup);
+
+    if(alreadyExists==false){
+        cupsOut.push(cup);
+    }
+    setTimeout(function(){
+ document.getElementById(element).classList.add("fadeAway");
+},1000);
+}
+
+
+function reshot(){
+    //document.getElementById("reshoot").remove();
+    ball.classList.remove("Shoot");
+    ball.style.top = "0px";
+    ball.style.left = "0px";
+
+    //root.style.setProperty('--top325', "0"+ "px");
+    //setTimeout(function(){
+    //    html.setAttribute("onclick", "shoot()");
+    //},1000);
+}
+
+
+
+// Cup Positionen + Toleranz
+//Cup 1: -20<topInt && topInt<20 && -125<leftInt && leftInt<-60
+//Cup 2: -20<topInt && topInt<20 && -40<leftInt && leftInt<40
+//Cup 3: -20<topInt && topInt<20 && 60<leftInt && leftInt<125
+//Cup 4: 60<topInt && topInt<100 && -90<leftInt && leftInt<-25
+//Cup 5: 60<topInt && topInt<100 && 15<leftInt && leftInt<80
+//Cup 6: 140<topInt && topInt<180 && -45<leftInt && leftInt<45

Output/routes/index.js

@@ -3,7 +3,7 @@ var router = express.Router();
 
 /* GET home page. */
 router.get('/', function(req, res) {
-  res.render('index', { title: 'Tic Tac Toe' });
+  res.render('index', { title: 'Beer Pong' });
 });
 
 module.exports = router;

Output/server.js

@@ -53,7 +53,7 @@ wss.on('connection', function connection(ws) {
         });
     });
 
-    board.on(Board.events.CELL_MARKED, function(event) {
+    board.on(Board.events.CUP_MARKED, function(event) {
         wss.clients.forEach(function(client) {
             client.send(makeMessage(events.outgoing.MARK, event));
         });
@@ -78,6 +78,7 @@ wss.on('connection', function connection(ws) {
     });
 
     ws.on('message', function incoming(msg) {
+
         try {
             var msg = JSON.parse(msg);
         } catch (error) {
@@ -88,7 +89,7 @@ wss.on('connection', function connection(ws) {
         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;
@@ -98,7 +99,7 @@ wss.on('connection', function connection(ws) {
                             return player.id == msg.data.playerId;
                         }).pop();
 
-                        board.mark(msg.data.cellId);
+                        board.mark(msg.data.cupId);
                     }
 
                     break;

Output/views/index.jade

@@ -1,20 +1,45 @@
 extends layout
 
 block content
-    .container
-        .row
-            .col-sm-3.col-sm-offset-3.scoreBoard
-                h1
-                    span#p1Score
-            .col-sm-3.scoreBoard
-                h1.text-right
-                    span#p2Score
-        .row
-            .col-sm-6.col-sm-offset-3#gameBoard
-                h1.text-center.colorDark Enter your name
-                .panel.panel-danger
-                      .panel-body
-                        .input-group
-                            input#nickname.form-control.input-lg( autofocus )
-                            span.input-group-btn
-                                button#startBtn.btn.btn-lg.btn-danger PLAY!
+
+
+
+  .container
+
+      .cups
+        .tisch
+          img(src='bierbankgarnitur_ausg.png')
+        .row1
+          img#cup1.cup.cup1(src='cup.png' alt='')
+          img#cup2.cup.cup2(src='cup.png' alt='')
+          img#cup3.cup.cup3(src='cup.png' alt='')
+          img#cup4.cup.cup4(src='cup.png' alt='')
+        .row2
+          img#cup5.cup.cup5(src='cup.png' alt='')
+          img#cup6.cup.cup6(src='cup.png' alt='')
+          img#cup7.cup.cup7(src='cup.png' alt='')
+        .row3
+          img#cup8.cup.cup8(src='cup.png' alt='')
+          img#cup9.cup.cup9(src='cup.png' alt='')
+        .row4
+          img#cup10.cup.cup10(src='cup.png' alt='')
+      #shooter.shooter
+        svg#ball.ball
+          ellipse(cx='25' cy='25' rx='24' ry='24')
+          
+      .row
+          .col-sm-3.col-sm-offset-3.scoreBoard
+              h1
+                  span#p1Score
+          .col-sm-3.scoreBoard
+              h1.text-right
+                  span#p2Score
+      .row
+          .col-sm-6.col-sm-offset-3#gameBoard
+              h1.text-center.colorDark Enter your name
+              .panel.panel-danger
+                    .panel-body
+                      .input-group
+                          input#nickname.form-control.input-lg( autofocus )
+                          span.input-group-btn
+                              button#startBtn.btn.btn-lg.btn-danger PLAY!

Output/views/layout.jade

@@ -1,12 +1,14 @@
 doctype html
-html( lang="en" )
-    head
-        meta( charset='utf-8' )
-        meta( http-equiv='X-UA-Compatible', content='IE=edge' )
-        meta( name='viewport', content='width=device-width, initial-scale=1.0' )
-        title= title
-        link(rel='stylesheet', href='/css/bootstrap.min.css')
-        link(rel='stylesheet', href='/css/style.css')
+html(lang='en')#cont
+  head
+    meta(charset='UTF-8')
+    meta( http-equiv='X-UA-Compatible', content='IE=edge' )
+    meta(name='viewport' content='width=device-width, initial-scale=1.0')
+    title= title
+    link(rel='stylesheet', href='/css/bootstrap.min.css')
+    link(rel='stylesheet' href='/css/style.css')
+    link(rel='icon' href='cup.png')
+
 body
     block content
     script(src='/js/Board.js')

README.md

@@ -1,5 +1,13 @@
 # Beerpong
 
-Ein Projekt das es ermöglicht Beerpong über das Internet von zwei unabhängigen positionen aus zu spielen.
-
-Entstehung im Rahmen einer Praktikumsaufgabe im Fach Interaktion.
+Ein Projekt das es ermöglicht Beerpong über das Internet von zwei unabhängigen positionen aus zu spielen.
+
+Entstehung im Rahmen einer Praktikumsaufgabe im Fach Interaktion.
+
+Voraussetzungen: Node.js wurde installiert.
+
+Erst den Web-server starten mit: 
+npm run-script web-server
+
+danach den Socket-server starten mit:
+npm run-script socket-server