@@ -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; |
@@ -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; | |||
} |
@@ -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); | |||
}; | |||
@@ -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'); |
@@ -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)); | |||
}); |
@@ -0,0 +1,6 @@ | |||
extends layout | |||
block content | |||
h1= message | |||
h2= error.status | |||
pre #{error.stack} |
@@ -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! |
@@ -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') | |||