lots of changes

This commit is contained in:
Evert Prants 2017-04-06 18:55:30 +03:00
parent 94f31fd800
commit 08f385db44
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
4 changed files with 180 additions and 43 deletions

View File

@ -145,6 +145,7 @@ button#leave {
padding-top: 5px; padding-top: 5px;
width: 200px; width: 200px;
height: 50px; height: 50px;
font-size: 120%;
} }
#game_canvas { #game_canvas {
margin-left: 300px; margin-left: 300px;
@ -173,7 +174,7 @@ button#lobby {
.message .sender { .message .sender {
color: red; color: red;
} }
.message.me .sender { .message.blue .sender {
color: blue !important; color: blue !important;
} }
.chatbox { .chatbox {

View File

@ -28,6 +28,7 @@
<div class="screen boxlayout" style="display: none;" id="selection"> <div class="screen boxlayout" style="display: none;" id="selection">
<div class="box"> <div class="box">
<h1>Statistics</h1> <h1>Statistics</h1>
<span class="stat">Players online: <span id="stats_players_online"></span></span>
<span class="stat">Players in game: <span id="stats_players"></span></span> <span class="stat">Players in game: <span id="stats_players"></span></span>
<span class="stat">Total games since server started: <span id="stats_games"></span></span> <span class="stat">Total games since server started: <span id="stats_games"></span></span>
<span class="stat">You've played in <span id="stats_clientgames"></span> matches this session.</span> <span class="stat">You've played in <span id="stats_clientgames"></span> matches this session.</span>

View File

@ -15,7 +15,8 @@
myColor: '', myColor: '',
opponentID: '', opponentID: '',
opponentName: '', opponentName: '',
places: [[],[],[],[],[],[],[],[],[]] places: [[],[],[],[],[],[],[],[],[]],
victory: null
}, },
color: { color: {
blue: '#102aed', blue: '#102aed',
@ -23,6 +24,38 @@
} }
} }
let activityNotice = {
timeout: null,
doctitle: '',
focused: true,
off: (temp) => {
document.title = activityNotice.doctitle
clearTimeout(activityNotice.timeout)
activityNotice.timeout = null
if (temp) {
activityNotice.timeout = setTimeout(() => {
activityNotice.on(temp)
}, 1000)
}
},
on: (msg) => {
if (activityNotice.timeout) {
activityNotice.off(null)
}
if (activityNotice.focused) return
document.title = msg
activityNotice.timeout = setTimeout(() => {
activityNotice.off(msg)
}, 1000)
}
}
window.requestAnimFrame = (function() { window.requestAnimFrame = (function() {
return window.requestAnimationFrame || return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.webkitRequestAnimationFrame ||
@ -45,6 +78,7 @@
function modalAlert (msg) { function modalAlert (msg) {
Connect4.DOM.modalMsg.innerHTML = msg Connect4.DOM.modalMsg.innerHTML = msg
Connect4.DOM.alertModal.showModal() Connect4.DOM.alertModal.showModal()
activityNotice.on(msg)
} }
function pointerOnCanvas (e) { function pointerOnCanvas (e) {
@ -73,6 +107,13 @@
return {x: x, y: y} return {x: x, y: y}
} }
function normalize (x, y) {
return {
x: (x * GameDrawer.gridSize) + GameDrawer.padding,
y: (y * GameDrawer.gridSize) + GameDrawer.padding
}
}
let GameDrawer = { let GameDrawer = {
drawMyBoard: true, drawMyBoard: true,
boardStaticState: null, boardStaticState: null,
@ -92,6 +133,7 @@
bh: 576, bh: 576,
startGame: () => { startGame: () => {
Connect4.Game.victory = null
Connect4.Game.places = [[],[],[],[],[],[],[],[],[]] Connect4.Game.places = [[],[],[],[],[],[],[],[],[]]
Connect4.ctx.clearRect(0, 0, Connect4.canvasW, Connect4.canvasH) Connect4.ctx.clearRect(0, 0, Connect4.canvasW, Connect4.canvasH)
@ -109,7 +151,7 @@
} }
Connect4.ctx.closePath() Connect4.ctx.closePath()
Connect4.ctx.lineWidth = 1 Connect4.ctx.lineWidth = 2
Connect4.ctx.strokeStyle = "black" Connect4.ctx.strokeStyle = "black"
Connect4.ctx.stroke() Connect4.ctx.stroke()
@ -141,7 +183,29 @@
} }
}, },
updater: () => { topLayer: () => {
if (Connect4.Game.victory && Connect4.Game.victory.length) {
let zero = Connect4.Game.victory[0]
let normal = normalize(zero.col, zero.y)
Connect4.ctx.beginPath()
Connect4.ctx.moveTo(normal.x + (GameDrawer.gridSize/2), normal.y + (GameDrawer.gridSize/2))
for (let i = 1; i < Connect4.Game.victory.length; i++) {
let t = Connect4.Game.victory[i]
let ncrd = normalize(t.col, t.y)
Connect4.ctx.lineTo(ncrd.x + (GameDrawer.gridSize/2), ncrd.y + (GameDrawer.gridSize/2))
}
Connect4.ctx.lineCap = 'round'
Connect4.ctx.lineWidth = 24
Connect4.ctx.strokeStyle = '#33CC33'
Connect4.ctx.stroke()
}
},
bottomLayer: () => {
for (let i in Connect4.Game.places) { for (let i in Connect4.Game.places) {
let col = Connect4.Game.places[i] let col = Connect4.Game.places[i]
for (let p in col) { for (let p in col) {
@ -151,11 +215,14 @@
} else { } else {
piece.dy = piece.y piece.dy = piece.y
} }
let ncrd = normalize(parseInt(i), piece.dy)
Connect4.ctx.fillStyle = Connect4.color[piece.color] Connect4.ctx.fillStyle = Connect4.color[piece.color]
Connect4.ctx.fillRect((parseInt(i) * GameDrawer.gridSize) + GameDrawer.padding, Connect4.ctx.fillRect(ncrd.x, ncrd.y, GameDrawer.gridSize, GameDrawer.gridSize)
(piece.dy * GameDrawer.gridSize) + GameDrawer.padding, GameDrawer.gridSize, GameDrawer.gridSize)
} }
} }
if (!Connect4.renderTick || !Connect4.Game.gameId) return if (!Connect4.renderTick || !Connect4.Game.gameId) return
if (Connect4.Game.myTurn) { if (Connect4.Game.myTurn) {
if (GameDrawer.mouseOn) { if (GameDrawer.mouseOn) {
@ -178,9 +245,12 @@
Connect4.ctx.clearRect(0, 0, Connect4.canvasW, Connect4.canvasH) Connect4.ctx.clearRect(0, 0, Connect4.canvasW, Connect4.canvasH)
if (!Connect4.renderTick) return if (!Connect4.renderTick) return
GameDrawer.updater() GameDrawer.bottomLayer()
Connect4.ctx.drawImage(GameDrawer.boardStaticState, 0, 0) Connect4.ctx.drawImage(GameDrawer.boardStaticState, 0, 0)
GameDrawer.topLayer()
requestAnimFrame(GameDrawer.gameLoop) requestAnimFrame(GameDrawer.gameLoop)
}, },
@ -283,7 +353,7 @@
function joinGame (game) { function joinGame (game) {
Connect4.played += 1 Connect4.played += 1
modalAlert('Game has started!') activityNotice.on('Game has started!')
//io.emit('leave_game', {gameId: Connect4.Game.gameId}) //io.emit('leave_game', {gameId: Connect4.Game.gameId})
Connect4.Game.gameId = game.gameId Connect4.Game.gameId = game.gameId
Connect4.Game.opponentID = game.opponentId Connect4.Game.opponentID = game.opponentId
@ -360,11 +430,11 @@
function gameEnds (reason, winner) { function gameEnds (reason, winner) {
if (reason === 1) { if (reason === 1) {
if (winner === true) { if (winner === true) {
modalAlert('You won!')
logStatus('You won!') logStatus('You won!')
activityNotice.on('You won the game!')
} else { } else {
modalAlert('You lost.')
logStatus('You lost.') logStatus('You lost.')
activityNotice.on('You lost the game.')
} }
} }
@ -376,17 +446,15 @@
} }
if (reason === 2) { if (reason === 2) {
modalAlert('You tied!')
logStatus('It\'s a tie!.') logStatus('It\'s a tie!.')
activityNotice.on('The game ended in a tie!')
} }
Connect4.locked = false Connect4.locked = false
Connect4.Game.gameId = null Connect4.Game.gameId = null
Connect4.Game.myTurn = false Connect4.Game.myTurn = false
io.emit('poll_games')
//Connect4.DOM.gameScreen.style.display = 'none' io.emit('poll_games')
//Connect4.DOM.selectionScreen.style.display = 'block'
Connect4.DOM.waitlistBtns.style.display = 'block' Connect4.DOM.waitlistBtns.style.display = 'block'
Connect4.DOM.waitlistQuit.style.display = 'none' Connect4.DOM.waitlistQuit.style.display = 'none'
@ -398,7 +466,6 @@
Connect4.DOM.gameScreen.style.display = 'none' Connect4.DOM.gameScreen.style.display = 'none'
Connect4.DOM.selectionScreen.style.display = 'none' Connect4.DOM.selectionScreen.style.display = 'none'
Connect4.DOM.startScreen.style.display = 'block' Connect4.DOM.startScreen.style.display = 'block'
Connect4.DOM.resultScreen.style.display = 'none'
Connect4.locked = false Connect4.locked = false
Connect4.playerName = '' Connect4.playerName = ''
@ -415,10 +482,28 @@
} }
function addChatMessage (type, senderName, message) { function addChatMessage (type, senderName, message) {
if (type === 'chat') {
activityNotice.on('Chat message!')
if (Connect4.Game.gameId) {
let color = 'red'
if (senderName === Connect4.playerName) {
color = Connect4.Game.myColor
} else {
if (Connect4.Game.myColor === 'red') {
color = 'blue'
}
}
type += ' ' + color
}
}
let msgElem = '<div class="message t_' + type + '">' let msgElem = '<div class="message t_' + type + '">'
if (senderName) { if (senderName) {
msgElem += '<span class="sender">' + senderName + '</span>&nbsp;' msgElem += '<span class="sender">' + senderName + '</span>&nbsp;'
} }
msgElem += '<span class="line">' + escapeHtml(message) + '</span>' msgElem += '<span class="line">' + escapeHtml(message) + '</span>'
Connect4.DOM.chatbox.innerHTML += msgElem Connect4.DOM.chatbox.innerHTML += msgElem
@ -437,6 +522,15 @@
} }
} }
window.onfocus = () => {
activityNotice.focused = true
activityNotice.off(null)
}
window.onblur = () => {
activityNotice.focused = false
}
window.onload = () => { window.onload = () => {
const startScreen = Connect4.DOM.startScreen = $.querySelector('#start') const startScreen = Connect4.DOM.startScreen = $.querySelector('#start')
const selectionScreen = Connect4.DOM.selectionScreen = $.querySelector('#selection') const selectionScreen = Connect4.DOM.selectionScreen = $.querySelector('#selection')
@ -454,6 +548,7 @@
const waitlistQuit = Connect4.DOM.waitlistQuit = selectionScreen.querySelector('#waitlist_quit') const waitlistQuit = Connect4.DOM.waitlistQuit = selectionScreen.querySelector('#waitlist_quit')
const waitlistBtns = Connect4.DOM.waitlistBtns = selectionScreen.querySelector('.idbuttons') const waitlistBtns = Connect4.DOM.waitlistBtns = selectionScreen.querySelector('.idbuttons')
const stat_online = selectionScreen.querySelector('#stats_players_online')
const stat_ingame = selectionScreen.querySelector('#stats_players') const stat_ingame = selectionScreen.querySelector('#stats_players')
const stat_total = selectionScreen.querySelector('#stats_games') const stat_total = selectionScreen.querySelector('#stats_games')
const stat_client = selectionScreen.querySelector('#stats_clientgames') const stat_client = selectionScreen.querySelector('#stats_clientgames')
@ -498,12 +593,16 @@
if (e.keyCode === 13 && Connect4.Game.gameId) { if (e.keyCode === 13 && Connect4.Game.gameId) {
if (chatfield.value != '') { if (chatfield.value != '') {
io.emit('chat_send', {message: chatfield.value, gameId: Connect4.Game.gameId}) io.emit('chat_send', {message: chatfield.value, gameId: Connect4.Game.gameId})
addChatMessage('chat me', Connect4.playerName, chatfield.value) addChatMessage('chat', Connect4.playerName, chatfield.value)
chatfield.value = '' chatfield.value = ''
} }
} }
}) })
chatbox.addEventListener('click', (e) => {
chatfield.focus()
})
startButton.addEventListener('click', (e) => { startButton.addEventListener('click', (e) => {
attemptJoin(playerName.value) attemptJoin(playerName.value)
}, false) }, false)
@ -528,6 +627,7 @@
if (Connect4.Game.gameId) { if (Connect4.Game.gameId) {
io.emit('leave_game', {gameId: Connect4.Game.gameId}) io.emit('leave_game', {gameId: Connect4.Game.gameId})
} }
io.emit('poll_games')
Connect4.DOM.gameScreen.style.display = 'none' Connect4.DOM.gameScreen.style.display = 'none'
Connect4.DOM.selectionScreen.style.display = 'block' Connect4.DOM.selectionScreen.style.display = 'block'
Connect4.renderTick = false Connect4.renderTick = false
@ -559,9 +659,10 @@
if (val === true) { if (val === true) {
Connect4.Game.myTurn = true Connect4.Game.myTurn = true
logStatus('Your turn.') logStatus('Your turn.')
activityNotice.on('It\'s your turn!')
} else { } else {
Connect4.Game.myTurn = false Connect4.Game.myTurn = false
logStatus('Your opponent\'s turn.') logStatus(Connect4.Game.opponentName + '\'s turn.')
} }
}) })
@ -580,6 +681,11 @@
forceRelogin() forceRelogin()
}) })
io.on('win_tiles', (data) => {
console.log(data)
Connect4.Game.victory = data
})
io.on('game_end', (data) => { io.on('game_end', (data) => {
gameEnds(data.result, data.win) gameEnds(data.result, data.win)
leaveBtn.innerHTML = 'Back to lobby' leaveBtn.innerHTML = 'Back to lobby'
@ -612,6 +718,10 @@
stat_total.innerHTML = data.totalGames stat_total.innerHTML = data.totalGames
} }
if (data.online != null) {
stat_online.innerHTML = data.online
}
stat_client.innerHTML = Connect4.played stat_client.innerHTML = Connect4.played
if (!list.length) { if (!list.length) {
@ -643,5 +753,7 @@
forceRelogin() forceRelogin()
logWarning('Server disconnected') logWarning('Server disconnected')
}) })
activityNotice.doctitle = document.title
} }
})(document) })(document)

View File

@ -186,6 +186,7 @@ function waitingGamesList (uid) {
} }
return { return {
online: Object.keys(clients).length,
sessions: gamesInSession, sessions: gamesInSession,
totalGames: totalGames, totalGames: totalGames,
list: result list: result
@ -208,18 +209,19 @@ function determinePlayerById (gameId, uid) {
function getPiece (game, col, index) { function getPiece (game, col, index) {
if (col > 8 || index > 8) return if (col > 8 || index > 8) return
col = game.places[col] let colmn = game.places[col]
if (!col) return if (!colmn) return
if (!col.length) { if (!colmn.length) {
return return
} }
let match = null let match = null
for (let i in col) { for (let i in colmn) {
if (col[i].y === index) { if (colmn[i].y === index) {
match = col[i] match = colmn[i]
match.col = col
break break
} }
} }
@ -228,69 +230,77 @@ function getPiece (game, col, index) {
function detectWin (color, game) { function detectWin (color, game) {
let win = false let win = false
let matches = []
for (let c in game.places) { for (let c in game.places) {
let col = game.places[c] let col = game.places[c]
if (win) break
for (let p in col) { for (let p in col) {
let piece = col[p] let piece = col[p]
let matches = 0 matches = []
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
let pAt = getPiece(game, parseInt(c) + i, piece.y) let pAt = getPiece(game, parseInt(c) + i, piece.y)
if (pAt && pAt.color === color) { if (pAt && pAt.color === color) {
matches += 1 matches.push(pAt)
} else { } else {
matches = 0 matches = []
} }
} }
if (matches >= 4) { if (matches.length >= 4) {
win = true win = true
console.log('horizontal win') console.log('horizontal win')
break break
} }
matches = 0 matches = []
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
let pAt = getPiece(game, parseInt(c), piece.y + i) let pAt = getPiece(game, parseInt(c), piece.y + i)
if (pAt && pAt.color === color) { if (pAt && pAt.color === color) {
matches += 1 matches.push(pAt)
} else { } else {
matches = 0 matches = []
} }
} }
if (matches >= 4) { if (matches.length >= 4) {
console.log('vertical win') console.log('vertical win')
win = true win = true
break break
} }
matches = 0 matches = []
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
let pAt = getPiece(game, parseInt(c) + i, piece.y - i) let pAt = getPiece(game, parseInt(c) + i, piece.y - i)
if (pAt && pAt.color === color) { if (pAt && pAt.color === color) {
matches += 1 matches.push(pAt)
} else { } else {
matches = 0 matches = []
} }
} }
if (matches >= 4) { if (matches.length >= 4) {
console.log('diagonal right win') console.log('diagonal right win')
win = true win = true
break break
} }
matches = 0 matches = []
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
let pAt = getPiece(game, parseInt(c) - i, piece.y - i) let pAt = getPiece(game, parseInt(c) - i, piece.y - i)
if (pAt && pAt.color === color) { if (pAt && pAt.color === color) {
matches += 1 matches.push(pAt)
} else { } else {
matches = 0 matches = []
} }
} }
if (matches >= 4) { if (matches.length >= 4) {
console.log('diagonal left win') console.log('diagonal left win')
win = true win = true
break break
} }
} }
} }
return win
if (win) {
return matches
}
return null
} }
function detectTie (game) { function detectTie (game) {
@ -376,6 +386,8 @@ io.on('connection', (socket) => {
return return
} }
if (!data.gameId) return
let game = games[data.gameId] let game = games[data.gameId]
let playerInGame = determinePlayerById(data.gameId, client) let playerInGame = determinePlayerById(data.gameId, client)
@ -400,6 +412,8 @@ io.on('connection', (socket) => {
return return
} }
if (!data.gameId) return
let game = games[data.gameId] let game = games[data.gameId]
let playerInGame = determinePlayerById(data.gameId, client) let playerInGame = determinePlayerById(data.gameId, client)
@ -413,8 +427,13 @@ io.on('connection', (socket) => {
return return
} }
let opponent = determineOpponent(playerInGame) if (game.turn !== playerInGame) {
opponent = game[opponent] socket.emit('game_error', {message: 'It\'s not your turn!'})
return
}
let opponentColor = determineOpponent(playerInGame)
let opponent = game[opponentColor]
let me = game[playerInGame] let me = game[playerInGame]
@ -423,10 +442,14 @@ io.on('connection', (socket) => {
game.places[data.column].push({color: playerInGame, y: 8 - game.places[data.column].length}) game.places[data.column].push({color: playerInGame, y: 8 - game.places[data.column].length})
game.turn = opponentColor
clients[me].socket.emit('turn', false) clients[me].socket.emit('turn', false)
clients[opponent].socket.emit('turn', true) clients[opponent].socket.emit('turn', true)
if (detectWin(playerInGame, game)) { let win = detectWin(playerInGame, game)
if (win) {
clients[me].socket.emit('win_tiles', win)
clients[opponent].socket.emit('win_tiles', win)
endGame(data.gameId, me, opponent, 1) endGame(data.gameId, me, opponent, 1)
return return
} }