hacked together deck import functionality

src/assets/app.css

@@ -54,6 +54,10 @@ header {
 header > p {
   opacity: .6;
 }
+footer {
+  display: block;
+  margin-top: 1.5em;
+}
 section[name=notifications] {
   display: block;
   max-width: 70rem;
@@ -63,18 +67,20 @@ section[name=notifications] {
 }
 
 #popup {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  display: block;
   background-color: #0008;
+  overflow-y: auto;
 }
 #popup > .popup-content {
-  max-width: calc(80rem);
-  height: calc(100vh - 20rem);
-  margin: 10rem auto;
+  width: 75rem;
+  max-width: 100vw;
 }
 
 main.popup > :not(#popup) {
@@ -170,3 +176,7 @@ button.action-close {
 .codex-editor--narrow .codex-editor__redactor {
   margin-right: 0;
 }
+.centered {
+  margin: auto inherit;
+  text-align: center;
+}

src/components/new-deck-form.vue

@@ -2,6 +2,7 @@
   <div id="new-deck-form" class="deck">
     <header>Create a new deck of cards</header>
     <DeckForm :deck="newDeck" @save="saveDeck" @close="$emit('close')" />
+    <footer class="centered">You can also <button @click="importDeck">import</button> an existing set.</footer>
   </div>
 </template>
 
@@ -9,7 +10,7 @@
 import { Component, Emit, Vue } from 'vue-property-decorator'
 import { Deck } from '@/types'
 import DeckForm from './deck-form.vue'
-import { defaultDeck, randomId } from '../lib'
+import { defaultDeck, randomId, isValidDeck } from '../lib'
 
 @Component({
   components: { DeckForm }
@@ -17,6 +18,37 @@ import { defaultDeck, randomId } from '../lib'
 export default class NewDeckForm extends Vue {
   private newDeck: Deck = defaultDeck()
 
+  private importDeck () {
+    const newFileSelector = document.createElement('input')
+    newFileSelector.setAttribute('type', 'file')
+
+    newFileSelector.onchange = event => {
+      if (event === null) return
+      const fileList = (event.target as HTMLInputElement).files
+      if (fileList === null || fileList.length < 1) return
+      const file = fileList[0]
+      if (!file) return
+
+      const seemsToBeJSON = file.type === 'application/json'
+      // TODO: more checks?
+      let fileOk = seemsToBeJSON
+
+      if (!seemsToBeJSON) {
+        fileOk = window.confirm(`This seems to be wrong file type (${file.type}). Should be JSON. Import anyway?`)
+      }
+
+      if (!fileOk) return
+
+      file.text().then((text: string) => {
+        const json = JSON.parse(text)
+        if (!isValidDeck(json)) window.alert('Sorry, that did\'t seem to be a valid deck.')
+        else this.$emit('save', this.$storage.saveDeck(json))
+      })
+    }
+
+    newFileSelector.click()
+  }
+
   @Emit('save')
   private saveDeck (deck: Deck) {
     deck.id = randomId() // just to make sure