removed granim, replaced with generated static css gradient

src/assets/main.scss

@@ -87,11 +87,16 @@ div.loading{
 #main-content{
 
   #map-backgrounds{
-    .map-bg-canvas{
+    .map-bg{
+      position: absolute;
       mix-blend-mode: multiply;
       // filter: contrast(170%);
       &.gradient{
         // filter: blur(10px);
+        width:100%;
+        height:100%;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
       }
       &.trame{
         // display:none;

src/components/MapConcernements.vue

@@ -3,7 +3,7 @@
 // import { mapActions, mapState } from 'pinia'
 import { computed } from 'vue'
 import { nextTick } from 'vue'
-import MapBackground from '@components/MapBackground.vue'
+import MapGradientBackground from '@components/MapGradientBackground.vue'
 
 // https://brm.io/matter-js/docs/classes/Engine.html
 import Matter from "matter-js";
@@ -1478,7 +1478,7 @@ export default {
   beforeUpdate () {
   },
   components: {
-    MapBackground,
+    MapGradientBackground,
     ConcernementMapPopup,
     RecitPlayer
   }
@@ -1488,7 +1488,7 @@ export default {
 
 <template>
   <div id="map-backgrounds">
-    <MapBackground />
+    <MapGradientBackground />
   </div>
   <!-- <div id="map-matter">
     <canvas ref="canvas-engine"></canvas>

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>