started to open concernement on map click

src/App.vue

@@ -44,7 +44,7 @@ export default {
       <h1>
         <router-link :to="{ name: 'home' }">Où atterrir</router-link>  
       </h1>
-      <!-- <StaticMenu/> -->
+      <StaticMenu/>
       <UserBlock/>
     </div>
   </header>
@@ -58,7 +58,7 @@ export default {
         :opened="concernement.opened"
       />
     </MapConcernements>
-    <div id="content" class="row">
+    <div id="content">
       <RouterView />
     </div>
   </div>

src/api/gql/concernement.fragment.gql

@@ -1,6 +1,7 @@
 fragment ConcernementFields on Concernement {
   id
-  texte
+  description
+  caillou
   title
   recit {
     file {

src/assets/common.scss

@@ -1,6 +1,8 @@
+@use "sass:math";
+
 $pad_btn: 0.5em;
 @mixin btn() {
-  padding: $pad_btn/2 $pad_btn;
+  padding: math.div($pad_btn,2) $pad_btn;
   border-radius: 5px;
   background-color: $btns_back;
   cursor: pointer;

src/assets/layout.scss

@@ -85,14 +85,16 @@ html,body{
     }
   }
 
-  >.row{
-    @include layout-row();
-  }
+  // >.row{
+  //   @include layout-row();
+  // }
 
   #content{
+    box-sizing: border-box;
     position: absolute;
     top:0; right:0;
     height:100vh;
+    padding: 0.5rem;
   }
 
 }

src/assets/main.scss

@@ -69,6 +69,12 @@ body{
   }
 
   #content{
-
+    section.concernement{
+      background-color: rgba(255, 255, 255, 0.9);
+      box-sizing: border-box;
+      width:30em;
+      height: 100%;
+      padding: 1rem;
+    }
   }
 }

src/components/MapConcernements.vue

@@ -79,13 +79,13 @@ export default {
     let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
 
     // MATTER
-    let wall_w = 5;
+    let wall_w = 100;
     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
+        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
     ]);
 
     // add mouse control

src/main.js

@@ -12,6 +12,8 @@ const app = createApp(App)
 // https://vuejs.org/guide/components/provide-inject.html#provide
 app.config.unwrapInjectedRef = true;
 
-app.use(createPinia())
+const pinia = createPinia()
+pinia.use( ({store}) => { store.router = router } )
+app.use(pinia)
 app.use(router)
 app.mount('#app')

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@views/Home.vue'
-import StaticView from '@views/Static.vue'
+// import StaticView from '@views/Static.vue'
+// import ConcernementView from '@views/Concernement.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -18,6 +19,16 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/Static.vue'),
       props: true
+    },
+    {
+      path: '/concernement/:id',
+      name: 'concernement',
+      // component: ConcernementView,
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/Concernement.vue'),
+      props: true
     }
   ]
 })

src/stores/concernements.js

@@ -2,6 +2,8 @@ import { defineStore } from 'pinia'
 import { print } from 'graphql/language/printer'
 import gql from 'graphql-tag'
 
+
+
 // import REST from '@api/rest-axios'
 import GQL from '@api/graphql-axios'
 // import JSONAPI from '@api/json-axios'
@@ -47,6 +49,10 @@ export const ConcernementsStore = defineStore({
     openCloseConcernement (id, state) {
       // console.log('openCloseConcernement', id, state);
       this.concernementsByID[id].opened = state;
+      if (state) {
+        this.opened = this.concernementsByID[id];
+        this.router.push({name: 'concernement', params: {id: id}});
+      }
     }
   }
 })

src/views/Concernement.vue

@@ -0,0 +1,40 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+
+
+export default {
+  props: ['id'],
+  // data(){
+  //   return {
+  //     block: null
+  //   }
+  // },
+  computed: {
+    ...mapState(ConcernementsStore,['opened'])
+  },
+  created () {
+    // console.log("Concernement view created, id", this.opened.id);
+    // this.loadStatics()
+  },
+  methods: {
+    // ...mapActions(StaticsStore,['loadStatics'])
+  },
+  components: {
+  }
+}
+
+</script>
+
+<template>
+  <section class="concernement">
+    <h2>{{ opened.title }}</h2>
+    <div v-html="opened.description"/>
+    <div v-html="opened.caillou"/>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

vite.config.js

@@ -10,6 +10,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@stores': fileURLToPath(new URL('./src/stores', import.meta.url)),
       '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
       '@views': fileURLToPath(new URL('./src/views', import.meta.url)),
       '@api': fileURLToPath(new URL('./src/api', import.meta.url))