„README.md“ ändern

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,10 +17,9 @@ var Board = function() {
 Board.events = {
     PLAYER_CONNECTED: 'playerConnected',
     GAME_READY: 'gameReady',
-    CELL_MARKED: 'cellMarked',
+    CUP_MARKED: 'cupMarked',
     CHANGE_TURN: 'changeTurn',
-    WINNER: 'winner',
+    WINNER: 'winner'
-    DRAW: 'draw'
 };
 
 util.inherits(Board, EventEmitter);
@@ -29,47 +28,45 @@ util.inherits(Board, EventEmitter);
  *
  */
 Board.prototype.init = function() {
-    for (var i = 0; i < 9; i++) {
+    for (var i = 0; i <= 9; i++) {
-        this.cells.push({});
+        this.cups.push({});
     }
 };
 
 Board.prototype.disableAll = function() {
-    this.cells.forEach(function(cell) {
+    this.cups.forEach(function(cup) {
-        cell.active = false;
+        cup.active = false;
     });
 };
 
 Board.prototype.enableAll = function() {
-    this.cells.forEach(function(cell) {
+    this.cups.forEach(function(cup) {
-        cell.active = true;
+        cup.active = true;
     });
 };
 
 /**
  *
- * @param cellId
+ * @param cupId
  */
-Board.prototype.mark = function(cellId) {
+Board.prototype.mark = function(cupId) {
-    var cell = this.cells[cellId];
+    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;
+        cup.value = player.label;
-        cell.active = false;
+        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) {
             this.disableAll();
-            this.emit(Board.events.WINNER, {player: this.players[this.currentTurn], pos: res.pos});
+            this.emit(Board.events.WINNER, {player: this.players[this.currentTurn]});
-        } else if (this.checkDraw()) {
-            this.emit(Board.events.DRAW, {});
         } else {
             this.currentTurn = (this.currentTurn + 1) % 2;
             this.emit(Board.events.CHANGE_TURN, this.players[this.currentTurn]);
@@ -90,52 +87,50 @@ Board.prototype.checkTurn = function(playerId) {
  *
  * @returns {{win: boolean, pos: Array}}
  */
-Board.prototype.checkWinner = function() {
+ Board.prototype.checkWinner = function() {
-    var winPosition = [
+   var win = false;
-        [0, 1, 2],
+   var counter=0;
-        [3, 4, 5],
-        [6, 7, 8],
 
-        [0, 3, 6],
+   this.cups.forEach(function(cup) {
-        [1, 4, 7],
+     if(cup.active == false) {
-        [2, 5, 8],
+       counter++;
+     }
+   });
 
-        [0, 4, 8],
+   if(counter == 10) {
-        [6, 4, 2]
+     win = true;
-    ];
+   }
 
-    var player = this.players[this.currentTurn];
-    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 (res) {
+ /*
-                pos = win;
+     var winPosition = [
-                return true;
+         [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-            }
+     ];
-        }
 
-        return false;
+     var player = this.players[this.currentTurn];
-    }, this);
+     var pos = [];
 
-    return {
+     var win = winPosition.some(function(win) {
-        win: win,
+         if (this.cups[win[0]].textContent === player.label) {
-        pos: pos
+             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
+     };
+
+ };
 
-};
 
-/**
- *
- * @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;
-    }, this);
-};
 
 /**
  *

Output/public/css/style.css

@@ -1,27 +1,170 @@
-@font-face {
+:root{
-    font-family: 'Lato';
+    --top:0px;
-    font-style: normal;
+    --top325:325px;
-    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;
+    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';
+.cups{
-    font-style: normal;
+    margin: auto;
-    font-weight: 400;
+    width: 1100px;
-    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;
 }
+.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)}
+}
+
+@-webkit-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.cups = [];
-    this.dom = document.createElement('table');
+    this.dom = document.getElementById('cont');
-    this.dom.addEventListener('click', this.mark.bind(this));
+    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');
+    for (var i = 1; i <= 10; i++) {
-    var rowCol = document.createElement('td');
+        var cupname = "cup" + i;
-    var col = document.createElement('td');
+        var cup = document.getElementById(cupname);
-    var cell = document.createElement('td');
+        cup.setAttribute('marked', 'false');
-
+        cup.setAttribute('data-intent', 'gamecup');
-    rowCol.classList.add('boardRow');
+        this.cups.push(cup);
-    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));
-        }
     }
 };
 
@@ -65,102 +37,218 @@ Board.prototype.init = function() {
  *
  * @param container
  */
-Board.prototype.bindTo = function(container) {
+
-    container.appendChild(this.dom);
-};
 
 Board.prototype.disableAll = function() {
-    this.cells.forEach(function(cell) {
+    this.cups.forEach(function(cup) {
-        cell.classList.add('notActive');
+        //cup.classList.add('notActive');
     });
 };
 
 Board.prototype.enableAll = function() {
-    this.cells.forEach(function(cell) {
+  alert('enableAll');
-        cell.classList.remove('notActive');
+    this.cups.forEach(function(cup) {
-        cell.setAttribute('marked', 'false');
+        //cup.classList.remove('notActive');
+        cup.setAttribute('marked', 'false');
     });
 };
 
 Board.prototype.enableTurn = function() {
-    this.cells.forEach(function(cell) {
+    this.cups.forEach(function(cup) {
-        if (cell.getAttribute('marked') === 'false') {
+        if (cup.getAttribute('marked') === 'false') {
-            cell.classList.remove('notActive');
+            //cup.classList.remove('notActive');
-            cell.setAttribute('active', 'true');
+            cup.setAttribute('active', 'true');
         }
     });
+   ball.classList.remove("Shoot");
 };
 
-Board.prototype.highlightCells = function(pos) {
+Board.prototype.highlightcups = function() {
-    var cells = this.cells;
+    var cups = this.cups;
-    pos.forEach(function(i) {
+    alert('highlightcups');
-        cells[i].classList.add('colorRed');
-    });
 
-    cells.forEach(function(cell) {
+    cups.forEach(function(cup) {
-        cell.setAttribute('marked', 'true');
+        cup.setAttribute('marked', 'true');
     });
 };
 
-Board.prototype.lowlightCells = function() {
+Board.prototype.lowlightcups = function() {
-    var cells = this.cells;
+    alert('lowlightcups');
-    cells.forEach(function(cell) {
+    var cups = this.cups;
-        cell.classList.add('colorWhite');
+    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) {
-    var target = event.target;
+    if (this.ready) {
       
-    if (this.ready && target.getAttribute('data-intent') === 'gameCell' && target.getAttribute('active') === 'true') {
+      var target = document.getElementById(this.getCup(event.key));
-        this.onMark(this.cells.indexOf(target));
+      if (target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') {
-        this.disableAll();
+          this.onMark(this.cups.indexOf(target));
+          this.disableAll();
+
+        }
     }
 };
 
 /**
  *
- * @param cellId
+ * @param cupId
  * @param label
  */
-Board.prototype.doMark = function(cellId, label) {
+Board.prototype.doMark = function(cupId, label) {
-    var cell = this.cells[cellId];
+    var cup = this.cups[cupId];
-    cell.textContent = label;
+    cup.textContent = label;
-    cell.classList.add('notActive');
+    //cup.classList.add('notActive');
-    cell.setAttribute('marked', 'true');
+    // 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(pos) {
+Board.prototype.doWinner = function() {
     this.disableAll();
-    this.highlightCells(pos);
+    this.highlightcups();
 };
 
-/**
+
- *
- */
-Board.prototype.doDraw = function() {
-    this.lowlightCells();
-};
 
 /**
  *
  */
 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');
         }
     });
 };
@@ -170,25 +258,31 @@ Board.prototype.highlightScoreboard = function(playerId) {
  * @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 = [
-        [0, 1, 2],
+        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-        [3, 4, 5],
-        [6, 7, 8],
-
-        [0, 3, 6],
-        [1, 4, 7],
-        [2, 5, 8],
-
-        [0, 4, 8],
-        [6, 4, 2]
     ];
 
     var player = this.players[this.currentTurn];
     var pos = [];
 
     var win = winPosition.some(function(win) {
-        if (this.cells[win[0]].textContent === player.label) {
+        if (this.cups[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;
+            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;
@@ -197,7 +291,7 @@ Board.prototype.checkWinner = function() {
         }
 
         return false;
-    }, this);
+    }, this);*/
 
     return {
         win: win,
@@ -206,15 +300,7 @@ 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;
-    }, 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){
+board.onMark = function(cupId){
-    socket.send(makeMessage(events.outgoing.MARK, {playerId: hero.id, cellId: cellId}));
+    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,23 +98,23 @@ 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;
 
         case events.incoming.GAME_OVER:
             if (msg.data.player) {
-                board.doWinner(msg.data.pos);
+                board.doWinner();
-            } else {
-                board.doDraw();
             }
 
             socket.send(makeMessage(events.outgoing.QUIT, hero.id));
@@ -119,12 +122,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));
         });
@@ -71,13 +71,9 @@ wss.on('connection', function connection(ws) {
         });
     });
 
-    board.on(Board.events.DRAW, function(event) {
-        wss.clients.forEach(function(client) {
-            client.send(makeMessage(events.outgoing.GAME_OVER, event));
-        });
-    });
 
     ws.on('message', function incoming(msg) {
+
         try {
             var msg = JSON.parse(msg);
         } catch (error) {
@@ -88,7 +84,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 +94,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
+  .container
-                    span#p1Score
+
-            .col-sm-3.scoreBoard
+      .cups
-                h1.text-right
+        .tisch
-                    span#p2Score
+          img(src='bierbankgarnitur_ausg.png')
-        .row
+        .row1
-            .col-sm-6.col-sm-offset-3#gameBoard
+          img#cup1.cup.cup1(src='cup.png' alt='')
-                h1.text-center.colorDark Enter your name
+          img#cup2.cup.cup2(src='cup.png' alt='')
-                .panel.panel-danger
+          img#cup3.cup.cup3(src='cup.png' alt='')
-                      .panel-body
+          img#cup4.cup.cup4(src='cup.png' alt='')
-                        .input-group
+        .row2
-                            input#nickname.form-control.input-lg( autofocus )
+          img#cup5.cup.cup5(src='cup.png' alt='')
-                            span.input-group-btn
+          img#cup6.cup.cup6(src='cup.png' alt='')
-                                button#startBtn.btn.btn-lg.btn-danger PLAY!
+          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" )
+html(lang='en')#cont
-    head
+  head
-        meta( charset='utf-8' )
+    meta(charset='UTF-8')
-        meta( http-equiv='X-UA-Compatible', content='IE=edge' )
+    meta( http-equiv='X-UA-Compatible', content='IE=edge' )
-        meta( name='viewport', content='width=device-width, initial-scale=1.0' )
+    meta(name='viewport' content='width=device-width, initial-scale=1.0')
-        title= title
+    title= title
-        link(rel='stylesheet', href='/css/bootstrap.min.css')
+    link(rel='stylesheet', href='/css/bootstrap.min.css')
-        link(rel='stylesheet', href='/css/style.css')
+    link(rel='stylesheet' href='/css/style.css')
+    link(rel='icon' href='cup.png')
+
 body
     block content
     script(src='/js/Board.js')

README.md

@@ -3,3 +3,29 @@
 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.
+
+## Vorbereitung
+
+Voraussetzungen: Node.js wurde installiert, so dass npm im Terminal verfügbar ist.
+In der Kommandozeile dann in das Verzeichnis Output wechseln und Folgende Schritte befolgen.
+
+Erst den Web-server starten mit:
+npm run-script web-server
+
+danach den Socket-server starten mit:
+npm run-script socket-server
+
+Die Website ist dann unter http://localhost:3000 verfügbar. Es kann gespielt werden sobald zwei Browser Fenster diese Website besuchen.
+
+Wenn in der Datei Beerpong/public/app.js in der ersten Zeile anstatt localhost die IP-Adresse des Servers hinterlegt wird, kann von jedem PC im Netzwerk über http://"server-ip":3000 (ersetzt mit ip-Adresse, ohne Anführungszeichen) das Spiel gespielt werden. 
+
+## zum Spielen
+
+Erst muss jeder Spieler seinen Namen eingeben und mit Start bestätigen.
+
+Becher über die Tasten:
+         qwer
+         asd
+         yx
+         c
+verschwinden lassen.