Merge branch 'master' of https://git.efi.th-nuernberg.de/gitea/goldma74993/Beerpong

Output/BoardServer.js

@@ -6,7 +6,7 @@ var util = require('util');
  * @constructor
  */
 var Board = function() {
-    this.cups = [];
+    this.cells = [];
     this.players = [];
     this.currentTurn = 0;
     this.ready = false;
@@ -17,9 +17,10 @@ var Board = function() {
 Board.events = {
     PLAYER_CONNECTED: 'playerConnected',
     GAME_READY: 'gameReady',
-    CUP_MARKED: 'cupMarked',
+    CELL_MARKED: 'cellMarked',
     CHANGE_TURN: 'changeTurn',
-    WINNER: 'winner'
+    WINNER: 'winner',
+    DRAW: 'draw'
 };
 
 util.inherits(Board, EventEmitter);
@@ -28,45 +29,47 @@ util.inherits(Board, EventEmitter);
  *
  */
 Board.prototype.init = function() {
-    for (var i = 0; i <= 9; i++) {
+    for (var i = 0; i < 9; i++) {
-        this.cups.push({});
+        this.cells.push({});
     }
 };
 
 Board.prototype.disableAll = function() {
-    this.cups.forEach(function(cup) {
+    this.cells.forEach(function(cell) {
-        cup.active = false;
+        cell.active = false;
     });
 };
 
 Board.prototype.enableAll = function() {
-    this.cups.forEach(function(cup) {
+    this.cells.forEach(function(cell) {
-        cup.active = true;
+        cell.active = true;
     });
 };
 
 /**
  *
- * @param cupId
+ * @param cellId
  */
-Board.prototype.mark = function(cupId) {
+Board.prototype.mark = function(cellId) {
-    var cup = this.cups[cupId];
+    var cell = this.cells[cellId];
 
-    if (!cup) {
+    if (!cell) {
         return false;
     }
 
-    if (this.ready && cup.active) {
+    if (this.ready && cell.active) {
         var player = this.players[this.currentTurn];
-        cup.value = player.label;
+        cell.value = player.label;
-        cup.active = false;
+        cell.active = false;
 
-        this.emit(Board.events.CUP_MARKED, {cupId: cupId, player: player});
+        this.emit(Board.events.CELL_MARKED, {cellId: cellId, player: player});
 
         var res = this.checkWinner();
         if (res.win) {
             this.disableAll();
-            this.emit(Board.events.WINNER, {player: this.players[this.currentTurn]});
+            this.emit(Board.events.WINNER, {player: this.players[this.currentTurn], pos: res.pos});
+        } 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]);
@@ -87,50 +90,52 @@ Board.prototype.checkTurn = function(playerId) {
  *
  * @returns {{win: boolean, pos: Array}}
  */
- Board.prototype.checkWinner = function() {
+Board.prototype.checkWinner = function() {
-   var win = false;
-   var counter=0;
-
-   this.cups.forEach(function(cup) {
-     if(cup.active == false) {
-       counter++;
-     }
-   });
-
-   if(counter == 10) {
-     win = true;
-   }
-
-
-
- /*
     var winPosition = [
-         [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        [0, 1, 2],
+        [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.cups[win[0]].textContent === player.label) {
+        if (this.cells[win[0]].value === player.label) {
-             var res = this.cups[win[0]].textContent === this.cups[win[1]].textContent && this.cups[win[1]].textContent === this.cups[win[2]].textContent;
+            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;
                 return true;
             }
-}
+        }
 
         return false;
-     }, this);*/
+    }, this);
 
     return {
-         win: win
+        win: win,
-     };
+        pos: pos
-
     };
 
+};
 
+/**
+ *
+ * @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,170 +1,27 @@
-:root{
+@font-face {
-    --top:0px;
+    font-family: 'Lato';
-    --top325:325px;
+    font-style: normal;
-}
+    font-weight: 400;
-*{
+    src: local('Lato Regular'), local('Lato-Regular'), url(Lato.woff2) format('woff2');
-    padding: 0;
+    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;
-    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 {
-.cups{
+    font-family: 'Quicksand';
-    margin: auto;
+    font-style: normal;
-    width: 1100px;
+    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;
 }
-.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,13 +2,10 @@
  *
  * @constructor
  */
-var root = document.documentElement;
-var ball = document.getElementById("ball");
-
 var Board = function(scoreBoard) {
-    this.cups = [];
+    this.cells = [];
-    this.dom = document.getElementById('cont');
+    this.dom = document.createElement('table');
-    this.dom.addEventListener('keypress', this.mark.bind(this));
+    this.dom.addEventListener('click', this.mark.bind(this));
     this.players = [];
     this.currentTurn = 0;
     this.ready = false;
@@ -18,18 +15,49 @@ var Board = function(scoreBoard) {
     this.init();
 };
 
-Board.prototype.onMark = function(cupId){};
+Board.prototype.onMark = function(cellId){};
 
 /**
  *
  */
 Board.prototype.init = function() {
-    for (var i = 1; i <= 10; i++) {
+    var row = document.createElement('tr');
-        var cupname = "cup" + i;
+    var rowCol = document.createElement('td');
-        var cup = document.getElementById(cupname);
+    var col = document.createElement('td');
-        cup.setAttribute('marked', 'false');
+    var cell = document.createElement('td');
-        cup.setAttribute('data-intent', 'gamecup');
+
-        this.cups.push(cup);
+    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));
+        }
     }
 };
 
@@ -37,206 +65,90 @@ Board.prototype.init = function() {
  *
  * @param container
  */
-
+Board.prototype.bindTo = function(container) {
+    container.appendChild(this.dom);
+};
 
 Board.prototype.disableAll = function() {
-    this.cups.forEach(function(cup) {
+    this.cells.forEach(function(cell) {
-        //cup.classList.add('notActive');
+        cell.classList.add('notActive');
     });
 };
 
 Board.prototype.enableAll = function() {
-  alert('enableAll');
+    this.cells.forEach(function(cell) {
-    this.cups.forEach(function(cup) {
+        cell.classList.remove('notActive');
-        //cup.classList.remove('notActive');
+        cell.setAttribute('marked', 'false');
-        cup.setAttribute('marked', 'false');
     });
 };
 
 Board.prototype.enableTurn = function() {
-    this.cups.forEach(function(cup) {
+    this.cells.forEach(function(cell) {
-        if (cup.getAttribute('marked') === 'false') {
+        if (cell.getAttribute('marked') === 'false') {
-            //cup.classList.remove('notActive');
+            cell.classList.remove('notActive');
-            cup.setAttribute('active', 'true');
+            cell.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() {
+Board.prototype.highlightCells = function(pos) {
-    alert('lowlightcups');
+    var cells = this.cells;
-    var cups = this.cups;
+    pos.forEach(function(i) {
-    cups.forEach(function(cup) {
+        cells[i].classList.add('colorRed');
-        //cup.classList.add('colorWhite');
+    });
+
+    cells.forEach(function(cell) {
+        cell.setAttribute('marked', 'true');
     });
 };
 
-Board.prototype.shoot = function(cup) {
+Board.prototype.lowlightCells = function() {
-  ball.classList.add("Shoot");  
+    var cells = this.cells;
-  switch(cup) {
+    cells.forEach(function(cell) {
-    case 0:
+        cell.classList.add('colorWhite');
-    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 = event.target;
 
-      var target = document.getElementById(this.getCup(event.key));
+    if (this.ready && target.getAttribute('data-intent') === 'gameCell' && target.getAttribute('active') === 'true') {
-      if (target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') {
+        this.onMark(this.cells.indexOf(target));
-          this.onMark(this.cups.indexOf(target));
         this.disableAll();
-
-        }
     }
 };
 
 /**
  *
- * @param cupId
+ * @param cellId
  * @param label
  */
-Board.prototype.doMark = function(cupId, label) {
+Board.prototype.doMark = function(cellId, label) {
-    var cup = this.cups[cupId];
+    var cell = this.cells[cellId];
-    cup.textContent = label;
+    cell.textContent = label;
-    //cup.classList.add('notActive');
+    cell.classList.add('notActive');
-    // removeCup 
+    cell.setAttribute('marked', 'true');
-    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() {
+Board.prototype.doWinner = function(pos) {
     this.disableAll();
-    this.highlightcups();
+    this.highlightCells(pos);
 };
 
-
+/**
+ *
+ */
+Board.prototype.doDraw = function() {
+    this.lowlightCells();
+};
 
 /**
  *
@@ -258,31 +170,25 @@ 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 = [
-        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        [0, 1, 2],
+        [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.cups[win[0]].textContent === player.label) {
+        if (this.cells[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;
+            var res = this.cells[win[0]].textContent === this.cells[win[1]].textContent && this.cells[win[1]].textContent === this.cells[win[2]].textContent;
 
             if (res) {
                 pos = win;
@@ -291,7 +197,7 @@ Board.prototype.checkWinner = function() {
         }
 
         return false;
-    }, this);*/
+    }, this);
 
     return {
         win: win,
@@ -300,7 +206,15 @@ 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://localhost:2667');
+var socket = new WebSocket('ws://192.168.188.23: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,7 +28,6 @@ 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...');
@@ -37,7 +36,6 @@ nameInput.setAttribute('placeholder', 'Loading...');
  *
  * @param action
  * @param data
-
  * @returns {*}
  */
 function makeMessage(action, data){
@@ -51,10 +49,10 @@ function makeMessage(action, data){
 
 /**
  *
- * @param cupId
+ * @param cellId
  */
-board.onMark = function(cupId){
+board.onMark = function(cellId){
-    socket.send(makeMessage(events.outgoing.MARK, {playerId: hero.id, cupId: cupId}));
+    socket.send(makeMessage(events.outgoing.MARK, {playerId: hero.id, cellId: cellId}));
 };
 
 /**
@@ -69,10 +67,9 @@ function start() {
         scoreBoard[1].textContent = 'waiting...';
     }
 
+    board.bindTo(container);
 }
 
-
-// if startBtn is pressed
 startBtn.addEventListener('click', function(event) {
     var name = nameInput.value.trim();
 
@@ -87,7 +84,7 @@ socket.onmessage = function(event){
 
     switch (msg.action) {
         case events.incoming.ERROR:
-            alert('Errorrr: ' + msg.data);
+            alert('Error: ' + msg.data);
             break;
         case events.incoming.JOIN_GAME:
             board.addPlayer(msg.data);
@@ -98,23 +95,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.cupId, msg.data.player.label);
+            board.doMark(msg.data.cellId, msg.data.player.label);
 
             break;
 
         case events.incoming.GAME_OVER:
             if (msg.data.player) {
-                board.doWinner();
+                board.doWinner(msg.data.pos);
+            } else {
+                board.doDraw();
             }
 
             socket.send(makeMessage(events.outgoing.QUIT, hero.id));
@@ -122,14 +119,12 @@ 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

@@ -1,159 +0,0 @@
-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: 'Beer Pong' });
+  res.render('index', { title: 'Tic Tac Toe' });
 });
 
 module.exports = router;

Output/server.js

@@ -53,7 +53,7 @@ wss.on('connection', function connection(ws) {
         });
     });
 
-    board.on(Board.events.CUP_MARKED, function(event) {
+    board.on(Board.events.CELL_MARKED, function(event) {
         wss.clients.forEach(function(client) {
             client.send(makeMessage(events.outgoing.MARK, event));
         });
@@ -71,9 +71,13 @@ 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) {
@@ -84,7 +88,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 ? '1' : '2', msg.data);
+                    var player = new Player(board.players.length + 1, board.players.length === 0 ? 'X' : 'O', msg.data);
                     board.addPlayer(player);
 
                     break;
@@ -94,7 +98,7 @@ wss.on('connection', function connection(ws) {
                             return player.id == msg.data.playerId;
                         }).pop();
 
-                        board.mark(msg.data.cupId);
+                        board.mark(msg.data.cellId);
                     }
 
                     break;

Output/views/index.jade

@@ -1,32 +1,7 @@
 extends layout
 
 block content
-
-
-
     .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

Output/views/layout.jade

@@ -1,14 +1,12 @@
 doctype html
-html(lang='en')#cont
+html( lang="en" )
     head
-    meta(charset='UTF-8')
+        meta( charset='utf-8' )
         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
         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

@@ -4,28 +4,10 @@ Ein Projekt das es ermöglicht Beerpong über das Internet von zwei unabhängige
 
 Entstehung im Rahmen einer Praktikumsaufgabe im Fach Interaktion.
 
-## Vorbereitung
+Voraussetzungen: Node.js wurde installiert.
-
-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.