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 paper from 'paper';

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

import ConcernementMapPopup from '@components/ConcernementMapPopup.vue';

export default {
  data() {
    return {
      canvasMap: {
        canvas: null,
        ctx: null
      },
      animateEvent: new Event('animate'),
      granim: null,
      // MATTER
      engine: null,
      world: null,
      // render: null,
      mouse: null,
      mapPopupData: null,
      // PAPERJS
      paper: 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,['map_mode']),
    ...mapState(ConcernementsStore,['concernements']),
    ...mapState(ConcernementsStore,['concernementsByID']),
    ...mapState(ConcernementsStore,['opened']),
    ...mapState(CommonStore,['hover_elmt'])
  },
  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;
    console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);

    this.paper = paper.setup(this.canvasMap.canvas);
    // console.log('this.canvasMap.paper', this.canvasMap.paper);
    this.canvasMap.canvas.addEventListener('click', this.onCanvasClick); 

    // MATTER
    let wall_w = 100;
    Matter.Composite.add(this.world, [
        // walls
        Matter.Bodies.rectangle(canvas_w/2,        -wall_w/2,         canvas_w, wall_w,   { isStatic: true }),   // top
        Matter.Bodies.rectangle(canvas_w/2,        canvas_h+wall_w/2, canvas_w, wall_w,   { isStatic: true }),   // bottom
        Matter.Bodies.rectangle(-wall_w/2,         canvas_h/2,        wall_w,   canvas_h, { isStatic: true }),   // left
        Matter.Bodies.rectangle(canvas_w+wall_w/2, canvas_h/2,        wall_w,   canvas_h, { isStatic: true }),   // right
        // make the items never goes under menus
        Matter.Bodies.rectangle(550,          25, 900, 50, { isStatic: true }),  // menu top
        Matter.Bodies.rectangle(550, canvas_h-15, 900, 30, { isStatic: true })   // menu bottom
    ]);

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

    this.animate()
  },
  methods: {
    ...mapActions(ConcernementsStore,['setMapMode']),
    ...mapActions(ConcernementsStore,['openCloseConcernements']),
    ...mapActions(ConcernementsStore,['resetConcernementOpened']),
    ...mapActions(CommonStore,['setHoverElmt']),
    animate () {
      Matter.Engine.update(this.engine, 1);
      window.requestAnimationFrame(this.animate);
    },
    onCanvasClick(event){
      // console.log('onCanvasClick');
      // use the canvas click to get back if no items is mousover
      if (!this.hover_elmt) {
        this.resetConcernementOpened();
        this.$router.push({
          name: 'home',
          hash: `#${this.map_mode}`
        });
      }
    }
  },
  beforeUpdate () {
  },
  components: {
    MapBackground,
    ConcernementMapPopup
  }
}

</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" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span>  terrain de vie</a>
      </li>
      <li>
        <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span>  proximité</a>
      </li>
      <li>
        <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span>  superposition</a>
      </li>
      <li>
        <a href="#puissancedagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span>  puissance d'agir</a>
      </li>
      <li>
        <a href="#action" @click="setMapMode('action')"><span class="icon action"></span>  action</a>
      </li>
      <li>
        <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span>  doléancer</a>
      </li>
    </ul>
  </nav>
  <ConcernementMapPopup
    v-if="hover_elmt"
    :infos="hover_elmt"
  />  
</template>

<style lang="css" scoped>

</style>