map menu 'action' is working

src/components/ConcernementMapItem.vue

@@ -146,6 +146,7 @@ export default {
             item_type: 'entite',
             id: this.entites[i].entite.id,
             cid: this.concernement.id,
+            agissante: this.entites[i].entite.agissante,
             isSensor: true
           }))
         }
@@ -158,7 +159,7 @@ export default {
           frictionAir: 0,
           // mass: Math.pow(3, this.entites.length),
           mass: 10,
-          restitution: 0.4,
+          restitution: 0.1,
           collisionFilter: {
             group: -1
           },
@@ -345,101 +346,60 @@ export default {
           this.pos = this.getRandomPos()
           Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
         }
+      // map_mode action
+      if (this.map_mode === 'action'){
+        var dist, dir, x_force, ori_pos;
+        var x_force = 0;
+        if(!this.concernement.has_agissantes) {
+          // does not has actions -> take a side
+          // apply a force in direction of one side or an other depending of the start position
+          // the force is exponentialy proportional to the distance from the side
+          dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side
+          dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side
+          ori_pos = {x:this.canvas.width/2, y:this.canvas.height/2};
+          x_force = Math.pow(dist/700,10) * dir;
+        }else{
+          // has action, get to the centre
+          dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre
+          dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
+          ori_pos = dir < 0 ? {x:this.canvas.width, y:this.canvas.height/2} : {x:0, y:this.canvas.height/2}
+          x_force = Math.pow(dist/800,10) * dir;
+        }
+        // x_force = (dist > 200 ? Math.pow(dist/700,10) : 0) * dir
+        Matter.Body.applyForce(
+          this.body, 
+          ori_pos, 
+          {
+            x: x_force,
+            y: 0
+          }
+        );
+      }
+      Matter.Body.setAngle(this.body, 0);
+      Matter.Body.setAngularSpeed(this.body, 0);
       this.draw()
     },
     draw() {
 
       if (!this.ctx) return;
 
+      // record the position from the main matter body
       this.pos = this.body.position;
 
       if (this.opened) {
-        // BOUSSOLE
+        this.drawBoussole();
-        // exterieur circle
-        this.ctx.beginPath();
-        this.ctx.lineWidth = 2;
-        this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;
-        // external circle is %8 less than max ray = (*0.92)
-        this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale*0.92, 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();
-        
-        // fleches
-        // haute
-        this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale));
-        this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale*0.92);
-        this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (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));
-
-        this.ctx.stroke();
-
-        // MOINS - PLUS
-        this.ctx.beginPath();
-        this.ctx.lineWidth = 8;
-        this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;;
-        // 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.drawContour();
-
-        this.ctx.beginPath();
-        this.ctx.lineWidth = 1;
-        this.ctx.strokeStyle = "#000";
-        this.ctx.fillStyle = "rgba(255,255,255,0.8)";
-        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*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*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15)
-        this.ctx.fill();
-        this.ctx.stroke();
-      }
 
       if (this.opened) {
         // place all entities points
-        // using entities array
-        // 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, 5, 0, 2 * Math.PI, false);
-        //   this.ctx.strokeStyle = "#F00";
-        //   this.ctx.stroke();
-        // }
-
         // OR using entitées matter bodies
         for (let i = 0; i < this.body.parts.length; i++) {
-          if (this.body.parts[i].item_type === 'entite') {
+          if (this.body.parts[i].item_type === 'entite' 
+            // draw only entite agissante if map mode is action
+            && ((this.map_mode === 'action' && this.body.parts[i].agissante) || this.map_mode !== "action")) {
             let part = this.body.parts[i];
             this.ctx.beginPath();
             this.ctx.arc(part.position.x, part.position.y, 0.3*this.scale, 0, 2 * Math.PI, false);
@@ -453,14 +413,101 @@ export default {
           }
         }
       }
+      // map mode action
+      else if (this.concernement.has_agissantes && this.map_mode === "action") {
+        for (let i = 0; i < this.body.parts.length; i++) {
+          if (this.body.parts[i].item_type === 'entite' && this.body.parts[i].agissante) {
+            let part = this.body.parts[i];
+            this.ctx.beginPath();
+            this.ctx.arc(part.position.x, part.position.y, 1*this.scale, 0, 2 * Math.PI, false);
+            // console.log(part.id, this.opened_entite_id);
+            if (part.id === this.opened_entite_id) {
+              this.ctx.fillStyle = "#F00";
+            } else {
+              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);
-      // this.ctx.fillStyle = "#000";
-      // this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y)
-      // this.ctx.fill();
 
+    },
+    drawBoussole(){
+      // BOUSSOLE
+      // exterieur circle
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 2;
+      this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;
+      // external circle is %8 less than max ray = (*0.92)
+      this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale*0.92, 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();
+      
+      // fleches
+      // haute
+      this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale));
+      this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale*0.92);
+      this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (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));
+
+      this.ctx.stroke();
+
+      // MOINS - PLUS
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 8;
+      this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;;
+      // 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();
+    },
+    drawContour(){
+      if (this.salientPoints.length > 3) {
+        var fillStyle;
+        if (this.map_mode === "action" && !this.concernement.has_agissantes){
+          fillStyle = "rgba(255,255,255,0.3)";
+        }else{
+          fillStyle = "rgba(255,255,255,0.8)"
+        }
+        this.ctx.beginPath();
+        this.ctx.lineWidth = 1;
+        this.ctx.strokeStyle = "#000";
+        this.ctx.fillStyle = fillStyle;
+        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*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*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15)
+        this.ctx.fill();
+        this.ctx.stroke();
+      }
     }
   },
   render() {

src/components/ConcernementMapPopup.vue

@@ -21,7 +21,7 @@ export default {
     if (this.infos.type === 'concernement') {
       this.concernement = this.concernementsByID[this.infos.id];
     } else {
-      this.entite = this.allEntitesById[this.infos.id].entite;
+      this.entite = this.allEntitesById[this.infos.id];
     }
   },
   mounted () {
@@ -40,7 +40,7 @@ export default {
         if (n.type === 'concernement') {
           this.concernement = this.concernementsByID[n.id];
         } else {
-          this.entite = this.allEntitesById[n.id].entite;
+          this.entite = this.allEntitesById[n.id];
         }   
       },
       deep: true

src/components/MapConcernements.vue

@@ -183,8 +183,12 @@ export default {
         if (query.length) {
           // open/close all concernements
           this.openCloseConcernements(query[0].id)
-          // push route
+          // push route (keep the hash for map_mode)
-          this.$router.push({name: 'concernement', params: {id: query[0].id}});
+          this.$router.push({
+            name: 'concernement',
+            hash: `#${this.map_mode}`,
+            params: {id: query[0].id}
+          });
         }
       }
 
@@ -200,16 +204,27 @@ export default {
           });
           if (clickedEntityBodies.length) {
             // we have clicked on an entite
-            this.$router.push({name: 'concernement', params: {id: this.opened.id, eid: clickedEntityBodies[0].id}});
+            this.$router.push({
+              name: 'concernement',
+              hash: `#${this.map_mode}`,
+              params: {id: this.opened.id, eid: clickedEntityBodies[0].id}
+            });
           } else {
             // otherwise we close the entite and come back to the concernement
-            this.$router.push({name: 'concernement', params: {id: this.opened.id}});
+            this.$router.push({
+              name: 'concernement',
+              hash: `#${this.map_mode}`,
+              params: {id: this.opened.id}
+            });
           }
         } else {
           // if no concernement opened retrun to home (closing concernement contents opened)
           // and reset the opened state in concernement store
           this.resetConcernementOpened();
-          this.$router.push({name: 'home'});
+          this.$router.push({
+            name: 'home',
+            hash: `#${this.map_mode}`
+          });
         }
       }
     }

src/stores/concernements.js

@@ -52,17 +52,17 @@ export const ConcernementsStore = defineStore({
             this.concernements = [];
             allconcernements.forEach(concernement => {
               concernement.entites_byid = {};
+              concernement.entitesagissantes_byid = {};
+              concernement.has_agissantes = false;
               concernement.entites.forEach(entite => {
                 concernement.entites_byid[entite.entite.id] = entite;
-                // record a flat list of all entités of all concernement for map-popup
+                // record entite agissante
-                if (typeof this.allEntitesById[entite.entite.id] === "undefined") {
+                if (entite.entite.agissante) {
-                  this.allEntitesById[entite.entite.id] = {
+                  concernement.entitesagissantes_byid[entite.entite.id] = entite;
-                    entite: entite,
+                  concernement.has_agissantes = true;
-                    concernements: [concernement]
-                  };
-                } else {
-                  this.allEntitesById[entite.entite.id].concernements.push(concernement);
                 }
+                // record a flat list of all entités of all concernement for map-popup
+                this.allEntitesById[entite.entite.id] = entite;
               });
               this.concernements.push(concernement);
               this.concernementsByID[concernement.id] = concernement;