From 9e7279ebd4c6ab49f5deba3ba48e19c060cf7cc2 Mon Sep 17 00:00:00 2001 From: Lukas Doerr Date: Fri, 18 Jun 2021 14:53:55 +0200 Subject: [PATCH] Newest Version --- Output/BoardServer.js | 1 + Output/public/js/Board.js | 152 ++++++++++++++++++++++++++------------ Output/public/js/app.js | 6 +- Output/server.js | 4 +- 4 files changed, 111 insertions(+), 52 deletions(-) diff --git a/Output/BoardServer.js b/Output/BoardServer.js index d1e8560..8b42807 100644 --- a/Output/BoardServer.js +++ b/Output/BoardServer.js @@ -51,6 +51,7 @@ Board.prototype.enableAll = function() { * @param cupId */ Board.prototype.mark = function(cupId) { + alert(' mark bsjs'); var cup = this.cups[cupId]; if (!cup) { diff --git a/Output/public/js/Board.js b/Output/public/js/Board.js index 86835f9..06e7251 100644 --- a/Output/public/js/Board.js +++ b/Output/public/js/Board.js @@ -4,8 +4,8 @@ */ var Board = function(scoreBoard) { this.cups = []; - this.dom = document.createElement('table'); - this.dom.addEventListener('click', this.mark.bind(this)); + this.dom = document.getElementById('cont'); + this.dom.addEventListener('keypress', this.mark.bind(this)); this.players = []; this.currentTurn = 0; this.ready = false; @@ -21,61 +21,30 @@ 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 cup = 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'); - - cup.classList.add('gamecup'); - cup.classList.add('notActive'); - cup.setAttribute('marked', 'false'); - cup.setAttribute('data-intent', 'gamecup'); - - this.dom.classList.add('gameBoard'); - - for (var i = 0; i < 9; i++) { - this.cups.push(cup.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); } - - for (var r, i = 0; i < 9; i += 3) { - r = row.cloneNode(false); - r.appendChild(this.cups[i]); - r.appendChild(col.cloneNode(false)); - r.appendChild(this.cups[i + 1]); - r.appendChild(col.cloneNode(false)); - r.appendChild(this.cups[i + 2]); - - this.dom.appendChild(r); - - if (i < 6) { - this.dom.appendChild(row.cloneNode(true)); - } - }*/ }; /** * * @param container */ -Board.prototype.bindTo = function(container) { - container.appendChild(this.dom); -}; + Board.prototype.disableAll = function() { + alert('disableAll'); this.cups.forEach(function(cup) { //cup.classList.add('notActive'); }); }; Board.prototype.enableAll = function() { + alert('enableAll'); this.cups.forEach(function(cup) { //cup.classList.remove('notActive'); cup.setAttribute('marked', 'false'); @@ -83,6 +52,7 @@ Board.prototype.enableAll = function() { }; Board.prototype.enableTurn = function() { + alert('enableTurn'); this.cups.forEach(function(cup) { if (cup.getAttribute('marked') === 'false') { //cup.classList.remove('notActive'); @@ -93,6 +63,7 @@ Board.prototype.enableTurn = function() { Board.prototype.highlightcups = function(pos) { var cups = this.cups; + alert('highlightcups'); pos.forEach(function(i) { // cups[i].classList.add('colorRed'); }); @@ -110,16 +81,101 @@ Board.prototype.lowlightcups = function() { }); }; + +Board.prototype.getCup = function(code) { + alert(code); + switch (code) + { + case 'e': + case 'E': + //root.style.setProperty('--top325', "-350"+ "px"); + ball.style.top = "-350px" + ball.style.left = "-155px"; + return "cup1"; + 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; + } +} + /** * * @param event */ Board.prototype.mark = function(event) { - var target = event.target; + alert(this.ready); + if (this.ready) { + var target = document.getElementById(this.getCup(event.key)); + alert(target); + if (target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') { - if (this.ready && target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') { - this.onMark(this.cups.indexOf(target)); - this.disableAll(); + this.onMark(this.cups.indexOf(target)); + this.disableAll(); + + } } }; @@ -158,12 +214,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'); } }); }; diff --git a/Output/public/js/app.js b/Output/public/js/app.js index 02bc4a1..91d0f05 100644 --- a/Output/public/js/app.js +++ b/Output/public/js/app.js @@ -1,4 +1,4 @@ -var socket = new WebSocket('ws://192.168.2.131:2667'); +var socket = new WebSocket('ws://localhost:2667'); var events = { outgoing: { JOIN_GAME: 'csJoinGame', @@ -37,6 +37,7 @@ nameInput.setAttribute('placeholder', 'Loading...'); * * @param action * @param data + * @returns {*} */ function makeMessage(action, data){ @@ -53,6 +54,7 @@ function makeMessage(action, data){ * @param cupId */ board.onMark = function(cupId){ + alert('onMark'); socket.send(makeMessage(events.outgoing.MARK, {playerId: hero.id, cupId: cupId})); }; @@ -68,7 +70,6 @@ function start() { scoreBoard[1].textContent = 'waiting...'; } - board.bindTo(container); } @@ -108,6 +109,7 @@ socket.onmessage = function(event){ break; case events.incoming.MARK: + alert('incoming.mARK'); board.doMark(msg.data.cupId, msg.data.player.label); break; diff --git a/Output/server.js b/Output/server.js index 2531481..9032985 100644 --- a/Output/server.js +++ b/Output/server.js @@ -88,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 ? '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 +98,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;