outils de création de sorts/monstres/objets

docs/.vuepress/theme/layouts/MagicItemLayout.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="magic-item">
-    <Breadcrumb />
-    <MagicItem />
+    <div class="d-flex align-center mb-4 d-print-none">
+      <Breadcrumb class="mr-auto" />
+      <v-btn color="primary" class="mr-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
+      <v-btn :outlined="!isMagicItemInTreasureChest" color="accent" class="mr-4" depressed @click="toggleMagicItemInTreasureChest"><v-icon>mdi-book</v-icon> {{ displayToggleMagicItemButton }}</v-btn>
+      <v-btn color="primary" class="mr-4" depressed link to="/mon-grimoire/">Mes objets magiques</v-btn>
+    </div>
+    <MagicItem :magicItem="$page" />
     <Edit />
   </div>
 </template>
@@ -20,6 +25,35 @@ export default {
     Edit
   },
 
+  computed: {
+    isMagicItemInTreasureChest () {
+      let isInTreasureChest = false
+      for (let s of this.$store.state.myMagicItems.magicItems) {
+        if (s.key == this.$page.key) {
+          isInTreasureChest = true
+        }
+      }
+      return isInTreasureChest
+    },
+
+    displayToggleMagicItemButton () {
+      if (this.isMagicItemInTreasureChest) {
+        return 'Supprimer de mes objets magiques'
+      }
+      return 'Ajouter à mes objets magiques'
+    }
+  },
+
+  methods: {
+    toggleMagicItemInTreasureChest () {
+      if (this.isMagicItemInTreasureChest) {
+        this.$store.commit('myMagicItems/removeMagicItem', this.$page)
+      } else {
+        this.$store.commit('myMagicItems/addMagicItem', this.$page)
+      }
+    }
+  },
+
   mounted () {
     this.$store.commit('setHasRightDrawer', false)
     this.$store.commit('setRightDrawer', false)