<template>
  <div ref="basemo" :class="`base_maze ${snapped?'snapped':''}`">
    <canvas :id="elId"></canvas>
    <div :class="`cover_overlay ${overlayer} ${overlayerColor}`"
         :style="`--from_x:${color_from}; --to_x:${color_to};--g_x:${w}px;--g_h:${h}px;`"></div>
    <slot class="maze_layer_1"></slot>
  </div>
</template>
<script>
import {
  generateBackgroundCanvas,
  Clear
} from "../engines/three/wrapengine/box_generator"
import elementbase from "../mixins/tools/elementbase"

export default {
  name: "BgMazeGen",
  mixins: [elementbase],
  props: {
    color_from: {
      type: String,
      required: false,
      default: "#1a5f12"
    },
    color_to: {
      type: String,
      required: false,
      default: "#cf1313"
    }
  },
  mounted() {
    this.$nextTick(() => {
      generateBackgroundCanvas(this.elId,
        this.byRequirement ? this.color_from : undefined,
        this.clickGen,
        this.autoGenTime,
        this.snapped ? this.$refs.basemo : undefined)
      this.updateRenderSize(this.$refs.basemo)
    })
  },
  beforeDestroy() {
    Clear()
  }
}
</script>
<style scoped lang="scss">
@import "../commonstyle/us";

.base_maze {
  position: absolute;

  .maze_layer_1 {
    z-index: 2;
  }

  .cover_overlay {
    @extend .cover_basic_runner;
    z-index: 1;
    width: 100vw;
    height: 100vh;
  }

  &.snapped {
    .cover_overlay {
      width: var(--g_x);
      height: var(--g_h);;
    }
  }
}
</style>
