first draft of gradient+trame background

package-lock.json

@@ -11,6 +11,7 @@
         "@csstools/normalize.css": "^12.0.0",
         "@material-design-icons/svg": "^0.14.2",
         "@mdi/font": "^7.1.96",
+        "granim": "^2.0.0",
         "pinia": "^2.0.21",
         "vue": "^3.2.38",
         "vue-router": "^4.1.5"
@@ -1476,6 +1477,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/granim": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/granim/-/granim-2.0.0.tgz",
+      "integrity": "sha512-aqa79K49ndjoUBtpYzlO8sKcuVQED+5axvX0SveqTLDR+Fa2G42AGntuQ36ysCFOWGVkWCLfHowFwk+D/9rGDg=="
+    },
     "node_modules/grapheme-splitter": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
@@ -3531,6 +3537,11 @@
         "type-fest": "^0.20.2"
       }
     },
+    "granim": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/granim/-/granim-2.0.0.tgz",
+      "integrity": "sha512-aqa79K49ndjoUBtpYzlO8sKcuVQED+5axvX0SveqTLDR+Fa2G42AGntuQ36ysCFOWGVkWCLfHowFwk+D/9rGDg=="
+    },
     "grapheme-splitter": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",

package.json

@@ -11,6 +11,7 @@
     "@csstools/normalize.css": "^12.0.0",
     "@material-design-icons/svg": "^0.14.2",
     "@mdi/font": "^7.1.96",
+    "granim": "^2.0.0",
     "pinia": "^2.0.21",
     "vue": "^3.2.38",
     "vue-router": "^4.1.5"

src/App.vue

@@ -43,8 +43,6 @@ export default {
       <h1>
         <router-link :to="{ name: 'home' }">Où atterrir</router-link>  
       </h1>
-    </div>
-    <div class="row bottom">
       <StaticMenu/>
       <UserBlock/>
     </div>
@@ -61,7 +59,7 @@ export default {
         :concernement="concernements[0]"
       /> -->
     </MapConcernements>
-    <div class="row">
+    <div id="content" class="row">
       <RouterView />
     </div>
   </div>

src/assets/common.scss

@@ -1,7 +1,8 @@
 $pad_btn: 0.5em;
 @mixin btn() {
-  padding: $pad_btn;
+  padding: $pad_btn/2 $pad_btn;
   border-radius: 5px;
   background-color: $btns_back;
   cursor: pointer;
+  line-height: 1.5;
 }

src/assets/layout.scss

@@ -19,12 +19,16 @@ html,body{
 
   font-weight: normal;
 
-  display: flex;
-  flex-flow: column-reverse;
+  // display: flex;
+  // flex-flow: column-reverse;
 }
 
 #header{
-  flex: 0 0 auto;
+  // flex: 0 0 auto;
+  position: absolute;
+  bottom:0;
+  left:0;
+  width: 100vw;
   padding: 1rem 0;
   >.row{
     @include layout-row();
@@ -32,16 +36,56 @@ html,body{
 }
 
 #main-content{
-  flex: 1 1 auto;
+  // flex: 1 1 auto;
+  width:100vw;
+  height:100vh;
+
   overflow-x: hidden;
   overflow-y: auto;
   // padding: 1rem 0;
+  
+  #map-backgrounds{
+    position: absolute;
+    z-index: -1;
+    top:0; left:0;
+    width:100%;
+    height:100%;
+    >canvas.map-bg-canvas{
+      position: absolute;
+      // z-index: -1;
+      top:0; left:0;
+      width:100%;
+      height:100%;
+    }
+  }
+  
   #map-concernements{
     width:100%;
     height:100%;
+    z-index: 1;
   }
+
+  
+  #map-nav{
+    position: absolute;
+    z-index: 2;
+    top:0; left: 0;
+    width:100vw;
+    padding:1rem 0;
+    >ul{
+      @include layout-row();
+    }
+  }
+
   >.row{
     @include layout-row();
   }
+
+  #content{
+    position: absolute;
+    top:0; right:0;
+    height:100vh;
+  }
+
 }
 

src/assets/main.scss

@@ -14,7 +14,7 @@ body{
 }
 
 #app>header#header{
-  background-color: $front;
+  // background-color: $front;
   .row{
     display: flex;
     flex-direction: row;
@@ -26,10 +26,41 @@ body{
         font-family: "snap-it";
       }
     }
-    &.bottom{
-      padding:1em 0;
+    // &.bottom{
+    //   padding:1em 0;
 
+    // }
+  }
+
+}
+
+#main-content{
+
+  #map-backgrounds{
+    .map-bg-canvas{
+      mix-blend-mode: multiply;
     }
   }
 
-}
+  #map-concernements{
+
+  }
+
+  #map-nav{
+    ul{
+      display: flex;
+      flex-flow: row;
+      gap: 1em;
+      li{
+        list-style: none;
+        a{
+          @include btn();
+        }
+      }
+    }
+  }
+
+  #content{
+
+  }
+}

src/components/MapBackground.vue

@@ -0,0 +1,136 @@
+<script>
+
+import Granim from 'granim'
+
+export default {
+  data() {
+    return {
+      granim1: null,
+      granim2: null
+    }
+  },
+  mounted() {
+    this.initGradients()
+    this.initTrame()
+  },
+  // computed: {
+  // },
+  // created () {
+  // },
+  methods: {
+    initGradients () {
+      let canvasBackground1 = this.$refs['canvas-background-gradient1'];
+      canvasBackground1.width = canvasBackground1.parentElement.clientWidth;
+      canvasBackground1.height = canvasBackground1.parentElement.clientHeight;
+      
+      let gradients1 = [
+        [
+          { color: this.getRandBGColor(), pos: .2 },
+          { color: this.getRandBGColor(), pos: .8 },
+          { color: this.getRandBGColor(), pos: 1 }
+        ], [
+          { color: this.getRandBGColor(), pos: 0 },
+          { color: this.getRandBGColor(), pos: .2 },
+          { color: this.getRandBGColor(), pos: .75 }
+        ],
+      ];
+      console.log(gradients1);
+
+      this.granim1 = new Granim({
+        element: canvasBackground1,
+        direction: 'custom',
+        customDirection: {
+          x0: `${Math.random() * canvasBackground1.width}px`,
+          y0: `-100px`,
+          x1: `${Math.random() * canvasBackground1.width}px`,
+          y1: `${canvasBackground1.height + 100}px`
+        },
+        isPausedWhenNotInView: true,
+        states : {
+          "default-state": {
+            gradients: gradients1,
+            transitionSpeed: 20000
+          }
+        },
+        stateTransitionSpeed : 50000
+      })
+
+      let canvasBackground2 = this.$refs['canvas-background-gradient2'];
+      canvasBackground2.width = canvasBackground2.parentElement.clientWidth;
+      canvasBackground2.height = canvasBackground2.parentElement.clientHeight;
+      
+      let gradients2 = [
+        [
+          { color: this.getRandBGColor(), pos: .2 },
+          { color: this.getRandBGColor(), pos: .8 },
+          { color: this.getRandBGColor(), pos: 1 }
+        ], [
+          { color: this.getRandBGColor(), pos: 0 },
+          { color: this.getRandBGColor(), pos: .2 },
+          { color: this.getRandBGColor(), pos: .75 }
+        ],
+      ];
+      console.log(gradients2);
+
+      this.granim2 = new Granim({
+        element: canvasBackground2,
+        customDirection: {
+          x0: `-100px`,
+          y0: `${Math.random() * canvasBackground2.height}px`,
+          x1: `${canvasBackground2.width + 100}px`,
+          y1: `${Math.random() * canvasBackground2.height}px`
+        },
+        isPausedWhenNotInView: true,
+        states : {
+            "default-state": {
+                gradients: gradients2,
+                transitionSpeed: 20000
+            }
+        },
+        stateTransitionSpeed : 50000
+      })
+
+    },
+    getRandBGColor () {
+      let h = Math.floor(Math.random()*360);
+      let s = 40 + Math.floor(Math.random()*40);
+      let l = 40 + Math.floor(Math.random()*20);
+      let a = `${parseFloat(Math.random()*.9).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');
+
+      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.95) {
+            ctx.beginPath();
+            ctx.arc(i, j, 0.5, 0, 2 * Math.PI, false);
+            ctx.fillStyle = "rgba(125,125,125,0.8)";
+            ctx.fill();
+          }
+        }
+        
+      }
+      
+    }
+  }
+}
+
+</script>
+
+<template>
+  <canvas class="map-bg-canvas gradient" ref="canvas-background-gradient1"></canvas>
+  <canvas class="map-bg-canvas gradient" ref="canvas-background-gradient2"></canvas>
+  <canvas class="map-bg-canvas trame" ref="canvas-background-trame"></canvas>
+</template>
+
+<style lang="css" scoped>
+
+</style>

src/components/MapConcernements.vue

@@ -1,12 +1,14 @@
 <script>
 
+import Granim from 'granim'
 // import { mapActions, mapState } from 'pinia'
 import { computed } from 'vue'
 // import LoginBlock from '@components/block/LoginBlock.vue'
-// import UserTools from '@components/block/UserTools.vue'
+import MapBackground from '@components/MapBackground.vue'
 
 // import MA from '/api/ma-axios'
 
+
 // https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
 
 export default {
@@ -16,7 +18,9 @@ export default {
         canvas: null,
         ctx: null
       },
-      animateEvent: new Event('animate')
+      animateEvent: new Event('animate'),
+      granim: null
+
     }
   },
   provide() {
@@ -45,16 +49,44 @@ export default {
     }
   },
   beforeUpdate () {
+  },
+  components: {
+    MapBackground
   }
 }
 
 </script>
 
 <template>
+  <div id="map-backgrounds">
+    <MapBackground />
+  </div>
   <div id="map-concernements">
     <canvas ref="canvas-map"></canvas>
     <slot></slot>
   </div>
+  <nav id="map-nav">
+    <ul>
+      <li>
+        <a href="#terraindevie">terrain de vie</a>
+      </li>
+      <li>
+        <a href="#proximite">proximité</a>
+      </li>
+      <li>
+        <a href="#superposition">superposition</a>
+      </li>
+      <li>
+        <a href="#puissancedagir">puissance d'agir</a>
+      </li>
+      <li>
+        <a href="#action">action</a>
+      </li>
+      <li>
+        <a href="#doleancer">doléancer</a>
+      </li>
+    </ul>
+  </nav>
 </template>
 
 <style lang="css" scoped>