twelve-heroes/src/menu/login/MenuLogin.vue

<template>
  <div class="row">
    <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
      <div class="form-group">
        <input
          type="text"
          placeholder="Username"
          autocomplete="off"
          class="form-control"
          :value="username"
          @input="usernameInput = $event.target.value"
          :disabled="
            connectionStatus.status === $types('request').REQUESTED ||
              isConnected
          "
          @keydown.enter="connect(usernameInput)"
        />
        <button
          class="btn btn-primary form-control"
          @click.prevent="connectButtonAction"
          :disabled="connectionStatus.status === $types('request').REQUESTED"
        >
          {{ connectButtonText }}
        </button>
        <p>{{ connectionStatus.text }} {{ isGameRunning | getRunningText }}</p>
        <button
          class="btn btn-primary form-control"
          :disabled="!isConnected || isGameRunning"
          @click.prevent="$emit('enter-online', username)"
        >
          Online Game
        </button>
        <button
          class="btn btn-primary form-control"
          @click.prevent="$emit('enter-local')"
          :disabled="isGameRunning"
        >
          Local Game
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  data() {
    return {
      usernameInput: this.username
    };
  },
  methods: {
    ...mapActions({
      connect: 'menu/connect',
      disconnect: 'disconnect'
    }),
    connectButtonAction() {
      if (this.isConnected) {
        this.disconnect();
      } else {
        this.connect(this.usernameInput);
      }
    }
  },
  computed: {
    ...mapGetters({
      isGameRunning: 'isGameRunning',
      username: 'username',
      isConnected: 'isConnected',
      connectionStatus: 'menu/connectionStatus'
    }),
    connectButtonText() {
      if (this.isConnected === true) {
        return 'Disconnect';
      } else if (
        this.connectionStatus.status === this.$types('request').REQUESTED
      ) {
        return 'Connecting';
      } else {
        return 'Connect';
      }
    }
  },
  filters: {
    getRunningText(isRunning) {
      if (isRunning === true) {
        return '(Game running)';
      } else {
        return '';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
// @import '../style/style.scss';
</style>