drawing puissance d'agir 'boussole'

src/components/ConcernementMapItem.vue

@@ -110,7 +110,7 @@ export default {
       handler (n, o) {
         console.log('watch map_mode', o, n);
         if (n === 'terraindevie') {
-          this.applyCheckForces();
+          this.applyShuffleForces();
         }
       },
       deep: true
@@ -383,7 +383,7 @@ export default {
         }
       );
     },
-    applyCheckForces() {
+    applyShuffleForces() {
       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
@@ -411,15 +411,26 @@ export default {
       this.pos = this.body.position;
 
       if (this.opened) {
+        switch (this.map_mode) {
+          case 'terraindevie':
             this.drawBoussole();
+            break;
+          case 'puissancedagir':
+            this.drawPuissanceagir();
+            break;
+        }
       }
 
       // contours
+      if (!this.opened 
+        || (this.opened && this.map_mode !== "puissancedagir")) {
         this.drawContour();
+      } 
 
       if (this.opened) {
         // place all entities points
         // OR using entitées matter bodies
+        if (this.map_mode !== 'puissancedagir') {
           for (let i = 0; i < this.body.parts.length; i++) {
             if (this.body.parts[i].item_type === 'entite' 
               // draw only entite agissante if map mode is action
@@ -436,6 +447,7 @@ export default {
               this.ctx.fill();
             }
           }
+        }
       } else {
         // map mode action
         // if not opened and has_agissantes draw only entites agissantes
@@ -465,6 +477,48 @@ export default {
       }
       
     },
+    drawPuissanceagir(){
+      
+      
+      for (let i = 1; i < 6; i++) {
+        this.ctx.beginPath();
+        this.ctx.lineWidth = 0.5;
+        this.ctx.strokeStyle = `rgba(255,255,255,1)`;
+        this.ctx.arc(this.pos.x, this.pos.y, ((this.ray*this.scale)/5)*i, 0, 2 * Math.PI, false);
+        this.ctx.stroke(); 
+      }
+
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 1;
+      this.ctx.strokeStyle = `rgba(255,255,255,1)`;
+      this.ctx.setLineDash([5,5]);
+      for (let j = 0; j < 4; j++) {
+        var a  = (90 / 4) * j;
+        // 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 x = Math.cos(a*(Math.PI/180)) * this.ray * this.scale;
+        var y = Math.sin(a*(Math.PI/180)) * this.ray * this.scale;
+        // console.log('m', m);
+        this.ctx.moveTo(this.pos.x + x, this.pos.y + y);
+        this.ctx.lineTo(this.pos.x - x, this.pos.y - y);
+        //
+        this.ctx.moveTo(this.pos.x - y, this.pos.y + x);
+        this.ctx.lineTo(this.pos.x + y, this.pos.y - x);
+      }
+      this.ctx.stroke(); 
+      this.ctx.setLineDash([]);
+
+      this.ctx.beginPath();
+      this.ctx.fillStyle = `rgba(255,255,255,0.6)`;
+      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.fill();
+      this.ctx.stroke()
+    },
     drawPuissanceagirIcon(){
       var r = 20 * this.scale; // ray
       var dr = r/2;            // demi ray