matter: bigger walls, respawn, bug fix

src/components/ConcernementMapItem.vue

@@ -1323,14 +1323,19 @@ export default {
         
         console.log(`bringToCenter dist:${dist}, x_force:${x_force}, friction air:${fa}`);        
       } else { // in the ceneter zone let items floats freely
+        let fa = 0.01;
         let velocity = Matter.Body.getVelocity(this.body);
-        let velocityx = Math.abs(velocity.x);
-        // map a range of numbers to another range of numbers
-        // INFO https://stackoverflow.com/a/46462321
-        let velocity_range = [50, 1000];
-        let fa_range = [0,3];
-        let fa = fa_range[0] + (velocityx - velocity_range[0]) * (fa_range[1] - fa_range[0]) / (velocity_range[1] - velocity_range[0]);
-        console.log(`bringToCenter velocity.x:${velocity.x}, fa:${fa}`);
+        if (velocity.x) {
+          let velocityx = Math.abs(velocity.x);
+          // map a range of numbers to another range of numbers
+          // INFO https://stackoverflow.com/a/46462321
+          let velocity_range = [50, 1000];
+          let fa_range = [0,3];
+          fa = fa_range[0] + (velocityx - velocity_range[0]) * (fa_range[1] - fa_range[0]) / (velocity_range[1] - velocity_range[0]);
+          console.log(`bringToCenter velocityx:${velocityx}, fa:${fa}, velocity`, velocity);
+        } else {
+          console.warn(`bringToCenter no velocity`, velocity);
+        }
 
         this.body.frictionAir = fa;
       }
@@ -1354,6 +1359,8 @@ export default {
       let dist = dir < 0 
         ? this.pos.x - pseudo_center_x 
         : pseudo_center_x - this.pos.x;
+
+      dist = dist > 1000 ? 1000 : dist;
       
       if (dist > this.canvas.width/6) { // apply decreasing forces and increasing friction air only out of center to let the items float in the center zone
         // max & min item position
@@ -1495,16 +1502,20 @@ export default {
       }
 
     },
-    onAfterEngineUpdate (event) {
+    respawn() {
       // respawn element if outside screen
-      // if(this.pos.x <= 0
-      //   || this.pos.x >= this.canvas.width
-      //   || this.pos.y <= 0
-      //   || this.pos.y >= this.canvas.height){
-      //     this.pos = this.getRandomPos()
-      //     Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
-      //     this.setInitBodyVelocity();
-      //   }
+      if(this.pos.x <= 0
+        || this.pos.x >= this.canvas.width
+        || this.pos.y <= 0
+        || this.pos.y >= this.canvas.height){
+          this.pos = this.getRandomPos()
+          Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
+          this.setInitBodyVelocity();
+        }
+      
+    },
+    onAfterEngineUpdate (event) {
+      this.respawn();
       
       this.paper_main_object.position = this.pos = this.body.position;
 

src/components/MapConcernements.vue

@@ -100,7 +100,7 @@ export default {
     }.bind(this);
 
     // MATTER
-    let wall_w = 100;
+    let wall_w = 1000;
     Matter.Composite.add(this.world, [
         // walls
         Matter.Bodies.rectangle(canvas_w/2,        -wall_w/2,         canvas_w, wall_w,   { isStatic: true }),   // top