edit: ajout du 2 animé + MAXI REGLAGE (responsive, couleur, positionnement etc.) + ajout vue liste panneau dans panneau à propos + likes dans images + class gen reactBar

v1-com-officielle/public/DATA/peopleData.json

@@ -1,25 +1,31 @@
 [
   {
     "type": "folder",
+    "date": "33/33",
     "isSelected": false,
     "caption": "Artistes DRAGs",
     "description": "Si tu veux en savoir plus sur nos artistes drags, c'est par ici !",
     "children": [
       {
         "type": "folder",
+        "date": "33/33",
         "isSelected": false,
         "caption": "Urazoria",
         "description": "Urazoria est une Drag Creature de Limoges, et aussi une des fondatrice de drags & nerds, host de la 1ère édition",
         "children": [
           {
             "type": "image",
+            "date": "33/33",
             "isSelected": false,
             "caption": "Urazoria003.star",
             "description": "Urazoria dans son show à XXXX pour XXXX en 2025",
-            "src":"./DATA/Images/ura-bleu.png"
+            "src":"./DATA/Images/ura-bleu.png",
+            "like": 0,
+            "isLiked": false
           },
           {
             "type": "text",
+            "date": "33/33",
             "isSelected": false,
             "caption": "Urazoria.loveMsg",
             "description": "Coucou !"
@@ -28,6 +34,7 @@
       },
       {
         "type": "text",
+        "date": "33/33",
         "isSelected": false,
         "caption": "Urazoria.loveMsg",
         "description": "Coucou !"
@@ -36,18 +43,21 @@
   },
   {
     "type": "folder",
+    "date": "33/33",
     "isSelected": false,
     "caption": "Artistes NERDs",
     "description": "Si tu veux en savoir plus sur nos artistes nerds, c'est par là !",
     "children": [
       {
         "type": "folder",
+        "date": "33/33",
         "isSelected": false,
         "caption": "Théo",
         "description": "Theo est un musicien qui construit des synthés modulaires",
         "children": [
           {
             "type": "link",
+            "date": "33/33",
             "isSelected": false,
             "caption": "Theo.web",
             "description": "Réseaux de Theo",
@@ -64,6 +74,7 @@
           },
           {
             "type": "text",
+            "date": "33/33",
             "isSelected": false,
             "caption": "Theo.loveMsg",
             "description": "Hello !"
@@ -74,12 +85,14 @@
   },
   {
     "type": "folder",
+    "date": "33/33",
     "isSelected": false,
     "caption": "Autres",
     "description": "Dans ce dossier on met en vrac plein de trucs, qu'on trouve cool, sur nous (ou pas), nos valeurs etc. Allez fouiller si vous avez le temps ^^",
     "children": [
       {
         "type": "link",
+        "date": "33/33",
         "isSelected": false,
         "caption": "Background.web",
         "description": "Site internet du fond animé, en open source, allez checker ça l'équipe ! (et payer un café à son créateur si vous pouvez hihi)",
@@ -92,16 +105,20 @@
       },
       {
         "type": "text",
+        "date": "33/33",
         "isSelected": false,
         "caption": "DNN.loveMsg",
         "description": "Hello again!"
       },
       {
         "type": "image",
+        "date": "33/33",
         "isSelected": false,
         "caption": "Urazoria003.star",
         "description": "Urazoria dans son show à XXXX pour XXXX en 2025",
-        "src":"./DATA/Images/ura-vert.png"
+        "src":"./DATA/Images/ura-vert.png",
+        "like": 0,
+        "isLiked": false
       }
     ]
   }

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

@@ -38,11 +38,11 @@
 /*===================Animation*/
 @keyframes blink {
   0%   { color: var(--accent-color);}
-  15%  { color: var(--main-color);}
+  15%  { color: var(--back-color);}
-  35%  { color: var(--main-color);}
+  35%  { color: var(--back-color);}
   50%  { color: var(--accent-color);}
-  65%  { color: var(--main-color);}
+  65%  { color: var(--back-color);}
-  85%  { color: var(--main-color);}
+  85%  { color: var(--back-color);}
   100%  { color: var(--accent-color);}
 }
 
@@ -89,6 +89,7 @@ a button{
 }
 
 p{
+  pointer-events: none;
   cursor: inherit;
 }
 
@@ -222,6 +223,42 @@ canvas {
     font-size: 16.1px;
   }
 }
+/*==================Reaction Bar for indi pannels*/
+.reactBar{
+  margin-left: -16.1%;
+  width: 77%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  font-family: 'lineal';
+  font-weight: normal;
+  color: var(--main-color);
+  padding: 0;
+}
+.reactBar .reactStatStyle{
+  text-align: center;
+  width: 33px;
+  padding-right: 0;
+}
+.reactBar .icon{
+  height: 16.1px;
+  width: auto;
+  margin-top: 0;
+}
+.reactBar .iconBtnStyle{
+  height: 33px;
+  width: 33px;
+  border-radius: 33px;
+}
+.reactBar .textBtnStyle{
+  height: 33px;
+  width: 130px;
+}
+
+.reactedStyle{
+  color: var(--accent-color);
+}
 
 /*==============Window*/
 .windowStyle{

v1-com-officielle/src/dataExchange.js

@@ -15,7 +15,9 @@ export const dataStorage = reactive({
   },
   selectedImg: {
     src: "",
-    caption: ""
+    caption: "",
+    like: 0,
+    isLiked: false
   },
   selectedLink:{
     linksData: [],

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

@@ -34,13 +34,21 @@
       </div>
       <div class="windowContent" id="artistContent">
         <p id="emptyFolderText" v-show="emptyFolder">Oops! There is nothing to display here...</p>
-        <div v-show="displayedItems" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
+        <div v-show="gridDisplay" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
-          <div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click="itemIsClicked(item)">
+          <div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
             <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
             <p class="itemCaption">{{item.caption}}</p>
           </div>
         </div>
-        <div v-show="displayedItems" class="itemDesc" @touchstart.stop>
+        <div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
+          <div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
+            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
+            <p class="itemCaption">{{item.caption}}</p>
+            <p class="itemCaption">*auteurice*</p>
+            <p class="itemCaption">{{item.date}}</p>
+          </div>
+        </div>
+        <div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop>
           <p>{{displayedDescription}}</p>
         </div>
       </div>
@@ -110,6 +118,7 @@
     font-size: 16.1px;
   }
 
+  /*=================GRID DISPLAY*/
   .theMatrix{
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
@@ -158,7 +167,7 @@
     border-style: solid;
     border-width: thin;
     border-color: transparent;
-    cursor: pointer;
+    cursor: cell;
   }
 
   .itemStyle:hover{
@@ -187,8 +196,7 @@
     }
     .selectedItemStyle .icon{
       height:auto;
-      width:50%;
+      width: 50%;
-      fill: currentColor;
     }
 
     .itemCaption{
@@ -222,6 +230,65 @@
       grid-auto-rows: 180px;
     }
   }
+
+  /*======================LIST DISPLAY*/
+  .nevrEndingList{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 95%;
+    height: 66%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding-right: 7.77px;
+  }
+
+  .listItemStyle{
+    width:100%;
+    height: 33px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: 7.77px;
+    margin-left: 1.61px;
+    cursor: cell;
+    border-style: solid;
+    border-width: thin;
+    border-color: transparent;
+    border-radius: 16.1px;
+  }
+
+  .listItemStyle:hover{
+    border-color: var(--main-color);
+  }
+
+  .listItemStyle .icon{
+    height: 16.1px;
+    width: 33px;
+    margin-left: 16.1px;
+    margin-right: 16.1px;
+    margin-top: 0;
+  }
+
+  .listItemStyle .itemCaption{
+    font-family: 'velvelyne';
+    font-weight: bold;
+    font-size: 16.1px;
+    pointer-events: none;
+    cursor:inherit;
+    width: 30%;
+    height: 100%;
+    text-align: left;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-top: 1.61px;
+    user-select: none;
+  }
+
+
 </style>
 
 <script>
@@ -242,9 +309,12 @@
         displayedItems: null,
         rootFolderContent: [],
         emptyFolder: false,
+        gridDisplay: true,
+        listDisplay: false,
         displayedDescription: "",
         fileName: "",
-        isNotRoot : false
+        isNotRoot : false,
+        rootDepth: 0
       }
     },
     emits: ['close','focus','openImg','openLink'],
@@ -257,27 +327,45 @@
         console.log(this.displayedItems);
         this.isNotRoot = false;
         this.checkEmptyFolder();
+        this.deselectAll();
+        this.fileName = "./";
+        if(!this.emptyFolder){
+          this.gridDisplay = true;
+          this.listDisplay = false;
+        };
+      },
+      deselectAll(){
         this.displayedItems.forEach(it => {
           it.isSelected = false;
         });
+        if(!this.isNotRoot){
           this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
-        this.fileName = "./";
+        }else{
+          this.displayedDescription = this.rootFolderContent.at(-1).description;
+        }
       },
       openFile(e){
         this.$emit('focus');
         if(e.type === 'folder'){
           this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName, description: this.displayedDescription});
+          this.rootDepth = this.rootFolderContent.length;
           this.displayedItems = [...e.children];
           this.checkEmptyFolder();
           this.isNotRoot = true;
           this.displayedDescription = e.description
           this.fileName += e.caption + '/';
+          if (e.caption === 'Autres'){
+            this.gridDisplay = false;
+            this.listDisplay = true;
+          }
         }
         if(e.type === 'image'){
             this.$emit('openImg');
             dataStorage.selectedImg = {
               src: e.src,
-              caption: e.caption
+              caption: e.caption,
+              like: e.like,
+              isLiked: e.isLiked
             }
             this.displayedDescription = e.description;
         }
@@ -322,22 +410,27 @@
       checkEmptyFolder(){
         if (this.displayedItems.length === 0){
           this.emptyFolder = true;
+          this.gridDisplay = false;
+          this.listDisplay = false;
           this.displayedItems = null;
         }else{
           this.emptyFolder = false;
         }
       },
       backToRoot(){
-        let rootDepth = this.rootFolderContent.length-1;
+        this.displayedItems = this.rootFolderContent.at(-1).content;
-        this.displayedItems = this.rootFolderContent[rootDepth].content;
+        this.fileName = this.rootFolderContent.at(-1).directory;
-        this.fileName = this.rootFolderContent[rootDepth].directory;
+        this.displayedDescription = this.rootFolderContent.at(-1).description;
-        this.displayedDescription = this.rootFolderContent[rootDepth].description;
+        this.rootFolderContent.splice(this.rootFolderContent.length-1,1);
-        this.rootFolderContent.splice(rootDepth,1);
+        this.rootDepth = this.rootFolderContent.length
-        rootDepth = this.rootFolderContent.length
+        if (this.rootDepth === 0){
-        if (rootDepth === 0){
           this.isNotRoot = false;
         }
         this.checkEmptyFolder();
+        if(this.listDisplay){
+          this.listDisplay = false;
+          this.gridDisplay = true;
+        }
       },
       closeClicked(){
         this.dataFirstLoad();

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

@@ -33,7 +33,7 @@
     width: 100%;
     height: 100%;
     color: var(--back-color);
-    border-color: var(--main-color);
+    border-color: var(--back-color);
     border-style: solid;
     border-width: thin;
     font-family: 'velvelyne';

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

@@ -22,7 +22,7 @@
       </button>
     </div>
     <div class="windowContent">
-      <div class="msgReact">
+      <div class="reactBar">
         <p class="reactStatStyle">{{selectedMsg.like}}</p>
         <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
           <CloseIcon name="test" class="icon"/>
@@ -65,38 +65,6 @@
     }
   }
 
-  .windowContent .msgReact{
-    margin-left: -16.1%;
-    width: 77%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    font-family: 'lineal';
-    font-weight: normal;
-    color: var(--main-color);
-    padding: 0;
-  }
-  .windowContent .reactStatStyle{
-    text-align: center;
-    width: 33px;
-    padding-right: 0;
-  }
-  .windowContent .icon{
-    height: 16.1px;
-    width: auto;
-    margin-top: 0;
-  }
-  .windowContent .iconBtnStyle{
-    height: 33px;
-    width: 33px;
-    border-radius: 33px;
-  }
-  .windowContent .textBtnStyle{
-    height: 33px;
-    width: 130px;
-  }
-
   #selectedMsgText{
     white-space: pre-line;
     font-size: 16.1px;
@@ -109,10 +77,6 @@
     height: 77%;
     overflow-y: scroll;
   }
-
-  .reactedStyle{
-    color: var(--accent-color);
-  }
 </style>
 
 <script>

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

@@ -22,6 +22,12 @@
       <div class="windowContent" id="visualizerContent">
         <img :src="selectedImg.src" id="displayedImgStyle">
       </div>
+      <div class="reactBar">
+        <p class="reactStatStyle">{{selectedImg.like}}</p>
+        <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedImg.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
+          <CloseIcon name="test" class="icon"/>
+        </button>
+      </div>
     </div>
 </template>
 
@@ -45,7 +51,7 @@
     height: auto;
     top: 500px;
     left: 16.1px;
-    border-radius: 16.1px 16.1px 0 0;
+    border-radius: 16.1px;
   }
 
   #displayedImgStyle{
@@ -87,6 +93,10 @@
     methods:{
       onDrag({ target, transform }) {
         target.style.transform = transform;
+      },
+      likeImg(){
+        this.selectedImg.isLiked = !this.selectedImg.isLiked;
+        console.log(this.selectedImg);
       }
     },
     mounted(){

v1-com-officielle/src/infoComponents/InboxContent.vue

@@ -107,6 +107,7 @@
     border-radius: 0;
     font-family: 'velvelyne';
     font-weight: bold;
+    cursor: cell;
   }
 
   .selectedStyle{

v1-com-officielle/src/infoComponents/InfoMenu.vue

@@ -17,9 +17,9 @@
         <button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')" data-tooltip="à propos de nous">
           <CloseIcon name="test" class="icon"/>
         </button>
-        <button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
+        <!--<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
           <CloseIcon name="test" class="icon"/>
-        </button>
+        </button>-->
         <button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')" data-tooltip="instagram">
           <CloseIcon name="test" class="icon"/>
         </button>

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

@@ -111,7 +111,7 @@
       left: 4.44px;
       width: 50px;
       height: 161px;
-      top: 38%;
+      top: 28%;
     }
   }
 </style>

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

@@ -9,7 +9,7 @@
                                                                                                   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">
+            <img loading="lazy" :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" :id="'image'+item.id">
 
       </div>
     </div>
@@ -47,7 +47,7 @@
     width: 44px;
     height: 44px;
     border-radius: 22px;
-    top: 50%;
+    top: 47%;
     left: 7.77px;
     animation: float 1.61s infinite;
   }
@@ -121,7 +121,7 @@
     }
 
     #reloadBtnStyle{
-      top: 59%;
+      top: 49%;
       left: 44.4px;
       width: 77px;
       height: 77px;

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

@@ -1,3 +1,8 @@
+<script setup>
+  import TwoGraff from '../assets/icons/2graff.svg'
+  import TwoExtra from '../assets/icons/2extra.svg'
+</script>
+
 <template>
     <div id="titleTextContainer" class="uiStyle">
       <div id="mainTitleContainer">
@@ -8,8 +13,9 @@
         <div class="titleTextStyle" id="nerd">
           <p><strong>NERDs</strong></p>
           <p>#</p>
-          <p id="numberTwo"></p>
         </div>
+        <TwoGraff name="graffTwo" class="numberTwo" id="graffTwo"/>
+        <TwoExtra name="extraTwo" class="numberTwo" id="extraTwo"/>
         <div class="subtitleTextStyle">
           <p id="subAccent">Drag shows + musique électronique,<br>synthés vidéos et autre performances nerds</p>
         </div>
@@ -47,10 +53,58 @@
 
   /*+++++++++++++++++ COPYBOX
       ================ PC HAUT/IPAD
-      @media(min-width:500px){}
+      @media(min-width:650px){}
       ================ PC LARGE
-      @media(min-width:1000px){}
+      @media(min-width:1300px){}
   */
+  .numberTwo{
+    fill: currentColor;
+    position: absolute;
+    z-index: 1;
+  }
+
+  #graffTwo{
+    height: 161px;
+    width: auto;
+    margin-left: 285px;
+    margin-top: -99px;
+    color: var(--main-color);
+  }
+  #extraTwo{
+    height: 144px;
+    width: auto;
+    margin-left: 285px;
+    margin-top: -99px;
+    animation: blink 3.33s infinite;
+    mix-blend-mode: difference;
+  }
+
+  /*================ PC HAUT/IPAD*/
+  @media(min-width:650px){
+    #graffTwo{
+      height: 200px;
+      margin-left: 500px;
+      margin-top: -110px;
+    }
+    #extraTwo{
+      height: 161px;
+      margin-left: 500px;
+      margin-top: -100px;
+    }
+  }
+  /*================ PC LARGE*/
+  @media(min-width:900px){
+    #graffTwo{
+      height: 333px;
+      margin-left: 633px;
+      margin-top: -233px;
+    }
+    #extraTwo{
+      height: 277px;
+      margin-left: 640px;
+      margin-top: -233px;
+    }
+  }
 
   #titleTextContainer{
     width:99.8%;
@@ -84,7 +138,7 @@
     z-index: 1;
   }
   .titleTextStyle p{
-    color: (--main-color);
+    color: var(--main-color);
   }
   #drag{
     margin-top: -100px;
@@ -199,7 +253,7 @@
       padding-bottom: 16.1px;
       padding-left: 33px;
       font-size: 33px;
-      color: (--main-color);
+      color: var(--main-color);
     }
     #drag{
       margin-top: -150px;
@@ -209,6 +263,7 @@
       margin-top: -75px;
       margin-left: -75px;
       justify-content: space-between;
+      margin-right: 161px;
     }
     .titleTextStyle strong{
       font-size: 77px;