started to integrate matter for physics in the map

src/components/MapConcernements.vue

@@ -1,40 +1,97 @@
 <script>
 
-import Granim from 'granim'
 // import { mapActions, mapState } from 'pinia'
 import { computed } from 'vue'
-// import LoginBlock from '@components/block/LoginBlock.vue'
 import MapBackground from '@components/MapBackground.vue'
 
-// import MA from '/api/ma-axios'
+// https://brm.io/matter-js/docs/classes/Engine.html
+import {
+  Engine,
+  // Render,
+  // World,
+  Bodies,
+  // Body,
+  // Events,
+  Composite,
+  // Composites,
+  // Constraint,
+  // Vertices,
+  // Mouse,
+  // MouseConstraint,
+  // Query,
+  // Common
+} from "matter-js";
 
 
-// https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
-
 export default {
   data() {
     return {
       canvasMap: {
         canvas: null,
-        ctx: null
+        ctx: null,
+        matter: null
       },
       animateEvent: new Event('animate'),
-      granim: null
-
+      granim: null,
+      // MATTER
+      engine: null,
+      world: null,
+      render: null
     }
   },
   provide() {
+    // https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
     return {
       // explicitly provide a computed property
       canvasMap: computed(() => this.canvasMap)
     }
   },
+  created() {
+    // MATTER
+    // create an engine
+    let engineOptions = {
+      enableSleeping: true,
+      timing: {
+        //timestamp: 0.5,
+        timeScale: 0.5
+      }
+    }
+    this.engine = Engine.create(engineOptions);
+    this.engine.gravity.scale = 0;
+    this.canvasMap.matter = {
+      engine: this.engine
+    }
+    this.world = this.engine.world;
+
+  },
   mounted() {
     this.canvasMap.canvas = this.$refs['canvas-map'];
     this.canvasMap.ctx = this.canvasMap.canvas.getContext('2d');
 
-    this.canvasMap.canvas.width = this.canvasMap.canvas.parentElement.clientWidth;
-    this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
+    let canvas_w = this.canvasMap.canvas.width = this.canvasMap.canvas.parentElement.clientWidth;
+    let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
+
+    // MATTER
+    let wall_w = 5;
+    Composite.add(this.world, [
+        // walls
+        Bodies.rectangle(canvas_w/2, 0, canvas_w, wall_w, { isStatic: true }),                 // top
+        Bodies.rectangle(canvas_w/2, canvas_h-wall_w, canvas_w, wall_w, { isStatic: true }),   // bottom
+        Bodies.rectangle(0, canvas_h/2, wall_w, canvas_h, { isStatic: true }),                 // left
+        Bodies.rectangle(canvas_w-wall_w, canvas_h/2, wall_w, canvas_h, { isStatic: true })    // right
+    ]);
+
+    // this.render = Render.create({
+    //   canvas: this.$refs['canvas-engine'],
+    //   engine: this.engine,
+    //   options: {
+    //     width: canvas_w,
+    //     height: canvas_h,
+    //     showVelocity: true
+    //   }
+    // });
+    // Render.run(this.render);
+
     this.animate()
   },
   // computed: {
@@ -44,7 +101,8 @@ export default {
   methods: {
     animate () {
       this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
-      this.canvasMap.canvas.dispatchEvent(this.animateEvent)
+      // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
+      Engine.update(this.canvasMap.matter.engine, 1)
       window.requestAnimationFrame(this.animate);
     }
   },
@@ -61,6 +119,9 @@ export default {
   <div id="map-backgrounds">
     <MapBackground />
   </div>
+  <div id="map-matter">
+    <canvas ref="canvas-engine"></canvas>
+  </div>
   <div id="map-concernements">
     <canvas ref="canvas-map"></canvas>
     <slot></slot>