add ws

README.md

@@ -17,3 +17,10 @@ npm run build
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+
+## Todos
+
+- [ ] create websocket server
+- [ ] handle reads and writes from/to overlay
+- [ ]

package-lock.json

@@ -16,7 +16,8 @@
         "postcss": "^7",
         "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
         "vue": "^3.0.0",
-        "vue-router": "^4.0.0-0"
+        "vue-router": "^4.0.0-0",
+        "ws": "^6.2.1"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -3523,8 +3524,7 @@
     "node_modules/async-limiter": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
-      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
-      "dev": true
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
@@ -18267,7 +18267,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
       "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
-      "dev": true,
       "dependencies": {
         "async-limiter": "~1.0.0"
       }
@@ -21404,8 +21403,7 @@
     "async-limiter": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
-      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
-      "dev": true
     },
     "asynckit": {
       "version": "0.4.0",
@@ -33247,7 +33245,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
       "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
-      "dev": true,
       "requires": {
         "async-limiter": "~1.0.0"
       }

package.json

@@ -20,7 +20,8 @@
     "postcss": "^7",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
+    "vue-router": "^4.0.0-0",
+    "ws": "^6.2.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/components/Matches.vue

@@ -51,9 +51,9 @@
         <option v-for="r in store.state.rosters" :key="r._id" :value="r._id">{{ r.name }}</option>
       </select>
       <p class="mt-4">Started</p>
-      <input :checked="started" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" required />
+      <input :checked="started" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
       <p class="mt-4">Done</p>
-      <input :checked="done" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" required />
+      <input :checked="done" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
       <p class="mt-4">Best Of</p>
       <input v-model="bestof" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="number" required />
       <p v-if="item" class="mt-4">Series Score</p>
@@ -85,37 +85,43 @@ export default {
 
     const setItem = (e) => {
       item.value = e._id
-      // name.value = e.name
+      type.value = e.type
-      // logo.value = e.logo
+      blue.value = e.blue
-      // players.value = e.players
+      orange.value = e.orange
-    }
+      started.value = e.started
-    
+      done.value = e.done
-    const addPlayer = () => {
+      bestof.value = e.bestof
-      players.value.push({
-        name: '',
-        account: '', 
-      })
     }
 
     const reset = () => {
       item.value = ''
-      name.value = ''
+      type.value = ''
-      logo.value = ''
+      blue.value = ''
-      players.value = []
+      orange.value = ''
+      orange.value = ''
+      started.value = false
+      done.value = false
+      bestof.value = ''
     }
 
     const form = () => {
       if (item.value !== '') {
-        update('rosters', item.value, {
+        update('matches', item.value, {
-          name: name.value,
+          type: type.value,
-          logo: logo.value,
+          blue: blue.value,
-          players: players.value,
+          orange: orange.value,
+          started: started.value,
+          done: done.value,
+          bestOf: bestof.value,
         })
-      } else if (name.value !== '') {
+      } else if (type.value !== '') {
-        create('rosters', {
+        create('matches', {
-          name: name.value,
+          type: type.value,
-          logo: logo.value,
+          blue: blue.value,
-          players: players.value,
+          orange: orange.value,
+          started: started.value,
+          done: done.value,
+          bestOf: bestof.value,
         })
       }
       reset()
@@ -123,7 +129,7 @@ export default {
     
     const delForm = () => {
       if (item.value) {
-        del('rosters', item.value)
+        del('matches', item.value)
         reset()
       }
     }
@@ -140,7 +146,6 @@ export default {
       setItem,
       form,
       delForm,
-      addPlayer,
     }
   },
 }

src/store.js

@@ -17,7 +17,7 @@ const state = reactive({
 
 const methods = {
   authenticate: async () => {
-    return axios.post('http://localhost:5000/api/v1', {
+    return axios.post('http://178.79.128.135:5000/api/v1', {
       token: state.token,
     })
       .then((res) => {
@@ -27,7 +27,7 @@ const methods = {
       })
   },
   connect: (uri) => {
-    state.ws = new WebSocket(`${uri}/${state.session}`)
+    state.ws = new WebSocket(`ws://178.79.128.135:5000/ws/${state.session}`)
     state.ws.onopen = () => {
       sendSub(state.ws)
     }

src/views/Home.vue

@@ -16,6 +16,9 @@
     <Events v-if="nav === 'events'" />
     <Rosters v-if="nav === 'rosters'" />
     <Matches v-if="nav === 'matches'" />
+    <Casters v-if="nav === 'casters'" />
+    <Hosts v-if="nav === 'hosts'" />
+    <Streams v-if="nav === 'streams'" />
   </div>
 </div>
 </template>
@@ -25,12 +28,18 @@ import { inject, ref } from 'vue'
 import Events from '@/components/Events.vue'
 import Rosters from '@/components/Rosters.vue'
 import Matches from '@/components/Matches.vue'
+import Casters from '@/components/Casters.vue'
+import Hosts from '@/components/Hosts.vue'
+import Streams from '@/components/Streams.vue'
 
 export default {
   components: {
     Events,
     Rosters,
     Matches,
+    Casters,
+    Hosts,
+    Streams,
   },
   setup() {
     const store = inject('store')