edit: ajout script generatif avec collection test + pleins de petits réglages

v1-com-officielle/src/assets/style.css

@@ -73,15 +73,23 @@ input {
 a{
   text-decoration: none;
   color: inherit;
-  cursor: pointer;
+  cursor: alias;
+}
+
+button{
+  cursor: cell;
 }
 
 a p{
   cursor:inherit;
 }
 
+a button{
+  cursor: inherit;
+}
+
 p{
-  cursor: default;
+  cursor: inherit;
 }
 
 /*=====================Référencement*/
@@ -147,6 +155,7 @@ canvas {
   height: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
+  cursor: crosshair;
 }
 
 
@@ -253,6 +262,7 @@ canvas {
   box-sizing: border-box;
   padding-left: 10px;
   padding-right: 10px;
+  cursor: move;
 }
 
 .windowTitleLower{
@@ -271,7 +281,6 @@ canvas {
   width: 50px;
   height: 33px;
   align-items: center;
-  cursor: pointer;
 }
 
 .closeBtn:hover{

v1-com-officielle/src/components/TitleContent.vue

@@ -1,6 +1,5 @@
 <template>
     <div id="titleContainer">
-      <PlayerDiv></PlayerDiv>
       <GeneratedDiv></GeneratedDiv>
       <TitleTextDiv></TitleTextDiv>
     </div>
@@ -28,7 +27,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: space-between;
   }
   /*================ PC LARGE*/
   @media(min-width:1300px){

v1-com-officielle/src/indieComponents/ArtistPannel.vue

@@ -214,7 +214,7 @@
   /*================ PC LARGE*/
   @media(min-width:1300px){
     #artistPannel{
-      height: 777px;
+      height: 666px;
       width: 666px;
     }
     .theMatrix{

v1-com-officielle/src/indieComponents/Infobulle.vue

@@ -81,8 +81,11 @@
           return
         }
         this.bubbleContent = item.dataset.tooltip;
-        this.posX = event.clientX - 200;
+        this.posX = event.clientX - 161;
-        this.posY = event.clientY + 20;
+        if(this.posX<0){
+          this.posX = event.clientX + 33;
+        }
+        this.posY = event.clientY + 13.12;
         this.isActive = true;
       },
       hideBubble(){

v1-com-officielle/src/indieComponents/LinkPannel.vue

@@ -61,8 +61,12 @@
   #linkContent .textBtnStyle{
     width: 267px;
     height: 77px;
-    margin-top: 33px;
+    margin-bottom: 16.1px;
-    margin-bottom: 33px;
+    animation: none;
+  }
+
+  #linkContent .textBtnStyle:hover{
+    animation : blinkBack 3.33s infinite;
   }
 
   #linkTextStyle{

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

@@ -7,7 +7,7 @@
       <CloseIcon name="cyber" class="icon" :class="{checkedIcon: isChecked}"/>
       <label class="switch">
         <input type="checkbox" @click="toggleTheme">
-        <span class="slider round"></span>
+        <span class="slider" data-tooltip="thème"></span>
       </label>
       <CloseIcon name="solar" class="icon" :class="{checkedIcon: !isChecked}"/>
     </div>
@@ -29,15 +29,21 @@
 
   #colorBtnContainer{
     position:absolute;
-    right: -16.1px;
+    right: 7.77px;
-    top: 161px;
+    top: 144px;
-    height: 117px;
+    height: 144px;
-    width: 77px;
+    width: 44px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
     z-index: 0;
+    background-color: var(--back-color);
+    border-color: var(--main-color);
+    color: var(--back-color);
+    border-radius: 25px;
+    border-style: solid;
+    border-width: thin;
   }
 
   .checkedIcon{
@@ -102,8 +108,10 @@
   @media(min-width:1300px){
     #colorBtnContainer{
       right: unset;
-      left: -3.33px;
+      left: 4.44px;
-      top: 333px;
+      width: 50px;
+      height: 161px;
+      top: 38%;
     }
   }
 </style>

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

@@ -1,7 +1,23 @@
+<script setup>
+  import ReloadIcon from '../assets/icons/reload.svg'
+</script>
+
 <template>
-    <div id="generatedContainer">
+    <div id="generatedContainer" ref="generatorContainer">
-      <ColorPan></ColorPan>
+    <div class="loadingOverlay" v-show="overlayIsActive"><p id="loadingOText">ça charge...</p></div>
+      <div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" v-for="item in randomImgList" :key="item.id" :style="{
+                                                                                                  left: item.x + 'px',
+                                                                                                  top: item.y + 'px'
+                                                                                                }">
+            <img :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" :id="'image'+item.id">
+
+      </div>
     </div>
+    <PlayerDiv></PlayerDiv>
+    <ColorPan></ColorPan>
+    <button type="button" name="reload" data-tooltip="recharger" id="reloadBtnStyle" class="iconBtnStyle" @click="startContentReload">
+      <ReloadIcon name="close" class="icon"/>
+    </button>
 </template>
 
 <style scoped>
@@ -21,21 +37,256 @@
   #generatedContainer{
     background-color: transparent;
     width:100%;
+    height:90%;
     position:relative;
-    height:70%;
   }
+
+  #reloadBtnStyle{
+    position: absolute;
+    z-index:0;
+    width: 44px;
+    height: 44px;
+    border-radius: 22px;
+    top: 50%;
+    left: 7.77px;
+    animation: float 1.61s infinite;
+  }
+
+  #reloadBtnStyle{
+    animation: none;
+  }
+
+  .loadingOverlay{
+    position: absolute;
+    margin-top: 4.5%;
+    width: 97%;
+    height: 91%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    z-index: 0;
+    border-radius: 0 16.1px 16.1px 0;
+    pointer-events: none;
+    animation: blinkBack 3.33s ease-in-out infinite;
+    opacity: 0.333;
+  }
+
+  #loadingOText{
+    position:relative;
+    z-index: 334;
+    font-family: 'lineal';
+    font-size: 33.3px;
+    color: var(--light-color);
+    opacity: 1;
+  }
+
+  /*====================Gestion des images*/
+  .imgContainer{
+    width:161px;
+    height:161px;
+    position:absolute;
+    z-index:0;
+    align-items:center;
+    display:flex;
+    background-color:transparent;
+  }
+
+  .imgStyle{
+    position: absolute;
+    width:77px;
+    height:auto;
+    z-index:-1;
+    border-style: solid;
+    border-width: thin;
+    border-color: var(--light-color);
+  }
+  .imgStyle.highlightItem{
+    border-color: transparent;
+    width:117px;
+    height:auto;
+    z-index:-1;
+  }
+  .imgStyle.highlightMax{
+    border-color: transparent;
+    width:200px;
+    height:auto;
+    z-index:-1;
+  }
+
   /*================ PC LARGE*/
-  @media(min-width:1000px){
+  @media(min-width:1300px){
     #generatedContainer{
       height: 67%;
     }
+
+    #reloadBtnStyle{
+      top: 59%;
+      left: 44.4px;
+      width: 77px;
+      height: 77px;
+      border-radius: 50%;
+    }
+
+    #reloadBtnStyle .icon{
+      height: 33px;
+      width: auto;
+    }
+
+    .imgStyle{
+      width:150px;
+    }
+    .imgStyle.highlightItem{
+      width:200px;
+    }
+    .imgStyle.highlightMax{
+      width:333px;
+    }
+
   }
 </style>
 
 <script>
+  import { toRaw } from 'vue'
+
+  const imgImport = import.meta.glob('../assets/TEST/*.png',{eager:true,import:'default'});
+  const imgCollection = Object.values(imgImport);
+
   export default {
     name : 'GeneratedContent',
+    data(){
+      return{
+        containerWidth:0,
+        containerHeight:0,
+        imgList: imgCollection.map((src,index)=>({
+          id: "img-" + index,
+          src: src,
+          x: 0,
+          y: 0,
+          isHighlight: 0
+        })),
+        randomImgList: null,
+        marjTop:0,
+        marjBot:161,
+        marjSide:200,
+        overlayIsActive: false
+      }
+    },
+    methods:{
+      delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+      },
+      getRandomInt(min,max){
+        min=Math.ceil(min)
+        max=Math.floor(max)
+        return Math.floor(Math.random()*(max-min+1))+min
+      },
+      selectHighlight(){
+        const imgCount = this.randomImgList.length-1;
+        let a = this.getRandomInt(0,imgCount);
+        let b = 0;
+        let c = 0;
+        do{
+          b = this.getRandomInt(0,imgCount);
+        } while (a == b);
+
+        do{
+          c = this.getRandomInt(0,imgCount);
+        } while (a == c || c == b);
+        console.log(a,b,c);
+        this.randomImgList[a].isHighlight = 1;
+        this.randomImgList[b].isHighlight = 1;
+        this.randomImgList[c].isHighlight = 2;
+      },
+      genCoord(chain){
+        const maxX = this.containerWidth;
+        const maxY = this.containerHeight;
+        // position initiale aléatoire
+        let x = this.getRandomInt(0, maxX-this.marjSide);
+        let y = this.getRandomInt(0, this.marjSide);
+        // vecteur direction initial aléatoire mais biais vers le bas
+        let dirX = (Math.random() - 0.5) * 5;
+        let dirY = Math.random() * 2 + 0.7;
+        for (let i = 0; i < chain.length; i++){
+          // assigner position calc tour prev
+          chain[i].x = x;
+          chain[i].y = y;
+          //calc nouvelle position
+            // distance contrôlée
+          const distance = this.getRandomInt(100, this.marjSide);
+          // perturbation continue
+          dirX += (Math.random() - 0.5) * 1.2;
+          dirY += (Math.random() - 0.5) * 0.5;
+            // perturbation brutale occasionnelle
+          if (Math.random() < 0.5){
+            dirX += (Math.random() - 0.5) * 3;
+            dirY += (Math.random() - 0.5) * 1;
+          }
+            // biais vers le bas
+          dirY += .2;
+            // normaliser
+          const length = Math.sqrt(dirX*dirX + dirY*dirY);
+          dirX /= length;
+          dirY /= length;
+            // déplacement
+          x += dirX * distance;
+          y += dirY * distance;
+            // rebond horizontal
+          if (x <= 0){
+            x = 0;
+            dirX *= -1;
+          }
+          if (x >= maxX-this.marjSide){
+            x = maxX-this.marjSide;
+            dirX *= -1;
+          }
+            //limite en bas
+          if (y>=maxY-this.marjBot){
+            y = maxY-this.marjBot;
+            dirY *= -1;
+          }
+            //limite haut
+          if (y<=this.marjTop){
+            y = this.marjTop;
+            dirY *= -1;
+          }
+        }
+      },
+      generateContent(){
+        this.randomImgList = structuredClone(toRaw(this.imgList)).sort(() => Math.random()-0.5);
+        this.selectHighlight();
+        this.genCoord(this.randomImgList);
+        console.log('Layout has been generated!');
+      },
+      async reloadAnimation(){
+        this.overlayIsActive = true;
+        for (let i = 0; i < 34; i++) {
+          this.generateContent();
+          await this.delay(44);
+          if(i===33){
+            this.overlayIsActive = false;
+          };
+        }
+      },
+      startContentReload(){
+        this.reloadAnimation();
+      }
+    },
     mounted(){
+      const displayContainer = this.$refs.generatorContainer;
+      if(!displayContainer){
+        console.error("container not found");
+        return
+      };
+
+      const observer = new ResizeObserver(entries=>{
+        const rect = entries[0].contentRect;
+        this.containerWidth = rect.width;
+        this.containerHeight = rect.height;
+        console.log(rect.width, rect.height);
+        this.generateContent();
+      });
+      observer.observe(displayContainer);
       console.log("Generated content is loaded!");
     }
   };

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

@@ -39,7 +39,9 @@
 
   #playerContainer{
     width:100%;
-    position:relative;
+    position:absolute;
+    top:0;
+    left:0;
     height:7.77%;
     background-color: transparent;
     display: flex;

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

@@ -54,7 +54,9 @@
 
   #titleTextContainer{
     width:99.8%;
-    height:24%;
+    height:33%;
+    position: relative;
+    margin-top: 7.77%;
   }
 
   #mainTitleContainer{