<template>
  <div class="jpclownflower_container">
    <canvas :id="elId">Canvas not supported.</canvas>
    <div :class="`overlay ${overlayer}`"></div>
    <h1><span id="logo"></span>{{ topsubtitle }}</h1>
    <h2 id="title">{{ title }}</h2>
  </div>
</template>
<script>
import { StartBackgroundAnim, Clear } from "../engines/three/wrapengine/japanwheel"
import elementbase from "../mixins/tools/elementbase"

export default {
  name: "BgJpflowani",
  mixins: [elementbase],
  props: {
    title: {
      type: String,
      required: false,
      default: "HANASEIGAIHA / 花青海波"
    },
    topsubtitle: {
      type: String,
      required: false,
      default: "HANASEIGAIHA"
    },
    overlayer: {
      type: String,
      required: false,
      default: "n0"
    }
  },
  mounted() {
    this.$nextTick(() => {
      StartBackgroundAnim(this.elId)
    })
  },
  beforeDestroy() {
    Clear()
  }
}
</script>
<style lang="scss">
.jpclownflower_container {

  span#logo {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #CC2F3B;
    margin-right: 0.4rem;
  }

  h1 {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    font-size: 1.6rem;
  }

  h2 {
    background: rgba(0, 0, 0, 0.7);
    color: whitesmoke;
    position: absolute;
    top: 0;
    right: 1.6rem;
    height: 100%;
    text-align: center;
    font-size: 1rem;
    padding: 0.8rem;
    padding-bottom: 0px;
    padding-top: 0px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }

  .overlay {
    top: 0px;
    left: 0px;
    display: block;
    width: 100vw;
    height: 100vh;
    position: absolute;
    $strip_a: #cccccc;
    $strip_b: #dbdbdb;
    $red: rgba(255, 0, 0, .3);
    $blue: rgba(0, 0, 255, .8);
    $strip_ac: rgba(122, 122, 122, 0.8);
    $strip_bc: rgba(65, 65, 65, 0.8);
    // background-image: repeating-linear-gradient(110deg, $strip_a, $strip_a 30px, $strip_b 30px, $strip_b 60px);
    &.n0 {
      background-image: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
      linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
      linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);

    }

    $hk1: rgba(#3f87a6, 0.9);
    $hk2: rgba(#ebf8e1, 0.7);
    $hk3: rgba(#ffb564, 0.9);

    &.n1 {
      background-image: linear-gradient(0.25turn, $hk1, $hk2, $hk3);
    }

    &.n2 {
      background-image: radial-gradient($red, $blue);
    }

    &.n3 {
      background-image: repeating-linear-gradient(-45deg, $red, $red 5px, $blue 5px, $blue 10px);;
    }

    &.n4 {
      background-image: repeating-linear-gradient(-45deg, $red, $red 5px, $blue 5px, $blue 50px);;
    }

    &.n5 {
      background-image: repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
          rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
          rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
          rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
          rgba(255, 0, 0, 0.5) 300px),
      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
              rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
              rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
              rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
              rgba(255, 0, 0, 0.5) 230px);

    }

    &.n6 {
      background-image: repeating-linear-gradient(90deg, transparent 0 50px,
          rgba(255, 127, 0, 0.25) 50px 56px,
          transparent 56px 63px,
          rgba(255, 127, 0, 0.25) 63px 69px,
          transparent 69px 116px,
          rgba(255, 206, 0, 0.25) 116px 166px),
      repeating-linear-gradient(0deg, transparent 0 50px,
              rgba(255, 127, 0, 0.25) 50px 56px,
              transparent 56px 63px,
              rgba(255, 127, 0, 0.25) 63px 69px,
              transparent 69px 116px,
              rgba(255, 206, 0, 0.25) 116px 166px),
      repeating-linear-gradient(-45deg, transparent 0 5px,
              rgba(143, 77, 63, 0.25) 5px 10px),
      repeating-linear-gradient(45deg, transparent 0 5px,
              rgba(143, 77, 63, 0.25) 5px 10px);

    }

    &.n7 {
      background-image: repeating-radial-gradient($strip_ac, $strip_ac 5px, $strip_bc 5px, $strip_bc 10px);

    }

    &.n8 {
      background-image: conic-gradient(at 0% 30%, $strip_bc 10%, $blue 30%, $strip_ac 50%);
    }

    background-color: rgba(179, 61, 61, 0.7);
    background-blend-mode: overlay;
    background-repeat: repeat-x;
  }

}
</style>
