diff --git a/package.json b/package.json index b9f709a..ecfa4a0 100644 --- a/package.json +++ b/package.json @@ -14,27 +14,27 @@ "vue-router": "^3.1.5" }, "devDependencies": { - "@editorjs/editorjs": "^2.17.0", - "@editorjs/list": "^1.4.0", - "@typescript-eslint/eslint-plugin": "^2.18.0", - "@typescript-eslint/parser": "^2.18.0", + "@editorjs/editorjs": "^2.18.0", + "@editorjs/list": "^1.5.0", + "@typescript-eslint/eslint-plugin": "^3.2.0", + "@typescript-eslint/parser": "^3.2.0", "@vue/cli-plugin-babel": "^4.2.0", "@vue/cli-plugin-eslint": "^4.2.0", "@vue/cli-plugin-pwa": "^4.2.0", "@vue/cli-plugin-typescript": "^4.2.0", "@vue/cli-service": "^4.2.0", - "@vue/eslint-config-standard": "^5.1.0", - "@vue/eslint-config-typescript": "^5.0.1", - "eslint": "^6.7.2", - "eslint-plugin-import": "^2.20.1", - "eslint-plugin-node": "^11.0.0", + "@vue/eslint-config-standard": "^5.1.2", + "@vue/eslint-config-typescript": "^5.0.2", + "eslint": "^7.2.0", + "eslint-plugin-import": "^2.21.2", + "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^4.2.1", - "eslint-plugin-standard": "^4.0.0", - "eslint-plugin-vue": "^6.1.2", + "eslint-plugin-standard": "^4.0.1", + "eslint-plugin-vue": "^6.2.2", "lint-staged": "^9.5.0", "raw-loader": "^4.0.0", - "typescript": "~3.7.5", - "vue-property-decorator": "^8.4.0", + "typescript": "~3.9.5", + "vue-property-decorator": "^8.5.0", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { diff --git a/src/assets/card.css b/src/assets/card.css new file mode 100644 index 0000000..a7f403b --- /dev/null +++ b/src/assets/card.css @@ -0,0 +1,160 @@ +.card-front, .card-back { + display: flex; + flex-flow: column nowrap; +} +.card-front { + justify-content: flex-start; +} +.card-front > header { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + height: 3.6rem; + color: white; + font-size: 1.2rem; + font-weight: normal; + font-variant: small-caps; + padding: 0 1em; + text-align: left; +} +.card-front > header > h1 { + margin: 0; + line-height: .9em; + font-size: 2rem; +} +.card-front > header > img { + height: 3rem; +} +.card-front > main { + position: relative; + display: flex; + flex-flow: column nowrap; + flex: 1; + height: 100%; + margin: .1rem .4rem .5rem; + padding: .2rem 1rem; + background: white; + border-radius: 1rem; + font-size: 1.2rem; + color: black; + overflow: hidden; +} + +.card-back { + justify-content: center; +} +.card-back > .icon-wrapper { + margin: 3em; +} + +.card-content .cdx-block { + padding: 0; +} + +.card-content .ce-paragraph, .card-content p { + margin: 0; + line-height: 1.3; +} + +.card-content ul { + list-style-position: inside; + margin: 0; + padding-left: .5em; +} +.card-content li > p { + display: inline; +} + +.card-content h2 { + font-size: 1.4rem; + color: var(--highlight-color); + margin: 0; + font-weight: normal; +} + +.card-content h3 { + font-size: 1.4rem; + color: var(--highlight-color); + margin: 0 0 .2em 0; + font-weight: normal; + font-variant: small-caps; + line-height: .9em; + border-bottom: 1px solid var(--highlight-color); +} + +.card-content .card-delimiter { + height: 0; + margin: .2em 0; + padding: 0; + border: 2px solid var(--highlight-color); +} +.card-content .card-delimiter.pointing-right { + height: 0; + margin: .2em 0; + border-style: solid; + border-width: 2px 0 2px 220px; + border-color: transparent transparent transparent var(--highlight-color); +} +.card-content .card-delimiter.pointing-left { + height: 0; + margin: .2em 0; + border-style: solid; + border-width: 2px 220px 2px 0; + border-color: transparent var(--highlight-color) transparent transparent; +} +.card-content .cdx-list__item { + padding: 0; + line-height: 1.3; +} +.card-content .card-charges-wrapper { + display: flex; + justify-content: flex-start; + align-items: center; + min-height: 1em; +} +.card-content .card-charges-wrapper.card-charges-stretch { justify-content: space-around; } +.card-content .card-charges-wrapper > .card-charge { + width: 1.0em; + height: 1.0em; + border: 2px solid var(--highlight-color); + margin: .5em .2em; +} +.card-content .card-charges-wrapper > .card-charge-circle { border-radius: 100%; } +.card-content .card-charges-wrapper > .card-charge-size-1 { width: 1.0em; height: 1.0em; } +.card-content .card-charges-wrapper > .card-charge-size-2 { width: 1.2em; height: 1.2em; } +.card-content .card-charges-wrapper > .card-charge-size-3 { width: 1.4em; height: 1.4em; } +.card-content .card-charges-wrapper > .card-charge-size-4 { width: 1.6em; height: 1.6em; } +.card-content .card-charges-wrapper > .card-charge-size-5 { width: 1.8em; height: 1.8em; } + +.card-content .card-dnd-stats { + display: flex; + flex-flow: row nowrap; + justify-content: space-around; + align-items: center; + color: var(--highlight-color); +} +.card-content .dnd-stat-block { + flex: 1 1 auto; + display: flex; + flex-flow: row wrap; + font-size: .8em; +} +.card-content .dnd-stat-block > .dnd-stat-title { + width: 100%; + font-weight: bold; + text-align: center; +} +.card-content .dnd-stat-block > input { + width: 50%; + background: white; + color: var(--highlight-color); + border: none; + padding: 0; + margin: 0; + font-size: 1em; + text-align: center; +} +.card-content .dnd-stat-block { +} +[contenteditable="true"] { outline: none; } diff --git a/src/components/deck-card-editor.vue b/src/components/deck-card-editor.vue index 01dc79b..0bf6e8c 100644 --- a/src/components/deck-card-editor.vue +++ b/src/components/deck-card-editor.vue @@ -27,7 +27,6 @@ export default class DeckCardEditor extends Vue { holder: this.$refs.cardEl as HTMLElement, autofocus: false, tools: { - // header: Heading, list: { class: List, inlineToolbar: true }, heading: { class: Heading, inlineToolbar: true }, delimiter: { class: Delimiter, inlineToolbar: false }, @@ -48,117 +47,3 @@ export default class DeckCardEditor extends Vue { } } - - diff --git a/src/components/deck-card.vue b/src/components/deck-card.vue index 61df1c6..7843cbd 100644 --- a/src/components/deck-card.vue +++ b/src/components/deck-card.vue @@ -47,9 +47,6 @@ export default class DeckCard extends Vue { @Prop() public readonly deck!: Deck @Prop() public readonly isSelection!: boolean - /// TODO: onEdit - // this.$emit('edit', { field: 'content', value: doc.content }) - private editHeadline = false; private editFieldIndex: number | null = null; @@ -111,6 +108,8 @@ export default class DeckCard extends Vue { } + diff --git a/src/consts.ts b/src/consts.ts new file mode 100644 index 0000000..8c39bc2 --- /dev/null +++ b/src/consts.ts @@ -0,0 +1,27 @@ +import { CardSize, PageSize, Arrangement } from './types' + +export const cardSizeOptions = [ + { title: '88x62 (Poker)', value: CardSize.Poker }, + { title: '88x56 (Bridge)', value: CardSize.Bridge } +] + +export const pageSizeOptions = [ + { title: 'A4', value: PageSize.A4 }, // 210mm × 297mm + { title: 'US Letter', value: PageSize.USLetter }, // 8.5in × 11in + { title: 'JIS-B4', value: PageSize.JISB4 }, // 182mm × 257mm + { title: 'A3', value: PageSize.A3 }, // 297mm × 420mm + { title: 'A5', value: PageSize.A5 }, // 148mm × 210mm + { title: 'US Legal', value: PageSize.USLegal }, // 8.5in × 14in + { title: 'US Ledger', value: PageSize.USLedger }, // 11in × 17in + { title: 'JIS-B5', value: PageSize.JISB5 } // 257mm × 364mm +] + +export const arrangementOptions = [ + { title: 'Double Sided', value: Arrangement.DoubleSided }, + { title: 'Only Front Sides', value: Arrangement.FrontOnly }, + { title: 'Side by Side', value: Arrangement.SideBySide } +] + +export const defaultPageSize = pageSizeOptions[0].value +export const defaultCardSize = cardSizeOptions[0].value +export const defaultArrangement = arrangementOptions[0].value diff --git a/src/editor/charges.ts b/src/editor/charges.ts index 99f09ed..c171faf 100644 --- a/src/editor/charges.ts +++ b/src/editor/charges.ts @@ -21,7 +21,6 @@ class Charges extends ContentlessBlock { constructor (args: BlockToolArgs) { super(args) - console.log('new charges', args) this._settingButtons = [ { name: 'box', icon, action: (name: string) => this.setVariant(name) }, { name: 'more', icon: icon, action: () => this.increaseAmount() }, @@ -115,8 +114,6 @@ class Charges extends ContentlessBlock { el.appendChild(this.createCharge()) } - console.log('rendered', this._amount, 'charges', el) - return el } diff --git a/src/lib.ts b/src/lib.ts index 7015eb1..9651d57 100644 --- a/src/lib.ts +++ b/src/lib.ts @@ -1,4 +1,4 @@ -import { CardSize, Deck, Card } from './types' +import { CardSize, PageSize, Arrangement, Deck, Card } from './types' export function randomId (): string { const now = Date.now() @@ -8,7 +8,7 @@ export function randomId (): string { } export function cardWHFromSize (size: CardSize): number[] { - return size.split('x').map(v => parseFloat(v)).reverse() + return size.split('x').map(v => parseFloat(v)) } export function iconPath (icon: string): string { @@ -31,8 +31,11 @@ export function defaultDeck (): Deck { name: 'the nameless', description: '', color: '#3C1C00', + cards: [], cardSize: CardSize.Poker, - cards: [] + pageSize: PageSize.A4, + arrangement: Arrangement.DoubleSided, + roundedCorners: true } } @@ -50,3 +53,14 @@ export function defaultCard (): Card { } } } + +export function isValidDeck (deck: any): boolean { + const example = defaultDeck() as { [key: string]: any } + + for (const key in example) { + const type = typeof example[key] + return typeof deck[key] === type + } + + return true +} diff --git a/src/types.ts b/src/types.ts index 3e6e8fc..a2ba932 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,3 +1,4 @@ +// page width x page height export const enum PageSize { A4 = '210mm 297mm', USLetter = '8.5in 11in', @@ -9,9 +10,10 @@ export const enum PageSize { JISB5 = '257mm 364mm' } +// card width x card height export const enum CardSize { - Poker = '89x64', - Bridge = '89x57' + Poker = '64x89', + Bridge = '57x89' } export const enum Arrangement { @@ -54,6 +56,9 @@ export interface Deck { icon: string; cards: Card[]; cardSize: CardSize; + arrangement: Arrangement; + pageSize: PageSize; + roundedCorners: boolean; } export interface Settings { diff --git a/src/views/Print.vue b/src/views/Print.vue index 44ea973..37d4e2a 100644 --- a/src/views/Print.vue +++ b/src/views/Print.vue @@ -1,31 +1,43 @@