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,29 +411,41 @@ export default {
       this.pos = this.body.position;
 
       if (this.opened) {
-        this.drawBoussole();
+        switch (this.map_mode) {
+          case 'terraindevie':
+            this.drawBoussole();
+            break;
+          case 'puissancedagir':
+            this.drawPuissanceagir();
+            break;
+        }
       }
 
       // contours
-      this.drawContour();
+      if (!this.opened 
+        || (this.opened && this.map_mode !== "puissancedagir")) {
+        this.drawContour();
+      } 
 
       if (this.opened) {
         // place all entities points
         // OR using entitées matter bodies
-        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
-            && ((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);
-            // console.log(part.id, this.opened_entite_id);
-            if (part.id === this.opened_entite_id) {
-              this.ctx.fillStyle = "#F00";
-            } else {
-              this.ctx.fillStyle = "#000";
+        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
+              && ((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);
+              // 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();
           }
         }
       } else {
@@ -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