diff --git a/client/src/App.vue b/client/src/App.vue
index 8e37374..11c3fb6 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -5,6 +5,15 @@
tron.io
Start
+
+
+
+ Original
+
+
+ Ambiance
+
+
@@ -20,6 +29,11 @@ export default {
components: {
Game
},
+ data () {
+ return {
+ music: 0
+ }
+ },
computed: {
isSocketConnected () {
return this.$store.state.game.socketConnected
@@ -31,8 +45,12 @@ export default {
return this.$store.state.game.loggedIn
}
},
- mounted () {
- sound.startBackgroundMusic()
+ watch: {
+ music: function (music) {
+ console.log('MUSIC ' + music)
+ sound.stopBackgroundMusic()
+ sound.startBackgroundMusic(music)
+ }
},
methods: {
loginPrompt () {
diff --git a/client/src/assets/sound/1992.mp3 b/client/src/assets/sound/1992.mp3
new file mode 100644
index 0000000..5aa6544
Binary files /dev/null and b/client/src/assets/sound/1992.mp3 differ
diff --git a/client/src/assets/sound/tmauvais.mp3 b/client/src/assets/sound/tmauvais.mp3
new file mode 100755
index 0000000..c2426dc
Binary files /dev/null and b/client/src/assets/sound/tmauvais.mp3 differ
diff --git a/client/src/assets/sprite/e.png b/client/src/assets/sprite/e.png
new file mode 100644
index 0000000..201b12c
Binary files /dev/null and b/client/src/assets/sprite/e.png differ
diff --git a/client/src/assets/sprite/q.png b/client/src/assets/sprite/q.png
new file mode 100644
index 0000000..498854e
Binary files /dev/null and b/client/src/assets/sprite/q.png differ
diff --git a/client/src/assets/sprite/r.png b/client/src/assets/sprite/r.png
new file mode 100644
index 0000000..276bb10
Binary files /dev/null and b/client/src/assets/sprite/r.png differ
diff --git a/client/src/assets/sprite/t.png b/client/src/assets/sprite/t.png
new file mode 100644
index 0000000..086e84b
Binary files /dev/null and b/client/src/assets/sprite/t.png differ
diff --git a/client/src/components/Game.vue b/client/src/components/Game.vue
index ee3e65c..9f08511 100644
--- a/client/src/components/Game.vue
+++ b/client/src/components/Game.vue
@@ -102,7 +102,8 @@ export default {
if (player.state === 'DEAD') this.context.globalAlpha = 0.1
render.walls(this.context, this.canvas, this.camera, this.settings, player)
- render.player(this.context, this.canvas, this.camera, this.settings, player)
+ if (player.name === 'e' || player.name === 'q' || player.name === 'r' || player.name === 't') render.playerFace(this.context, this.canvas, this.camera, this.settings, player, player.name)
+ else render.player(this.context, this.canvas, this.camera, this.settings, player)
if (player.state === 'DEAD') this.context.globalAlpha = 1
this.stats.totalWalls += player.walls.length
@@ -146,15 +147,6 @@ export default {
player.y += this.settings.playerSpeed * Math.sin(player.angle)
player.angle = player.targetAngle
- // angle lag
- /*
- if (this.player.targetAngle !== this.player.angle) {
- const delta = this.player.targetAngle - this.player.angle
- if (delta < 0) this.player.angle += delta / this.settings.playerTurnSpeed
- if (delta > 0) this.player.angle += delta / this.settings.playerTurnSpeed
- if (delta <= 0.1 && delta >= -0.1) this.player.angle = this.player.targetAngle
- }
- */
},
interpolatePlayer (pastPlayer, nextPlayer, dt) {
var player = {}
diff --git a/client/src/game/render.js b/client/src/game/render.js
index c817a39..a01b32e 100644
--- a/client/src/game/render.js
+++ b/client/src/game/render.js
@@ -1,3 +1,12 @@
+const e = new Image()
+e.src = require('@/assets/sprite/e.png')
+const q = new Image()
+q.src = require('@/assets/sprite/q.png')
+const r = new Image()
+r.src = require('@/assets/sprite/r.png')
+const t = new Image()
+t.src = require('@/assets/sprite/t.png')
+
export const render = {
borders (context, canvas, camera, settings) {
context.strokeStyle = 'white'
@@ -18,7 +27,6 @@ export const render = {
// context.shadowBlur = 10
// context.shadowColor = player.color
context.fillRect(-settings.playerSize, -settings.playerSize, settings.playerSize * 2, settings.playerSize * 2)
- context.translate(0, 0)
context.restore()
@@ -26,6 +34,22 @@ export const render = {
context.textAlign = 'center'
context.fillText(player.name, canvasX, canvasY - settings.playerSize - 5)
},
+ playerFace (context, canvas, camera, settings, player, face) {
+ const canvasX = canvas.width / 2 + player.x - camera.x
+ const canvasY = canvas.height / 2 + player.y - camera.y
+
+ const posX = canvasX - settings.playerSize * 2
+ const posY = canvasY - settings.playerSize * 2
+ const sizeL = settings.playerSize * 4
+ const sizeH = settings.playerSize * 4
+
+ switch (face) {
+ case 'e' : context.drawImage(e, posX, posY, sizeL, sizeH); break
+ case 'q' : context.drawImage(q, posX, posY, sizeL, sizeH); break
+ case 'r' : context.drawImage(r, posX, posY, sizeL, sizeH); break
+ case 't' : context.drawImage(t, posX, posY, sizeL, sizeH); break
+ }
+ },
walls (context, canvas, camera, settings, player) {
context.beginPath()
context.lineWidth = settings.wallSize
diff --git a/client/src/game/sound.js b/client/src/game/sound.js
index 073b24e..7d9c490 100644
--- a/client/src/game/sound.js
+++ b/client/src/game/sound.js
@@ -1,23 +1,41 @@
-const music = new Audio(require('@/assets/sound/revengeOfCats.mp3'))
+const music1 = new Audio(require('@/assets/sound/revengeOfCats.mp3'))
+const music2 = new Audio(require('@/assets/sound/1992.mp3'))
+const music3 = new Audio()
// const motor = new Audio(require('@/assets/sound/motor.mp3'))
const explosion = new Audio(require('@/assets/sound/explosion.mp3'))
+const taunt = new Audio(require('@/assets/sound/tmauvais.mp3'))
export const sound = {
- startBackgroundMusic () {
- music.loop = true
- music.play()
+ startBackgroundMusic (n) {
+ music1.loop = true
+ music1.volume = 0.5
+ music2.loop = true
+ music2.volume = 0.5
+ music3.loop = true
+ music3.volume = 0.5
+
+ switch (n) {
+ case '1': music1.play(); break
+ case '2': music2.play(); break
+ case '3': music3.play(); break
+ }
},
stopBackgroundMusic () {
- music.pause()
+ music1.pause()
+ music2.pause()
+ music3.pause()
},
+ explosion () {
+ if (Math.floor(Math.random() * Math.floor(10)) === 0) taunt.play()
+ explosion.play()
+ }
+ /*
startMotor () {
motor.loop = true
motor.play()
},
stopMotor () {
motor.pause()
- },
- explosion () {
- explosion.play()
}
+ */
}
diff --git a/client/src/store/socketPlugin.js b/client/src/store/socketPlugin.js
index 3f72e3f..d1a8e23 100644
--- a/client/src/store/socketPlugin.js
+++ b/client/src/store/socketPlugin.js
@@ -1,7 +1,7 @@
import { ToastProgrammatic as Toast } from 'buefy'
-const connection = new WebSocket('ws://localhost:8181/socket')
-// const connection = new WebSocket('wss://tronio.gltronic.ovh/socket')
+// const connection = new WebSocket('ws://localhost:8181/socket')
+const connection = new WebSocket('wss://tronio.gltronic.ovh/socket')
export default function createSocketPlugin () {
return store => {