Browse Source

add ws

main
Ayush Mukherjee 2 years ago
parent
commit
421e50437e
  1. 7
      README.md
  2. 11
      package-lock.json
  3. 3
      package.json
  4. 57
      src/components/Matches.vue
  5. 4
      src/store.js
  6. 9
      src/views/Home.vue

7
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
- [ ]

11
package-lock.json generated

@ -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==",
"dev": true
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
},
"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==",
"dev": true
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
},
"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"
}

3
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",

57
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
// logo.value = e.logo
// players.value = e.players
}
const addPlayer = () => {
players.value.push({
name: '',
account: '',
})
type.value = e.type
blue.value = e.blue
orange.value = e.orange
started.value = e.started
done.value = e.done
bestof.value = e.bestof
}
const reset = () => {
item.value = ''
name.value = ''
logo.value = ''
players.value = []
type.value = ''
blue.value = ''
orange.value = ''
orange.value = ''
started.value = false
done.value = false
bestof.value = ''
}
const form = () => {
if (item.value !== '') {
update('rosters', item.value, {
name: name.value,
logo: logo.value,
players: players.value,
update('matches', item.value, {
type: type.value,
blue: blue.value,
orange: orange.value,
started: started.value,
done: done.value,
bestOf: bestof.value,
})
} else if (name.value !== '') {
create('rosters', {
name: name.value,
logo: logo.value,
players: players.value,
} else if (type.value !== '') {
create('matches', {
type: type.value,
blue: blue.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,
}
},
}

4
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)
}

9
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')

Loading…
Cancel
Save