Signaling server, WS, login, room creation

client/src/views/Home.vue

@@ -1,18 +1,103 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div v-if="serverConnected">
+      <h1 class="title has-text-success">Server online</h1>
+      <h1 class="title">{{serverStatus.userCount}} users | {{serverStatus.roomCount}} rooms</h1>
+    </div>
+    <h1 v-else class="title has-text-danger">Server offline</h1>
+    <hr>
+    <b-button type="is-primary" @click="connectToRoomPrompt">Join a room</b-button>
+    <hr>
+    <b-button type="is-primary" @click="makeRoomPrompt">Make a room</b-button>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import { send } from '../store/signalPlugin'
 
 export default {
   name: 'Home',
-  components: {
-    HelloWorld
+  computed: {
+    serverStatus () {
+      return this.$store.state.app.serverStatus
+    },
+    serverConnected () {
+      return this.$store.state.app.signalServerConnected
+    }
+  },
+  mounted () {
+    this.loginPrompt()
+  },
+  methods: {
+    loginPrompt () {
+      this.$buefy.dialog.prompt({
+        message: 'Choose a name',
+        trapFocus: true,
+        inputAttrs: {
+          placeholder: 'pedro',
+          minlength: 3,
+          maxlength: 30
+        },
+        confirmText: 'KK',
+        onConfirm: (name) => this.login(name)
+      })
+    },
+    login (name) {
+      send({
+        type: 'login',
+        name: name
+      })
+      this.$store.dispatch('rtc/setName', name)
+    },
+    makeRoomPrompt () {
+      this.$buefy.dialog.prompt({
+        message: 'Choose a room name',
+        trapFocus: true,
+        inputAttrs: {
+          placeholder: 'mah roomy',
+          minlength: 3,
+          maxlength: 30
+        },
+        cancelText: 'Nah',
+        confirmText: 'Go',
+        onConfirm: (name) => this.makeRoom(name)
+      })
+    },
+    makeRoom (name) {
+      send({
+        type: 'createRoom',
+        name: name
+      })
+      this.$store.dispatch('room/setRoomName', name)
+    },
+    connectToRoomPrompt () {
+      this.$buefy.dialog.prompt({
+        message: 'Enter room code',
+        trapFocus: true,
+        inputAttrs: {
+          placeholder: 'mah roomy',
+          minlength: 3,
+          maxlength: 30
+        },
+        cancelText: 'Nah',
+        confirmText: 'Connect',
+        onConfirm: (code) => this.connectToRoom(code)
+      })
+    },
+    connectToRoom (code) {
+      send({
+        type: 'connectRoom',
+        name: code
+      })
+    }
   }
 }
 </script>
+
+<style>
+.home {
+  text-align: center;
+  color: #2c3e50;
+  margin: 20px 15px 0px 15px;
+}
+</style>