frontend/src/classes/Deck.js

@@ -1,174 +0,0 @@
-'use strict'
-
-import CardsDB from '@/plugins/ffdecks'
-
-export default class {
-  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)
-    let cardCounts = {}
-
-    cardLines.forEach(cardLine => {
-      // extract serial (guaranteed to be in here!)
-      let serialRE = /\b(\d-\d{3})[A-Z]?\b/i
-      let serial = serialRE.exec(cardLine)[1]
-
-      // strip out serial number
-      cardLine = cardLine.replace(serialRE, '')
-
-      let countREs = [
-        // prioritize a count with "times" symbol *, x, ×
-        /\b([0-9]+)(?:[*×]|[x]\b)/,
-        /(?:[*×]|\b[x])([0-9]+)\b/,
-        // next priority: count with whitespace
-        /\s+([0-9]+)\s+/,
-        /\s+([0-9]+)\b/,
-        /\b([0-9]+)\s+/,
-        // least priority: any simple number
-        /\b([0-9]+)\b/
-      ]
-
-      // fallback value
-      let count = 1
-      for (let countRE of countREs) {
-        let data = countRE.exec(cardLine)
-
-        if (data) {
-          count = Number(data[1])
-          break
-        }
-      }
-
-      // count copies
-      if (!cardCounts[serial]) {
-        cardCounts[serial] = 0
-      }
-      cardCounts[serial] += count
-    })
-
-    // push card data into deck
-    this.cards = []
-    for(let serial in cardCounts) {
-      this.cards.push({
-        serial: serial,
-        count: cardCounts[serial]
-      })
-    }
-
-    // strip out lines with serial numbers
-    str = str.replace(cardLinesRE, '')
-    // then strip out anything after the first empty line
-    str = str.replace(/^[\s]*$[^]*/m, '')
-
-    // select the line containing 'deck name:'
-    // and its successor (ffdecks format)
-    let metaRE = /^Deck Name: (.+)$[\s]*?^(.+)$/m
-    let metaData = metaRE.exec(str)
-
-    // fallback
-    this.name = 'Unnamed Deck'
-    this.note = ''
-
-    if (!metaData) {
-      // use lax format: <anything>:[deck name][newline][note]
-      metaRE = /[^]*?:(.+)$[\s]*?^([^]*)/m
-      metaData = metaRE.exec(str)
-    }
-
-    // look again, I am not an else!
-    if (metaData) {
-      // extract matches
-      this.name = metaData[1].trim()
-      this.note = metaData[2].trim()
-    }
-  }
-
-  plainObject() {
-    return {
-      name: this.name,
-      note: this.note,
-      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,20 +30,16 @@
         </v-btn>
       </v-layout>
     </v-container>
-
     <DeckEditor
       :visible="editing"
-      :deck="deck"
+      :id="deck.id"
+      :value="deck_list"
       @close="editing = false"
-      @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'
 
@@ -64,24 +60,60 @@ export default {
   }),
 
   computed: {
-    session: () => Cookies.get('session')
+    deck_parts() {
+      let retval = ['Forwards', 'Backups', 'Summons, Monsters & more'].map(
+        item => ({
+          heading: item,
+          cards: [],
+          count: 0
+        })
+      )
+
+      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
     },
 
-  methods: {
+    deck_list() {
-    change_deck(new_deck) {
+      let lines = []
-      axios
+
-        .post('/decks/modify', {
+      // begin with deck name and note
-          session: this.session,
+      lines.push('Deck Name: ' + this.deck.name)
-          deckID: this.deck.id,
+      lines.push(this.deck.note)
-          deckCards: new_deck
+      lines.push('')
-        })
+
-        .then(response => {
+      // list each deck part
-          if (response.data.success) {
+      this.deck_parts.forEach(part => {
-            this.$emit('change')
+        lines.push(`${part.heading} (${part.count}):`)
-          } else {
+
-            this.editing = true
+        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,29 +1,21 @@
 <template>
-  <v-expansion-panel>
+  <v-expansion-panel v-if="linked_decks">
-    <Deck
+    <Deck v-for="deck in linked_decks" :deck="deck" :key="deck.id" />
-      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 DeckJS from '@/classes/Deck'
+import CardsDB from '@/plugins/ffdecks'
 
 import Deck from './Deck.vue'
-import NewDeck from './NewDeck.vue'
 
 export default {
   name: 'DeckList',
 
   components: {
-    Deck,
+    Deck
-    NewDeck
   },
 
   asyncComputed: {
@@ -46,25 +38,33 @@ export default {
   computed: {
     session: () => Cookies.get('session'),
 
-    linked() {
+    linked_decks() {
       let result = []
 
-      for (let plainDeck of this.decks) {
+      for (let i = 0; i < this.decks.length; i++) {
-        let deck = new DeckJS()
+        let elem = this.decks[i]
-        deck.from_plainObject(plainDeck)
+        let cards = []
-        deck.populate()
 
-        result.push(deck)
+        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
+        })
       }
 
       return result
     }
-  },
-
-  methods: {
-    refresh_decks() {
-      this.$asyncComputed.decks.update()
-    }
   }
 }
 </script>

frontend/src/components/NewDeck.vue

@@ -1,25 +0,0 @@
-<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

@@ -1,21 +1,22 @@
 <template>
   <v-container v-if="visible">
     <v-card flat>
-      <v-alert :value="check.count !== 50" type="warning">
+      <v-alert :value="count !== 50" type="warning">
-        {{ check.count }} cards detected! (Decks should have exactly 50 cards)
+        {{ count }} cards detected! (Decks should have exactly 50 cards)
       </v-alert>
-      <v-alert :value="check.maximum > 3" type="warning">
+      <v-alert :value="maximum > 3" type="warning">
-        Card with {{ check.maximum }} copies detected! (Cards should not have
+        Card with {{ maximum }} copies detected! (Cards should not have more
-        more than 3 copies)
+        than 3 copies)
       </v-alert>
 
       <v-textarea
+        ref="textarea"
         label="Edit Deck"
-        v-model="new_decklist"
+        :value="value"
         rows="35"
         hint="Change card counts and/or serial numbers. Names will be updated accordingly!"
         style="font-family: monospace"
-        @input="check.checked = false"
+        @input="checked = false"
       >
       </v-textarea>
 
@@ -27,16 +28,12 @@
 
         <v-spacer></v-spacer>
 
-        <v-btn color="info" @click.native="check_deck">
+        <v-btn color="info" @click.native="check">
           <v-icon>check</v-icon>
           validate
         </v-btn>
 
-        <v-btn
+        <v-btn color="success" @click.native="save" :disabled="!checked">
-          color="success"
-          @click.native="save_deck"
-          :disabled="!check.checked"
-        >
           <v-icon>save</v-icon>
           save
         </v-btn>
@@ -46,64 +43,166 @@
 </template>
 
 <script>
-import Deck from '@/classes/Deck'
+import * as Cookies from 'js-cookie'
+import axios from '@/plugins/axios'
 
 export default {
   name: 'DeckEditor',
 
   props: {
-    deck: Object,
+    id: Number,
+    value: String,
     visible: Boolean
   },
 
   data: () => ({
-    check: {
     count: 50,
     maximum: 0,
     checked: false
-    },
-    new_decklist: null
   }),
 
-  created() {
-    this.new_decklist = this.deck.deckList()
-  },
-
   computed: {
-    new_deck() {
+    session: () => Cookies.get('session'),
-      let deck = new Deck()
-      deck.from_deckList(this.new_decklist)
-      deck.populate()
 
-      this.new_decklist = deck.deckList()
+    new_deck() {
-      return deck
+      try {
+        return this.parse_deck(this.$refs.textarea)
+      } catch (e) {
+        return this.parse_deck(this.value)
+      }
     }
   },
 
   methods: {
+    parse_deck(deck_string) {
+      let retval = {
+        name: '',
+        note: '',
+        cards: [],
+        count: 0
+      }
+
+      // select all lines containing card serial numbers
+      let cardLinesRE = /^.*\b\d-\d{3}[A-Z]?\b.*$/gm
+      let cardLines = deck_string.match(cardLinesRE)
+      let cardCounts = {}
+
+      cardLines.forEach(cardLine => {
+        // extract serial (guaranteed to be in here!)
+        let serialRE = /\b(\d-\d{3})[A-Z]?\b/i
+        let serial = serialRE.exec(cardLine)[1]
+
+        // strip out serial number
+        cardLine = cardLine.replace(serialRE, '')
+
+        let countREs = [
+          // prioritize a count with "times" symbol *, x, ×
+          /\b([0-9]+)(?:[*×]|[x]\b)/,
+          /(?:[*×]|\b[x])([0-9]+)\b/,
+          // next priority: count with whitespace
+          /\s+([0-9]+)\s+/,
+          /\s+([0-9]+)\b/,
+          /\b([0-9]+)\s+/,
+          // least priority: any simple number
+          /\b([0-9]+)\b/
+        ]
+
+        // fallback value
+        let count = 1
+        for (let i = 0; i < countREs.length; i++) {
+          let data = countREs[i].exec(cardLine)
+
+          if (data) {
+            count = Number(data[1])
+            break
+          }
+        }
+
+        // count copies
+        if (!cardCounts[serial]) {
+          cardCounts[serial] = 0
+        }
+        cardCounts[serial] += count
+
+        retval.count += count
+      })
+
+      // push card data into deck
+      Object.keys(cardCounts).forEach(serial => {
+        retval.cards.push({
+          serial: serial,
+          count: cardCounts[serial]
+        })
+      })
+
+      // strip out lines with serial numbers
+      deck_string = deck_string.replace(cardLinesRE, '')
+
+      // select the line containing 'deck name:'
+      // and its successor (ffdecks format)
+      let metaRE = /^Deck Name: (.+)$[\s]*?^(.+)$/m
+      let metaData = metaRE.exec(deck_string)
+
+      // fallback
+      retval.name = 'Unnamed Deck'
+      retval.note = ''
+
+      if (!metaData) {
+        // no ffdecks format found: strip out anything after the first empty line
+        deck_string = deck_string.replace(/^[\s]*$[^]*/m, '')
+
+        // use lax format: <anything>:[deck name][newline][note]
+        metaRE = /[^]*?:(.+)$[\s]*?^([^]*)/m
+        metaData = metaRE.exec(deck_string)
+      }
+
+      // look again, I am not an else!
+      if (metaData) {
+        // extract matches
+        retval.name = metaData[1].trim()
+        retval.note = metaData[2].trim()
+      }
+
+      return retval
+    },
+
     close() {
-      this.check.checked = false
+      this.checked = false
       this.$emit('close')
     },
 
-    check_deck() {
+    check() {
+      let new_deck = this.parse_deck(this.$refs.textarea.lazyValue)
+
       // count number of cards
-      this.check.count = this.new_deck.count()
+      this.count = new_deck.count
 
       // find most frequent card
-      this.check.maximum = 0
+      this.maximum = 0
-      this.new_deck.cards.forEach(card => {
+      new_deck.cards.forEach(card => {
-        if (card.count > this.check.maximum) this.check.maximum = card.count
+        if (card.count > this.maximum) this.maximum = card.count
       })
 
       // deck has now been checked
-      this.check.checked = true
+      this.checked = true
     },
 
-    save_deck() {
+    save() {
-      this.$emit('change', this.new_deck.plainObject())
+      let new_deck = this.parse_deck(this.$refs.textarea.lazyValue)
+
+      axios
+        .post('/decks/modify', {
+          session: this.session,
+          deckID: this.id,
+          deckCards: new_deck
+        })
+        .then(response => {
+          if (response.data.success) {
+            this.$emit('change', new_deck)
             this.close()
           }
+        })
+    }
   }
 }
 </script>