gltron/Tron.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Player name, pwa & branding

Browse Source
This commit is contained in:
Thomas
2020-09-01 12:36:43 +02:00
parent 85a8139270
commit d8ce1001cb
46 changed files with 618 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/components/Game.vue
View File

@@ -21,7 +21,12 @@ export default {
x: 0,
y: 0
},
leaderboard: [],
stats: {
leaderboard: [],
totalWalls: 0,
lastUpdateTime: 0,
lastFrame: 0
},
renderTimer: null
}
},
@@ -67,31 +72,36 @@ export default {
},
methods: {
render () {
this.stats.lastFrame = performance.now()
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.renderBorders()
if (!this.players) return
this.players.sort((a, b) => {
return a.walls.length - b.walls.length
return b.walls.length - a.walls.length
})
this.leaderboard = []
this.stats.leaderboard = []
this.stats.totalWalls = 0
this.players.forEach(player => {
if (player.color === this.player.color) {
this.camera.x = player.x
this.camera.y = player.y
this.renderDebug(player)
}
this.renderPlayer(player)
this.renderWalls(player)
this.leaderboard.push(player.id + ' - ' + player.walls.length)
this.stats.leaderboard.push(player.name + ' - ' + player.walls.length)
this.stats.totalWalls += player.walls.length
})
this.renderLeaderboard()
this.renderMouse()
this.renderDebug()
},
renderBorders () {
this.context.strokeStyle = 'black'
this.context.strokeStyle = 'white'
this.context.lineWidth = 1
this.context.strokeRect(this.canvas.width / 2 - this.camera.x, this.canvas.height / 2 - this.camera.y, this.settings.arenaSize, this.settings.arenaSize)
},
@@ -121,27 +131,33 @@ export default {
this.context.lineTo(this.canvas.width / 2 + player.x - this.camera.x, this.canvas.height / 2 + player.y - this.camera.y)
this.context.stroke()
},
renderDebug (player) {
renderDebug () {
const canvasX = this.canvas.width / 2
const canvasY = this.canvas.height / 2
this.context.fillStyle = 'white'
this.context.textAlign = 'start'
this.context.fillText('player x: ' + player.x + ' y:' + player.y, 10, 12)
this.context.fillText('a:' + player.angle + ' a_t' + player.targetAngle, 10, 24)
this.context.fillText('camera x: ' + this.camera.x + ' y:' + this.camera.y, 10, 12)
// this.context.fillText('a:' + player.angle + ' a_t' + player.targetAngle, 10, 24)
this.context.fillText('canvasX: ' + canvasX + ' canvasY:' + canvasY, 10, 36)
this.context.fillText('walls: ' + player.walls.length, 10, 48)
this.context.fillText('Total walls: ' + this.stats.totalWalls, 10, 48)
this.context.fillText('Last update: ' + this.stats.lastUpdateTime, 10, 60)
const fps = (performance.now() - this.stats.lastFrame) * 60
this.context.fillText('FPS: ' + fps, 10, 72)
},
renderMouse () {
this.context.beginPath()
this.context.arc(this.mouse.x, this.mouse.y, 25, 0, 2 * Math.PI, false)
this.context.lineWidth = 1
this.context.strokeStyle = player.color
this.context.strokeStyle = this.player.color
this.context.stroke()
},
renderLeaderboard () {
this.context.fillStyle = 'white'
this.context.textAlign = 'end'
this.context.fillText('Leaderboard: ', this.canvas.width - 50, 10)
for (var i = 0; i < this.leaderboard.length; i++) {
this.context.fillText(this.players[i].color + ' - ' + this.players[i].walls.length, this.canvas.width - 50, 15 + (i + 1) * 10)
for (var i = 0; i < this.stats.leaderboard.length; i++) {
this.context.fillText(this.players[i].name + ' - ' + this.players[i].walls.length, this.canvas.width - 50, 15 + (i + 1) * 10)
}
},
mouseEvent (event) {