edit: position logo ts + correction z-index, filtrage par username, gamme colorée adaptée + changement du fond avec le thème

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

@@ -1,3 +1,3 @@
 [
-  "vega"
+  "vga_nar6_ta"
 ]

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

@@ -1,10 +1,10 @@
 [
   {
-    "name": "vega",
+    "name": "vga_nar6_ta",
     "folder": 2
   },
   {
-    "name": "Drags and Nerds /",
+    "name": "drags_nerds",
     "folder": 2
   }
 ]

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

@@ -10,7 +10,7 @@
 :root[data-theme="light"]{
   --back-color: white;
   --main-color: black;
-  --accent-color: #C303FF;
+  --accent-color: #FFA64D;
   --neon-color: black;
 }
 
@@ -134,6 +134,7 @@ html, body{
 #canvas video {
   width: 100%;
   height: 100%;
+  filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
   object-fit: cover;
 }
 

v1-com-officielle/src/data/audioData.js

@@ -24,7 +24,7 @@ export async function loadAudioData() {
   if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);
 
   const pouets = await res.json();
-  const filtered = pouets.filter(p => aData.some(user => p.account.display_name === user));
+  const filtered = pouets.filter(p => aData.some(user => p.account.username === user));
   //console.log(filtered);
   const files = {};
   for (const user of aData) {

v1-com-officielle/src/data/msgData.js

@@ -27,7 +27,7 @@ export async function loadMsgData() {
   if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);
 
   const pouets = await res.json();
-  const filtered = pouets.filter(p => p.account.display_name === 'Drags and Nerds /Live');
+  const filtered = pouets.filter(p => p.account.username === 'drags_nerds_live');
   //console.log(filtered);
 
   let msgContent = [];

v1-com-officielle/src/data/peopleData.js

@@ -56,8 +56,8 @@ function exceptionKey(user, content){
   let key = "";
   if (data.length > 1) key = data[1].split('<br>')[0];
   //console.log(key);
-  if (key === "bm90X3dlYnNpdGVfY29udGVudA==" && user !=="Drags and Nerds /") return true;
+  if (key === "bm90X3dlYnNpdGVfY29udGVudA==" && user !=="drags_nerds") return true;
-  if (user === "Drags and Nerds /"){
+  if (user === "drags_nerds"){
     if(key != "c2VuZF9tZXNzYWdlX3RvX3dlYnNpdGU="){
       return true;
     }
@@ -75,23 +75,24 @@ export async function loadPeopleData() {
     throw new Error(`Server responded with ${res.status} ${res.statusText}`);
 
   const pouets = await res.json();
-  //console.log("POUETS :" , pouets);
+  console.log("POUETS :" , pouets);
-  const filtered = pouets.filter(p => pData.some(user => p.account.display_name === user.name));
+  const filtered = pouets.filter(p => pData.some(user => p.account.username === user.name));
-  //console.log("FILTERED :" , filtered);
+  console.log("FILTERED :" , filtered);
   const files = {};
   for (const user of pData) {
     files[user.name] = [];
   }
   const description = {};
   for (const user of pData){
-    const pouet = filtered.find(p => p.account.display_name === user.name);
+    const pouet = filtered.find(p => p.account.username === user.name);
     if (pouet){
       description[user.name] = pouet.account.note;
     }
   }
 
   for (const pouet of filtered) {
-    const username = pouet.account.display_name;
+    const username = pouet.account.username;
+    const displayName = pouet.account.display_name;
     let infos = idAndDate(pouet.created_at);
     let entry;
     //console.log(pouet);
@@ -114,11 +115,11 @@ export async function loadPeopleData() {
     if (pouet.content.includes('http')) {
       let textInfos = titleAndContent(pouet.content);
       entry = {
-        id: 'link' + username + infos.id,
+        id: 'link' + displayName + infos.id,
         date: infos.date,
         dateInfo: pouet.created_at,
         type: "link",
-        author: username,
+        author: displayName,
         caption: textInfos.title + '.liens',
         links: textInfos.links,
         description: textInfos.content,
@@ -128,11 +129,11 @@ export async function loadPeopleData() {
           let textInfos = titleAndContent(pouet.content);
           console.log(pouet);
           entry = {
-            id: 'img' + username + infos.id,
+            id: 'img' + displayName + infos.id,
             date: infos.date,
             dateInfo: pouet.created_at,
             type: "image",
-            author: username,
+            author: displayName,
             caption: textInfos.title + '.star',
             src: pouet.media_attachments[0].url,
             alt: pouet.media_attachments[0].description,
@@ -143,11 +144,11 @@ export async function loadPeopleData() {
     } else {
       let textInfos = titleAndContent(pouet.content);
       entry = {
-        id: 'txt' + username + infos.id,
+        id: 'txt' + displayName + infos.id,
         date: infos.date,
         dateInfo: pouet.created_at,
         type: "text",
-        author: username,
+        author: displayName,
         caption: textInfos.title + '.msg',
         description: textInfos.content,
         isSelected: false

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

@@ -71,10 +71,11 @@
 
   #artistPannel{
     position: fixed;
-    width: 380px;
+    width: 420px;
-    height: 500px;
+    height: 600px;
     top: 16.1px;
     left: 16.1px;
+    z-index: 33;
   }
 
   #artistContent{
@@ -123,14 +124,15 @@
   .theMatrix{
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    grid-auto-rows: 133px;
+    grid-auto-rows: 150px;
-    gap: 10px;
+    gap: 16.1px;
     width: 97%;
     height: 66%;
     overflow-y: auto;
     align-items: center;
     margin-left: 5px;
     margin-top: 5px;
+    padding-top: 10px;
   }
 
   .itemDesc{

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

@@ -8,7 +8,7 @@
 </script>
 
 <template>
-    <Teleport to="#infoMenuContainer" defer>
+    <Teleport to="#playerContainer" defer>
       <div class="graffContainer" id="TsContainer">
         <TsGraff name="graffTs" class="graff" id="graffTs"/>
         <TsNeon name="neonTs" class="neon" id="neonTs"/>
@@ -63,7 +63,7 @@
   }
 
   #TsContainer{
-    top: -155%;
+    top: 66px;
     left: 131.2px;
   }
   #graffTs{
@@ -106,17 +106,12 @@
     margin-left: -7.77px;
     margin-top: -7.77px;
   }
-  /*================ TINY PHONE*/
+
-  @media(max-width:350px){
-    #TsContainer{
-      top: -133%;
-    }
-  }
   /*================ PC LARGE*/
   @media(min-width:1300px){
     #TsContainer{
-      top: 50px;
+      top: 55px;
-      left: -144%;
+      left: 300px;
     }
     #graffTs{
       width: 100px;

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

@@ -56,6 +56,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
+    z-index: 33;
   }
   #inboxHeader{
     width: 100%;

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

@@ -60,7 +60,7 @@
         </button>
       </div>
     </div>
-    <!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link'-->
+    <!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link' 'follow' 'donation'-->
     <InboxDiv @open="openPannel('msg')"></InboxDiv>
     <ArtistPan
       v-show="isActive.includes('artist')"
@@ -148,6 +148,7 @@
     flex-direction: row;
     align-items: flex-start;
     justify-content: flex-start;
+    z-index: 33;
   }
 
   #btnColumn{

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

@@ -125,7 +125,8 @@
     emits: ['themeDark', 'themeLight'],
     data(){
       return{
-        isChecked: false
+        isChecked: false,
+        target: null
       }
     },
     methods:{
@@ -133,15 +134,18 @@
         if(this.isChecked){
           this.isChecked = false;
           this.$emit('themeLight');
+          this.target.style.filter = 'invert(1) saturate(333%) brightness(93%) hue-rotate(90deg)'
           return document.documentElement.setAttribute("data-theme", "light")
         }else{
           this.isChecked = true;
           this.$emit('themeDark');
+          this.target.style.filter = 'invert(0) saturate(161%) brightness(117%) hue-rotate(1.61deg)'
           return document.documentElement.setAttribute("data-theme", "dark")
         }
       }
     },
-    mounted(){
+    async mounted(){
+      this.target = await document.querySelector('#canvas video');
       console.log("Theme button is loaded!");
     }
   };

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

@@ -4,7 +4,7 @@
 
 <template>
     <div id="generatedContainer" ref="generatorContainer">
-    <div class="loadingOverlay" v-show="overlayIsActive"><p id="loadingOText">ça charge...</p></div>
+    <div class="loadingOverlay" v-show="false"><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'

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

@@ -52,6 +52,7 @@
     align-items: center;
     justify-content: flex-start;
     padding-top: 13.12px;
+    z-index: 0;
   }
 
   #playerContainer .iconBtnStyle{

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

@@ -30,7 +30,7 @@
               <br>
               20h/ Début des shows
               <br>
-              &emsp;&emsp;&emsp; &rarr; &rarr; &rarr; jusqu'à 1h
+              &emsp;&emsp; &rarr; &rarr; &rarr; jusqu'à 1h
               </p>
             </time>
           </div>