diff --git a/src/assets/app.css b/src/assets/app.css
index 5ef8646..ac2927b 100644
--- a/src/assets/app.css
+++ b/src/assets/app.css
@@ -123,3 +123,8 @@ button.edit-close {
border-radius: 1em;
cursor: pointer;
}
+button.edit-pencil {
+ background: transparent url(./zondicons/edit-pencil.svg) center no-repeat;
+ border: none;
+ cursor: pointer;
+}
diff --git a/src/components/deck-card-subtitle.vue b/src/components/deck-card-subtitle.vue
index bb7e3af..a72ed1f 100644
--- a/src/components/deck-card-subtitle.vue
+++ b/src/components/deck-card-subtitle.vue
@@ -1,5 +1,8 @@
- {{ params[0] }}
+
+ {{ params[0] }}
+
diff --git a/src/components/deck-card.vue b/src/components/deck-card.vue
index 697a84e..44687f6 100644
--- a/src/components/deck-card.vue
+++ b/src/components/deck-card.vue
@@ -7,7 +7,10 @@
@click="clickUnlessSelected">
- {{ card.name }}
+
+ {{ card.name }}
+
@@ -16,6 +19,8 @@
:is="`deck-card-${entry.type}`"
:key="`e${i}`"
:params="entry.params"
+ :editable="isSelection"
+ @edit="editContent(i, $event)"
/>
@@ -44,6 +49,11 @@ import DeckCardBulletList from './deck-card-bullet-list.vue'
import DeckCardBoxes from './deck-card-boxes.vue'
import DeckCardDndstats from './deck-card-dndstats.vue'
+interface ContentEditEvent {
+ param: number;
+ value: string;
+}
+
@Component({
components: {
DeckCardSubtitle,
@@ -64,11 +74,33 @@ export default class DeckCard extends Vue {
@Prop() public readonly deck!: Deck
@Prop() public readonly isSelection!: boolean
+ private editHeadline = false;
+ private editFieldIndex: number | null = null;
+
private clickUnlessSelected () {
if (this.isSelection) return
this.$emit('click')
}
+ private editField (field: string, event: Event) {
+ if (event.target === null) return
+ const target = event.target as HTMLElement
+ const payload = { field, value: target.innerText }
+ 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]
+
+ field.params[param] = value
+ newContents.splice(index, 1, field)
+
+ const payload = { field: 'contents', value: newContents }
+ this.$emit('edit', payload)
+ }
+
private get icon () {
const icon = this.card.icon || this.deck.icon
return iconPath(icon)
@@ -219,4 +251,21 @@ export default class DeckCard extends Vue {
height: 3rem;
margin-top: -3rem;
}
+
+[contenteditable="true"] {
+ position: relative;
+}
+[contenteditable="true"]::after {
+ content: ' ';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ border-bottom: 1px dotted white;
+ mix-blend-mode: difference;
+}
+[contenteditable="true"]:focus::after {
+ border-bottom: none;
+}
diff --git a/src/views/Deck.vue b/src/views/Deck.vue
index 962ed71..e9caad6 100644
--- a/src/views/Deck.vue
+++ b/src/views/Deck.vue
@@ -30,6 +30,7 @@
:is-selection="card === selection"
@click="selection = card"
@close="selection = null"
+ @edit="editCard(card, $event.field, $event.value)"
/>
@@ -170,6 +171,10 @@ export default class DeckView extends Vue {
this.deck.cards.push(newCard)
this.selection = newCard
}
+
+ private editCard (card: Card, field: K, value: Card[K]) {
+ card[field] = value
+ }
}