handled multiple response for one besoin

src/components/ConcernementMapItem.vue

@@ -593,14 +593,15 @@ export default {
     },
     drawBesoins(){
       let res_fields = ['qui','quoi','ou','avec'];
+      let arc = (360 / 16);               // unit arc
+      let r = (this.ray * this.scale)/5;  // unit ray
+      let br = r - r/3;                   // besoin ray
       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;
+        let start_a = arc * i;              // angle depart (for reponses)
+        let center_a = start_a + arc/2;     // angle central
+        let x = Math.cos(center_a*(Math.PI/180)) * br;
+        let y = Math.sin(center_a*(Math.PI/180)) * br;
 
         this.ctx.beginPath();
         this.ctx.fillStyle = "#000";
@@ -608,14 +609,16 @@ export default {
         this.drawDiamond(this.pos.x + x, this.pos.y + y, 4);
         this.ctx.fill();
 
+        let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
         // loop through reponses
         for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
+          let res_a = start_a + res_arc * (j+1); // angle for response line
           // 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;
+              let rx = Math.cos(res_a*(Math.PI/180)) * rr;
+              let ry = Math.sin(res_a*(Math.PI/180)) * rr;
               
               this.ctx.beginPath();
               this.ctx.fillStyle = "#eee";

src/router/index.js

@@ -39,7 +39,7 @@ const router = createRouter({
 // set map_mode on first load
 router.afterEach((to, from) => {
   const concernement_store = ConcernementsStore();
-  console.log('router afterEach', from, to, concernement_store.map_mode);
+  // console.log('router afterEach', from, to, concernement_store.map_mode);
   if (!from.name) { // we are at first load
     if (to.hash) {
       console.log("we have a hash");