tunnel: intiation de la com officielle

major_edits: mail dans liens + graff overlay + simple click dans panneau 
'à propos'

v1-com-officielle/src/titleComponents/GeneratedContent.vue

@@ -14,7 +14,7 @@
       </div>
     </div>
     <PlayerDiv></PlayerDiv>
-    <ColorPan></ColorPan>
+    <ColorPan ref="colorBtn"></ColorPan>
     <button type="button" name="reload" data-tooltip="recharger" id="reloadBtnStyle" class="iconBtnStyle" @click="startContentReload">
       <ReloadIcon name="close" class="icon"/>
     </button>
@@ -37,7 +37,7 @@
   #generatedContainer{
     background-color: transparent;
     width:100%;
-    height:90%;
+    height:70%;
     position:relative;
   }
 
@@ -94,7 +94,7 @@
 
   .imgStyle{
     position: absolute;
-    width:77px;
+    width:100px;
     height:auto;
     z-index:-1;
     border-style: solid;
@@ -103,13 +103,13 @@
   }
   .imgStyle.highlightItem{
     border-color: transparent;
-    width:117px;
+    width:131.2px;
     height:auto;
     z-index:-1;
   }
   .imgStyle.highlightMax{
     border-color: transparent;
-    width:200px;
+    width:250px;
     height:auto;
     z-index:-1;
   }
@@ -166,7 +166,7 @@
           isHighlight: 0
         })),
         randomImgList: null,
-        marjTop:0,
+        marjTop:77,
         marjBot:161,
         marjSide:200,
         overlayIsActive: false
@@ -193,7 +193,7 @@
         do{
           c = this.getRandomInt(0,imgCount);
         } while (a == c || c == b);
-        console.log(a,b,c);
+        //console.log(a,b,c);
         this.randomImgList[a].isHighlight = 1;
         this.randomImgList[b].isHighlight = 1;
         this.randomImgList[c].isHighlight = 2;
@@ -213,7 +213,7 @@
           chain[i].y = y;
           //calc nouvelle position
             // distance contrôlée
-          const distance = this.getRandomInt(100, this.marjSide);
+          const distance = this.getRandomInt(161, 333);
           // perturbation continue
           dirX += (Math.random() - 0.5) * 1.2;
           dirY += (Math.random() - 0.5) * 0.5;
@@ -256,14 +256,14 @@
         this.randomImgList = structuredClone(toRaw(this.imgList)).sort(() => Math.random()-0.5);
         this.selectHighlight();
         this.genCoord(this.randomImgList);
-        console.log('Layout has been generated!');
+        //console.log('Layout has been generated!');
       },
       async reloadAnimation(){
         this.overlayIsActive = true;
-        for (let i = 0; i < 34; i++) {
+        for (let i = 0; i < 3; i++) {
           this.generateContent();
-          await this.delay(44);
-          if(i===33){
+          await this.delay(333);
+          if(i===2){
             this.overlayIsActive = false;
           };
         }
@@ -283,7 +283,7 @@
         const rect = entries[0].contentRect;
         this.containerWidth = rect.width;
         this.containerHeight = rect.height;
-        console.log(rect.width, rect.height);
+        //console.log(rect.width, rect.height);
         this.generateContent();
       });
       observer.observe(displayContainer);