concernement popup on mouse over, better boussole, misc

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>