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

Änderung 14.06.

Browse Source
This commit is contained in:
Jonas Hetzel 2021-06-14 16:56:35 +02:00
parent f85639a6e7
commit 04382347c8
8 changed files with 232 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
Output/BoardServer.js
View File

@ -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'
@ -30,39 +30,39 @@ util.inherits(Board, EventEmitter);
*/
Board.prototype.init = function() {
for (var i = 0; i < 9; i++) {
this.cells.push({});
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) {
@ -108,8 +108,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 +132,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);
};
@ -160,4 +160,4 @@ Board.prototype.addPlayer = function(player) {
}
};
module.exports = Board;
module.exports = Board;

95
Output/public/css/style.css
View File

@ -140,3 +140,98 @@ ellipse{
0%{top: var(--top)}
100%{top: var(--top325)}
}
::selection {
background: transparent;
}
.bgWhite {
background: #F5F2F5;
}
.colorWhite {
color: #F5F2F5 !important;
}
.bgDark {
background: #516D66;
}
.colorDark {
color: #516D66;
}
.bgRed {
background: #F286A0;
}
.colorRed {
color: #F286A0 !important;
}
.gameBoard, .scoreBoard {
font-weight: 400;
}
.gameBoard {
width: 100%;
}
.gameBoard td {
text-align: center;
color: #516D66;
font-size: 8em;
cursor: pointer;
transition: all 0.5s;
}
.gameCell {
width: 181px;
height: 181px;
}
.gameCell:not(.marked):hover {
box-shadow: 0 0 42px #555;
}
.gameBoard td.gameCell.notActive:hover, .gameBoard td.gameCell.notActive:active {
box-shadow: none !important;
cursor: default;
}
.scoreBoard {
color: #516D66;
height: 100px;
}
.boardCol {
width: 5px;
cursor: default !important;
}
.boardRow {
height: 5px;
cursor: default !important;
}
.scoreBoard span.active {
border-bottom: 4px solid #F286A0;
}

97
Output/public/js/Board.js
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);
};

19
Output/public/js/app.js
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');

2
Output/server.js
View File

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

6
Output/views/error.jade Normal file
View File

@ -0,0 +1,6 @@
extends layout
block content
h1= message
h2= error.status
pre #{error.stack}

64
Output/views/index.jade
View File

@ -1,23 +1,45 @@
extends layout
extends layout
block content
.cups
.tisch
img(src='bierbankgarnitur_ausg.png')
.row.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='')
.row.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='')
.row.row3
img#cup8.cup.cup8(src='cup.png' alt='')
img#cup9.cup.cup9(src='cup.png' alt='')
.row.row4
img#cup10.cup.cup10(src='cup.png' alt='')
#shooter.shooter
svg#ball.ball
ellipse(cx='25' cy='25' rx='24' ry='24')
.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!

6
Output/views/layout.jade
View File

@ -5,10 +5,12 @@ html(lang='en' onkeypress='shoot(event)')
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/index.js')
script(src='/js/script.js')
script(src='/js/Board.js')
script(src='/js/app.js')