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

Remove Cups properly
Newest Version
2021-06-20 22:32:41 +02:00 · 2021-06-18 16:06:24 +02:00 · 2021-06-18 14:53:55 +02:00 · 2021-06-18 12:06:57 +02:00 · 2021-06-14 16:56:35 +02:00 · 2021-06-07 15:50:09 +02:00
12 changed files with 571 additions and 157 deletions
@@ -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);
 };

@@ -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;
@@ -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);
 };

@@ -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');
@@ -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
@@ -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;
@@ -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;
@@ -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!
@@ -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')
@@ -3,3 +3,11 @@
 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
Author	SHA1	Message	Date
goldma74993	0b794aa378	Changed Background Picture for dark mode compatablility, Keys were changed back to 4qwer 3asd 2yx 1c. The throwing positions were adjusted to the cups.	2021-06-20 22:32:41 +02:00
doerrlu76113	1a7ffb84f1	Remove Cups properly	2021-06-18 16:06:24 +02:00
doerrlu76113	6d68279e31	Newest Version	2021-06-18 14:53:55 +02:00
hetzeljo74856	ea25019db2	Hallo2	2021-06-18 12:06:57 +02:00
hetzeljo74856	04382347c8	Änderung 14.06.	2021-06-14 16:56:35 +02:00
doerrlu76113	f85639a6e7	Merge of Beerpong-Youtube and Tic-Tac-Toe	2021-06-07 15:50:09 +02:00
hetzeljo74856	8eb01f1aa5	Löschung	2021-06-07 14:23:06 +02:00
hetzeljo74856	60a6e473bb	Änderung von Jonas	2021-06-07 14:18:47 +02:00
goldma74993	e29653979c	Merge branch 'master' of https://git.efi.th-nuernberg.de/gitea/goldma74993/Beerpong	2021-06-04 09:23:24 +02:00
goldma74993	fe72cc80e9	„README.md“ ändern	2021-06-01 09:25:21 +00:00