possibilité de partager des créations

docs/.vuepress/config.js

@@ -185,6 +185,12 @@ module.exports = {
        frontmatter: {
           layout: 'AbilityCalculatorLayout'
        }
+    },
+    {
+       path: '/homebrew/',
+       frontmatter: {
+          layout: 'HomebrewLayout'
+       }
     }
   ],
   themeConfig: {

docs/.vuepress/store/index.js

@@ -32,6 +32,8 @@ export default new Vuex.Store({
     isThemeDark: false,
     isOpenAboutDialog: false,
     isOpenSupportDialog: false,
+    isOpenShareHomebrewDialog: false,
+    shareURI: '',
     isOpenSnackbar: false,
     snackbarText: '',
     l5r: false
@@ -46,6 +48,8 @@ export default new Vuex.Store({
     isThemeDark: state => state.isThemeDark,
     isOpenAboutDialog: state => state.isOpenAboutDialog,
     isOpenSupportDialog: state => state.isOpenSupportDialog,
+    isOpenShareHomebrewDialog: state => state.isOpenShareHomebrewDialog,
+    shareURI: state => state.shareURI,
     isOpenSnackbar: state => state.isOpenSnackbar,
     l5r: state => state.l5r,
   },
@@ -113,6 +117,12 @@ export default new Vuex.Store({
     setIsOpenSupportDialog: (state, payload) => {
       state.isOpenSupportDialog = payload
     },
+    setIsOpenShareHomebrewDialog: (state, payload) => {
+      state.isOpenShareHomebrewDialog = payload
+    },
+    setShareURI: (state, payload) => {
+      state.shareURI = payload
+    },
     setIsOpenSnackbar: (state, payload) => {
       state.isOpenSnackbar = payload
       if (payload === true) {

docs/.vuepress/theme/components/MagicItem.vue

@@ -15,6 +15,7 @@
     <div v-else v-html="md.render(magicItem.content)" class="mt-4"></div>
 
     <p v-if="$page.frontmatter.source" class="source">Source : <em>{{ $page.frontmatter.source }}</em></p>
+    <p v-if="magicItem.author" class="source">Auteur : <em>{{ magicItem.author }}</em></p>
 
   </main>
 </template>

docs/.vuepress/theme/components/Monster.vue

@@ -153,6 +153,7 @@
     <div v-else v-html="md.render(monster.content)" class="mt-4"></div>
 
     <p v-if="$page.frontmatter.source" class="source">Source : <em>{{ monsterStats.source }}</em><template v-if="monsterStats.source_page">, page {{ monsterStats.source_page }}</template></p>
+    <p v-if="monster.author" class="source">Auteur : <em>{{ monster.author }}</em></p>
 
   </main>
 </template>

docs/.vuepress/theme/components/Spell.vue

@@ -33,6 +33,7 @@
     <div v-else v-html="spell.frontmatter.description" class="mt-4"></div>
 
     <p v-if="spell.frontmatter.source" class="source">Source : <em>{{ spell.frontmatter.source }}</em></p>
+    <p v-if="spell.author" class="source">Auteur : <em>{{ spell.author }}</em></p>
 
   </main>
 </template>

docs/.vuepress/theme/layouts/CreateMagicItemLayout.vue

@@ -19,7 +19,8 @@
       <input ref="uploader" class="d-none" type="file" @change="upload">
       <v-btn :outlined="!isMagicItemInTreasureChest" color="accent" class="mr-1 mb-1" depressed @click="toggleMagicItemInTreasureChest"><v-icon>mdi-book</v-icon> {{ displayToggleMagicItemButton }}</v-btn>
       <v-btn :disabled="!isMagicItemInTreasureChest" outlined color="accent" class="mr-1 mb-1" depressed @click="updateMagicItemInTreasureChest"><v-icon>mdi-update</v-icon> MàJ dans le grimoire</v-btn>
-      <v-btn outlined color="error" class="mb-1" depressed @click="reset"><v-icon>mdi-eraser</v-icon> Réinitialiser</v-btn>
+      <v-btn outlined color="error" class="mr-1 mb-1" depressed @click="reset"><v-icon>mdi-eraser</v-icon> Réinitialiser</v-btn>
+      <v-btn outlined class="mb-1" depressed @click="share"><v-icon left>mdi-share-variant</v-icon> Partager</v-btn>
     </div>
 
     <v-row>
@@ -55,6 +56,12 @@
           </v-col>
         </v-row>
 
+        <v-row>
+          <v-col>
+            <v-text-field outlined label="Auteur" v-model="magicItem.author"></v-text-field>
+          </v-col>
+        </v-row>
+
       </v-col>
 
       <v-col :col="6">
@@ -70,6 +77,7 @@ import MagicItem from '@theme/components/MagicItem'
 import { saveAs } from 'file-saver'
 import { MAGICITEMTYPES, RARITIES } from '../../data/magicItems'
 import { getUrlParameter } from '@theme/util/filterHelpers'
+import { encode } from '@theme/util/homebrew'
 import slugify from 'slugify'
 slugify.extend({"'": '-'})
 
@@ -118,6 +126,7 @@ export default {
         custom: true,
         pid: 'magicitem',
         key: null,
+        author: '',
         title: '',
         content: '',
         hasAttunement: false,
@@ -223,6 +232,11 @@ export default {
           attunement: '',
         }
       }
+    },
+
+    share () {
+      this.$store.commit('setShareURI', encode(this.magicItem))
+      this.$store.commit('setIsOpenShareHomebrewDialog', true)
     }
   },
 

docs/.vuepress/theme/layouts/CreateMonsterLayout.vue

@@ -20,7 +20,8 @@
       <input ref="uploader" class="d-none" type="file" @change="upload">
       <v-btn :outlined="!isMonsterInBestiary" color="accent" class="mr-1 mb-1" depressed @click="toggleMonsterInBestiary"><v-icon>mdi-book</v-icon> {{ displayToggleMonsterButton }}</v-btn>
       <v-btn :disabled="!isMonsterInBestiary" outlined color="accent" class="mr-1 mb-1" depressed @click="updateMonsterInBestiary"><v-icon>mdi-update</v-icon> MàJ dans le bestiaire</v-btn>
-      <v-btn outlined color="error" class="mb-1" depressed @click="reset"><v-icon>mdi-eraser</v-icon> Réinitialiser</v-btn>
+      <v-btn outlined color="error" class="mr-1 mb-1" depressed @click="reset"><v-icon>mdi-eraser</v-icon> Réinitialiser</v-btn>
+      <v-btn outlined class="mb-1" depressed @click="share"><v-icon left>mdi-share-variant</v-icon> Partager</v-btn>
     </div>
 
     <v-row>
@@ -203,6 +204,12 @@
           </v-col>
         </v-row>
 
+        <v-row>
+          <v-col>
+            <v-text-field outlined label="Auteur" v-model="monster.author"></v-text-field>
+          </v-col>
+        </v-row>
+
       </v-col>
 
       <v-col :cols="12" :md="6">
@@ -224,6 +231,7 @@ import { DAMAGETYPES } from '../../data/damageTypes'
 import { LANGUAGES } from '../../data/languages'
 import { getUrlParameter } from '@theme/util/filterHelpers'
 import { isResourceInLibrary } from '@theme/util'
+import { encode } from '@theme/util/homebrew'
 import { getProficiencyBonus, displayBonus } from '@theme/util/monsterHelpers'
 import slugify from 'slugify'
 slugify.extend({"'": '-'})
@@ -276,6 +284,7 @@ export default {
         custom: true,
         pid: 'monster',
         key: null,
+        author: '',
         title: '',
         content: `## Capacités\n_**Capacité**_. Description de la capacité.\n\n## Actions\n_**Action**_. Description de l'action.`,
         frontmatter: {
@@ -495,6 +504,11 @@ export default {
         this.monster.frontmatter.skills[idx].isExpert = this.selectedSkillsExpert.indexOf(mskill.name) >= 0
       })
     },
+
+    share () {
+      this.$store.commit('setShareURI', encode(this.monster))
+      this.$store.commit('setIsOpenShareHomebrewDialog', true)
+    }
   },
 
   mounted () {

docs/.vuepress/theme/layouts/CreateSpellLayout.vue

@@ -11,15 +11,16 @@
     <h1 class="d-print-none">Création de sort</h1>
 
     <div class="my-4 d-flex flex-wrap d-print-none">
-      <v-btn outlined color="accent" class="mr-1 mb-1" depressed @click="print"><v-icon>mdi-printer</v-icon> Imprimer</v-btn>
-      <v-btn outlined color="accent" class="mr-1 mb-1" depressed @click="download"><v-icon>mdi-file-download</v-icon> Sauvegarder</v-btn>
+      <v-btn outlined color="accent" class="mr-1 mb-1" depressed @click="print"><v-icon left>mdi-printer</v-icon> Imprimer</v-btn>
+      <v-btn outlined color="accent" class="mr-1 mb-1" depressed @click="download"><v-icon left>mdi-file-download</v-icon> Sauvegarder</v-btn>
       <v-btn outlined color="accent" class="mr-1 mb-1" depressed :loading="isUploading" @click="onUploadClick">
         <v-icon left>mdi-file-upload</v-icon> Charger
       </v-btn>
       <input ref="uploader" class="d-none" type="file" @change="upload">
-      <v-btn :outlined="!isSpellInSpellBook" color="accent" class="mr-1 mb-1" depressed @click="toggleSpellInSpellBook"><v-icon>mdi-book</v-icon> {{ displayToggleSpellButton }}</v-btn>
-      <v-btn :disabled="!isSpellInSpellBook" outlined color="accent" class="mr-1 mb-1" depressed @click="updateSpellInSpellBook"><v-icon>mdi-update</v-icon> MàJ dans le grimoire</v-btn>
-      <v-btn outlined color="error" class="mb-1" depressed @click="reset"><v-icon>mdi-eraser</v-icon> Réinitialiser</v-btn>
+      <v-btn :outlined="!isSpellInSpellBook" color="accent" class="mr-1 mb-1" depressed @click="toggleSpellInSpellBook"><v-icon left>mdi-book</v-icon> {{ displayToggleSpellButton }}</v-btn>
+      <v-btn :disabled="!isSpellInSpellBook" outlined color="accent" class="mr-1 mb-1" depressed @click="updateSpellInSpellBook"><v-icon left>mdi-update</v-icon> MàJ dans le grimoire</v-btn>
+      <v-btn outlined color="error" class="mr-1 mb-1" depressed @click="reset"><v-icon left>mdi-eraser</v-icon> Réinitialiser</v-btn>
+      <v-btn outlined class="mb-1" depressed @click="share"><v-icon left>mdi-share-variant</v-icon> Partager</v-btn>
     </div>
 
     <v-row>
@@ -94,6 +95,12 @@
           </v-col>
         </v-row>
 
+        <v-row>
+          <v-col>
+            <v-text-field outlined label="Auteur" v-model="spell.author"></v-text-field>
+          </v-col>
+        </v-row>
+
       </v-col>
 
       <v-col :cols="12" :md="6">
@@ -111,6 +118,7 @@ import { CLASSES } from '../../data/classes'
 import { SPELLSCHOOLS, SPELLLEVELS } from '../../data/spells'
 import { getUrlParameter } from '@theme/util/filterHelpers'
 import { isResourceInLibrary } from '@theme/util'
+import { encode } from '@theme/util/homebrew'
 import slugify from 'slugify'
 slugify.extend({"'": '-'})
 
@@ -132,7 +140,7 @@ export default {
         return 'Supprimer de mon grimoire'
       }
       return 'Ajouter à mon grimoire'
-    }
+    },
   },
 
   data () {
@@ -145,6 +153,7 @@ export default {
         custom: true,
         pid: 'spell',
         key: null,
+        author: '',
         title: '',
         content: '',
         frontmatter: {
@@ -263,6 +272,11 @@ export default {
           }
         }
       }
+    },
+
+    share () {
+      this.$store.commit('setShareURI', encode(this.spell))
+      this.$store.commit('setIsOpenShareHomebrewDialog', true)
     }
   },
 

docs/.vuepress/theme/layouts/GlobalLayout.vue

@@ -46,6 +46,22 @@
       </v-btn>
     </v-snackbar>
 
+    <v-dialog v-model="$store.state.isOpenShareHomebrewDialog" @click:outside="$store.commit('setIsOpenShareHomebrewDialog', !$store.state.isOpenShareHomebrewDialog)" max-width="600">
+      <v-card>
+        <v-card-title class="headline d-flex justify-space-between">
+          <span>Partage</span></span>
+          <v-btn color="primary" icon @click="$store.commit('setIsOpenShareHomebrewDialog', !$store.state.isOpenShareHomebrewDialog)"><v-icon>mdi-close</v-icon></v-btn>
+        </v-card-title>
+
+        <v-card-text>
+          <v-text-field id="copy-uri" outlined readonly label="Copiez le lien pour partager" :hint="hintCopied" :value="$site.themeConfig.domain + '/homebrew/?brew=' + $store.state.shareURI" append-outer-icon="mdi-content-copy" @click:append-outer="copyURI('copy-uri')"></v-text-field>
+          <div class="text-center">
+            <v-btn color="accent" depressed link :to="{ path: '/homebrew/', query: { brew: $store.state.shareURI }}" @click="$store.commit('setIsOpenShareHomebrewDialog', !$store.state.isOpenShareHomebrewDialog)">Voir la page</v-btn>
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
   </v-app>
 </template>
 
@@ -74,7 +90,8 @@ export default {
   data () {
     return {
       cookieConsentDialog: true,
-      toTopButton: false
+      toTopButton: false,
+      hintCopied: ''
     }
   },
 
@@ -158,6 +175,17 @@ export default {
     setRightDrawer () {
       this.$store.commit('setRightDrawer', !this.$store.state.rightDrawer)
     },
+
+    copyURI(id) {
+      let toCopy = document.getElementById(id)
+      toCopy.select()
+      document.execCommand( 'copy' )
+      this.hintCopied = "L'adresse a été copiée dans le presse-papier"
+      let self = this
+      setTimeout(function () {
+        self.hintCopied = ''
+      }, 2000)
+    }
   }
 }
 </script>

docs/.vuepress/theme/layouts/HomebrewLayout.vue

@@ -0,0 +1,164 @@
+<template>
+<div class="homebrew">
+  <div class="text-center" v-if="brew === null">
+    Ressource incorrecte
+  </div>
+
+  <div class="spell" v-else-if="brew.pid && brew.pid == 'spell'">
+    <div class="d-flex flex-wrap align-center d-print-none">
+      <v-spacer />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn outlined class="mr-4 mb-4" depressed @click="share"><v-icon left>mdi-share-variant</v-icon> Partager</v-btn>
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
+        <v-btn :outlined="!isSpellInSpellBook" color="accent" class="mr-4 mb-4" depressed @click="toggleSpellInSpellBook"><v-icon>mdi-book</v-icon> {{ displayToggleSpellButton }}</v-btn>
+        <MySpellsButton />
+      </div>
+    </div>
+    <Spell :spell="brew" />
+  </div>
+
+  <div class="monster" v-else-if="brew.pid && brew.pid == 'monster'">
+    <div class="d-flex flex-wrap align-center d-print-none">
+      <v-spacer />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn outlined class="mr-4 mb-4" depressed @click="share"><v-icon left>mdi-share-variant</v-icon> Partager</v-btn>
+        <v-btn :outlined="!$store.state.l5r" color="primary" class="mr-4 mb-4" depressed @click="$store.commit('setL5r', !$store.state.l5r)"><span class="orn">8</span> Règles cinq royaumes</v-btn>
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre/PNJ</v-btn>
+        <v-btn :outlined="!isMonsterInBestiary" color="accent" class="mr-4 mb-4" depressed @click="toggleMonsterInBestiary"><v-icon>mdi-book</v-icon> {{ displayToggleMonsterButton }}</v-btn>
+        <MyMonstersButton />
+      </div>
+    </div>
+    <Monster :monster="brew" />
+  </div>
+
+  <div class="magic-item" v-else-if="brew.pid && brew.pid == 'magicitem'">
+    <div class="d-flex flex-wrap align-center d-print-none">
+      <v-spacer />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn outlined class="mr-4 mb-4" depressed @click="share"><v-icon left>mdi-share-variant</v-icon> Partager</v-btn>
+        <v-btn color="primary" class="mr-4 mb-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 mb-4" depressed @click="toggleMagicItemInTreasureChest"><v-icon>mdi-book</v-icon> {{ displayToggleMagicItemButton }}</v-btn>
+        <MyMagicItemsButton />
+      </div>
+    </div>
+    <MagicItem :magicItem="brew" />
+  </div>
+
+</div>
+</template>
+
+<script>
+import { decode } from '@theme/util/homebrew'
+import { isResourceInLibrary } from '@theme/util'
+import Spell from '@theme/components/Spell'
+import Monster from '@theme/components/Monster'
+import MagicItem from '@theme/components/MagicItem'
+import MySpellsButton from '@theme/global-components/MySpellsButton'
+import MyMonstersButton from '@theme/global-components/MyMonstersButton'
+import MyMagicItemsButton from '@theme/global-components/MyMagicItemsButton'
+
+export default {
+  components: {
+    Spell,
+    Monster,
+    MagicItem,
+    MySpellsButton,
+    MyMonstersButton,
+    MyMagicItemsButton
+  },
+
+  data () {
+    return {
+      brew: null
+    }
+  },
+
+  mounted () {
+    let brew64 = this.$route.query.brew
+    if (brew64) {
+      this.brew = decode(brew64)
+    }
+  },
+
+  computed: {
+    isSpellInSpellBook () {
+      return isResourceInLibrary(this.brew, this.$store.state.mySpells.spells)
+    },
+
+    displayToggleSpellButton () {
+      if (this.isSpellInSpellBook) {
+        return 'Supprimer de mon grimoire'
+      }
+      return 'Ajouter à mon grimoire'
+    },
+
+    isMonsterInBestiary () {
+      return isResourceInLibrary(this.brew, this.$store.state.myMonsters.monsters)
+    },
+
+    displayToggleMonsterButton () {
+      if (this.isMonsterInBestiary) {
+        return 'Supprimer de mon bestiaire'
+      }
+      return 'Ajouter à mon bestiaire'
+    },
+
+    isMagicItemInTreasureChest () {
+      return isResourceInLibrary(this.brew, this.$store.state.myMagicItems.magicItems)
+    },
+
+    displayToggleMagicItemButton () {
+      if (this.isMagicItemInTreasureChest) {
+        return 'Supprimer de mes objets magiques'
+      }
+      return 'Ajouter à mes objets magiques'
+    }
+  },
+
+  methods: {
+    share () {
+      this.$store.commit('setShareURI', this.$route.query.brew)
+      this.$store.commit('setIsOpenShareHomebrewDialog', true)
+    },
+
+    toggleSpellInSpellBook () {
+      if (this.isSpellInSpellBook) {
+        this.$store.commit('mySpells/removeSpell', this.brew)
+        this.$store.commit('setSnackbarText', "Le sort " + this.brew.title + " a été supprimé de votre grimoire")
+        this.$store.commit('setIsOpenSnackbar', true)
+      } else {
+        this.$store.commit('mySpells/addSpell', this.brew)
+        this.$store.commit('setSnackbarText', "Le sort " + this.brew.title + " a été ajouté à votre grimoire")
+        this.$store.commit('setIsOpenSnackbar', true)
+      }
+    },
+
+    toggleMonsterInBestiary () {
+      if (this.isMonsterInBestiary) {
+        this.$store.commit('myMonsters/removeMonster', this.brew)
+        this.$store.commit('setSnackbarText', "Le monstre " + this.brew.title + " a été supprimé de votre bestiaire")
+        this.$store.commit('setIsOpenSnackbar', true)
+      } else {
+        this.$store.commit('myMonsters/addMonster', this.brew)
+        this.$store.commit('setSnackbarText', "Le monstre " + this.brew.title + " a été ajouté à votre bestiaire")
+        this.$store.commit('setIsOpenSnackbar', true)
+      }
+    },
+
+    toggleMagicItemInTreasureChest () {
+      if (this.isMagicItemInTreasureChest) {
+        this.$store.commit('myMagicItems/removeMagicItem', this.brew)
+        this.$store.commit('setSnackbarText', "L'objet magique " + this.brew.title + " a été supprimé de votre bibliothèque")
+        this.$store.commit('setIsOpenSnackbar', true)
+      } else {
+        this.$store.commit('myMagicItems/addMagicItem', this.brew)
+        this.$store.commit('setSnackbarText', "L'objet magique " + this.brew.title + " a été ajouté à votre bibliothèque")
+        this.$store.commit('setIsOpenSnackbar', true)
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

docs/.vuepress/theme/layouts/MonsterLayout.vue

@@ -4,7 +4,7 @@
       <Breadcrumb class="mr-auto mb-4" />
       <div class="d-flex flex-wrap align-center">
         <v-btn :outlined="!$store.state.l5r" color="primary" class="mr-4 mb-4" depressed @click="$store.commit('setL5r', !$store.state.l5r)"><span class="orn">8</span> Règles cinq royaumes</v-btn>
-        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre/PNJ</v-btn>
         <v-btn :outlined="!isMonsterInBestiary" color="accent" class="mr-4 mb-4" depressed @click="toggleMonsterInBestiary"><v-icon>mdi-book</v-icon> {{ displayToggleMonsterButton }}</v-btn>
         <MyMonstersButton />
       </div>

docs/.vuepress/theme/layouts/MonstersLayout.vue

@@ -5,7 +5,7 @@
       <Breadcrumb class="mr-auto mb-4" />
       <div class="d-flex flex-wrap align-center">
         <v-btn :outlined="!$store.state.l5r" color="primary" class="mr-4 mb-4" depressed @click="$store.commit('setL5r', !$store.state.l5r)"><span class="orn">8</span> Règles cinq royaumes</v-btn>
-        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre/PNJ</v-btn>
         <MyMonstersButton />
       </div>
     </div>

docs/.vuepress/theme/styles/_blocks.scss

@@ -21,3 +21,17 @@
     color: #fff;
   }
 }
+
+blockquote {
+  background-color: #eee;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  margin-bottom: 16px;
+  border-left: 3px solid #ccc;
+  font-style: italic;
+
+  p {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

docs/.vuepress/theme/styles/_typography.scss

@@ -58,7 +58,7 @@
   }
 }
 
-ul {
+ul, ol {
   margin-bottom: 16px;
 }
 

docs/.vuepress/theme/util/homebrew.js

@@ -0,0 +1,7 @@
+export function encode (o) {
+  return btoa(unescape(encodeURIComponent(JSON.stringify(o))))
+}
+
+export function decode (s) {
+  return JSON.parse(decodeURIComponent(escape(atob(s))))
+}