integrated puissance d'agir on the map level 0

src/api/gql/concernement.fragment.gql

@@ -32,4 +32,18 @@ fragment ConcernementFields on Concernement {
       }
     }
   }
+  besoins {
+    author
+    description
+    id
+    index
+    reponses {
+      author
+      avec
+      id
+      ou
+      qui
+      quoi
+    }
+  }
 }

src/components/ConcernementMapItem.vue

@@ -105,6 +105,15 @@ export default {
         }
       },
       deep: true
+    },
+    map_mode: {
+      handler (n, o) {
+        console.log('watch map_mode', o, n);
+        if (n === 'terraindevie') {
+          this.applyCheckForces();
+        }
+      },
+      deep: true
     }
   },
   methods: {
@@ -336,17 +345,18 @@ export default {
       if (this.tween) {
         this.tween.update();
       }
-      if (this.map_mode === 'action'){
-        this.applyActionForces();
+      if (this.map_mode === 'action' || this.map_mode === 'puissancedagir'){
+        this.applyFocusForces();
+        // TODO apply a little force to check the map when returning to terrain de vie
       }
       Matter.Body.setAngle(this.body, 0);
       Matter.Body.setAngularSpeed(this.body, 0);
     },
-    applyActionForces(){
+    applyFocusForces(){
       // map_mode action
-      var dist, dir, x_force, ori_pos;
+      var dist, dir, ori_pos;
       var x_force = 0;
-      if(!this.concernement.has_agissantes) {
+      if(!this.isFocused()) {
         // 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
@@ -360,6 +370,7 @@ export default {
         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.body.position.y} : {x:0, y:this.body.position.y}
         x_force = Math.pow(dist/800,10) * dir;
+        
         this.body.frictionAir = 0.05;
       }
       // x_force = (dist > 200 ? Math.pow(dist/700,10) : 0) * dir
@@ -372,6 +383,14 @@ export default {
         }
       );
     },
+    applyCheckForces() {
+      var dist, dir, x_velocity;
+      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
+      x_velocity = Math.pow(dist/650,10) * dir;
+
+      Matter.Body.setVelocity(this.body, {x: x_velocity, y: 0});
+    },
     onAfterEngineUpdate (event) {
       // respawn element if outside screen
       if(this.pos.x < 0
@@ -417,26 +436,94 @@ export default {
             this.ctx.fill();
           }
         }
-      }
-      // 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";
+      } else {
+        // map mode action
+        // if not opened and has_agissantes draw only entites agissantes
+        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();
             }
-            this.ctx.fill();
           }
         }
+
+        // puissance d'agir
+        // if not opened and has_puissancedagir draw the puissance d'agir icone
+        else if (this.concernement.has_puissancedagir && this.map_mode === "puissancedagir") {
+          this.drawPuissanceagirIcon();
+        }
+
       }
+      
+    },
+    drawPuissanceagirIcon(){
+      var r = 20 * this.scale; // ray
+      var dr = r/2;            // demi ray
+      var d = r*2;              // diameter
 
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 1;
+      this.ctx.strokeStyle = `#000`;
+      this.ctx.arc(this.pos.x, this.pos.y, r, 0, 2 * Math.PI, false);
+      this.ctx.stroke();
+      
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 1;
+      this.ctx.strokeStyle = `#000`;
+      this.ctx.arc(this.pos.x, this.pos.y, dr, 0, 2 * Math.PI, false);
+      this.ctx.stroke();
+      
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 1;
+      this.ctx.strokeStyle = `#000`;
+      this.ctx.fillStyle = '#000';
+      this.ctx.arc(this.pos.x, this.pos.y, 2*this.scale, 0, 2 * Math.PI, false);
+      this.ctx.fill();
+      this.ctx.stroke();
 
+      // axes
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 1;
+      this.ctx.strokeStyle = `#000`;
+      // vertical
+      // this.ctx.moveTo(this.pos.x, this.pos.y - r);
+      // this.ctx.lineTo(this.pos.x , this.pos.y - dr);
+      // this.ctx.moveTo(this.pos.x, this.pos.y + r);
+      // this.ctx.lineTo(this.pos.x , this.pos.y + dr);
+      this.ctx.moveTo(this.pos.x, this.pos.y - r);
+      this.ctx.lineTo(this.pos.x , this.pos.y + r);
+      
+      // horizontal
+      // this.ctx.moveTo(this.pos.x - r, this.pos.y);
+      // this.ctx.lineTo(this.pos.x - dr, this.pos.y);
+      // this.ctx.moveTo(this.pos.x + r, this.pos.y);
+      // this.ctx.lineTo(this.pos.x + dr, this.pos.y);
+      this.ctx.moveTo(this.pos.x - r, this.pos.y);
+      this.ctx.lineTo(this.pos.x + r, this.pos.y);
+
+      // diagonale
+      // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
+      // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
+      // radians = degrees * (pi/180)
+      // degrees = radians * (180/pi)
+      var m = Math.sin(45*(Math.PI/180)) * r;
+      // console.log('m', m);
+      this.ctx.moveTo(this.pos.x + m, this.pos.y + m);
+      this.ctx.lineTo(this.pos.x - m, this.pos.y - m);
+      //
+      this.ctx.moveTo(this.pos.x - m, this.pos.y + m);
+      this.ctx.lineTo(this.pos.x + m, this.pos.y - m);
+      
+      this.ctx.stroke();
     },
     drawBoussole(){
       // BOUSSOLE
@@ -496,7 +583,7 @@ export default {
     drawContour(){
       if (this.salientPoints.length > 3) {
         var fillStyle;
-        if (this.map_mode === "action" && !this.concernement.has_agissantes){
+        if (!this.isFocused()){
           fillStyle = "rgba(255,255,255,0.3)";
         }else{
           fillStyle = "rgba(255,255,255,0.8)"
@@ -513,6 +600,11 @@ export default {
         this.ctx.fill();
         this.ctx.stroke();
       }
+    },
+    isFocused(){
+      return this.map_mode === 'terraindevie'
+          || (this.map_mode === 'action' && this.concernement.has_agissantes)
+          || (this.map_mode === 'puissancedagir' && this.concernement.has_puissancedagir);
     }
   },
   render() {

src/components/MapConcernements.vue

@@ -76,6 +76,9 @@ export default {
     this.engine = Matter.Engine.create(engineOptions);
     this.engine.gravity.scale = 0;
     this.world = this.engine.world;
+
+    // check map_mode
+    console.log('mapconcernements created', this.$root);
   },
   mounted() {
     this.canvasMap.canvas = this.$refs['canvas-map'];
@@ -255,21 +258,21 @@ export default {
       <li>
         <a href="#terraindevie" @click="setMapMode('terraindevie')">terrain de vie</a>
       </li>
-      <li>
+      <!-- <li>
         <a href="#proximite" @click="setMapMode('proximite')">proximité</a>
-      </li>
-      <li>
-        <a href="#superposition" @click="setMapMode('superposition')">superposition</a>
-      </li>
+      </li> -->
       <!-- <li>
-        <a href="#puissancedagir" @click="setMapMode('puissancedagir')">puissance d'agir</a>
+        <a href="#superposition" @click="setMapMode('superposition')">superposition</a>
       </li> -->
+      <li>
+        <a href="#puissancedagir" @click="setMapMode('puissancedagir')">puissance d'agir</a>
+      </li>
       <li>
         <a href="#action" @click="setMapMode('action')">action</a>
       </li>
-      <!-- <li>
+      <li>
         <a href="#doleancer" @click="setMapMode('doleancer')">doléancer</a>
-      </li> -->
+      </li>
     </ul>
   </nav>
   <ConcernementMapPopup

src/stores/concernements.js

@@ -69,6 +69,10 @@ export const ConcernementsStore = defineStore({
                   concernement.entites.push(entite); // fill the entites array with visible entite only
                 }
               });
+              // puissance d'agir
+              concernement.has_puissancedagir = concernement.besoins.length ? true : false;
+
+              // common
               this.concernements.push(concernement);
               this.concernementsByID[concernement.id] = concernement;
             });