ouatterrir-app/src/components/MapConcernements.vue

<script>

// import { mapActions, mapState } from 'pinia'
import { computed } from 'vue'
import MapBackground from '@components/MapBackground.vue'

// 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";
import Matter from "matter-js";

import MatterAttractors from "matter-attractors";
Matter.use(MatterAttractors);


import { mapState, mapActions } from 'pinia'
import { ConcernementsStore } from '@/stores/concernements'

export default {
  data() {
    return {
      canvasMap: {
        canvas: null,
        ctx: null,
      },
      animateEvent: new Event('animate'),
      granim: null,
      // MATTER
      engine: null,
      world: null,
      // render: null,
      mouse: null
    }
  },
  provide() {
    // https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
    return {
      // explicitly provide a computed property
      canvasMap: computed(() => this.canvasMap),
      matterEngine: computed(() => this.engine)
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['concernements'])
  },
  created() {
    // MATTER
    // create an engine
    let engineOptions = {
      enableSleeping: true,
      timing: {
        //timestamp: 0.5,
        timeScale: 0.5
      }
    }
    this.engine = Matter.Engine.create(engineOptions);
    this.engine.gravity.scale = 0;
    this.world = this.engine.world;
  },
  mounted() {
    this.canvasMap.canvas = this.$refs['canvas-map'];
    this.canvasMap.ctx = this.canvasMap.canvas.getContext('2d');

    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;
    Matter.Composite.add(this.world, [
        // walls
        Matter.Bodies.rectangle(canvas_w/2, 0, canvas_w, wall_w, { isStatic: true }),                 // top
        Matter.Bodies.rectangle(canvas_w/2, canvas_h-wall_w, canvas_w, wall_w, { isStatic: true }),   // bottom
        Matter.Bodies.rectangle(0, canvas_h/2, wall_w, canvas_h, { isStatic: true }),                 // left
        Matter.Bodies.rectangle(canvas_w-wall_w, canvas_h/2, wall_w, canvas_h, { isStatic: true })    // right
    ]);

    // add mouse control
    // https://github.com/liabru/matter-js/issues/491#issuecomment-331329404
    this.mouse = Matter.Mouse.create(this.canvasMap.canvas);
    this.canvasMap.canvas.addEventListener('click', this.onClick)

    this.animate()
  },
  methods: {
    ...mapActions(ConcernementsStore,['openCloseConcernement']),
    animate () {
      this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
      // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
      Matter.Engine.update(this.engine, 1)
      window.requestAnimationFrame(this.animate);
    },
    onClick (e) {
      console.log('onClick', this, e);
      const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
      // console.log(this.mouse.position);
      // console.log(query);
      query.forEach(elmt => {
        // console.log('body id:', elmt.id);
        this.concernements.forEach((concernement, index) => {
          this.openCloseConcernement(concernement.id, elmt.id === concernement.id)
        });
      });
    }
  },
  beforeUpdate () {
  },
  components: {
    MapBackground
  }
}

</script>

<template>
  <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>
  </div>
  <nav id="map-nav">
    <ul>
      <li>
        <a href="#terraindevie">terrain de vie</a>
      </li>
      <li>
        <a href="#proximite">proximité</a>
      </li>
      <li>
        <a href="#superposition">superposition</a>
      </li>
      <li>
        <a href="#puissancedagir">puissance d'agir</a>
      </li>
      <li>
        <a href="#action">action</a>
      </li>
      <li>
        <a href="#doleancer">doléancer</a>
      </li>
    </ul>
  </nav>
</template>

<style lang="css" scoped>

</style>