<template>
  <!-- Thank you for checking my pen -->
  <section class="container_hex_map">
    <div v-for="index in HHeight" :class="{
      row:true,
      'row-moved': index%2 === 0
    }" :key="index">
      <div v-for="index in HWidth" :key="index" class="hexagon"></div>
    </div>
  </section>
</template>

<script>
export default {
  name: "BgHexmap",
  props: {
    HWidth: {
      type: Number,
      required: false,
      default: 10
    },
    HHeight: {
      type: Number,
      required: false,
      default: 10
    }
  },
  mounted() {
    this.$nextTick(() => {
      const hexagoni = document.getElementsByClassName("hexagon")

      for (let i = 0; i < hexagoni.length; i++) {
        hexagoni[i].addEventListener("mouseenter", () => {
          hexagoni[i].classList.add("light")
          setTimeout(function () {
            hexagoni[i].classList.remove("light")
          }, 800)
        })
      }
    })
  }
}
</script>

<style lang="scss">

.container_hex_map {
  margin: 0;
  top: 48%;
  position: absolute;
  transform: translateY(-55%);
  overflow: hidden;

  .row {
    width: 100vw;
    height: 121px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: -35px;
    margin-left: -33px;
  }

  .row .hexagon {
    position: relative;
    width: 100px;
    height: 54.74px;
    background-color: #3d3d3d;
    margin: 32.87px 2px;
    display: block;
    transition: all 0.2s linear;
  }

  .row .hexagon::after {
    content: "";
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    top: 100%;
    width: 0;
    border-top: 28.87px solid #3d3d3d;
    transition: all 0.2s linear;
  }

  .row .hexagon::before {
    content: "";
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    bottom: 100%;
    border-bottom: 28.87px solid #3d3d3d;
    transition: all 0.2s linear;
  }

  .row.row-moved {
    margin-left: 19px;
  }
}

.light {
  background: #3fff3c !important;
  animation: colorgen 1s infinite;
}

.light::after {
  border-top: 28.87px solid #3fff3c !important;
}

.light::before {
  border-bottom: 28.87px solid #3fff3c !important;
}

@keyframes colorgen {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(270deg);
  }
}

</style>
