improved map side segregation moves

src/components/ConcernementMapItem.vue

@@ -159,7 +159,7 @@ export default {
           frictionAir: 0,
           // mass: Math.pow(3, this.entites.length),
           mass: 10,
-          restitution: 0.1,
+          restitution: 0.15,
           collisionFilter: {
             group: -1
           },
@@ -336,6 +336,41 @@ export default {
       if (this.tween) {
         this.tween.update();
       }
+      if (this.map_mode === 'action'){
+        this.applyActionForces();
+      }
+      Matter.Body.setAngle(this.body, 0);
+      Matter.Body.setAngularSpeed(this.body, 0);
+    },
+    applyActionForces(){
+      // map_mode action
+      var dist, dir, x_force, ori_pos;
+      var x_force = 0;
+      if(!this.concernement.has_agissantes) {
+        // 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
+        dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side
+        dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side
+        ori_pos = {x:this.canvas.width/2, y:this.body.position.y};
+        x_force = Math.pow(dist/700,10) * dir;
+      }else{
+        // has action, get to the centre
+        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
+        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
+      Matter.Body.applyForce(
+        this.body, 
+        ori_pos, 
+        {
+          x: x_force,
+          y: 0
+        }
+      );
     },
     onAfterEngineUpdate (event) {
       // respawn element if outside screen
@@ -346,37 +381,7 @@ export default {
           this.pos = this.getRandomPos()
           Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
         }
-      // map_mode action
-      if (this.map_mode === 'action'){
-        var dist, dir, x_force, ori_pos;
-        var x_force = 0;
-        if(!this.concernement.has_agissantes) {
-          // 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
-          dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side
-          dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side
-          ori_pos = {x:this.canvas.width/2, y:this.canvas.height/2};
-          x_force = Math.pow(dist/700,10) * dir;
-        }else{
-          // has action, get to the centre
-          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
-          ori_pos = dir < 0 ? {x:this.canvas.width, y:this.canvas.height/2} : {x:0, y:this.canvas.height/2}
-          x_force = Math.pow(dist/800,10) * dir;
-        }
-        // x_force = (dist > 200 ? Math.pow(dist/700,10) : 0) * dir
-        Matter.Body.applyForce(
-          this.body, 
-          ori_pos, 
-          {
-            x: x_force,
-            y: 0
-          }
-        );
-      }
-      Matter.Body.setAngle(this.body, 0);
-      Matter.Body.setAngularSpeed(this.body, 0);
+      
       this.draw()
     },
     draw() {