From 749ab36ac1e2219549840b0165ad55f9c76d855b Mon Sep 17 00:00:00 2001 From: koehr Date: Tue, 9 Jun 2020 14:32:48 +0200 Subject: [PATCH] adds print view, fixes card sizes, types are now imported --- src/assets/app.css | 1 + src/components/deck-card-editor.vue | 1 + src/components/deck-card.vue | 5 +- src/components/deck-cover.vue | 5 +- src/components/deck-form.vue | 18 +++---- src/components/edit-deck-form.vue | 1 + src/components/flip-switch.vue | 63 +++++++++++++++++++++++ src/components/new-deck-form.vue | 1 + src/components/print-deck-form.vue | 57 +++++++++++--------- src/lib.ts | 16 +++--- src/router.ts | 40 +++++++-------- src/storage.ts | 1 + src/types.d.ts | 46 ----------------- src/types.ts | 66 ++++++++++++++++++++++++ src/views/Deck.vue | 1 + src/views/Home.vue | 1 + src/views/Print.vue | 80 +++++++++++++++++++++++++++++ 17 files changed, 291 insertions(+), 112 deletions(-) create mode 100644 src/components/flip-switch.vue delete mode 100644 src/types.d.ts create mode 100644 src/types.ts create mode 100644 src/views/Print.vue diff --git a/src/assets/app.css b/src/assets/app.css index 5403b23..f49327f 100644 --- a/src/assets/app.css +++ b/src/assets/app.css @@ -146,6 +146,7 @@ button.action-close { max-width: 25rem; width: 50%; margin-right: -15%; + text-shadow: 0 0 3px black; z-index: 1; } diff --git a/src/components/deck-card-editor.vue b/src/components/deck-card-editor.vue index e7ad534..01dc79b 100644 --- a/src/components/deck-card-editor.vue +++ b/src/components/deck-card-editor.vue @@ -4,6 +4,7 @@ + + diff --git a/src/components/new-deck-form.vue b/src/components/new-deck-form.vue index 98eba51..6027529 100644 --- a/src/components/new-deck-form.vue +++ b/src/components/new-deck-form.vue @@ -7,6 +7,7 @@ diff --git a/src/lib.ts b/src/lib.ts index daba950..7015eb1 100644 --- a/src/lib.ts +++ b/src/lib.ts @@ -1,3 +1,5 @@ +import { CardSize, Deck, Card } from './types' + export function randomId (): string { const now = Date.now() const rnd = Math.round(10000000 + Math.random() * 10000000).toString(36) @@ -5,19 +7,16 @@ export function randomId (): string { return `${now}.${rnd}` } -export function cardSizeFromWH (w: number, h: number): string { - return `${h}x${w}` -} - -export function cardWHFromSize (size: string): number[] { - return size.split('x').map(x => parseInt(x, 10)).reverse() +export function cardWHFromSize (size: CardSize): number[] { + return size.split('x').map(v => parseFloat(v)).reverse() } export function iconPath (icon: string): string { return `/img/${icon}.svg` } -export function cardWHtoStyle (w: number, h: number): object { +export function cardSizeToStyle (size: CardSize): object { + const [w, h] = cardWHFromSize(size) const ratio = w / h return { @@ -32,8 +31,7 @@ export function defaultDeck (): Deck { name: 'the nameless', description: '', color: '#3C1C00', - cardWidth: 62, - cardHeight: 88, + cardSize: CardSize.Poker, cards: [] } } diff --git a/src/router.ts b/src/router.ts index 4b4188c..0e15552 100644 --- a/src/router.ts +++ b/src/router.ts @@ -4,26 +4,26 @@ import Home from './views/Home.vue' Vue.use(VueRouter) -const routes = [ - { - path: '/', - name: 'Home', - component: Home - }, - { - path: '/deck/:id', - name: 'Deck', - component: () => import(/* webpackChunkName "deck" */ './views/Deck.vue') - }, - { - path: '/about', - name: 'About', - // route level code-splitting - // this generates a separate chunk (about.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import(/* webpackChunkName: "about" */ './views/About.vue') - } -] +const routes = [{ + path: '/', + name: 'Home', + component: Home +}, { + path: '/deck/:id', + name: 'Deck', + component: () => import(/* webpackChunkName "deck" */ './views/Deck.vue') +}, { + path: '/print/:id', + name: 'Print', + component: () => import(/* webpackChunkName "print" */ './views/Print.vue') +}, { + path: '/about', + name: 'About', + // route level code-splitting + // this generates a separate chunk (about.[hash].js) for this route + // which is lazy-loaded when the route is visited. + component: () => import(/* webpackChunkName: "about" */ './views/About.vue') +}] const router = new VueRouter({ mode: 'history', diff --git a/src/storage.ts b/src/storage.ts index e19cf54..71c7f6c 100644 --- a/src/storage.ts +++ b/src/storage.ts @@ -1,3 +1,4 @@ +import { Deck, StoredStuff } from './types' const KEY = 'rpg-cards-ng' export default class StorageHandler { diff --git a/src/types.d.ts b/src/types.d.ts deleted file mode 100644 index 42c9217..0000000 --- a/src/types.d.ts +++ /dev/null @@ -1,46 +0,0 @@ -interface KV { - [key: string]: V; -} - -interface ContentBlock { - type: string; - data: object; -} - -interface CardContent { - time: number; - blocks: ContentBlock[]; - version: string; -} - -interface Card { - id: string; - name: string; - count: number; - tags: string[]; - icon: string; - content: CardContent; - backIcon?: string; - color?: string; -} - -interface Deck { - id: string; - name: string; - description: string; - color: string; - icon: string; - cards: Card[]; - cardWidth: number; - cardHeight: number; - titleFontSize?: number; -} - -interface Settings { - color: string; -} - -interface StoredStuff { - decks: Deck[]; - defaults: Settings; -} diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..3e6e8fc --- /dev/null +++ b/src/types.ts @@ -0,0 +1,66 @@ +export const enum PageSize { + A4 = '210mm 297mm', + USLetter = '8.5in 11in', + JISB4 = '182mm 257mm', + A3 = '297mm 420mm', + A5 = '148mm 210mm', + USLegal = '8.5in 14in', + USLedger = '11in 17in', + JISB5 = '257mm 364mm' +} + +export const enum CardSize { + Poker = '89x64', + Bridge = '89x57' +} + +export const enum Arrangement { + DoubleSided = 'doublesided', + FrontOnly = 'frontonly', + SideBySide = 'sidebyside' +} + +export interface KV { + [key: string]: V; +} + +export interface ContentBlock { + type: string; + data: object; +} + +export interface CardContent { + time: number; + blocks: ContentBlock[]; + version: string; +} + +export interface Card { + id: string; + name: string; + count: number; + tags: string[]; + icon: string; + content: CardContent; + backIcon?: string; + color?: string; +} + +export interface Deck { + id: string; + name: string; + description: string; + color: string; + icon: string; + cards: Card[]; + cardSize: CardSize; +} + +export interface Settings { + color: string; +} + +export interface StoredStuff { + decks: Deck[]; + defaults: Settings; +} diff --git a/src/views/Deck.vue b/src/views/Deck.vue index 2f115b4..a0eb2ff 100644 --- a/src/views/Deck.vue +++ b/src/views/Deck.vue @@ -60,6 +60,7 @@ + +