<template>
  <transition name="fade" mode="out-in">
    <div class="clouds">
      <div class="cloud cloud-1" v-if="percent >= 60" :style="cloudStyle(4)">
        <svg id="cloud-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 305.8 159.92"><path  d="M370,317.7c-8.5,2.9-20.8,12.7-24.6,19.6-1,1.7-1.2,1.7-5.5-.2-6.7-3.1-14.3-2.8-21.4.8-4.3,2.2-6.3,2.7-7.6,2-4.3-2.3-11,.6-12.9,5.6-.6,1.6-2,2.5-4.7,3a25.71,25.71,0,0,0-7.8,2.9c-3.1,1.7-4.8,2-7.5,1.4a16.76,16.76,0,0,0-12.9,3.1c-2.4,1.7-3.4,1.9-5.6,1.1-5.3-2-9.5-1.2-13.1,2.4-1.9,1.9-3.4,4.1-3.4,5s-1.3,2.2-2.9,3.1a9.75,9.75,0,0,0-4.1,4.2c-1.3,2.8-1.4,2.8-10.4,2.8-10.7,0-15.1,1.8-21.2,8.8l-3.8,4.4-5.4-2.9c-16.1-8.4-39.2,3-39.2,19.4a30.88,30.88,0,0,0,1.6,8.8c1.6,4.5,1.6,4.6-.9,8.3-4.7,7-4.8,17.5-.1,25.4,3.6,6.3,11.1,9.7,20.3,9.1l6.9-.4.5,3.2c1.3,8,7.8,12.4,17.9,12.4,3.6-.1,7.4-.7,8.8-1.5,2.1-1.2,11.4-1.4,55.2-1.5,51,0,52.9.1,56,2a11.39,11.39,0,0,0,11.8.5c2.8-1.4,3.1-1.4,5.1.6,7.9,7.9,27.1,5.8,33.2-3.7,1.7-2.6,2.6-3.2,4.2-2.6,3.7,1.3,10.9.5,15.2-1.6a69.15,69.15,0,0,0,10-7c9.1-7.6,9.9-7.9,19.8-8.5,5.6-.2,10.3-1.1,12.3-2.1,5.4-2.8,7.2-8.3,4.7-14.8-.5-1.3,0-1.9,2.2-2.4,8.5-2.1,14.4-7.6,16.9-16,1.8-6,1.8-8.8-.2-15.3-1.7-5.8-7.2-12-12.6-14.1-1.8-.8-3.5-1.5-3.6-1.6s.6-1.5,1.7-3.1a18.87,18.87,0,0,0,2.7-7.9A23,23,0,0,0,427.3,345l-5.1-1.1.9-3.4c1.3-4.5-.3-10.4-3.5-13.4-2.8-2.6-10.3-3.9-13.2-2.3-1.5.8-2.8.4-6.4-2.3C391.4,316.2,379.6,314.3,370,317.7Z" transform="translate(-153.12 -316.03)" /></svg>
      </div>
      <div class="cloud cloud-2" v-if="percent >= 80" :style="cloudStyle(5)">
        <svg id="cloud-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 421.36 158.74"><path  d="M381,319.6c-18.9,4.1-35.7,19.9-39.2,36.8-1.5,7.3-3.9,8.9-9.4,6.3-4.3-2.1-12.5-2.2-16.3-.2a21.54,21.54,0,0,0-5.6,4.7c-2.4,2.9-3.4,3.3-8.2,3.5a39.23,39.23,0,0,0-8.9,1.3c-5.5,1.8-12.7,8.2-15.4,13.6-1.4,2.7-2.6,5.1-2.7,5.3s-1.8-.6-3.7-1.8a23.18,23.18,0,0,0-8.3-2.7c-4.1-.5-5.4-.2-8.6,2-2.9,2-4.2,2.4-5.7,1.6a36.44,36.44,0,0,0-8.9-1.6c-5.8-.6-7.2-1-7.7-2.7-1-3.3-7.7-9.9-11.9-11.8A25.94,25.94,0,0,0,210,372c-7,0-14-2.1-18.2-5.6-4.4-3.6-9.2-4.7-18.7-4.2-6.7.3-9.9,1-14.3,3.2-6.6,3.1-12.9,8.9-15.8,14.5-1.2,2.5-3,4.3-4.4,4.7-3.4.8-7.5,5.5-7.8,8.9a12.28,12.28,0,0,1-3.2,5.7c-2.6,2.7-2.8,3.3-2.3,8.4.5,4.4.2,5.6-1.2,6.6a18.77,18.77,0,0,0-3.6,4.1c-1,1.5-2.4,2.6-3.1,2.3-3.8-1.5-11.8,3.5-12.6,7.8-.2,1.1-1.7,2.4-3.7,3.1-7.4,2.5-9.6,10-3.8,13.5,3.1,1.9,5.2,2,89.3,2,86,0,88.4.1,88.4,3.2,0,.4-1.6.8-3.5.8-3.6,0-4.8.9-9.8,7.3-3.2,4-8.2,4.9-20.1,3.5l-9.8-1.2-1.9,2.5c-1.6,2.2-2.7,2.6-7.5,2.8-7.4.2-12.4,2.5-12.4,5.7,0,4.9-.6,4.9,79,5.2,81.4.3,139.1-.8,145.3-2.9,5.7-1.9,8.7-5.1,8.7-9.3,0-5.2-3.4-8.7-9.3-9.3a12,12,0,0,1-7.7-3.4c-2.4-2.4-3.7-2.9-8-2.9-3.2,0-4.9-.4-4.5-1s12.3-1,32.6-1c41,.1,48.1-1.1,50.9-8.6.8-2,1.6-2.4,5.5-2.4,11,0,16.9-14.3,9.7-23.9-4.7-6.4-16.4-8.8-22.6-4.7-2.7,1.7-2.8,1.7-5.2-.5a7.67,7.67,0,0,1-2.4-4.6c0-3.8-3.6-9.6-7.6-12.3-3.2-2.1-4.9-2.5-11.6-2.5h-7.9l.6-2.5a46.09,46.09,0,0,0,1.1-21.7c-1.9-11-5.8-18.5-13.6-26.4C428.3,321.9,402.8,314.8,381,319.6Z" transform="translate(-94 -318.11)" /></svg>
      </div>
      <div class="cloud cloud-3" v-if="percent > 0" :style="cloudStyle(1)">
        <svg id="cloud-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.35 129.68"><path  d="M252.6,333.4a19.9,19.9,0,0,0-12.3,13.8c-1.6,5.7-1.7,5.8-5.2,5.8-7,.1-15.1,5-19.6,12-7.1,11.2-7.9,25.9-2,37.3a53.61,53.61,0,0,1,2.5,5.2,9.57,9.57,0,0,1-2.8.8c-9,1.8-14.3,13.8-9.8,22.4,1.7,3.4,6.7,6.5,12.3,7.8,2,.4,3.3,1.3,3.3,2.2s1.5,3,3.3,4.8l3.4,3.4,12.4-.1c6.8,0,13.4-.4,14.7-.9,2-.8,3.2-.3,7,2.9,10.2,8.3,18,11.2,30.8,11.2,13.6,0,24.4-4.5,33.1-13.8,3.2-3.3,4.6-4.2,5.5-3.4,1.9,1.5,8.2,2.5,11.7,1.7a15.74,15.74,0,0,0,5.9-3l2.8-2.3,5.8,1.9c4.1,1.4,8.5,2,15.4,2,11.2,0,18-1.7,24-6.1,2.7-1.9,5.4-3,7.6-3,7,0,11.3-7.4,7-12.1-1.5-1.7-1.5-2.1,0-5.3,2.8-5.9,1.7-11.8-3.2-16.9-3.1-3.3-11.8-6.1-17-5.5-3,.4-4,0-5.6-2-2.1-2.7-7.3-5.2-10.7-5.2-3.9,0-8.7,3.1-10.4,6.6s-1.7,3.4-8.1,3.4h-6.5l1.5-2.2c2.2-3.1,2-7.4-.3-9.7-2.6-2.6-9.1-4.3-15.3-4l-5,.3-.3-3.7c-.2-3.9-3.3-8.2-6.7-9.3-1.5-.4-1.7-1.2-1.2-3.9,1.1-6.2-4.9-13.4-12.9-15.6-5.5-1.5-13.9-.5-18.3,2-3.2,1.9-3.8,2-6.3.6-2.2-1.1-3-2.4-3.5-5.7a23.39,23.39,0,0,0-2.6-7.3C272.9,333.9,260.8,330.4,252.6,333.4Z" transform="translate(-201.77 -332.32)" /></svg>
      </div>
      <div class="cloud cloud-4" v-if="percent >= 40" :style="cloudStyle(3)">
        <svg id="cloud-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 239.47 95.61"><path  d="M231.5,349.4c-11.1,3.6-20.8,11.4-25.3,20.2-5.9,11.6-6.7,24.4-2,34.5l2.6,5.7-4.8.6c-8.6,1.1-14.9,7.1-15.7,15-1,8.7,4.4,15.6,13.9,17.5,3.8.8,35.5,1.1,107.3.9l102-.3,5.6-2.3c7.9-3.2,11.6-7.7,10.3-12.7-1-4-4.2-4.6-20.7-3.9-18.8.8-22.8-.1-37.7-9.2-5.8-3.5-12.6-6.8-15.3-7.4-4.8-1-11.7-.5-15,1.2-1,.5-2,.8-2.2.6s.5-3.3,1.6-6.8c3.2-10.4,1-18.9-6.3-24.3-3.9-2.9-11.4-3.3-16-.9-3.7,1.9-3.7,1.9-5.5,0-5.1-5.7-14.3-6.5-21.5-1.9l-4.6,2.9-.7-3.6c-1.7-9.4-10.1-19.3-20.3-24-4.7-2.2-7.4-2.7-15.7-2.9C239.2,348.1,234,348.5,231.5,349.4Z" transform="translate(-186.18 -348.25)"/></svg>
      </div>
      <div class="cloud cloud-5" v-if="percent >= 20" :style="cloudStyle(2)">
        <svg id="cloud-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356.98 155.01"><path  d="M279.4,320c-16,2.4-27.4,9.8-33.7,21.8-3.5,6.6-4.2,7.3-12.4,12.2-4.9,2.9-9.7,6-10.8,6.9a17.34,17.34,0,0,1-6.1,2.9,41.86,41.86,0,0,0-8.3,4c-4,2.7-4.9,2.9-11.1,2.4-5.7-.4-7.6-.1-11.4,1.8-5,2.4-8.9,6.8-10,11.3-.5,2.2-1.1,2.7-2.4,2.2-10.2-4.3-22.8-1.1-33.3,8.3-16,14.3-9.5,33.3,11.3,33.3,6.4,0,13.1-1.8,17.1-4.6,2.7-1.9,3.7-1.9,3.7,0,0,2.7,7.9,10.2,13.3,12.6,4.5,2,6.7,2.4,16.2,2.3,7.7-.1,12.3-.6,15.4-1.8s4.8-1.3,5.5-.6a4.71,4.71,0,0,0,2.8,1c2.4,0,10.8,8.6,10.8,11.1,0,7.4,7.7,14.1,16.2,14.2,4.6,0,5.8.5,9.2,3.5a54.61,54.61,0,0,0,10.5,6.6c6.3,2.9,7.2,3.1,18.6,3.1,14.3,0,23.7-2.4,32.7-8.5,5.3-3.7,5.9-3.8,9.5-2.8,8.7,2.4,21.2-1.7,27.2-8.9a31,31,0,0,0,4.7-8.8l1.6-5,5.2-.1a30.58,30.58,0,0,0,9-1.8c3.4-1.4,10.3-1.6,54.1-1.6,47.4,0,50.3-.1,51.8-1.8a7.19,7.19,0,0,0,.2-8.9c-2.1-3.1-9.5-5.6-14.9-5.1-5.1.4-5.3.2-3.1-2.2a11.83,11.83,0,0,0,2.1-5.2c.5-2.9.1-4.1-2.6-7.1a15.56,15.56,0,0,0-7.3-4.8c-5.7-1.6-22.2-.5-32.6,2.1-4.6,1.1-8.6,1.8-8.8,1.6s0-2,.5-4c2.2-7.9-2.4-14.6-10.6-15.4l-4.9-.4.5-4.7c.6-6.7-1.7-10.7-7.5-13.3-5.6-2.5-12.9-2-19.1,1.1-5.4,2.8-6.2,2.7-6.2-.8,0-3.7-4.1-8.1-7.7-8.2-1.5-.1-3.6-.2-4.5-.3s-1.8-.3-1.9-.6-.5-2.7-1-5.4c-1.9-10.3-9.6-16-21.7-16.1-7.2,0-7.4-.1-11.7-4.1C312.6,323.3,294.2,317.7,279.4,320Z" transform="translate(-130.96 -319.49)"/></svg>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'scene',
    props: {
      percent: {
        type: Number,
        default: 0
      },
      speed: {
        type: Number,
        default: 0
      },
      direction: {
        type: Number,
        default: 0
      }
    },
    methods: {
      cloudStyle (offset) {
        const speed = (this.speed > 0) ? (100 - this.speed) + ((this.speed / 100) + offset) : 0
        const direction = (this.direction >= 0 && this.direction <= 180) ? 'forward' : 'reverse'
        const position = (this.speed === 0) ? (-100 + (offset * 20)) : -100

        let delay = Math.floor(Math.random() * 99) + 1
        delay *= (Math.floor(Math.random() * 2) === 1) ? 1 : -1

        return {
          animation: `move-cloud ${speed}s linear infinite`,
          animationDelay: `${delay}s`,
          animationDirection: direction,
          transform: `translateX(-${position}%)`
        }
      }
    }
  }
</script>
