add broadcaster page

narkissbv · May 22, 2022 · c1742e3 · c1742e3
1 parent ab0c51b
commit c1742e3
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,24 @@
-# twitch-vue-boilerplate
-BoilerPlate for Vuejs extensions for Twitch
+# twitch-queue-manager-vue
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/public/index.html b/public/index.html
@@ -2,10 +2,7 @@
 <html lang="">
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
-    <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>

diff --git a/src/broadcaster.js b/src/broadcaster.js
@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import BroadcasterPage from './views/BroadcasterPage'
+import store from './store'
+
+createApp(BroadcasterPage)
+.use(store)
+.mount('#app')
diff --git a/src/store/index.js b/src/store/index.js
@@ -37,7 +37,7 @@ const store = createStore({
         const userData = await axios.get(`https://api.twitch.tv/helix/users?id=${context.state.viewer.id}`, {
           headers: {
             'Authorization': `Extension ${context.state.auth.helixToken}`,
-            'Client-Id': '' // Your cliend ID goes here
+            'Client-Id': 'uo78wv9pfkz6j9xtorkwb291wd1rm6'
           }
         })
         context.commit('setUsername', userData)

diff --git a/src/views/AuthPage.vue b/src/views/AuthPage.vue
@@ -20,11 +20,8 @@
 
 <style scoped>
 .unauth {
-  display: flex;
   padding: 10px;
   text-align: center;
-  justify-content: center;
-  align-items: center;
 }
 
 .unauth p {

diff --git a/src/views/BroadcasterPage.vue b/src/views/BroadcasterPage.vue
@@ -0,0 +1,40 @@
+<template>
+  <h2>Broadcaster page</h2>
+  <p>{{ username }}</p>
+  <p>{{ viewer }}</p>
+</template>
+
+<script setup>
+  import { useStore } from 'vuex'
+  import { computed, onMounted } from 'vue'
+  import twitch from '@/utils/twitch'
+
+  const store = useStore()
+  const username = computed(() => store.state.username);
+  const viewer = computed(() => store.state.viewer)
+
+  onMounted( () => {
+    twitch.onAuthorized(async function (auth) {
+      await store.dispatch('setAuth', auth);
+      await store.dispatch('setViewer');
+      if (viewer.value?.id) {
+        await store.dispatch('fetchUserData');
+      }
+    })
+  })
+
+
+</script>
+
+<style>
+  body {
+    background: #1f1f23;
+    color: white;
+    padding: 0;
+    margin: 0;
+    font-family: Inter,Roobert,Helvetica Neue,Helvetica,Arial,sans-serif;
+    height: 100vh;
+    position: relative;
+    overflow: hidden;
+  }
+</style>
diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
@@ -14,4 +14,4 @@
 
 <style scoped>
 
-</style>
+</style>
diff --git a/vue.config.js b/vue.config.js
@@ -1,4 +1,9 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  publicPath: '',
+  pages: {
+    index: './src/main.js',
+    broadcaster: './src/broadcaster.js'
+  }
 })