goldma74993/Beerpong
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Änderung 14.06.

Browse Source
This commit is contained in:
hetzeljo74856
2021-06-20 22:56:31 +02:00
committed by goldma74993
parent eeeaa6ae7c
commit 7856ed2f4f
8 changed files with 232 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Output/public/js/Board.js
+50 -47
View File
@@ -3,7 +3,7 @@
* @constructor
*/
var Board = function(scoreBoard) {
this.cells = [];
this.cups = [];
this.dom = document.createElement('table');
this.dom.addEventListener('click', this.mark.bind(this));
this.players = [];
@@ -15,16 +15,16 @@ 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 row = document.createElement('tr');
var rowCol = document.createElement('td');
var col = document.createElement('td');
var cell = document.createElement('td');
var cup = document.createElement('td');
rowCol.classList.add('boardRow');
rowCol.classList.add('bgWhite');
@@ -34,31 +34,31 @@ Board.prototype.init = function() {
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');
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.cells.push(cell.cloneNode(true));
this.cups.push(cup.cloneNode(true));
}
for (var r, i = 0; i < 9; i += 3) {
r = row.cloneNode(false);
r.appendChild(this.cells[i]);
r.appendChild(this.cups[i]);
r.appendChild(col.cloneNode(false));
r.appendChild(this.cells[i + 1]);
r.appendChild(this.cups[i + 1]);
r.appendChild(col.cloneNode(false));
r.appendChild(this.cells[i + 2]);
r.appendChild(this.cups[i + 2]);
this.dom.appendChild(r);
if (i < 6) {
this.dom.appendChild(row.cloneNode(true));
}
}
}*/
};
/**
@@ -70,42 +70,43 @@ Board.prototype.bindTo = function(container) {
};
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');
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;
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');
});
};
@@ -116,22 +117,24 @@ Board.prototype.lowlightCells = function() {
Board.prototype.mark = function(event) {
var target = event.target;
if (this.ready && target.getAttribute('data-intent') === 'gameCell' && target.getAttribute('active') === 'true') {
this.onMark(this.cells.indexOf(target));
if (this.ready && target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') {
this.onMark(this.cups.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
cup.setAttribute('marked', 'true');
};
/**
@@ -140,14 +143,14 @@ 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();
this.lowlightcups();
};
/**
@@ -155,12 +158,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 +190,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 +214,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);
};
Output/public/js/app.js
+13 -6
View File
@@ -1,4 +1,4 @@
var socket = new WebSocket('ws://192.168.188.23:2667');
var socket = new WebSocket('ws://192.168.2.131: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...');
@@ -49,10 +50,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}));
};
/**
@@ -70,6 +71,8 @@ function start() {
board.bindTo(container);
}
// if startBtn is pressed
startBtn.addEventListener('click', function(event) {
var name = nameInput.value.trim();
@@ -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');