<template>
  <div>
    <div class="retro_floor_ground">
      <div ref="deepsky" class="sky">
        <div class="skybars">
          <hr v-for="index in 20" :data="getskybar(index)" :key="index" class="skybar-hr"/>
        </div>
        <div class="sun">
          <hr v-for="index in 20" :data="getsunbar(index)" :key="index" class="sunbar-hr"/>
        </div>
        <div class="mountain-wrapper">
          <div v-for="index in 4" :key="index" class="mountain-row">
            <hr v-for="index in 5" :key="index" class="mountain"/>
          </div>
        </div>
      </div>

      <div class="ground">
        <div ref="vertical" class="vertical">
          <hr v-for="index in 20" :key="index" :data="getvert(index)" class="vertical-hr"/>
        </div>
        <hr v-for="index in 20" :key="index" :data="gethor(index)" class="horizontal-hr"/>
      </div>
      <slot></slot>
      <header :style="`--blinkval: '${insertcoin}'`" @click="$emit('tapped')">
        <h1>{{ bolded }}</h1>
        <p>{{ sexy }}</p>
      </header>
    </div>
  </div>
</template>
<style lang="scss">
$white_half: rgba(255, 255, 255, 0.4);
//$retro_linear: linear-gradient(#f3f3f3 20%, #E001E7, #520069);
//$retro_linear2: linear-gradient(#f3f3f3 33%, #E001E7, #520069);
//$sky_background: linear-gradient(black, rgba(4, 150, 255, 0.5) 70%, rgba(75, 179, 253, 0.5) 90%, rgba(224, 1, 231, 0.5));
$retro_linear: linear-gradient(#f3f3f3 20%, #01E705, #1d301d);
$retro_linear2: linear-gradient(#f3f3f3 33%, #01E705, #1d301d);
$sky_background: linear-gradient(black,
    rgba(8, 96, 159, 0.5) 70%,
    rgb(37, 65, 74) 90%,
    rgb(60, 110, 42) 95%,
    rgb(231, 220, 1));
$sun_linear: linear-gradient(to right, #DC992E, #E5B467, #F2542D);
$mountain_wrap: rgb(138, 125, 56);
$cold_ice_word: linear-gradient(#f3f3f3 20%, cyan);
$groundoverlay: radial-gradient(circle at top, rgb(16, 24, 16), transparent 30%), linear-gradient(rgb(36, 93, 88), transparent 50%);

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-family: Tahoma, sans-serif;

  h1, p {
    background-clip: content-box;
    -webkit-background-clip: text;
    color: transparent;
    background-color: rgba(224, 1, 231, 0.4);
    background-image: $retro_linear;
  }

  h1 {
    margin-top: 5rem;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    font-size: 5rem;
    line-height: 1.1;
    background-image: $retro_linear2;
  }

  p {
    font-family: 'Yellowtail', serif;
    font-size: 3rem;
    line-height: 1.2;
    white-space: nowrap;
    transform: translateY(-30%) skew(0deg, -13deg);
    background-image: $cold_ice_word;
  }

  &::after {
    content: var(--blinkval);;
    font-family: courier, monospace;
    font-size: 0.8rem;
    font-weight: 300;
    animation: opacity 2s infinite;
  }
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* reset all hr */
.skybar-hr,
.sunbar-hr,
.vertical-hr,
.horizontal-hr,
.mountain {
  border: none;
  margin: 0;
}

.retro_floor_ground {
  background-color: #000;
  color: #f3f3f3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  perspective: 4rem;

  hr {
    box-sizing: border-box;
    height: auto;
    overflow: hidden;
  }

  .skybars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    transform: rotateX(-40deg) translateZ(0);
  }

  .sky {
    height: 40vh;
    background-image: $sky_background;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
  }

  .sky-animate-thunder {
    animation: thunder 0.4s;
  }

  .sun {
    z-index: 2;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background-color: transparent;
    overflow: hidden;
    transform: translateY(40px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .skybar-hr {
    height: 0.1rem;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.02);
  }

  .sunbar-hr {
    height: 0.25rem;
    background-color: #DC992E;
    background-image: $sun_linear;
  }

  .mountain-wrapper {
    position: absolute;
    left: 0;
    bottom: -1rem;
    right: 0;
    text-align: center;
    height: auto;
    z-index: 3;
    background-color: $mountain_wrap;

    /* 5 <hr> mountains per row, 4 rows */
    .mountain-row {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      margin: 0;
      padding: 0;
      display: flex;

      &:nth-child(1) {
        justify-content: center;
      }

      &:nth-child(2) {
        flex-direction: row-reverse;
        justify-content: center;
        transform: translateY(0.5rem);
      }

      &:nth-child(3) {
        flex-direction: row;
        justify-content: space-around;
        padding: 0 5rem;
        z-index: -1;
      }

      &:nth-child(4) {
        flex-direction: row;
        justify-content: center;
        padding: 0 3rem;
        z-index: -1;
      }
    }
  }
}

/* all hr mountains */
.mountain {
  border: 2rem solid transparent;
  border-bottom: 2rem solid #0f070f;
  display: inline-block;
}

/* 1st row, 2nd mountain */
.mountain-row:nth-child(1) .mountain:nth-child(2) {
  border-width: 3rem;
}

/* 2nd row, all */
.mountain-row:nth-child(2) .mountain {
  border-bottom: 2rem solid #0b0114;
}

/* 2nd row, 2nd mountain */
.mountain-row:nth-child(2) .mountain:nth-child(2) {
  border-width: 4rem;
}

/* 2nd row, 3rd mountain */
.mountain-row:nth-child(2) .mountain:nth-child(3) {
  border-width: 5rem;
}

/* 3nd row, 2nd muntain */
.mountain-row:nth-child(2) .mountain:nth-child(2) {
  border-width: 3.5rem;
}

/* all mountains, 3nd row */
.mountain-row:nth-child(3) .mountain {
  border-bottom: 3.3rem solid rgba(32, 7, 32, 1.0);
  border-width: 3.3rem;
  transform: translateX(-1.72rem);
}

/* 3rd row, 1st mountain */
.mountain-row:nth-child(3) .mountain:nth-child(1) {
  border-width: 2.5rem;
  transform: translateX(1.72rem);
}

/* 3rd row, 3rd */
.mountain-row:nth-child(3) .mountain:nth-child(3) {
  border-width: 4rem;
  transform: translateX(-6rem);
}

/* 3rd row, 4th */
.mountain-row:nth-child(3) .mountain:nth-child(4) {
  border-width: 5.5rem;
  transform: translateX(0);
}

/* 4th row, all */
.mountain-row:nth-child(4) .mountain {
  border-width: 6rem;
  transform: translateY(3.5rem);
}

.ground {
  z-index: 5;
  background-image: linear-gradient(black, rgba(224, 1, 231, 0.2) 50%);
  min-height: 60vh;
  //flex-grow: grow;
  position: relative;
  transform-origin: 200% 0%;
  transform: rotateX(20deg) translateZ(0);

  &::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: $groundoverlay;
  }

  /* div container inside ground */
  .vertical {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 100vw;
    transform: rotate(90deg);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  /* overlay */
  .horizontal-hr {
    height: 1px;
    background-image: linear-gradient(to left,
        transparent,
        rgba(93, 191, 23, 0.4),
        transparent);
    margin: 1rem 0;
  }

  .vertical-hr {
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right,
        transparent,
        #18e701,
        transparent);
  }
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes thunder {
  0% {
    background-color: transparent;
  }
  25% {
    background-color: $white_half;
  }
  50% {
    background-color: transparent;
  }
  75% {
    background-color: $white_half;
  }
  100% {
    background-color: transparent;
  }
}

@media screen and (max-height: 359px) {
  header h1 {
    margin-top: 0;
  }
}
</style>
<script>
export default {
  name: "BgTro",
  props: {
    sexy: String,
    bolded: String,
    insertcoin: {
      type: String,
      default: "insert coin"
    }
  },
  data() {
    return {
      timer_1: false,
      timer_2: false
    }
  },
  mounted() {
    const _this = this
    this.$nextTick(() => {
      if (window !== undefined) {
        _this.render()
      }
    })
  },
  beforeDestroy() {
    clearInterval(this.timer_1)
    clearInterval(this.timer_2)
  },
  methods: {
    gethor(i) {
      return `hor ${i}`
    },
    getvert(i) {
      return `vert ${i}`
    },
    getsunbar(i) {
      return `sunbar ${i}`
    },
    getskybar(i) {
      return `${i}`
    },
    render() {
      this.timer_1 = setInterval(() => {
        const deepsky = this.$refs.deepsky
        deepsky.classList.add("sky-animate-thunder")
        this.timer_2 = setTimeout(() => {
          const deepsky = this.$refs.deepsky
          const hd = this.$refs.header_ex
          deepsky.classList.remove("sky-animate-thunder")
        }, 2000)
      }, 9000)
    }
  }
}
</script>
