<template>
  <b-container class="backgroundPadding">
    <b-row class="justify-content-center">
      <b-col cols="auto">
        <input
          type="text"
          placeholder="Username"
          autocomplete="off"
          class="inputUsername"
          :value="username"
          @input="usernameInput = $event.target.value"
          :disabled="
            connectionStatus.status === $const('REQ_REQUESTED') || isConnected
          "
          @keydown.enter="connect(usernameInput)"
        />
      </b-col>
    </b-row>
    <b-row class="justify-content-center">
      <b-col cols="auto">
        <button
          class="loginButtons hvr-pulse"
          @click.prevent="connectButtonAction"
          :disabled="connectionStatus.status === $const('REQ_REQUESTED')"
        >
          {{ connectButtonText }}
        </button>
      </b-col>
    </b-row>
    <b-row class="justify-content-center">
      <b-col cols="3" md="3" lg="3" sm="3" xl="3">
        <b-img class="swordsImg" :src="require('../../assets/epees.png')">
        </b-img>
      </b-col>
    </b-row>
    <b-row class="justify-content-center">
      <b-col cols="auto">
        <button
          class="loginButtons onlineButton hvr-pulse"
          :disabled="!isConnected || isGameRunning"
          @click.prevent="$emit('enter-online', username)"
        >
          Online Game
        </button>
      </b-col>
    </b-row>
    <b-row class="justify-content-center">
      <b-col cols="auto">
        <button
          class="loginButtons hvr-pulse"
          @click.prevent="$emit('enter-local')"
          :disabled="isGameRunning"
        >
          Local Game
        </button>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
/**
 * First menu page where user can login or play local game
 */
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.$const('REQ_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';
@font-face {
  font-family: 'MedievalSharp';
  src: url('../../assets/fonts/MedievalSharp.ttf') format('truetype');
}
@media (min-width: 1280px) {
  .backgroundPadding {
    padding-top: 7%;
    padding-bottom: 7%;
  }
  .inputUsername {
    padding: 10%;
    font-size: 30px;
  }
  .loginButtons {
    font-size: 40px;
  }
}
@media (min-width: 1001px) and (max-width: 1279px) {
  .backgroundPadding {
    padding-top: 8%;
    padding-bottom: 8%;
  }
  .inputUsername {
    padding: 10%;
    font-size: 23px;
  }
  .loginButtons {
    font-size: 32px;
  }
}

@media (min-width: 800px) and (max-width: 1000px) {
  .backgroundPadding {
    padding-top: 10%;
    padding-bottom: 10%;
  }
  .inputUsername {
    padding: 10%;
    font-size: 15px;
  }
  .loginButtons {
    font-size: 20px;
  }
}
@media (max-width: 799px) {
  .backgroundPadding {
    padding-top: 6%;
    padding-bottom: 6%;
  }
  .inputUsername {
    padding: 10%;
    font-size: 15px;
  }
  .loginButtons {
    font-size: 20px;
  }
}
.inputUsername {
  background-image: url('../../assets/username field.png');
  /* Full height */
  max-width: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  font-family: MedievalSharp, cursive;
  border: none;
  text-align: center;
}
.loginButtons {
  font-family: MedievalSharp, cursive;
  color: #a41515;
  border: none;
  background-color: transparent;
  font-weight: 900;
}
.loginButtons:focus {
  outline: none;
}
.onlineButton:disabled {
  color: #a4151548;
}
.swordsImg {
  max-width: 100%;
  max-height: 100%;
}
.inputUsername::-webkit-input-placeholder {
  text-align: center;
  color: #a4151548;
}
.inputUsername:-moz-placeholder {
  text-align: center;
  color: #a4151548;
}
.inputUsername::-moz-placeholder {
  text-align: center;
  color: #a4151548;
}
.inputUsername:-ms-input-placeholder {
  text-align: center;
  color: #a4151548;
}
/* Pulse */
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse:hover:enabled {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
</style>
