Switch backend to NeDB storage, fix image/json creation

.gitignore

@@ -3,3 +3,4 @@
 /decks
 /dist/
 /.cache/
+/decks.db

package-lock.json

@@ -1297,6 +1297,14 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.12.0.tgz",
       "integrity": "sha512-DYWGk01lDcxeS/K9IHPGWfT8PsJmbXRtRd2Sx72Tnb8pcYZQFF1oSDb8hJtS1vhp212q1Rzi5dUf9+nq0o9UIg=="
     },
+    "binary-search-tree": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/binary-search-tree/-/binary-search-tree-0.2.5.tgz",
+      "integrity": "sha1-fbs7IQ/coIJFDa0jNMMErzm9x4Q=",
+      "requires": {
+        "underscore": "~1.4.4"
+      }
+    },
     "bindings": {
       "version": "1.2.1",
       "resolved": "http://registry.npmjs.org/bindings/-/bindings-1.2.1.tgz",
@@ -4000,6 +4008,11 @@
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
       "integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA=="
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
     "import-fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
@@ -4422,6 +4435,22 @@
         "type-check": "~0.3.2"
       }
     },
+    "lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "localforage": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.7.3.tgz",
+      "integrity": "sha512-1TulyYfc4udS7ECSBT2vwJksWbkwwTX8BzeUIiq8Y07Riy7bDAAnxDaPU/tWyOVmQAcWJIEIFP9lPfBGqVoPgQ==",
+      "requires": {
+        "lie": "3.1.1"
+      }
+    },
     "lodash": {
       "version": "4.17.11",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
@@ -4679,6 +4708,33 @@
         "to-regex": "^3.0.1"
       }
     },
+    "nedb": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/nedb/-/nedb-1.8.0.tgz",
+      "integrity": "sha1-DjUCzYLABNU1WkPJ5VV3vXvZHYg=",
+      "requires": {
+        "async": "0.2.10",
+        "binary-search-tree": "0.2.5",
+        "localforage": "^1.3.0",
+        "mkdirp": "~0.5.1",
+        "underscore": "~1.4.4"
+      },
+      "dependencies": {
+        "async": {
+          "version": "0.2.10",
+          "resolved": "http://registry.npmjs.org/async/-/async-0.2.10.tgz",
+          "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E="
+        }
+      }
+    },
+    "nedb-promises": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/nedb-promises/-/nedb-promises-3.0.2.tgz",
+      "integrity": "sha512-9GyvhZF7LRHMbOsk+6peJc9IdmWifZAGG/er0sE8VZSOsNJII+Aywcrm5OcesSbu9GZ7E1PxnL63kYqypeZw9Q==",
+      "requires": {
+        "nedb": "^1.8.0"
+      }
+    },
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
@@ -7026,6 +7082,11 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "underscore": {
+      "version": "1.4.4",
+      "resolved": "http://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
+      "integrity": "sha1-YaajIBBiKvoHljvzJSA88SI51gQ="
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "express": "^4.16.4",
     "interactjs": "^1.3.4",
+    "nedb-promises": "^3.0.2",
     "parcel-bundler": "^1.11.0",
     "phantom": "^4.0.12",
     "v-runtime-template": "^1.5.2",

src/404.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <vue-headful title="404 Not Found"> </vue-headful>
+    <h1>Error 404: Path {{ path }} not found</h1>
+    You seem to have gone to the wrong place, would you like to go
+    back to the <a href="/">Deck Index</a>?
+  </div>
+</template>
+
+<script>
+ export default {
+   name: 'Err404',
+   data() {
+     return {
+       path: window.location.pathname,
+     }
+   },
+ }
+</script>

src/Deck.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- style is inline for phantomjs -->
+  <div style="white-space: nowrap;">
+  <div v-for="cardRow in chunkedCards">
+    <span v-for="card in cardRow" @click="$emit('input', card)">
+      <Hero v-bind="card.card"> </Hero>
+    </span>
+  </div>
+  </div>
+</template>
+
+<script>
+ import Hero from './template/hero/Hero.vue'
+
+ export default {
+   name: 'Deck',
+   props: ['deckInfo'],
+   components: {Hero},
+
+   computed: {
+     cards() {
+       console.log
+       return Object
+         .keys(this.deckInfo)
+         .filter(cardType => cardType !== 'meta')
+         .flatMap(cardType => this.deckInfo[cardType].flatMap((card, index) => {
+           let cardWrapper = {
+             type: cardType,
+             card: this.deckInfo[cardType][index],
+             props: Hero.props,
+           };
+           return Array(card.count || 1).fill(cardWrapper);
+         }));
+     },
+
+     chunkedCards() {
+       // find minimum box to fit cards
+       let columns = Math.ceil(Math.sqrt(this.cards.length));
+       let rows = Math.ceil(this.cards.length / columns) || 0;
+       return Array(rows)
+         .fill()
+         .map((_, index) => index * columns)
+         .map(begin => this.cards.slice(begin, begin + columns));
+     },
+   },
+ }
+</script>

src/DeckIndex.vue

@@ -1,14 +1,11 @@
 <template>
   <body>
-    <label>Create New Deck:
+    <router-link to="/edit/new">Create New Deck</router-link>
-      <input type="text"
-             @change="window.location='/deck/' + event.target.value + '/editor'">
-    </label>
     <ul>
       <li v-for="deck in decks">
-        {{ deck }}:
+        {{ deck.deck.meta.name }}:
-        <router-link :to="'/play/' + deck"> Play </router-link>
+        <router-link :to="'/play/' + deck._id"> Play </router-link>
-        <router-link :to="'/edit/' + deck"> Edit </router-link>
+        <router-link :to="'/edit/' + deck._id"> Edit </router-link>
       </li>
     </ul>
   </body>
@@ -26,7 +23,8 @@
    created() {
      fetch('/decks.json')
        .then(r => r.json())
-       .then(d => this.decks = d);
+       .then(d => this.decks = d)
+       .catch(err => console.log("Couldn't get deck list"));
    },
  }
 </script>

src/Editor.vue

@@ -8,7 +8,7 @@
         </button>
 
         <button type="button"
-                @click="downloadFile('deck.tts.json', deckName + '.json')">
+                @click="downloadFile('/decks/' + deckID + '.tts.json', deckInfo.meta.name + '.tts.json')">
           Download Tabletop Output JSON
         </button>
       </div>
@@ -21,11 +21,11 @@
 
       <form>
         <div>
-          <label> Deck Name: <input type="text" v-model="deckName"> </label>
+          <label> Deck Name: <input type="text" v-model="deckInfo.meta.name"> </label>
         </div>
         <div>
           <label> Deck Type:
-            <select v-model="deckInfo.type">
+            <select v-model="deckInfo.meta.type">
               <option value="hero">hero</option>
               <option value="villain">villain</option>
               <option value="environment">environment</option>
@@ -37,84 +37,53 @@
 
     <div id="cardEditor" v-if="selected">
       <button class="close-editor" @click="selected = null">X</button>
-      <div v-for="(type, prop) in selectedCardProps">
+      <div v-for="(type, prop) in selected.props">
         <label> {{ prop }}
           <input v-if="type === Number" v-model="selected.card[prop]"/>
-          <input v-if="type === 'file'" v-model="selected.card[prop]"/>
+          <input v-if="type === 'file'" type="file" accept="image/*"
+                 @change="fileUploaded(prop, $event)" />
           <textarea v-else rows="1" v-model="selected.card[prop]"> </textarea>
         </label>
       </div>
     </div>
 
-    <div ref="deck" :style="deckStyle">
+    <Deck ref="deck" :deckInfo="deckInfo" v-model="selected"> </Deck>
-      <div v-for="card in cards" @click="selected = card">
-        <Hero v-bind="card.card"> </Hero>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
- import Hero from './template/hero/Hero.vue'
+ import Deck from './Deck.vue';
 
  export default {
    name: 'Editor',
+   components: {Deck},
 
-   components: {Hero},
+   props: ['deckID'],
-
-   props: ['deckName'],
    data() {
      return {
        selected: null,
-       deckInfo: {},
+       deckInfo: {meta: {name: "", type: ""}},
      };
    },
 
    watch: {
-     deckName() {
+     deckInfo() {
-       document.title = "Editor|" + deckName;
+       document.title = "Editor|" + this.deckInfo.meta.name;
      },
    },
 
    created() {
-     fetch('/decks/' + this.deckName + '.input.json')
+     if (this.deckID !== 'new') {
+       fetch('/decks/' + this.deckID + '.json')
              .then(r => r.json())
-       .then(j => this.deckInfo = j);
+             .then(j => this.deckInfo = j.input)
+             .catch((err) => console.log('did not get old JSON, starting new deck'));
+     }
+
      /* window.addEventListener(
       *   'beforeunload', e => e.returnValue = "Unsaved changes blah blah"); */
    },
 
-   computed: {
-     cards() {
-       return Object
-         .keys(this.deckInfo)
-         .filter(cardType => typeof this.deckInfo[cardType] !== 'string')
-         .flatMap(cardType => this.deckInfo[cardType].flatMap((card, index) => {
-           let cardWrapper = {
-             type: cardType,
-             card: this.deckInfo[cardType][index],
-           };
-           return Array(card.count || 1).fill(cardWrapper);
-         }));
-     },
-
-     deckStyle() {
-       // find minimum box to fit cards
-       let rows = Math.ceil(Math.sqrt(this.cards.length));
-       let columns = this.cards.length > rows * (rows - 1) ? rows : rows - 1;
-       return {
-         display: 'grid',
-         'grid-template-columns': `repeat(${rows}, 1fr)`,
-         'grid-template-rows': `repeat(${columns}, 1fr)`,
-       };
-     },
-
-     selectedCardProps() {
-       // todo: make better
-       return Hero.props;
-     },
-   },
-
    methods: {
      // deck JSON uploader
      jsonUpload(event) {
@@ -131,22 +100,15 @@
        console.log(JSON.stringify(this.deckInfo));
        this.downloadFile('data:application/json;charset=utf-8,' +
                          encodeURIComponent(JSON.stringify(this.deckInfo)),
-                         this.deckName + '.input.json')
+                         this.deckID + '.input.json')
      },
 
-     // chrome doesn't seem to send input event on file select
+     fileUploaded(event, prop) {
-     fileUploaded(event) {
-       let prop = event.target.id.substring(5);
-       if (prop === "image") {
-         let files = event.target.files;
        let reader = new FileReader();
        reader.onload = e => {
-           selected.svg.querySelector('#' + prop)
+         this.selected.card[prop] = e.target.result;
-                   .setAttributeNS("http://www.w3.org/1999/xlink", "href", e.target.result);
-           selected.json[prop] = e.target.result;
        };
-         reader.readAsDataURL(files[0]);
+       reader.readAsDataURL(event.target.files[0]);
-       }
      },
 
      downloadFile(file, name) {
@@ -159,13 +121,19 @@
      },
 
      upload() {
-       // POST the generated SVGs to the server
+       // POST the inputed json to the server
-       let data = (new XMLSerializer()).serializeToString(this.$refs.deck);
+       fetch('/upload', {
-       fetch('upload', {
          method: 'post',
          headers: {'Content-Type': 'application/json'},
-         body: JSON.stringify({body: data, json: this.deckInfo})
+         body: JSON.stringify({
-       });
+           id: this.deckID === 'new' ? undefined : this.deckID,
+           deck: this.deckInfo,
+           body: (new XMLSerializer()).serializeToString(this.$refs.deck.$el),
+         })
+       })
+         .then(r => r.json())
+         .then(j => this.$router.replace('/edit/' + j.id))
+         .catch(err => console.log('Failed to upload' + err));
      },
    },
  }

src/index.js

@@ -4,13 +4,16 @@ import VueRouter from 'vue-router';
 import App from './App.vue';
 import DeckIndex from './DeckIndex.vue';
 import Editor from './Editor.vue';
+import Err404 from './404.vue';
 
 Vue.use(VueRouter);
 
 const router = new VueRouter({
+  mode: 'history',
   routes: [
     {path: '/', component: DeckIndex},
-    {path: '/edit/:deckName', component: Editor, props: true},
+    {path: '/edit/:deckID', component: Editor, props: true},
+    {path: '*', component: Err404},
   ],
 });
 

src/server.js

@@ -7,18 +7,20 @@ const express = require('express'),
       fs        = require('fs'),
       path      = require('path'),
       phantom   = require('phantom'),
+      Datastore = require('nedb-promises'),
       port      = process.env.PORT || 1234;
 
-const decks = ["the_Unholy_Priest_update_2",
+
-               "NZoths_Invasion_1.2",
+const db = Datastore.create('decks.db');
-               "Puffer_Fish_input_1.3"];
 
 const app = express();
-app.use(express.json());
+app.use(express.json({limit: '50mb'}));
 
 app.use('/template', express.static('template'));
-app.use('/decks', express.static('decks'));
+app.get('/decks/:deckID.tts.json', getTTSJSON);
-app.get('/decks.json', (req, res) => res.json(decks));
+app.get('/decks/:deckID.json', getInputJSON);
+app.get('/decks/:deckID.png', getDeckImage);
+app.get('/decks.json', getDecksList);
 app.post('/upload', handleUpload);
 
 let bundler = new Bundler(path.join(__dirname, 'index.html'));
@@ -26,84 +28,93 @@ app.use(bundler.middleware());
 
 app.listen(port, () => console.log(`App listening on port ${port}!`));
 
-function handleUpload(req, res) {
+function getDecksList(req, res) {
-  const json = request.body;
+  db.find({}, {'deck.meta': 1})
-  const deckJSON = json.json;
+    .then(docs => res.json(docs))
-  const cardTemplate = fs.readFileSync('template/card.json');
+    .catch(err => res.status(404).end());
-  const template = JSON.parse(fs.readFileSync(`template/${deckJSON.type}/input.json`));
+}
+
+function getInputJSON(req, res) {
+  db.findOne({_id: req.params.deckID})
+    .then(doc => res.json(doc.input))
+    .catch(err => res.status(404).end());
+}
+
+function getDeckImage(req, res) {
+  db.findOne({_id: req.params.deckID})
+    .then(doc => res.send(new Buffer.from(doc.image, 'base64')))
+    .catch(err => res.status(404).end());
+}
+
+function getTTSJSON(req, res) {
+  db.findOne({_id: req.params.deckID})
+    .then(doc => {
+      let deckIn = doc.deck;
+      const cardTemplate = fs.readFileSync(__dirname + '/template/card.json');
+      const template = JSON.parse(fs.readFileSync(__dirname + `/template/${deckIn.type}/input.json`));
       const cardCount = Object.entries(template.cardTypes)
-        .map(ct => deckJSON[ct[0]].length * (ct[1].back ? 2 : 1))
+            .map(ct => deckIn[ct[0]].length * (ct[1].back ? 2 : 1))
             .reduce((sum, current) => sum + current, 0);
 
-  let deckOut = JSON.parse(fs.readFileSync('template/deck.json'));
+      let deckOut = JSON.parse(fs.readFileSync(__dirname + '/template/deck.json'));
-  deckOut.ObjectStates[0].Nickname = deckJSON.name;
+      deckOut.ObjectStates[0].Nickname = deckIn.meta.name;
 
       Object.assign(deckOut.ObjectStates[0].CustomDeck['1'],
                     {NumWidth: Math.ceil(Math.sqrt(cardCount)),
-                 NumHeight: Math.ceil(Math.sqrt(cardCount)),
+                     NumHeight: Math.ceil(cardCount/Math.ceil(Math.sqrt(cardCount))),
-                 FaceURL: `http://${req.headers.host}/deck/${deckJSON.name}/deck.png`,
+                     FaceURL: `http://${req.headers.host}/decks/${doc.meta.name}.png`,
                      BackURL: "http://cloud-3.steamusercontent.com/ugc/156906385556221451/CE2C3AFE1759790CB0B532FFD636D05A99EC91F4/"});
 
       let index = 100;
-  deckOut.ObjectStates[0].ContainedObjects =
+      deckOut.ObjectStates[0].ContainedObjects = Object
-    Object.entries(template.cardTypes).map(
+        .keys(deckIn)
-      cardType => deckJSON[cardType[0]].map(cardIn => {
+        .filter(cardType => cardType !== 'meta')
-        let cardOut = JSON.parse(cardTemplate);
+        .map(cardType => deckIn[cardType].map((card, index) => {
-        Object.assign(cardOut, {Nickname: cardIn.name,
+          let cardOut = {...JSON.parse(cardTemplate),
-                                Description: cardIn.keywords,
+                         Nickname: card.name,
-                                CardID: index});
+                         Description: card.keywords,
+                         CardID: index};
 
-        for (let ii=0; ii<(cardIn.count || 1); ii++) {
+          deckOut.ObjectStates[0].DeckIDs.push(...Array(card.count || 1).fill(index));
-          deckOut.ObjectStates[0].DeckIDs.push(index);
-        }
           index++;
 
-        if(cardType[1].back) {
+          if(card.back) {
-          let cardBack = JSON.parse(cardTemplate);
+            cardOut.States = {"2": {...JSON.parse(cardTemplate),
-          Object.assign(cardBack, {Nickname: cardIn.back.name,
+                                    Nickname: card.back.name,
-                                   Description: cardIn.back.keywords,
+                                    Description: card.back.keywords,
-                                   CardID: index});
+                                    CardID: index}};
-          cardOut.States = {"2": cardBack};
             index++;
           }
           return cardOut;
         }))
-    .reduce((sum, cur) => sum.concat(cur), []);
+        .reduce((sum, cur) => sum.concat(cur), []); // flatten
 
-  fs.writeFileSync(`decks/${deckJSON.name}.json`, JSON.stringify(deckOut));
+      res.json(deckOut);
-  fs.writeFileSync(`decks/${deckJSON.name}.input.json`, JSON.stringify(deckJSON));
+    });
+}
 
-  console.log("making page");
+function handleUpload(req, res) {
-  phantom.create().then(
+  const json = req.body;
-    ph => ph.createPage().then(
+
+  console.log("Making deck image");
+  phantom.create().then(ph => ph.createPage().then(
     page => {
       page.on('onLoadFinished', status => {
-          if (status !== 'success') {
+        if (status === 'success') {
-            console.log('Failed to load page');
+          page.renderBase64(`PNG`).then(image => {
-            ph.exit(1);
+            db.update({_id: json.id},
+                      {deck: json.deck, image: image},
+                      {upsert: true, returnUpdatedDocs: true})
+              .then(doc => res.status(201).json({id: doc._id}));
+            page.close().then(() => ph.exit());
+          });
         }
         else {
-            page.render(`decks/${deckJSON.name}.png`);
+          console.log('Failed to load page');
-            page.close().then(() => ph.exit());
+          ph.exit(1);
         }
       });
       page.property('zoomFactor', 2); // pretty arbitrary
       page.property('content', '<body style="margin:0;">' + json.body + '</body>');
     }));
-  decks.push(deckJSON.name);
-}
-
-function send404(res, uri) {
-  res.writeHead(404, {'Content-type': "text/html; charset=utf-8"});
-  const html = `
-    <head>
-      <title>404 Not Found</title>
-      <link rel="stylesheet" href="/css/common.css">
-    </head>
-    <body>
-      <h1>Error 404: Path ${uri.pathname} not found</h1>
-      You seem to have gone to the wrong place, would you like to go
-      back to the <a href="/">main page</a>?
-    </body>`;
-  res.end(html, 'utf-8');
 }