<template>
  <div :style="getBackgroundStyle()" v-if="showme === true">
    <div class="md-layout md-alignment-top-center">
      <div class="md-layout-item md-size-40">
        <img style="float: right; z-index: 1;padding-top: 15%" :src="require('@/assets/images/hiddenegg/styletext.png')">
        <img style="float: right;z-index: 2;margin-top: -15%" :src="require('@/assets/images/hiddenegg/engi.png')">
      </div>
    </div>
    <div class="md-layout md-alignment-bottom-center">
      <div class="md-layout-item md-size-50">
        <p class="he-text">Факты 13 : Добро пожаловать на "лучший" ру-сервер ТФ2!!!</p>
        <div style="justify-content: center; display: flex;">
          <a class="he-text he-a" href="">Правила</a>
          <a class="he-text he-a" href="">Сервера</a>
          <a class="he-text he-a" href="">Профиль</a>
          <a class="he-text he-a" href="">Випка</a>
          <a class="he-text he-a" href="">О нас</a>
        </div>
        <div align="center">
        <br>
        <input type="text" v-model="player_string" placeholder="Сюда вводи ссылку на профиль" size="40%">
        <br>
        <button v-on:click="foundPlayer()">Искать</button>
        <br>
        </div>
        <p class="he-text he-text-min">Более {{this.$API.stats['ban_count']}} забаненых — в нашей датабазе сервера</p>
        <br>
      </div>
    </div>
    <div class="md-layout md-alignment-bottom-center">
      <Devochka :size="5" v-for="n in `${this.$API.stats['ban_count']}`" :key="n+Math.random().toString(36).slice(4)" :num="n"/>
    </div>
    <br>
    <div align="center">
      <a class="he-text he-a he-text-min" href="https://www.youtube.com/watch?v=A4SFMLKgsnY">Правила поведения</a>
      <p class="he-text he-text-min">Давно искал место где можно почилить в данной мертвой игре???</p>
      <a class="he-text he-a he-text-min" href="">Поздравляю ты его нашел!!!</a>
    </div>
  </div>
</template>

<script>
import Devochka from "@/components/Others/Images/Devochka.vue";
import axios from "axios";
import Random from "@/api/Random";

export default {
  name: 'HiddenEgg',
  components: {Devochka},
  data: () => ({
    player_string:"",
    user_input:"",
    showme:false
  }),
  props: {
  },
  methods: {
    getBackgroundStyle(){
      return {
        "position": "fixed",
        "background-size": "cover",
        "background-repeat": "no-repeat",
        "background-position": "center center",
        "left": 0,
        "right": 0,
        "z-index": -1,
        "width": "100%",
        "height": "100%",
        "background-color": "#AAE5A4"
      }
    },
    foundPlayer() {
      axios.post("/api/profile/steam/web" + Random.getRndWebNew(), {"any":this.player_string})
          .then(response => {
            if (response.status === 200 && 'steam64' in response.data) {
              window.open(response.data['community_url']);
            } else {
              window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ")
            }
          })
          .catch(() => {window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ")})
    },
    keyHook(e) {
      switch (e.key) {
        case "ArrowUp": {this.user_input += "up"; break}
        case "ArrowDown": {this.user_input += "down"; break}
        case "a": {this.user_input += "a"; break}
        case "b": {this.user_input += "b"; break}
        case "ArrowLeft": {this.user_input += "left"; break}
        case "ArrowRight": {this.user_input += "right"; break}
        default: {this.user_input = ""; break}
      }
      //ВИТАЛЯ ПОШЕЛ НАХУЙ
      if (this.user_input === `upupdowndownleftrightleftrightba`) {
        this.showme = true;
      }
    }
  },
  created() {
    window.addEventListener('keydown', this.keyHook);
  },
  destroyed() {
    window.removeEventListener('keydown', this.keyHook);
  }
}
</script>

<style>
.he-text {
  font-family: Verdana;
  color: black;
  text-align: center;
}

.he-text-min {
  font-size: 0.7em;
  line-height: 0.1em;
}

.he-a {
  color: #0D328F;
  padding: 0% 1%;
  cursor: pointer;
}
</style>