concernement popup on mouse over, better boussole, misc

src/assets/main.scss

@@ -10,6 +10,7 @@
 body{
   background-color: $back;
   font-family: 'public_sans';
+  font-weight: 400;
 }
 
 #app{
@@ -74,7 +75,7 @@ body{
     section.concernement{
       background-color: rgba(255, 255, 255, 0.9);
       box-sizing: border-box;
-      width:30em;
+      width:450px;
       height: 100%;
       padding: 1rem;
     }
@@ -88,6 +89,7 @@ body{
     padding: 1em;
     h1{
       font-size: 1em;
+      font-weight: 400;
     }
   }
 }

src/components/ConcernementMapItem.vue

@@ -219,9 +219,13 @@ export default {
         this.tween.stop();
       }
       if (open) {
-        // opening
+        // opening tweening
         this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y})
-          .to({s: 5,x: 500, y: 500}, 800)
+          .to({
+            s: 7,
+            x: (this.canvas.width - 450) / 2,
+            y: this.canvas.height / 2
+          }, 800)
           .onUpdate((obj) => {
             // https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
             // revert to the original size (by reverting the previous scale)
@@ -279,47 +283,90 @@ export default {
     // }
 
     this.pos = this.body.position;
+    
+    if (this.opened) {
+      // BOUSSOLE
+      // exterieur circle
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 2;
+      this.ctx.strokeStyle = "#fff";
+      this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
+      // this.ctx.stroke();
+
+      // interieur circle
+      this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false);
+      // this.ctx.stroke();      
+
+      // axes
+      // vertical
+      this.ctx.moveTo(this.pos.x, this.pos.y - this.ray*this.scale);
+      this.ctx.lineTo(this.pos.x, this.pos.y + this.ray*this.scale);
+      // horizontal
+      this.ctx.moveTo(this.pos.x - this.ray*this.scale, this.pos.y);
+      this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y);
+      // this.ctx.stroke();
       
-    // exterieur circle
-    this.ctx.beginPath();
-    this.ctx.lineWidth = 0.5;
-    this.ctx.strokeStyle = this.concernement.opened ? "#ff0000" : "#888";
-    this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
-    this.ctx.stroke();
+      // fleches
+      // haute
+      this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale));
+      this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale);
+      this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale + (8*this.scale));      
+      // milieu
+      this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y + (8*this.scale));
+      this.ctx.lineTo(this.pos.x, this.pos.y);
+      this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y + (8*this.scale));
 
-    // interieur circle
-    this.ctx.beginPath();
-    this.ctx.lineWidth = 0.5;
-    this.ctx.strokeStyle = "#888";
-    this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false);
-    this.ctx.stroke();
+      this.ctx.stroke();
+
+      // MOINS - PLUS
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 8;
+      this.ctx.strokeStyle = "#fff";
+      // PLUS
+      // horizontal
+      this.ctx.moveTo(this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale);
+      this.ctx.lineTo(this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale);
+      // vertical
+      this.ctx.moveTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale));
+      this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale));
+      
+      // MOINS
+      // horizontal
+      this.ctx.moveTo(this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale);
+      this.ctx.lineTo(this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale);
+      // vertical
+
+      this.ctx.stroke();
+    }
 
     // contours
     if (this.salientPoints.length > 3) {
+
       this.ctx.beginPath();
       this.ctx.lineWidth = 1;
       this.ctx.strokeStyle = "#000";
       this.ctx.fillStyle = "rgba(255,255,255,0.4)";
-      this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale, this.pos.y+this.salientPoints[0].pos.y*this.scale)
+      this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15)
       for (let j = 1; j < this.salientPoints.length; j++) {
-        this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale, this.pos.y+this.salientPoints[j].pos.y*this.scale)
+        this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[j].pos.y*this.scale*1.15)
       }
-      this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale, this.pos.y+this.salientPoints[0].pos.y*this.scale)
+      this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15)
       this.ctx.fill();
       this.ctx.stroke();
     }
 
-    // place all entities points
-    for (let i = 0; i < this.entites.length; i++) {
-      let entite = this.entites[i];
-      // console.log('entite', entite);
-      this.ctx.beginPath();
-      this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
-      this.ctx.fillStyle = "#F00";
-      this.ctx.fill();
+    if (this.opened) {
+      // place all entities points
+      for (let i = 0; i < this.entites.length; i++) {
+        let entite = this.entites[i];
+        // console.log('entite', entite);
+        this.ctx.beginPath();
+        this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
+        this.ctx.fillStyle = "#000";
+        this.ctx.fill();
+      } 
     }
 
-
     // concernement id @center
     this.ctx.beginPath();
     // this.ctx.arc(this.pos.x, this.pos.y, 4, 0, 2 * Math.PI, false);

src/components/ConcernementMapPopup.vue

@@ -0,0 +1,49 @@
+<script>
+// import { RouterLink, RouterView } from 'vue-router'
+
+import { mapState, mapActions } from 'pinia'
+// import { UserStore } from '@/stores/user'
+import { ConcernementsStore } from '@/stores/concernements'
+
+export default {
+  name: 'concernementMapPopup',  
+  props: ['id'],
+  data() {
+    return {
+      dom: null,
+      concernement: null
+    }
+  },
+  created () {
+    this.concernement = this.concernementsByID[this.id];
+  },
+  mounted () {
+    // console.log('APP onMounted')
+    this.dom = this.$refs['concernement-map-popup'];
+    window.addEventListener('mousemove', this.onMousemove);
+  },
+  computed: {
+    ...mapState(ConcernementsStore,['concernements']),
+    ...mapState(ConcernementsStore,['concernementsByID'])
+  },
+  methods: {
+    onMousemove(e){
+      // console.log('popup mousemove', e, this.dom);
+      this.dom.style.left = `${e.clientX + 5}px`;
+      this.dom.style.top = `${e.clientY - this.dom.clientHeight - 5}px`;
+    }
+  },
+  components: {
+  }
+}
+
+</script>
+
+<template>
+  <div id="concernement-map-popup" ref="concernement-map-popup">
+    <h1>{{ concernement.title }}</h1>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

src/components/MapConcernements.vue

@@ -30,6 +30,8 @@ Matter.use(MatterAttractors);
 import { mapState, mapActions } from 'pinia'
 import { ConcernementsStore } from '@/stores/concernements'
 
+import ConcernementMapPopup from '@components/ConcernementMapPopup.vue';
+
 export default {
   data() {
     return {
@@ -43,7 +45,8 @@ export default {
       engine: null,
       world: null,
       // render: null,
-      mouse: null
+      mouse: null,
+      concernementpopupid: null
     }
   },
   provide() {
@@ -55,7 +58,8 @@ export default {
     }
   },
   computed: {
-    ...mapState(ConcernementsStore,['concernements'])
+    ...mapState(ConcernementsStore,['concernements']),
+    ...mapState(ConcernementsStore,['concernementsByID'])
   },
   created() {
     // MATTER
@@ -91,6 +95,7 @@ export default {
     // add mouse control
     // https://github.com/liabru/matter-js/issues/491#issuecomment-331329404
     this.mouse = Matter.Mouse.create(this.canvasMap.canvas);
+    this.canvasMap.canvas.addEventListener('mousemove', this.onMouseMove)
     this.canvasMap.canvas.addEventListener('click', this.onClick)
 
     this.animate()
@@ -103,6 +108,20 @@ export default {
       Matter.Engine.update(this.engine, 1)
       window.requestAnimationFrame(this.animate);
     },
+    onMouseMove (e) {
+      // check concernement item mouse over
+      const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
+      // console.log('mousemove query', query);
+      if (query.length) {
+        if (typeof this.concernementsByID[query[0].id] !== "undefined" && !this.concernementsByID[query[0].id].opened) {
+          this.concernementpopupid = query[0].id;
+        } else {
+          this.concernementpopupid = null;  
+        }
+      }else{
+        this.concernementpopupid = null;
+      }
+    },
     onClick (e) {
       console.log('onClick', this, e);
       // get the clicked element from matter
@@ -114,15 +133,21 @@ export default {
         // console.log('body id:', elmt.id);
         clickedIDs.push(elmt.id);
       });
+      // open/close all concernements
       this.concernements.forEach((concernement, index) => {
         this.openCloseConcernement(concernement.id, clickedIDs.indexOf(concernement.id) !== -1)
       });
+      // if no concernement opened retrun to home (closing concernement contents opened)
+      if (!clickedIDs.length) {
+        this.$router.push({name: 'home'});
+      }
     }
   },
   beforeUpdate () {
   },
   components: {
-    MapBackground
+    MapBackground,
+    ConcernementMapPopup
   }
 }
 
@@ -161,6 +186,10 @@ export default {
       </li>
     </ul>
   </nav>
+  <ConcernementMapPopup
+    v-if="concernementpopupid"
+    :id="concernementpopupid"
+  />  
 </template>
 
 <style lang="css" scoped>

src/views/Concernement.vue

@@ -31,7 +31,7 @@ export default {
   <section class="concernement">
     <h2>{{ opened.title }}</h2>
     <div v-html="opened.description"/>
-    <div v-html="opened.caillou"/>
+    <div v-html="opened.caillou "/>
   </section>
 </template>