add support for apl-boost

src/background.js

@@ -1,10 +1,13 @@
 'use strict'
 
-import { app, protocol, BrowserWindow } from 'electron'
+import { app, protocol, BrowserWindow, ipcMain } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
+import path from 'path'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
+import { start, status, stop, state, sub } from './utils/server'
+
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([
   { scheme: 'app', privileges: { secure: true, standard: true } }
@@ -13,13 +16,14 @@ protocol.registerSchemesAsPrivileged([
 async function createWindow() {
   // Create the browser window.
   const win = new BrowserWindow({
-    width: 800,
-    height: 600,
+    width: 1280,
+    height: 720,
     webPreferences: {
       
       // Use pluginOptions.nodeIntegration, leave this alone
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -32,6 +36,11 @@ async function createWindow() {
     // Load the index.html when not in development
     win.loadURL('app://./index.html')
   }
+
+  const test = (data) => {
+    win.webContents.send('test', JSON.stringify(data))
+  }
+  sub.push(test)
 }
 
 // Quit when all windows are closed.
@@ -78,3 +87,19 @@ if (isDevelopment) {
     })
   }
 }
+
+ipcMain.handle('state', async (e, arg) => {
+  state(JSON.parse(arg))
+})
+
+ipcMain.handle('status', async () => {
+  return status()
+})
+
+ipcMain.handle('server', async (e, arg) => {
+  if (arg === true) {
+    start()
+  } else {
+    stop()
+  }
+})

src/components/Events.vue

@@ -43,6 +43,11 @@ export default {
       name.value = e.name
     }
 
+    const reset = () => {
+      item.value = ''
+      name.value = ''
+    }
+
     const form = () => {
       if (item.value !== '') {
         update('events', item.value, {
@@ -53,13 +58,13 @@ export default {
           name: name.value,
         })
       }
+      reset()
     }
 
     const delForm = () => {
       if (item.value) {
         del('events', item.value)
-        item.value = ''
-        name.value = ''
+        reset()
       }
     }
 

src/components/Matches.vue

@@ -56,9 +56,9 @@
       <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>
-      <input v-if="item" 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">Game Scores</p>
+      <!-- <p v-if="item" class="mt-4">Series Score</p> -->
+      <!-- <input v-if="item" 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">Game Scores</p> -->
 
       <button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
       <button @click.prevent="delForm" v-if="item" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Delete</button>

src/store.js

@@ -13,6 +13,9 @@ const state = reactive({
   casters: [],
   hosts: [],
   streams: [],
+  streamsFull: [],
+  overlayStream: null,
+  server: false,
 })
 
 const methods = {

src/utils/websocket.js

@@ -1,4 +1,5 @@
 import store from '../store'
+import { sendAll } from './server'
 
 const events = [
   'create',
@@ -18,6 +19,7 @@ const channels = [
 
 const channelEvents = [
   'info',
+  'streams:full',
 ]
 
 channels.forEach((x) => {
@@ -31,11 +33,16 @@ export const handleMsg = (msg) => {
     const ev = msg.event.split(':')
     const c = ev[0]
     const e = ev[1]
+    console.log(c, e)
     if (e === 'read') {
       store.state[c] = msg.data
+    } else if (e === 'full') {
+      store.state.streamsFull = msg.data
+      console.log(msg.data)
+      sendAll()
     }
   } else {
-    console.warn('received unkown event!', msg)
+    console.warn('received unknown event!', msg)
   }
 }
 
@@ -46,6 +53,9 @@ export const sendSub = (ws) => {
     }
     ws.send(JSON.stringify(d))
   })
+  ws.send(JSON.stringify({
+    subscribe: `streams:full`
+  }))
 }
 
 export const create = (channel, data) => {

src/views/Home.vue

@@ -12,7 +12,21 @@
     <img class="block w-16 h-16 absolute bottom-10" src="https://cms.aplesports.com/storage/uploads/2020/04/23/5ea178d6570e1APL_New.png" alt="APL Logo">
   </div>
   <div class="bg-gray-200 w-full px-10 py-4 overflow-y-auto">
-    <div v-if="nav === 'dash'">Coming soon</div>
+    <div v-if="nav === 'dash'" class="flex flex-col justify-center items-center h-full">
+      <h1 class="text-4xl font-bold mb-4"> Welcome, Ayush</h1>
+      <p class="text-xl">Select Stream for ingame overlay</p>
+      <select v-model="streamid" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
+        <option v-for="s in store.state.streams" :value="s._id" :key="s._id">{{ s.name }}</option>
+      </select>
+      <button :disabled="streamid === ''" @click.prevent="serverDo(true)" class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">
+        <span v-if="store.state.server">Update</span>
+        <span v-if="!store.state.server">Start</span>
+        overlay
+      </button>
+      <!-- <button v-if="store.state.server" :disabled="streamid === ''" @click.prevent="serverDo" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">
+        Stop overlay
+      </button> -->
+    </div>
     <Events v-if="nav === 'events'" />
     <Rosters v-if="nav === 'rosters'" />
     <Matches v-if="nav === 'matches'" />
@@ -24,6 +38,7 @@
 </template>
 
 <script>
+import { update } from '../utils/websocket'
 import { inject, ref } from 'vue'
 import Events from '@/components/Events.vue'
 import Rosters from '@/components/Rosters.vue'
@@ -45,11 +60,57 @@ export default {
     const store = inject('store')
     store.methods.connect('ws://localhost:5000/ws')
 
+
+    const check = async () => {
+      const status = await window.ipcRenderer.invoke('status')
+      if (status) {
+        store.state.server = true
+      }
+    }
+
+    check()
+
     const nav = ref('dash')
 
+    const streamid = ref('')
+
+    window.ipcRenderer.on('test', (e, msg) => {
+      const data = JSON.parse(msg)
+      const m = store.state.matches.filter(x => x._id === data.id)[0]
+
+      // const games = m.hasOwnProperty('games') ? m.games.push(data.game) : [data.game]
+
+      update('matches', data.id, {
+        started: data.started,
+        done: data.done,
+        series: data.series,
+      })
+
+      console.warn('RUNNING UPDATE!', data)
+    })
+
+    const serverDo = (x) => {
+      if (x === true) {
+        console.log(streamid.value)
+        store.state.overlayStream = store.state.streamsFull.filter(x => x._id === streamid.value)[0]
+        console.log(store.state.overlayStream)
+        window.ipcRenderer.invoke('state', JSON.stringify(store.state.overlayStream))
+        if (!store.state.server) {
+          window.ipcRenderer.invoke('server', true)
+          store.state.server = true
+        }
+      } else {
+        store.state.server = false
+        window.ipcRenderer.invoke('server', false)
+      }
+    }
+
+
     return {
       store,
       nav,
+      streamid,
+      serverDo,
     }
   },
 }