App.vue

<template>
  <div class='fullscreen bg-color'>
    <chat></chat>
    <component :is='currentOverlay'
    @login-request='loginRequest'
    @login-success='loginSuccess'
    @character-selected='characterSelected'
    @channel-list-clicked='channelListClicked'>
    </component>
  </div>
</template>

<script>
import Chat from './Chat.vue'
import Login from './Login.vue'
import CharacterSelect from './CharacterSelect.vue'
import ChannelList from './ChannelList.vue'
import AppMenu from './AppMenu.vue'

import state from '../state'
import SocketHandler from '../socket-handler'
import {ChannelStatus} from '../models'

export default {
  components: {
    Chat,
    Login,
    CharacterSelect,
    ChannelList,
    AppMenu
  },

  data () {
    return {
      currentOverlay: 'login',
      socket: new SocketHandler(this)
    }
  },

  created () {
    this.$on('overlay-change-request', this.setOverlay)
    this.$on('private-message-sent', this.privateMessageSent)
  },

  methods: {
    socketError () {
      this.currentOverlay = 'login'
    },

    identifySuccess () {
      this.socket.fetchChannelList()
      this.currentOverlay = 'channel-list'
    },

    loginRequest (account) {
      state.setAccount(account)
    },

    loginSuccess (userData) {
      state.setUserData(userData)
      this.currentOverlay = 'character-select'
    },

    characterSelected (character) {
      state.setCharacter(character)
      this.currentOverlay = ''
    },

    channelListClicked ({ id, name }) {
      state.setChannelName(id, name)

      const status = state.getChannelStatus(id)
      if (status === ChannelStatus.left) {
        this.socket.joinChannel(id)
      } else if (status === ChannelStatus.joined) {
        this.socket.leaveChannel(id)
      }
    },

    setOverlay (overlay) {
      this.currentOverlay = overlay
    },

    privateMessageSent (character, message) {
      this.socket.sendPrivateMessage(character.name, message)
    },

    privateMessageReceived (character, message) {
      this.$broadcast('private-message-received', character, message)
    },

    sendChannelMessage (message) {
      this.socket.sendChannelMessage(message)
    }
  }
}
</script>