Added client socket

client/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "tronio",
+  "name": "tron.io",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -11314,6 +11314,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
+      "integrity": "sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw=="
+    },
     "watchpack": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",

client/package.json

@@ -11,13 +11,13 @@
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-eslint": "~4.4.0",
     "@vue/cli-plugin-pwa": "~4.4.0",
-    "@vue/cli-plugin-router": "~4.4.0",
     "@vue/cli-service": "~4.4.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",

client/src/App.vue

@@ -1,9 +1,26 @@
 <template>
   <div id="app">
-    <router-view/>
+    <Game v-if="isSocketConnected"/>
+    <div v-else>
+      <h1>Game loadin mate</h1>
+    </div>
   </div>
 </template>
 
+<script>
+import Game from './components/Game'
+export default {
+  name: 'App',
+  components: {
+    Game
+  },
+  computed: {
+    isSocketConnected () {
+      return this.$store.state.game.socketConnected
+    }
+  }
+}
+</script>
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

client/src/components/Game.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="game">
     <canvas
       class="game-canvas"
       ref="canvas">
@@ -8,32 +8,16 @@
 </template>
 
 <script>
+import { send } from '@/store/socketPlugin'
 export default {
-  name: 'Home',
+  name: 'Game',
   data () {
     return {
-      player: {
-        x: 100,
-        y: 100,
-        angle: 0,
-        targetAngle: 0,
-        walls: [],
-        lastWall: 0,
-        color: 'red'
-      },
-      players: [],
       mouse: {
         x: 0,
         y: 0
       },
-      settings: {
-        playerSize: 10,
-        playerSpeed: 2,
-        playerTurnSpeed: 10,
-        wallSize: 8,
-        wallUpdate: 5,
-        arenaSize: 1000
-      }
+      renderTimer: null
     }
   },
   computed: {
@@ -42,22 +26,30 @@ export default {
     },
     context () {
       return this.canvas.getContext('2d')
+    },
+    settings () {
+      return this.$store.state.game.settings
+    },
+    player () {
+      return this.$store.state.game.player
+    },
+    players () {
+      return this.$store.state.game.players
+    },
+    isPaused () {
+      return this.$store.state.game.paused
     }
   },
   mounted () {
     this.canvas.width = window.innerWidth
     this.canvas.height = window.innerHeight
     this.canvas.addEventListener('mousemove', this.mouseEvent)
-    // setInterval(this.render, 1000 / 60)
-    setInterval(this.render, 1000 / 60)
-    setInterval(this.movePlayer, 100)
+    this.renderTimer = setInterval(this.render, 1000 / 60)
   },
   methods: {
     render () {
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
       this.renderBorders()
-      this.renderPlayer(this.player)
-      this.renderWalls(this.player.walls, this.player.color)
 
       this.players.forEach(player => {
         this.renderPlayer(player)
@@ -147,6 +139,7 @@ export default {
       var dy = this.mouse.y - this.canvas.height / 2
 
       this.player.targetAngle = Math.atan2(dy, dx)
+      send({ message: this.player, type: 'update' })
     },
     updatePlayer () {
       this.player.lastWall++

client/src/main.js

@@ -1,11 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
+import store from './store'
 import './registerServiceWorker'
-import router from './router'
 
 Vue.config.productionTip = false
 
 new Vue({
-  router,
+  store,
   render: h => h(App)
 }).$mount('#app')

client/src/router/index.js

@@ -1,19 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-
-Vue.use(VueRouter)
-
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  }
-]
-
-const router = new VueRouter({
-  routes
-})
-
-export default router

client/src/store/gameModule.js

@@ -0,0 +1,69 @@
+const state = {
+  player: {
+    x: 100,
+    y: 100,
+    angle: 0,
+    targetAngle: 0,
+    walls: [],
+    lastWall: 0,
+    color: 'red'
+  },
+  players: {
+
+  },
+  settings: {
+    playerSize: 10,
+    playerSpeed: 2,
+    playerTurnSpeed: 10,
+    wallSize: 8,
+    wallUpdate: 5,
+    arenaSize: 1000
+  },
+  paused: true,
+  socketConnected: false
+}
+
+const getters = {
+}
+
+const actions = {
+  socketConnected ({ commit }) {
+    commit('SET_CONNECTED')
+  },
+  login ({ commit }, player) {
+    commit('SET_PLAYER', player)
+  },
+  settings ({ commit }, settings) {
+    commit('SET_SETTINGS', settings)
+  },
+  update ({ commit }, update) {
+  },
+  dead ({ commit }) {
+  },
+  error ({ commit }, error) {
+    alert('Error: ' + error)
+  }
+}
+
+const mutations = {
+  SET_PLAYER (state, player) {
+    state.player = player
+  },
+  SET_SETTINGS (state, settings) {
+    state.settings = settings
+  },
+  SET_PAUSE (state) {
+    state.paused = !state.paused
+  },
+  SET_CONNECTED (state) {
+    state.socketConnected = !state.socketConnected
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}

client/src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import socket from './socketPlugin'
+import game from './gameModule'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    game
+  },
+  plugins: [
+    socket()
+  ]
+})

client/src/store/socketPlugin.js

@@ -0,0 +1,48 @@
+const connection = new WebSocket('ws://localhost:8181/socket')
+// const connection = new WebSocket('wss://tronio.gltronic.ovh/socket')
+
+export default function createSocketPlugin () {
+  return store => {
+    connection.onopen = function () {
+      console.log('[WS] connected')
+      store.dispatch('game/socketConnected')
+    }
+
+    connection.onclose = function () {
+      console.log('[WS] closed')
+    }
+
+    connection.onerror = function (error) {
+      console.log('[WS] error ' + error.message)
+      store.dispatch('game/error', 'Connection problem')
+    }
+
+    connection.onmessage = function (message) {
+      console.log('[WS] message', message.data)
+
+      var data = JSON.parse(message.data)
+
+      switch (data.type) {
+        case 'login':
+          store.dispatch('game/login', data.message)
+          break
+        case 'gameSettings':
+          store.dispatch('game/settings', data.message)
+          break
+        case 'gameUpdate':
+          store.dispatch('game/update', data.message)
+          break
+        case 'gamePlayerDead':
+          store.dispatch('game/dead')
+          break
+        default:
+          break
+      }
+    }
+  }
+}
+
+export function send (message) {
+  console.log('[WS] send', message)
+  connection.send(JSON.stringify(message))
+}