From 04382347c89d78bc75bf26d1da9c9a2cb8ca3301 Mon Sep 17 00:00:00 2001 From: Jonas Hetzel Date: Mon, 14 Jun 2021 16:56:35 +0200 Subject: [PATCH] =?UTF-8?q?=C3=84nderung=2014.06.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Output/BoardServer.js | 40 +++++++-------- Output/public/css/style.css | 95 ++++++++++++++++++++++++++++++++++++ Output/public/js/Board.js | 97 +++++++++++++++++++------------------ Output/public/js/app.js | 19 +++++--- Output/server.js | 2 +- Output/views/error.jade | 6 +++ Output/views/index.jade | 64 ++++++++++++++++-------- Output/views/layout.jade | 6 ++- 8 files changed, 232 insertions(+), 97 deletions(-) create mode 100644 Output/views/error.jade diff --git a/Output/BoardServer.js b/Output/BoardServer.js index ec433f2..4f78510 100644 --- a/Output/BoardServer.js +++ b/Output/BoardServer.js @@ -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; \ No newline at end of file +module.exports = Board; diff --git a/Output/public/css/style.css b/Output/public/css/style.css index 5a7c1cb..58cdaed 100644 --- a/Output/public/css/style.css +++ b/Output/public/css/style.css @@ -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; +} diff --git a/Output/public/js/Board.js b/Output/public/js/Board.js index 04544b7..86835f9 100644 --- a/Output/public/js/Board.js +++ b/Output/public/js/Board.js @@ -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); }; diff --git a/Output/public/js/app.js b/Output/public/js/app.js index 9f85edf..02bc4a1 100644 --- a/Output/public/js/app.js +++ b/Output/public/js/app.js @@ -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'); diff --git a/Output/server.js b/Output/server.js index 2d725e1..2531481 100644 --- a/Output/server.js +++ b/Output/server.js @@ -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)); }); diff --git a/Output/views/error.jade b/Output/views/error.jade new file mode 100644 index 0000000..51ec12c --- /dev/null +++ b/Output/views/error.jade @@ -0,0 +1,6 @@ +extends layout + +block content + h1= message + h2= error.status + pre #{error.stack} diff --git a/Output/views/index.jade b/Output/views/index.jade index 1201a5b..434eb67 100644 --- a/Output/views/index.jade +++ b/Output/views/index.jade @@ -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') \ No newline at end of file + + + + .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! diff --git a/Output/views/layout.jade b/Output/views/layout.jade index 5fc2b03..8c9f318 100644 --- a/Output/views/layout.jade +++ b/Output/views/layout.jade @@ -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') +