diff --git a/src/components/deck-card-bullet-list.vue b/src/components/deck-card-bullet-list.vue
index c4a2506..cbb7157 100644
--- a/src/components/deck-card-bullet-list.vue
+++ b/src/components/deck-card-bullet-list.vue
@@ -1,6 +1,11 @@
- - {{ param }}
+ -
+ {{ param }}
+
@@ -10,6 +15,30 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class DeckCardBulletList extends Vue {
@Prop() public readonly params!: string[]
+ @Prop() public readonly editable!: boolean
+
+ private addEntry (index: number) {
+ const newParams = [...this.params]
+ newParams.splice(index + 1, 0, '')
+ this.$emit('replace', newParams)
+ }
+
+ private removeEntry (index: number) {
+ const newParams = [...this.params]
+ newParams.splice(index, 1)
+ this.$emit('replace', newParams)
+ }
+
+ private handleKey (index: number, event: KeyboardEvent) {
+ const { key, shiftKey } = event
+ if (key === 'Enter' && shiftKey) {
+ event.preventDefault()
+ this.addEntry(index)
+ } else if (key === 'Backspace') {
+ const text = (event.target as HTMLElement).innerText
+ if (text.trim() === '') this.removeEntry(index)
+ }
+ }
}
diff --git a/src/components/deck-card.vue b/src/components/deck-card.vue
index 1a44fe8..0ceb424 100644
--- a/src/components/deck-card.vue
+++ b/src/components/deck-card.vue
@@ -15,12 +15,13 @@
-
@@ -89,18 +90,25 @@ export default class DeckCard extends Vue {
this.$emit('edit', payload)
}
- private editContent (index: number, event: ContentEditEvent) {
- const { param, value } = event
- const field = this.card.contents[index]
- const newContents = [...this.card.contents]
+ private replaceContentField (index: number, newParams: Field['params']) {
+ const newContent = [...this.card.content]
+ const newField = {
+ type: newContent[index].type,
+ params: newParams
+ }
+ newContent.splice(index, 1, newField)
- field.params[param] = value
- newContents.splice(index, 1, field)
-
- const payload = { field: 'contents', value: newContents }
+ const payload = { field: 'content', value: newContent }
this.$emit('edit', payload)
}
+ private editContentFieldParam (index: number, event: ContentEditEvent) {
+ const { param, value } = event
+ const params = [...this.card.content[index].params]
+ params[param] = value
+ this.replaceContentField(index, params)
+ }
+
private get icon () {
const icon = this.card.icon || this.deck.icon
return iconPath(icon)
diff --git a/src/directives.ts b/src/directives.ts
index 2916745..545454e 100644
--- a/src/directives.ts
+++ b/src/directives.ts
@@ -5,7 +5,6 @@ const eventHandlers: { [key: string]: () => void } = {}
Vue.directive('editable', (el, { value, arg }, vnode) => {
const keypressHandler = (event: KeyboardEvent) => {
- console.log('keypress', event.code)
// allow line break via Shift + Enter
if (event.keyCode === 13 && !event.shiftKey) {
event.preventDefault()
diff --git a/src/lib.ts b/src/lib.ts
index 4d13e24..43c6d78 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -45,6 +45,6 @@ export function defaultCard (): Card {
count: 1,
tags: [],
icon: 'robe',
- contents: []
+ content: []
}
}
diff --git a/src/shims.d.ts b/src/shims.d.ts
index 8d0f624..40dba01 100644
--- a/src/shims.d.ts
+++ b/src/shims.d.ts
@@ -1,10 +1,17 @@
-interface Settings {
- color: string;
+interface Field {
+ type: string;
+ params: (string | number)[];
}
-interface StoredStuff {
- decks: Deck[];
- defaults: Settings;
+interface Card {
+ id: string;
+ name: string;
+ count: number;
+ tags: string[];
+ icon: string;
+ content: Field[];
+ backIcon?: string;
+ color?: string;
}
interface Deck {
@@ -19,18 +26,11 @@ interface Deck {
titleFontSize?: number;
}
-interface Card {
- id: string;
- name: string;
- count: number;
- tags: string[];
- icon: string;
- contents: CardContent[];
- backIcon?: string;
- color?: string;
+interface Settings {
+ color: string;
}
-interface CardContent {
- type: string;
- params: (string | number)[];
+interface StoredStuff {
+ decks: Deck[];
+ defaults: Settings;
}
diff --git a/src/views/Deck.vue b/src/views/Deck.vue
index e9caad6..91a0d55 100644
--- a/src/views/Deck.vue
+++ b/src/views/Deck.vue
@@ -70,7 +70,7 @@ export default class DeckView extends Vue {
count: 1,
tags: ['foo', 'test'],
icon: 'robe',
- contents: [
+ content: [
{ type: 'subtitle', params: ['1st Level Enchantment'] },
{ type: 'rule', params: ['pointing-right'] },
{ type: 'property', params: ['Casting Time', '1 Action'] },
@@ -89,7 +89,7 @@ export default class DeckView extends Vue {
count: 1,
tags: ['fire', 'test'],
icon: 'robe',
- contents: [
+ content: [
{ type: 'subtitle', params: ['1st Level Evocation'] },
{ type: 'rule', params: ['pointing-right'] },
{ type: 'property', params: ['Casting Time', '1 Action'] },
@@ -109,7 +109,7 @@ export default class DeckView extends Vue {
count: 1,
tags: ['wand', 'test'],
icon: 'robe',
- contents: [
+ content: [
{ type: 'subtitle', params: ['Wondrous Item'] },
{ type: 'rule', params: ['pointing-right'] },
{ type: 'property', params: ['Maximum charges', '7'] },
@@ -128,7 +128,7 @@ export default class DeckView extends Vue {
count: 1,
tags: ['goblin', 'test'],
icon: 'robe',
- contents: [
+ content: [
{ type: 'subtitle', params: ['Small humanoid (goblinoid)'] },
{ type: 'rule', params: ['pointing-right'] },
{ type: 'property', params: ['Armor Class', '15 (leather armor)'] },