reactivity DeckEditor

frontend/src/classes/Deck.js

@@ -1,7 +1,23 @@
 'use strict'
 
+import CardsDB from '@/plugins/ffdecks'
+
 export default class {
-  constructor(str) {
+  constructor() {
+    this.id = null
+    this.name = ''
+    this.note = ''
+    this.cards = []
+  }
+
+  from_plainObject(obj) {
+    this.id = obj.id
+    this.name = obj.content.name
+    this.note = obj.content.note
+    this.cards = obj.content.cards
+  }
+
+  from_deckList(str) {
     // select all lines containing card serial numbers
     let cardLinesRE = /^.*\b\d-\d{3}[A-Z]?\b.*$/gm
     let cardLines = str.match(cardLinesRE)
@@ -29,8 +45,8 @@ export default class {
 
       // fallback value
       let count = 1
-      for (let i = 0; i < countREs.length; i++) {
-        let data = countREs[i].exec(cardLine)
+      for (let countRE of countREs) {
+        let data = countRE.exec(cardLine)
 
         if (data) {
           count = Number(data[1])
@@ -47,12 +63,12 @@ export default class {
 
     // push card data into deck
     this.cards = []
-    Object.keys(cardCounts).forEach(serial => {
+    for(let serial in cardCounts) {
       this.cards.push({
         serial: serial,
         count: cardCounts[serial]
       })
-    })
+    }
 
     // strip out lines with serial numbers
     str = str.replace(cardLinesRE, '')
@@ -82,10 +98,6 @@ export default class {
     }
   }
 
-  count() {
-    return this.cards.reduce((total, card) => total + card.count, 0)
-  }
-
   plainObject() {
     return {
       name: this.name,
@@ -93,4 +105,70 @@ export default class {
       cards: this.cards
     }
   }
+
+  parts() {
+    let retval = ['Forwards', 'Backups', 'Summons, Monsters & more'].map(
+      item => ({
+        heading: item,
+        cards: [],
+        count: 0
+      })
+    )
+
+    for (let card of this.cards) {
+      let target
+      switch (card.dbentry.type) {
+        case 'Forward':
+          target = 0
+          break
+        case 'Backup':
+          target = 1
+          break
+        default:
+          target = 2
+          break
+      }
+      retval[target].cards.push(card)
+      retval[target].count += card.count
+    }
+
+    for (let part of retval) {
+      part.cards.sort(
+        (card_l, card_r) => card_l.dbentry.cost - card_r.dbentry.cost
+      )
+    }
+
+    return retval
+  }
+
+  deckList() {
+    let lines = []
+
+    // begin with deck name and note
+    lines.push('Deck Name: ' + this.name)
+    lines.push(this.note)
+    lines.push('')
+
+    // list each deck part
+    for(let part of this.parts()) {
+      lines.push(`${part.heading} (${part.count}):`)
+
+      for(let card of part.cards)
+        lines.push(`${card.count}x ${card.serial} "${card.dbentry.name}"`)
+
+      lines.push('')
+    }
+
+    return lines.join('\n')
+  }
+
+  count() {
+    return this.cards.reduce((total, card) => total + card.count, 0)
+  }
+
+  populate() {
+    for (let card of this.cards) {
+      card.dbentry = CardsDB[card.serial]
+    }
+  }
 }

frontend/src/components/Deck.vue

@@ -10,7 +10,7 @@
 
     <v-container v-if="!editing" style="position: relative" grid-list-md fluid>
       <v-layout row wrap>
-        <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm6 md4>
+        <v-flex v-for="part in deck.parts()" :key="part.heading" xs12 sm6 md4>
           <v-card>
             <v-card-title>{{ part.count }} {{ part.heading }}</v-card-title>
             <v-list dense subheader>
@@ -30,17 +30,20 @@
         </v-btn>
       </v-layout>
     </v-container>
+
     <DeckEditor
       :visible="editing"
-      :id="deck.id"
-      :value="deck_list"
+      :deck="deck"
       @close="editing = false"
-      @change="$emit('change')"
+      @change="change_deck"
     />
   </v-expansion-panel-content>
 </template>
 
 <script>
+import * as Cookies from 'js-cookie'
+import axios from '@/plugins/axios'
+
 import Card from './Card.vue'
 import DeckEditor from './forms/DeckEditor.vue'
 
@@ -61,60 +64,24 @@ export default {
   }),
 
   computed: {
-    deck_parts() {
-      let retval = ['Forwards', 'Backups', 'Summons, Monsters & more'].map(
-        item => ({
-          heading: item,
-          cards: [],
-          count: 0
+    session: () => Cookies.get('session')
+  },
+
+  methods: {
+    change_deck(new_deck) {
+      axios
+        .post('/decks/modify', {
+          session: this.session,
+          deckID: this.deck.id,
+          deckCards: new_deck
+        })
+        .then(response => {
+          if (response.data.success) {
+            this.$emit('change')
+          } else {
+            this.editing = true
+          }
         })
-      )
-
-      this.deck.cards.forEach(card => {
-        let target
-        switch (card.dbentry.type) {
-          case 'Forward':
-            target = 0
-            break
-          case 'Backup':
-            target = 1
-            break
-          default:
-            target = 2
-            break
-        }
-        retval[target].cards.push(card)
-        retval[target].count += card.count
-      })
-
-      retval.forEach(part =>
-        part.cards.sort(
-          (card_l, card_r) => card_l.dbentry.cost - card_r.dbentry.cost
-        )
-      )
-
-      return retval
-    },
-
-    deck_list() {
-      let lines = []
-
-      // begin with deck name and note
-      lines.push('Deck Name: ' + this.deck.name)
-      lines.push(this.deck.note)
-      lines.push('')
-
-      // list each deck part
-      this.deck_parts.forEach(part => {
-        lines.push(`${part.heading} (${part.count}):`)
-
-        part.cards.forEach(card =>
-          lines.push(`${card.count}x ${card.serial} "${card.dbentry.name}"`)
-        )
-        lines.push('')
-      })
-
-      return lines.join('\n')
     }
   }
 }

frontend/src/components/DeckList.vue

@@ -1,26 +1,29 @@
 <template>
-  <v-expansion-panel v-if="linked_decks">
+  <v-expansion-panel>
     <Deck
-      v-for="deck in linked_decks"
+      v-for="deck in linked"
       :deck="deck"
       :key="deck.id"
       @change="refresh_decks"
     />
+    <NewDeck />
   </v-expansion-panel>
 </template>
 
 <script>
 import * as Cookies from 'js-cookie'
 import axios from '@/plugins/axios'
-import CardsDB from '@/plugins/ffdecks'
+import DeckJS from '@/classes/Deck'
 
 import Deck from './Deck.vue'
+import NewDeck from './NewDeck.vue'
 
 export default {
   name: 'DeckList',
 
   components: {
-    Deck
+    Deck,
+    NewDeck
   },
 
   asyncComputed: {
@@ -43,29 +46,15 @@ export default {
   computed: {
     session: () => Cookies.get('session'),
 
-    linked_decks() {
+    linked() {
       let result = []
 
-      for (let i = 0; i < this.decks.length; i++) {
-        let elem = this.decks[i]
-        let cards = []
+      for (let plainDeck of this.decks) {
+        let deck = new DeckJS()
+        deck.from_plainObject(plainDeck)
+        deck.populate()
 
-        for (let j = 0; j < elem.content.cards.length; j++) {
-          let card = elem.content.cards[j]
-
-          cards.push({
-            count: card.count,
-            serial: card.serial,
-            dbentry: CardsDB[card.serial]
-          })
-        }
-
-        result.push({
-          id: elem.id,
-          name: elem.content.name,
-          note: elem.content.note,
-          cards: cards
-        })
+        result.push(deck)
       }
 
       return result

frontend/src/components/NewDeck.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-expansion-panel-content>
+    <template v-slot:header>
+      <span class="subheading">New Deck</span>
+    </template>
+
+    <v-container>
+      <v-card flat>
+        <!-- <DeckEditor :visible="true" value="" @close="" @change="" /> -->
+      </v-card>
+    </v-container>
+  </v-expansion-panel-content>
+</template>
+
+<script>
+import DeckEditor from './forms/DeckEditor.vue'
+
+export default {
+  name: 'NewDeck',
+
+  components: {
+    DeckEditor
+  }
+}
+</script>

frontend/src/components/forms/DeckEditor.vue

@@ -11,12 +11,11 @@
 
       <v-textarea
         label="Edit Deck"
-        :value="value"
+        v-model="new_decklist"
         rows="35"
         hint="Change card counts and/or serial numbers. Names will be updated accordingly!"
         style="font-family: monospace"
         @input="check.checked = false"
-        @change="new_decklist = $event"
       >
       </v-textarea>
 
@@ -47,16 +46,13 @@
 </template>
 
 <script>
-import * as Cookies from 'js-cookie'
-import axios from '@/plugins/axios'
 import Deck from '@/classes/Deck'
 
 export default {
   name: 'DeckEditor',
 
   props: {
-    id: Number,
-    value: String,
+    deck: Object,
     visible: Boolean
   },
 
@@ -69,23 +65,24 @@ export default {
     new_decklist: null
   }),
 
-  computed: {
-    session: () => Cookies.get('session'),
+  created() {
+    this.new_decklist = this.deck.deckList()
+  },
 
+  computed: {
     new_deck() {
-      let deck
-      try {
-        deck = new Deck(this.new_decklist)
-      } catch (e) {
-        deck = new Deck(this.value)
-      }
+      let deck = new Deck()
+      deck.from_deckList(this.new_decklist)
+      deck.populate()
+
+      this.new_decklist = deck.deckList()
       return deck
     }
   },
 
   methods: {
     close() {
-      this.checked = false
+      this.check.checked = false
       this.$emit('close')
     },
 
@@ -104,18 +101,8 @@ export default {
     },
 
     save_deck() {
-      axios
-        .post('/decks/modify', {
-          session: this.session,
-          deckID: this.id,
-          deckCards: this.new_deck.plainObject()
-        })
-        .then(response => {
-          if (response.data.success) {
-            this.$emit('change')
-            this.close()
-          }
-        })
+      this.$emit('change', this.new_deck.plainObject())
+      this.close()
     }
   }
 }