displayed besoins & reponses on puissance d'gair

src/components/ConcernementMapItem.vue

@@ -427,59 +427,24 @@ export default {
         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
-              && ((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();
-            }
-          }
-        }
-      } 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();
-            }
-          }
-        }
-
-        // 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") {
+      // map mode puissance d'agir
+      // if not opened and has_puissancedagir draw the puissance d'agir icone
+      if (this.concernement.has_puissancedagir && this.map_mode === "puissancedagir") {
+        if (!this.opened) {
           this.drawPuissanceagirIcon();
+        } else {
+          this.drawBesoins()
         }
+      }
 
+      if (this.map_mode !== 'puissancedagir') {
+        this.drawEntites()
       }
       
+      
     },
     drawPuissanceagir(){
       
-      
       for (let i = 1; i < 6; i++) {
         this.ctx.beginPath();
         this.ctx.lineWidth = 0.5;
@@ -493,14 +458,14 @@ export default {
       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;
+        let 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;
+        let x = Math.cos(a*(Math.PI/180)) * this.ray * this.scale;
+        let 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);
@@ -518,6 +483,7 @@ export default {
       this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
       this.ctx.fill();
       this.ctx.stroke()
+      this.ctx.closePath();
     },
     drawPuissanceagirIcon(){
       var r = 20 * this.scale; // ray
@@ -579,6 +545,102 @@ export default {
       
       this.ctx.stroke();
     },
+    drawEntites(){
+      // IF OPENED
+      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";
+            }
+            this.ctx.fill();
+          }
+        }
+      }
+        // IF CLOSED
+      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();
+            }
+          }
+        }
+        
+
+      }
+    },
+    drawBesoins(){
+      let res_fields = ['qui','quoi','ou','avec'];
+      for (let i = 0; i < this.concernement.besoins.length; i++) {
+        // TODO make besoins and reponses interactives
+        let r = (this.ray * this.scale)/5;  // unit ray
+        let arc = (360 / 16);               // unit arc
+        let br = r - r/2;                   // besoin ray
+        let a = arc * i + arc/2;            // angle
+        let x = Math.cos(a*(Math.PI/180)) * br;
+        let y = Math.sin(a*(Math.PI/180)) * br;
+
+        this.ctx.beginPath();
+        this.ctx.fillStyle = "#000";
+        // this.ctx.arc(this.pos.x + x, this.pos.y + y, 2, 0, 2 * Math.PI, false);
+        this.drawDiamond(this.pos.x + x, this.pos.y + y, 4);
+        this.ctx.fill();
+
+        // loop through reponses
+        for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
+          // loop through fields qui, quoi, où, avec
+          for (let f = 0; f < res_fields.length; f++) {
+            if(this.concernement.besoins[i].reponses[j][res_fields[f]]){
+              let rr = this.ray * this.scale - r*f - r/2; // reponse field ray
+              let rx = Math.cos(a*(Math.PI/180)) * rr;
+              let ry = Math.sin(a*(Math.PI/180)) * rr;
+              
+              this.ctx.beginPath();
+              this.ctx.fillStyle = "#eee";
+              this.ctx.strokeStyle = "#000";
+              this.ctx.lineWidth = 1;
+              // this.ctx.arc(this.pos.x + rx, this.pos.y + ry, 2*(f+1), 0, 2 * Math.PI, false);
+              this.drawDiamond(this.pos.x + rx, this.pos.y + ry, 5);
+              this.ctx.fill();
+              this.ctx.stroke();
+
+            }
+            
+          }
+          
+        }
+        
+      }
+    },
+    drawDiamond(x,y,r){
+      this.ctx.moveTo(x, y - r);
+      this.ctx.lineTo(x + r, y);
+      this.ctx.lineTo(x, y + r);
+      this.ctx.lineTo(x - r, y);
+      this.ctx.lineTo(x, y - r);
+    },
     drawBoussole(){
       // BOUSSOLE
       // exterieur circle