Added Rich Text Editor and minor tweaks (#416) (#417)

* Added Character Sheet Vue * Added Placeholder Skills and Stats tables * Updates to Stats table formatting * Added profeciency and styling to skills table * added races, classes, subclasses * added dynamic ability scores * fixed dynamic ability score logic to use watch * Working on profeciency checkbox bug * fixed checkbox bug and generalized stats table * update skills to be dynamically populated * added image url picker * Added saving and loading * Character Builder BETA (initial build) (#1) * Added Character Sheet Vue * Added Placeholder Skills and Stats tables * Updates to Stats table formatting * Added profeciency and styling to skills table * added races, classes, subclasses * added dynamic ability scores * fixed dynamic ability score logic to use watch * Working on profeciency checkbox bug * fixed checkbox bug and generalized stats table * update skills to be dynamically populated * added image url picker * Added saving and loading * Added backgrounds import * Added tabs and weapons logic * Move save load into component * fixed loading character bug * Got live save/load working with some cache bug * Fixed cache bug * added delete weapon functionality * Added start of powers header * Added max tech point calculations * added tech point limit * Added Caster Atribute * Added flex ordering to powers * Added biotics header info * Added Sentinel logic * added spell lookup * updated weapons and armor to match power architecture * Added character info tab searching * added vertical tabbing in character info * added vertical tab styling * added "other" section * style updates * added max hp * Added barrier filtering by class * Character Builder v1.0 * Added Character Sheet Vue * Added Placeholder Skills and Stats tables * Updates to Stats table formatting * Added profeciency and styling to skills table * added races, classes, subclasses * added dynamic ability scores * fixed dynamic ability score logic to use watch * Working on profeciency checkbox bug * fixed checkbox bug and generalized stats table * update skills to be dynamically populated * added image url picker * Added saving and loading * Added backgrounds import * Added tabs and weapons logic * Move save load into component * fixed loading character bug * Got live save/load working with some cache bug * Fixed cache bug * added delete weapon functionality * Added start of powers header * Added max tech point calculations * added tech point limit * Added Caster Atribute * Added flex ordering to powers * Added biotics header info * Added Sentinel logic * added spell lookup * updated weapons and armor to match power architecture * Added character info tab searching * added vertical tabbing in character info * added vertical tab styling * added "other" section * style updates * added max hp * Added barrier filtering by class * installed tiptap-vuetify 1.0.0 * added traits wysiwyg * generalized code into DocumentCollector.vue component * Added class features and dynamic template calc * Added all document collectors * Bug fixes for document collector * level validation and moved barrier usage * added import warning and some object validation Co-authored-by: bdc4 <[email protected]>
queryluke · Jun 25, 2020 · 50097b9 · 50097b9
1 parent b691067
commit 50097b9
Show file tree

Hide file tree

Showing 10 changed files with 617 additions and 106 deletions.
diff --git a/components/character_builder/CharacterSaveLoad.vue b/components/character_builder/CharacterSaveLoad.vue
@@ -2,7 +2,22 @@
   div
     v-btn(@click="saveFile()") Export Character Sheet
     input(type="file" ref="file" style="display: none" @change="loadTextFromFile" @load="character = $event")
-    v-btn(@click="$refs.file.click()") Import Character Sheet
+
+    v-dialog(v-model="dialog" width="500")
+      template(v-slot:activator="{on}")
+        v-btn(v-on="on") Import Character Sheet
+
+      v-card
+        v-card-title(primary-title)
+          h1 Warning!!
+        v-card-text()
+         p Importing a character will overwrite your currently open character.
+         p Are you sure you want to continue?
+        v-divider
+        v-card-actions
+          v-btn(color="primary" @click="dialog = false;") No
+          v-btn(@click="$refs.file.click(); dialog = false;") Yes
+
 </template>
 
 <script>
@@ -13,6 +28,11 @@
         default: () => {return {} }
       }
     },
+    data: function() {
+      return {
+        dialog: false
+      }
+    },
     methods: {
       saveFile: function() {
         const data = JSON.stringify(this.character);

diff --git a/components/character_builder/CharacterSheet.vue b/components/character_builder/CharacterSheet.vue
diff --git a/components/character_builder/DocumentCollector.vue b/components/character_builder/DocumentCollector.vue
@@ -0,0 +1,113 @@
+<template lang="pug">
+  div
+    h3 {{heading}}
+    br
+    v-layout(v-if="showSearch")
+      v-flex
+        v-autocomplete(label="Search the documentation..." :items="docs" v-model="search.model"
+        :item-text="itemText" return-object)
+      v-flex
+        v-btn(
+          @click="addToTable(search.model); search.model = '';"
+          v-if="search.model != '' ") Add Selected Item
+    v-layout
+      v-expansion-panel.mb-2
+        v-expansion-panel-content(v-for="(item, ind) in character_table" :key="ind + '-' + type + getHeading(character_table[ind])").large-panel
+          div(slot="header") {{getHeading(character_table[ind])}}
+          v-card.grey.lighten-3
+            v-card-text
+              Editor(:content="item" :index="ind"
+                @update:content="modifyTable($event); $forceUpdate();"
+                @remove:content="removeFromTable($event); $forceUpdate();")
+    v-layout.xs-text-left()
+      v-btn(@click="addToTable(undefined, '<h1>New Item ' + (character_table.length+1) + '</h1>')") Add Custom Entry
+</template>
+
+<script>
+
+import Editor from '~/components/character_builder/Editor.vue';
+
+export default {
+  components: {Editor},
+  props: {
+    showSearch: {
+      type: Boolean,
+      default: () => {return true;}
+    },
+    template: {
+      type: String,
+      default: () => {return '<h1>Item not found in docs</h1>'}
+    },
+    heading: {
+      type: String,
+      default: () => {return "Please Specify a Heading Text"}
+    },
+    itemText: {
+      type: String,
+      default: () => {return "title"}
+    },
+    type: {
+      type: String,
+      default: () => {return "default"}
+    },
+    docs: {
+      type: Array,
+      default: () => {return []}
+    },
+    character_table: {
+      type: Array,
+      default: () => {return []}
+    }
+  },
+  data: function() {
+    return {
+      search: {
+        model: ''
+      }
+    }
+  },
+  computed: {
+    event: function() {
+      return this.type;
+    }
+  },
+  methods: {
+    // Bubbles up the value to the inherited character array (ie: traits)
+    addToTable: function(model, value) {
+      if (!value) {
+        try {
+          model = require(`~/static/data/${this.type}/${model.id}.md`);//'<h1>'+model.title+'</h1><p>'+model.body+'</p>'
+          value = '<h1>'+model.attributes.name+'</h1>'  + model.html;
+        } catch {
+          value = '<h1>Not Found</h1><p>Something went wrong when trying to add this item...</p>';
+        }
+      }
+      console.log("Payload for add event: ", value);
+      this.$emit(this.event+":add", value);
+    },
+    removeFromTable: function(event) {
+      console.log("Payload for remove event: ", event);
+      this.$emit(this.event+":remove", event);
+    },
+    modifyTable: function(event) {
+      console.log("Payload for modify event: ", event);
+      this.$emit(this.event+":modify", event);
+    },
+    // Grabs the text out of the first found tag in the html
+    getHeading: function(html) {
+      var heading = "No Heading Found";
+      try {
+        heading = /(?<=\>)(?!\<)(.*?)(?=\<)(?<!\>)/.exec(html)[0];
+      } catch {
+        heading = "No Heading Found";
+      }
+      const headingLength = 50;
+      if (heading.length > headingLength) {
+        heading = heading.substring(0, 50);
+        heading += "...";
+      }
+      return heading;
+    }
+  }
+}
+</script>
diff --git a/components/character_builder/Editor.vue b/components/character_builder/Editor.vue
@@ -0,0 +1,84 @@
+<template lang="pug">
+  ClientOnly
+    // Use the component in the right place of the template
+    div
+      div(v-if="editMode")
+        tiptap-vuetify(v-model="html" :extensions="extensions")
+        v-btn(color="success" @click="save()") Save
+        v-btn(color="primary" @click="remove()" style="float: right;")
+          v-icon delete
+          span Remove
+
+      div(v-if="!editMode")
+        div(v-html="html")
+        v-btn(v-if="!editMode" @click="editMode = true;") Edit
+
+
+
+</template>
+
+<script>
+// import the component and the necessary extensions
+import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, CodeBlock, Paragraph, BulletList, OrderedList,
+  ListItem, Link, Blockquote, HardBreak, HorizontalRule, History
+} from 'tiptap-vuetify'
+
+export default {
+  // specify TiptapVuetify component in "components"
+  components: {TiptapVuetify},
+  props: {
+    content: {
+      type: String,
+      default: () => {return "Add Description Here!"}
+    },
+    index: {
+      type: Number,
+      default: () => {return -1}
+    }
+  },
+  data: function() {
+    return {
+      editMode: false,
+      // declare extensions you want to use
+      extensions: [
+        // you can specify options for extension
+        new Heading({
+          levels: [1, 2, 3]
+        }),
+        new Bold(),
+        new Italic(),
+        new Strike(),
+        new Underline(),
+        new Code(),
+        new CodeBlock(),
+        new Paragraph(),
+        new BulletList(),
+        new OrderedList(),
+        new ListItem(),
+        new Link(),
+        new Blockquote(),
+        new HardBreak(),
+        new HorizontalRule(),
+        new History()
+      ],
+      html: this.content
+    }
+  },
+  methods: {
+    save: function() {
+      this.$emit("update:content", {
+        index: this.index,
+        html: this.html
+      });
+      this.editMode = false;
+    },
+    remove: function() {
+      this.$emit("remove:content", {
+        index: this.index,
+        html: this.html
+      });
+      this.editMode = false;
+    }
+  }
+}
+</script>
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -74,6 +74,7 @@ module.exports = {
   plugins: [
     '@/plugins/vuetify',
     { src: '@/plugins/persistentState.js', ssr: false },
+    { src: '@/plugins/TiptapVuetify', mode: 'client' },
     '@/plugins/filters/index.js',
     '@/plugins/vue2-filters',
     '@/plugins/globals'
@@ -146,7 +147,7 @@ module.exports = {
   ** Build configuration
   */
   build: {
-    transpile: ['vuetify/lib'],
+    transpile: ['vuetify/lib', 'tiptap-vuetify'],
     plugins: [new VuetifyLoaderPlugin()],
     loaders: {
       stylus: {