Added sounds & sprites

client/src/App.vue

@@ -5,6 +5,15 @@
       <img src="./assets/logo.png" alt="TronIo logo" width="150px"/>
       <h1 class="title">tron.io</h1>
       <b-button @click="loginPrompt">Start</b-button>
+      <hr>
+      <b-field label="Music" position="is-centered">
+        <b-radio-button v-model="music" native-value="1">
+          Original
+        </b-radio-button>
+        <b-radio-button v-model="music" native-value="2">
+          Ambiance
+        </b-radio-button>
+      </b-field>
     </div>
     <b-loading v-model="isLoading"/>
   </div>
@@ -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 () {

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 = {}

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

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()
   }
+  */
 }

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 => {