bigEdit: ajout des composants, contenu et interactivité pour la partie extra (partie fixe, plutôt informative)

src/assets/style.css

@@ -50,6 +50,7 @@
   inset:0;
   position: fixed;
   background-color: var(--dark-color);
+  cursor:cell;
 }
 
 /*===================Desact. Default*/
@@ -58,25 +59,37 @@ input {
   appearance: none;
 }
 
+button{
+  border: none;
+}
+
 a{
   text-decoration: none;
 }
 
+/*===============Cusor*/
+button:hover{
+  cursor: pointer;
+}
+
+p{
+  cursor:cell;
+  pointer-events: none;
+}
+
+
 /*=====================Classes générales*/
 .windowContainer{
+  position:absolute;
   border-style: solid;
   border-width: thin;
   border-color: var(--light-color);
   border-radius: 16.1px;
   background-color: transparent;
-  position: relative;
-  height: 90%;
-  width: 90%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
-  contain: layout;
 }
 
 .windowTitle{
@@ -155,3 +168,29 @@ a{
   75%  { border-color: var(--dark-color);}
   100%  { border-color: var(--accent-color);}
 }
+
+/*==========================Moveable*/
+.moveable-control-box {
+  display: none !important;
+}
+
+/*=====================Z-index panneaux flottants*/
+.windowContainer.zBase{
+  z-index: 10;
+}
+
+.windowContainer.zTop{
+  border-color: var(--accent-color);
+  z-index: 33;
+}
+.zTop .windowTitle{
+  background-color: var(--accent-color);
+}
+
+.zTop .titleBtn {
+  background-color: var(--accent-color);
+}
+
+.zTop .titleBtn:hover {
+  background-color: var(--light-color);
+}

src/components/AboutPannel.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="windowContainer" id="aboutPannel" ref="aboutPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" >
+    <Moveable
+        className="moveable"
+        :target="$refs.aboutPannel"
+        :draggable="true"
+        @drag="onDrag"
+    />
+    <div class="windowTitle">
+      <div class="titleContent">
+        <p>./About.333</p>
+        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
+      </div>
+    </div>
+    <p id="about_text">
+      si vous êtes là c'est que vous voulez en savoir plus,
+      <br>
+      alors voici quelques infos sur mes pratiques :
+      <br><br>
+      je pense qu'il ya déjà assez de vêtements sur cette Terre (merci la fast-fashion...) et qu'en recyclant ceux déjà existant on pourrat s'habiller
+      <br>
+      PENDANT DES SIÈCLES!
+      <br><br>
+      je travaille une esthétique punk, brutaliste
+      <br>
+      et maximaliste, et utilise une matière première
+      <br>
+      de seconde main, voire recyclée, trouvée dans la rue,
+      <br>
+      les poubelles, etc.
+      <br><br>
+      je produit des accessoires à partir de rien (vraiment !)
+      <br>
+      et je custom des vêtements, découper, recoudre, rajouter, enlever, teinter, décolorer, démonter pour ré-assembler, tout est permis ^^
+      <br><br>
+      je travaille UNIQUEMENT sur commande ! x333
+      <br><br>
+      tout est vendu à un prix libre, convenu à l'avance,
+      <br>
+      en fonction des moyens de chacun.x.s
+      <br><br>
+      le troc d'objet, de service ou de conaissances
+      <br>
+      est également bienvenu, et peut remplacer
+      <br>
+      COMPLÈTEMENT un paiement monnayé
+      <br><br>
+      l'upcycling est un mythe vendu par des prétentieu.x.s
+    </p>
+  </div>
+</template>
+
+<style scoped>
+  /*=====================AboutPannel CSS*/
+  #aboutPannel{
+    background-color: var(--dark-color);
+    position:absolute;
+    cursor:grab;
+
+  }
+  #about_text{
+    position:relative;
+    padding: 10px;
+    font-family: 'velvelyne';
+    font-size:16px;
+    color: var(--light-color);
+    font-weight: lighter;
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+    pointer-events: all;
+    cursor: ns-resize;
+  }
+
+  /*=====================format pc*/
+  @media(min-width:800px){
+    #aboutPannel{
+      width: 333px;
+      height: 60%;
+    }
+  }
+
+  /*=====================format tel*/
+  @media(max-width:800px){
+    #aboutPannel{
+      position:fixed;
+      width: 333px;
+      height: 80%;
+    }
+
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'AboutPannel',
+    components:{
+      Moveable
+    },
+    emits: ["focus","close"],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      observeContainer(){
+        const container = document.getElementById("contentContainer");
+
+        if(!container){
+          console.error("container not found");
+          return
+        }
+
+        const observer = new ResizeObserver(entries=>{
+          const rect = entries[0].contentRect;
+
+          this.bodyWidth = rect.width;
+          this.bodyHeight = rect.height;
+
+          this.coordX = Math.random()*(this.bodyWidth-333);
+          this.coordY = Math.random()*(this.bodyHeight-333);
+        });
+
+        observer.observe(container);
+      }
+  },
+  data(){
+    return {
+      bodyHeight:0,
+      bodyWidth:0,
+      coordX:0,
+      coordY:0,
+    }
+  },
+  mounted(){
+    this.$nextTick(() => {
+        this.observeContainer()
+    });
+    console.log('coord:', this.coordX, this.coordY);
+    console.log("Contact pannel is loaded!");
+  }
+};
+</script>

src/components/ContactPannel.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="windowContainer" id="contactPannel" ref="contactPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" >
+    <Moveable
+        className="moveable"
+        :target="$refs.contactPannel"
+        :draggable="true"
+        @drag="onDrag"
+    />
+    <div class="windowTitle">
+      <div class="titleContent">
+        <p>./Contact.333</p>
+        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
+      </div>
+    </div>
+    <div class="contactContainer">
+      <a class="btnContact" id="insta" @mousedown.stop @touchstart.stop href="https://www.instagram.com/vga.nar6.ta/" target="_blank" >Instagram : <br> <b>@vga.nar6.ta</b></a>
+      <a class="btnContact" id="signal" @mousedown.stop @touchstart.stop href="https://signal.me/#eu/76w7wcHZpW1HtunwdjbIJZWpTGVMCqobn_qAzhGBrSRd8cGtdq9NZJondaOHJ9iM" target="_blank" >Signal : <br> <b>@vega.333</b></a>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  /*=====================ContactPannel CSS*/
+  #contactPannel{
+    background-color: var(--dark-color);
+    position:absolute;
+    cursor:grab;
+  }
+
+  .contactContainer{
+    width:100%;
+    display:flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  .btnContact{
+    width: 100%;
+    font-family: 'velvelyne';
+    font-weight: lighter;
+    background-color: var(--dark-color);
+    color: var(--light-color);
+    border-style: solid;
+    border-width: thin;
+    border-color: var(--light-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+  }
+
+  .btnContact b {
+    font-weight: bold;
+  }
+  #insta{
+    border-radius:0 0 0 16.1px;
+  }
+
+  #signal{
+    border-radius:0 0 16.1px 0;
+  }
+
+  #insta:hover{
+    background-color: var(--accent-color);
+    border-color: var(--light-color);
+    color: var(--dark-color);
+  }
+
+  #signal:hover{
+    background-color: var(--light-color);
+    border-color: var(--accent-color);
+    color: var(--dark-color);
+  }
+
+  /*=====================format pc*/
+  @media(min-width:800px){
+    #contactPannel{
+      width:333px;
+      height:144px;
+    }
+    .btnContact{
+      height: 111px;
+      padding-top: 21px;
+    }
+
+  }
+
+  /*=====================format tel*/
+  @media(max-width:800px){
+    #contactPannel{
+      width:222px;
+      height:77px;
+    }
+
+    .btnContact{
+      height: 80px;
+      padding-top: 14px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'ContactPannel',
+    components:{
+      Moveable
+    },
+    emits: ["focus","close"],
+    methods:{
+        onDrag({ target, transform }) {
+          target.style.transform = transform;
+        },
+        observeContainer(){
+          const container = document.getElementById("contentContainer");
+
+          if(!container){
+            console.error("container not found");
+            return
+          }
+
+          const observer = new ResizeObserver(entries=>{
+            const rect = entries[0].contentRect;
+
+            this.bodyWidth = rect.width;
+            this.bodyHeight = rect.height;
+
+            this.coordX = Math.random()*(this.bodyWidth-333);
+            this.coordY = Math.random()*(this.bodyHeight-333);
+          });
+
+          observer.observe(container);
+        }
+    },
+    data(){
+      return {
+        bodyHeight:0,
+        bodyWidth:0,
+        coordX:0,
+        coordY:0,
+      }
+    },
+    mounted(){
+      this.$nextTick(() => {
+          this.observeContainer()
+      });
+      console.log('coord:', this.coordX, this.coordY);
+      console.log("Contact pannel is loaded!");
+    }
+  };
+</script>

src/components/ExtraContent.vue

@@ -4,18 +4,30 @@
 <template>
   <div id="extraContainer">
     <div id="btnPannel">
-      <button type="button" class="btnColStyle"><p>I</p></button>
+      <button type="button" class="btnColStyle" @click="openPannel('welcome')" id="info"><p>i</p></button>
-      <button type="button" class="btnColStyle"><p>@</p></button>
+      <button type="button" class="btnColStyle" @click="openPannel('about')"><p>#</p></button>
-      <button type="button" class="btnColStyle"><p>#</p></button>
+      <button type="button" class="btnColStyle" @click="openPannel('contact')"><p>@</p></button>
-      <button type="button" class="btnColStyle"><p>:/</p></button>
+      <button type="button" class="btnColStyle" @click="openPannel('link')"><p>//</p></button>
     </div>
-    <div id="contentContainer">
+    <div id="contentContainer" ref="contentContainer">
       <div class="windowContainer" id="contentPannel">
-
       </div>
+
+      <contactDiv v-show="isActive.includes('contact')" @close="closePannel('contact')" @focus="focusPannel('contact')" :class="{zTop: isFocused==='contact' , zBase: isFocused!== 'contact'}" >
+      </contactDiv>
+
+      <aboutDiv v-show="isActive.includes('about')" @close="closePannel('about')" @focus="focusPannel('about')" :class="{zTop: isFocused==='about' , zBase: isFocused!== 'about'}" >
+      </aboutDiv>
+
+      <linkDiv v-show="isActive.includes('link')" @close="closePannel('link')" @focus="focusPannel('link')" :class="{zTop: isFocused==='link' , zBase: isFocused!== 'link'}" >
+      </linkDiv>
+
+      <welcomeDiv v-show="isActive.includes('welcome')" @close="closePannel('welcome')" @focus="focusPannel('welcome')" :class="{zTop: isFocused==='welcome' , zBase: isFocused!== 'welcome'}" >
+      </welcomeDiv>
     </div>
   </div>
-</template>vh
+</template>
+
 <style scoped>
   /*Template HTML pour section titre pre-styled
 
@@ -26,13 +38,13 @@
     </div>
   </div>
   */
+
   /*=====================Extra Content CSS*/
 
   .btnColStyle{
     background-color: transparent;
     z-index: 1;
     font-family: 'lineal';
-    font-size: 33px;
     color: var(--light-color);
     border-color: var(--Light-color);
     border-style: solid;
@@ -48,6 +60,10 @@
     color: var(--dark-color);
   }
 
+  #info{
+    font-family: 'avara';
+  }
+
   /*=====================format pc*/
   @media (min-width:800px){
     #extraContainer{
@@ -65,7 +81,7 @@
     #btnPannel{
       position: relative;
       height: 100%;
-      width: 25%;
+      width: 15%;
       left:0;
       padding-top: 2vh;
       background-color: transparent;
@@ -78,17 +94,18 @@
     #contentContainer{
       position: relative;
       height: 100%;
-      width: 75%;
+      width: 85%;
       left:0;
       background-color: transparent;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-around;
-      z-index: 0;
     }
 
     #contentPannel{
+      width: 90%;
+      height: 90%;
       background-color: transparent;
       z-index: 1;
     }
@@ -97,6 +114,7 @@
       width:100%;
       height:20%;
       margin-top: 3.33vh;
+      font-size: 77px;
     }
   }
 
@@ -116,7 +134,7 @@
 
     #btnPannel{
       position: relative;
-      height: 25%;
+      height: 15%;
       width: 100%;
       top: 0;
       padding-left: 3vw;
@@ -129,7 +147,7 @@
 
     #contentContainer{
       position: relative;
-      height: 75%;
+      height: 85%;
       width: 100%;
       top: 0;
       background-color: transparent;
@@ -141,6 +159,8 @@
     }
 
     #contentPannel{
+      width: 90%;
+      height: 90%;
       background-color: transparent;
       z-index: 1;
     }
@@ -148,6 +168,7 @@
       width:20%;
       height:100%;
       margin-left: 2.666vw;
+      font-size: 33px;
     }
   }
 </style>
@@ -155,6 +176,35 @@
 <script>
   export default {
     name : 'ExtraContent',
+    data(){
+      return{
+        isActive:[],
+        isFocused:""
+      }
+    },
+    methods:{
+      openPannel(name){
+        if(!this.isActive.includes(name)){
+          this.isActive.push(name);
+        }
+        this.isFocused = name;
+      },
+      focusPannel(name){
+        if(this.isActive.includes(name)){
+          this.isFocused = name;
+        }
+      },
+      closePannel(name){
+        const index = this.isActive.indexOf(name)
+        if(index !== -1){
+          this.isActive.splice(index,1);
+        }
+        if(this.isFocused === name){
+          this.isFocused = null;
+        }
+
+      }
+    },
     mounted(){
       console.log("Extra content is loaded!");
     }

src/components/GeneratedContent.vue

@@ -65,13 +65,13 @@
   }
   /*Highlights z-index*/
   div.highlightItem{
-    z-index: 9;
+    z-index: 3;
   }
   div.highlightMax{
-    z-index: 10;
+    z-index: 4;
   }
   div.graffStyle{
-    z-index:4;
+    z-index: 5;
     position:absolute;
     margin-left: 100px;
   }
@@ -91,12 +91,12 @@
           .imgStyle.highlightMax{
             width:444px;
             height:auto;
-            z-index:3;
+            z-index:4;
           }
           .imgStyle.graffStyle{
             width:100px;
             height:auto;
-            z-index: 4;
+            z-index: 5;
           }
 
       }
@@ -116,12 +116,12 @@
             .imgStyle.highlightMax{
               width:250px;
               height:auto;
-              z-index:3;
+              z-index:4;
             }
             .imgStyle.graffStyle{
               width:77px;
               height:auto;
-              z-index: 4;
+              z-index: 5;
             }
       }
 
@@ -140,12 +140,12 @@
             .imgStyle.highlightMax{
               width:200px;
               height:auto;
-              z-index:3;
+              z-index:4;
             }
             .imgStyle.graffStyle{
               width:50px;
               height:auto;
-              z-index: 4;
+              z-index: 5;
 
             }
     }

src/components/LinkPannel.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="windowContainer" id="linkPannel" ref="linkPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
+    <Moveable
+        className="moveable"
+        :target="$refs.linkPannel"
+        :draggable="true"
+        @drag="onDrag"
+    />
+    <div class="windowTitle">
+      <div class="titleContent">
+        <p>./ExternalLinks.333</p>
+        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+  /*=====================LinkPannel CSS*/
+  #linkPannel{
+    background-color: var(--dark-color);
+    position:absolute;
+    cursor:grab;
+  }
+
+  /*=====================format pc*/
+  @media(min-width:800px){
+    #linkPannel{
+      width:666px;
+      height:666px;
+    }
+  }
+
+  /*=====================format tel*/
+  @media(max-width:800px){
+    #linkPannel{
+      width:333px;
+      height:333px;
+    }
+
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'LinkPannel',
+    components:{
+      Moveable
+    },
+    emits: ["focus","close"],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      observeContainer(){
+        const container = document.getElementById("contentContainer");
+
+        if(!container){
+          console.error("container not found");
+          return
+        }
+
+        const observer = new ResizeObserver(entries=>{
+          const rect = entries[0].contentRect;
+
+          this.bodyWidth = rect.width;
+          this.bodyHeight = rect.height;
+
+          this.coordX = Math.random()*(this.bodyWidth-333);
+          this.coordY = Math.random()*(this.bodyHeight-333);
+        });
+
+        observer.observe(container);
+      }
+  },
+  data(){
+    return {
+      bodyHeight:0,
+      bodyWidth:0,
+      coordX:0,
+      coordY:0,
+    }
+  },
+  mounted(){
+    this.$nextTick(() => {
+        this.observeContainer()
+    });
+    console.log('coord:', this.coordX, this.coordY);
+    console.log("Contact pannel is loaded!");
+  }
+};
+</script>

src/components/MainContent.vue

@@ -33,6 +33,9 @@
       }
 
       #mainPannel{
+        position: relative;
+        width: 90%;
+        height: 90%;
         background-color: transparent;
         z-index: 1;
       }
@@ -55,6 +58,9 @@
     }
 
     #mainPannel{
+      position: relative;
+      width: 90%;
+      height: 90%;
       background-color: transparent;
       z-index: 1;
     }

src/components/WelcomePannel.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="windowContainer" id="welcomePannel" ref="welcomePannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
+    <Moveable
+        className="moveable"
+        :target="$refs.welcomePannel"
+        :draggable="true"
+        @drag="onDrag"
+    />
+    <div class="windowTitle">
+      <div class="titleContent">
+        <p>./Welcome:{{guestName}}</p>
+        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
+      </div>
+    </div>
+    <p id="welcomeTxt">
+      hello !
+      <br>
+      bienvenue dans ma petite bulle sur l'Internet
+      <br>
+      (ce site est mis en page de manière générative,
+      <br>
+      à chaque fois que tu actualises ça change ^^)
+      <br><br>
+      je bricole beaucoup de choses, mais ici c'est plutôt
+      <br>
+      les vêtements, bijoux et accessoires <b>PIQUANT!</b>
+      <br>
+      n'hésite pas à rechercher ou filtrer
+      <br>
+      pour trouver ce que tu veux
+      <br><br>
+      dans le menu + tu pourras trouver
+      <br>
+      un formulaire de contact et de liens externes
+      <br>
+      vers d'autres projets persos
+      <br>
+      et ceux des copines
+    </p>
+  </div>
+</template>
+
+<style scoped>
+  /*=====================WelcomePannel CSS*/
+  #welcomePannel{
+    background-color: var(--dark-color);
+    position:absolute;
+    cursor: grab;
+  }
+
+  #welcomeTxt{
+    position:relative;
+    padding: 10px;
+    font-family: 'velvelyne';
+    font-size:16px;
+    color: var(--light-color);
+    font-weight: lighter;
+  }
+
+  #welcomePannel:active{
+    cursor: move;
+  }
+
+  /*=====================format pc*/
+  @media(min-width:800px){
+    #welcomePannel{
+      width:333px;
+      height:400px;
+    }
+  }
+
+  /*=====================format tel*/
+  @media(max-width:800px){
+
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'WelcomePannel',
+    components:{
+      Moveable
+    },
+    emits: ["focus","close"],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      observeContainer(){
+        const container = document.getElementById("contentContainer");
+
+        if(!container){
+          console.error("container not found");
+          return
+        }
+
+        const observer = new ResizeObserver(entries=>{
+          const rect = entries[0].contentRect;
+
+          this.bodyWidth = rect.width;
+          this.bodyHeight = rect.height;
+
+          this.coordX = Math.random()*(this.bodyWidth-333);
+          this.coordY = Math.random()*(this.bodyHeight-333);
+        });
+
+        observer.observe(container);
+      }
+  },
+  data(){
+    return {
+      bodyHeight:0,
+      bodyWidth:0,
+      coordX:0,
+      coordY:0,
+      guestName:'unknown_Guest003'
+    }
+  },
+  mounted(){
+    this.$nextTick(() => {
+        this.observeContainer()
+    });
+    console.log('coord:', this.coordX, this.coordY);
+    console.log("Contact pannel is loaded!");
+  }
+};
+</script>

src/main.js

@@ -7,6 +7,10 @@ import App from './App.vue'
 import MainContent from './components/MainContent.vue'
 import ExtraContent from './components/ExtraContent.vue'
 import GeneratedContent from './components/GeneratedContent.vue'
+import ContactPannel from './components/ContactPannel.vue'
+import AboutPannel from './components/AboutPannel.vue'
+import LinkPannel from './components/LinkPannel.vue'
+import WelcomePannel from './components/WelcomePannel.vue'
 
 // création app racine
 const app = createApp(App);
@@ -15,6 +19,10 @@ const app = createApp(App);
 app.component('mainDiv',MainContent);
 app.component('extraDiv',ExtraContent);
 app.component('generatorDiv',GeneratedContent);
+app.component('contactDiv',ContactPannel);
+app.component('aboutDiv',AboutPannel);
+app.component('linkDiv',LinkPannel);
+app.component('welcomeDiv',WelcomePannel);
 
 
 //Démarrage dans div#app de index.html