diff --git a/src/assets/app.css b/src/assets/app.css
index f49327f..4843d43 100644
--- a/src/assets/app.css
+++ b/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;
+}
diff --git a/src/components/new-deck-form.vue b/src/components/new-deck-form.vue
index 6027529..da80877 100644
--- a/src/components/new-deck-form.vue
+++ b/src/components/new-deck-form.vue
@@ -2,6 +2,7 @@
Create a new deck of cards
+
@@ -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