removed granim, replaced with generated static css gradient

src/components/MapGradientBackground.vue

@@ -0,0 +1,108 @@
+<script>
+
+
+export default {
+  data() {
+    return {
+      // granim1: null,
+      // granim2: null
+    }
+  },
+  mounted() {
+    this.initGradients()
+    this.initTrame()
+    window.addEventListener("resize", this.onWindowResize.bind(this));
+  },
+  // computed: {
+  // },
+  // created () {
+  // },
+  methods: {
+    initGradients () {
+      let gradientBackground = this.$refs['background-gradient'];
+
+      let gradients = [];
+      let num_colors = Math.floor(2 + Math.random()*2);
+      for (let i = 0; i < Math.floor(2 + Math.random()*4); i++) {
+      // for (let i = 0; i < 1; i++) {
+        let colors = [];
+        // let hue = Math.floor(Math.random()*360)
+        for (let j = 0; j < num_colors; j++) {
+          let pos = (1/num_colors*j + 1/num_colors/3 + Math.random()*1/num_colors/3)*100;
+          console.log('gradient pos', pos);
+          
+          colors.push({ 
+            color: this.getRandBGColor(), 
+            // pos: parseFloat(`${parseFloat(Math.random()).toFixed(2)}`.slice(1))
+            // pos: parseFloat(`${parseFloat(pos).toFixed(2)}`.slice(1))
+            pos: parseInt(pos)
+          })
+        }
+        // colors.sort((a,b) => {
+        //   return a.pos > b.pos ? 1 : -1
+        // })
+        gradients.push(colors)
+      }
+      console.log('gradients', gradients);
+
+      let cssgrad = '';
+      gradients.forEach((gradient, index) => {
+        let alpha = Math.floor(Math.random()*360);
+        cssgrad += `\n  linear-gradient(${alpha}deg`;
+        gradient.forEach(color => {
+          cssgrad += `, ${color.color} ${color.pos}%`
+        });
+        cssgrad += index < gradients.length-1 ? '),' : ')';
+      });
+      // cssgrad += ';';
+      console.log('cssgrad', cssgrad);
+      gradientBackground.style.background = cssgrad;
+    },
+    getRandBGColor (hue) {
+      let h = !hue ? Math.floor(Math.random()*360) : hue + -30 + Math.floor(Math.random()*60);
+      let s = 25 + Math.floor(Math.random()*5);
+      let l = 40 + Math.floor(Math.random()*10);
+      let a = `${parseFloat(0.2 + Math.random()*.4).toFixed(3)}`.slice(1);
+      let hsla = `hsla(${h}, ${s}%, ${l}%, ${a})`;
+      // console.log(hsla);
+      return hsla;
+    },
+    initTrame () {
+      let canvasBackgroundTrame = this.$refs['canvas-background-trame'];
+      canvasBackgroundTrame.width = canvasBackgroundTrame.parentElement.clientWidth;
+      canvasBackgroundTrame.height = canvasBackgroundTrame.parentElement.clientHeight;
+      let ctx = canvasBackgroundTrame.getContext('2d');
+      
+      ctx.clearRect(0,0, canvasBackgroundTrame.width, canvasBackgroundTrame.height);
+
+      let step = 1;
+      for (let i = 0; i < parseInt(canvasBackgroundTrame.width); i+=step) {
+        for (let j = 0; j < parseInt(canvasBackgroundTrame.height); j+=step) {
+          if (Math.random() > 0.6) {
+            ctx.beginPath();
+            // ctx.arc(i, j, 0.5, 0, 2 * Math.PI, false);
+            ctx.rect(i, j, 1, 1);
+            ctx.fillStyle = "rgba(0,0,0,0.1)";
+            ctx.fill();
+          }
+        }
+        
+      }
+      
+    },
+    onWindowResize () {
+      this.initTrame()
+    }
+  }
+}
+
+</script>
+
+<template>
+  <div class="map-bg gradient" ref="background-gradient"></div>
+  <canvas class="map-bg trame" ref="canvas-background-trame"></canvas>
+</template>
+
+<style lang="css" scoped>
+
+</style>