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

Output/BoardServer.js

@@ -19,7 +19,8 @@ Board.events = {
     GAME_READY: 'gameReady',
     CUP_MARKED: 'cupMarked',
     CHANGE_TURN: 'changeTurn',
-    WINNER: 'winner'
+    WINNER: 'winner',
+    DRAW: 'draw'
 };
 
 util.inherits(Board, EventEmitter);
@@ -66,7 +67,9 @@ Board.prototype.mark = function(cupId) {
         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]);
@@ -80,6 +83,7 @@ Board.prototype.mark = function(cupId) {
  * @returns {boolean}
  */
 Board.prototype.checkTurn = function(playerId) {
+  ('checkTurn');
     return this.players[this.currentTurn].id == playerId;
 };
 
@@ -87,50 +91,52 @@ Board.prototype.checkTurn = function(playerId) {
  *
  * @returns {{win: boolean, pos: Array}}
  */
- 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;
-   }
-
-
-
- /*
+Board.prototype.checkWinner = function() {
     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) {
-             var res = this.cups[win[0]].textContent === this.cups[win[1]].textContent && this.cups[win[1]].textContent === this.cups[win[2]].textContent;
+        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;
                 return true;
             }
-}
+        }
 
         return false;
-     }, this);*/
+    }, this);
 
     return {
-         win: win
-     };
-
+        win: win,
+        pos: pos
     };
 
+};
 
+/**
+ *
+ * @returns {boolean}
+ */
+Board.prototype.checkDraw = function() {
+    return this.cups.every(function(cup) {
+        return cup.value === this.players[0].label || cup.value === this.players[1].label;
+    }, this);
+};
 
 /**
  *

Output/public/css/style.css

@@ -141,10 +141,7 @@ ellipse{
     100%{top: var(--top325)}
 }
 
-@-webkit-keyframes Shoot{
-    0%{top: var(--top)}
-    100%{top: var(--top325)}
-}
+
 
 
 

Output/public/js/Board.js

@@ -60,12 +60,14 @@ Board.prototype.enableTurn = function() {
             cup.setAttribute('active', 'true');
         }
     });
-   ball.classList.remove("Shoot");
 };
 
-Board.prototype.highlightcups = function() {
+Board.prototype.highlightcups = function(pos) {
     var cups = this.cups;
     alert('highlightcups');
+    pos.forEach(function(i) {
+      //  cups[i].classList.add('colorRed');
+    });
 
     cups.forEach(function(cup) {
         cup.setAttribute('marked', 'true');
@@ -80,110 +82,88 @@ Board.prototype.lowlightcups = function() {
     });
 };
 
-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) {
- 
+  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:
@@ -197,7 +177,6 @@ Board.prototype.getCup = function(code) {
  */
 Board.prototype.mark = function(event) {
     if (this.ready) {
-      
       var target = document.getElementById(this.getCup(event.key));
       if (target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') {
           this.onMark(this.cups.indexOf(target));
@@ -217,26 +196,30 @@ Board.prototype.doMark = function(cupId, label) {
     cup.textContent = label;
     //cup.classList.add('notActive');
     // removeCup
-    if(cup.getAttribute('marked') === 'false') this.shoot(cupId);
     setTimeout(this.cups[cupId].classList.add("fadeAway") ,1000);
     cup.setAttribute('marked', 'true');
     setTimeout(function() {
       ball.style.top = "0px";
       ball.style.left = "0px";
     }, 1000);
-    this.currentTurn = (this.currentTurn + 1) % 2;
 };
 
 /**
  *
  * @param pos
  */
-Board.prototype.doWinner = function() {
+Board.prototype.doWinner = function(pos) {
     this.disableAll();
-    this.highlightcups();
+    this.highlightcups(pos);
 };
 
-
+/**
+ *
+ */
+Board.prototype.doDraw = function() {
+    alert('doDraw');
+    this.lowlightcups();
+};
 
 /**
  *
@@ -258,23 +241,17 @@ 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];
@@ -291,7 +268,7 @@ Board.prototype.checkWinner = function() {
         }
 
         return false;
-    }, this);*/
+    }, this);
 
     return {
         win: win,
@@ -300,7 +277,15 @@ Board.prototype.checkWinner = function() {
 
 };
 
-
+/**
+ *
+ * @returns {boolean}
+ */
+Board.prototype.checkDraw = function() {
+    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

@@ -114,7 +114,9 @@ socket.onmessage = function(event){
 
         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));

Output/server.js

@@ -71,6 +71,11 @@ 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) {
 

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, so dass npm im Terminal verfügbar ist.
-In der Kommandozeile dann in das Verzeichnis Output wechseln und Folgende Schritte befolgen.
+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
-
-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.