n/rpg-cards-ng
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adds print view, fixes card sizes, types are now imported

Browse source
This commit is contained in:
koehr 2020-06-09 14:32:48 +02:00
parent 59de19b63c
commit 749ab36ac1
17 changed files with 291 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/assets/app.css
View file

@ -146,6 +146,7 @@ button.action-close {
max-width: 25rem;
width: 50%;
margin-right: -15%;
text-shadow: 0 0 3px black;
z-index: 1;
}

1
src/components/deck-card-editor.vue
View file

@ -4,6 +4,7 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Card } from '@/types'
import Editor from '@editorjs/editorjs'
import List from '@editorjs/list'

5
src/components/deck-card.vue
View file

@ -35,7 +35,8 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { cardWHtoStyle, iconPath } from '@/lib'
import { Deck, Card } from '@/types'
import { cardSizeToStyle, iconPath } from '@/lib'
import DeckCardEditor from '@/components/deck-card-editor.vue'
@Component({
@ -77,7 +78,7 @@ export default class DeckCard extends Vue {
private get containerStyle () {
const style = {
'--highlight-color': this.card.color || this.deck.color,
...cardWHtoStyle(this.deck.cardWidth, this.deck.cardHeight),
...cardSizeToStyle(this.deck.cardSize),
transform: ''
}

5
src/components/deck-cover.vue
View file

@ -12,7 +12,8 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { cardWHtoStyle, iconPath, defaultDeck } from '@/lib'
import { Deck } from '@/types'
import { cardSizeToStyle, iconPath, defaultDeck } from '@/lib'
const emptyDeck: Deck = {
...defaultDeck(),
@ -34,7 +35,7 @@ export default class DeckCover extends Vue {
private get style () {
return {
backgroundColor: this.deck.color,
...cardWHtoStyle(this.deck.cardWidth, this.deck.cardHeight)
...cardSizeToStyle(this.deck.cardSize)
}
}
}

18
src/components/deck-form.vue
View file

@ -24,8 +24,9 @@
<script lang="ts">
import { Component, Prop, Emit, Vue } from 'vue-property-decorator'
import { Deck, CardSize } from '@/types'
import DeckCover from '@/components/deck-cover.vue'
import { cardWHFromSize, cardSizeFromWH, iconPath } from '../lib'
import { iconPath } from '../lib'
@Component({
components: { DeckCover }
@ -35,15 +36,15 @@ export default class DeckForm extends Vue {
private icons = ['mouth-watering', 'robe', 'thorny-triskelion']
private sizes = [
{ title: '88x62 (Poker)', value: '88x62' },
{ title: '88x56 (Bridge)', value: '88x56' }
{ title: '88x62 (Poker)', value: CardSize.Poker },
{ title: '88x56 (Bridge)', value: CardSize.Bridge }
]
private icon: string
private name: string
private description: string
private color: string
private cardSize: string
private cardSize: CardSize
constructor () {
super()
@ -51,24 +52,21 @@ export default class DeckForm extends Vue {
this.name = this.deck.name
this.description = this.deck.description
this.color = this.deck.color
this.cardSize = cardSizeFromWH(this.deck.cardWidth, this.deck.cardHeight)
this.cardSize = this.deck.cardSize
}
private get iconPath () {
return iconPath(this.icon)
}
private get newDeck () {
const [cardWidth, cardHeight] = cardWHFromSize(this.cardSize)
private get newDeck (): Deck {
return {
...this.deck,
name: this.name,
description: this.description,
color: this.color,
icon: this.icon,
cardWidth,
cardHeight
cardSize: this.cardSize
}
}

1
src/components/edit-deck-form.vue
View file

@ -7,6 +7,7 @@
<script lang="ts">
import { Component, Prop, Emit, Vue } from 'vue-property-decorator'
import { Deck } from '@/types'
import DeckForm from './deck-form.vue'
@Component({

63
src/components/flip-switch.vue Normal file
View file

@ -0,0 +1,63 @@
<template>
<div class="switch">
<input :id="id" class="checkbox" type="checkbox" :checked="value" @change="$emit('input', !value)" />
<label :for="id">
<div class="switch-label-text">{{ label }}</div>
<div class="switch-elements-wrapper">
<div class="switch-elements">
<div class="switch-element off"><slot name="off">NO</slot></div>
<div class="switch-element btn"></div>
<div class="switch-element on"><slot name="on">YES</slot></div>
</div>
</div>
</label>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class FlipSwitch extends Vue {
@Prop() public readonly id!: string
@Prop() public readonly value!: boolean
@Prop() public readonly label!: string
}
</script>
<style scoped>
.switch > input {
display: none;
}
.switch .switch-elements-wrapper {
height: 2em;
width: 4em;
border: 4px solid black;
border-radius: 2em;
background-color: black;
overflow: hidden;
}
.switch .switch-elements {
display: flex;
flex-flow: row nowrap;
transition: transform .2s ease-in;
}
.switch .switch-element {
height: 1.8em;
width: 1.8em;
margin: .1em;
line-height: 1.8em;
flex: 0 0 auto;
}
.switch .btn {
background-color: gray;
border-radius: 5em;
}
input.checkbox:checked + label .switch-elements-wrapper > .switch-elements {
transform: translate(-2em, 0);
}
input.checkbox:checked + label .switch-elements-wrapper {
box-shadow: 0 0 15px 2px green;
}
</style>

1
src/components/new-deck-form.vue
View file

@ -7,6 +7,7 @@
<script lang="ts">
import { Component, Emit, Vue } from 'vue-property-decorator'
import { Deck } from '@/types'
import DeckForm from './deck-form.vue'
import { defaultDeck, randomId } from '../lib'

57
src/components/print-deck-form.vue
View file

@ -7,24 +7,27 @@
<label for="print-option-page-size">
Page Size
<select class="print-option-select" id="print-option-page-size" v-model="pageSize">
<option :key="size" :value="size.value" v-for="size in pageSizes">{{ size.title }}</option>
<option :key="size.value" :value="size.value" v-for="size in pageSizes">{{ size.title }}</option>
</select>
</label>
<label for="print-option-card-size">
Card Size
<select class="print-option-select" id="print-option-card-size" v-model="cardSize">
<option :key="size" :value="size.value" v-for="size in cardSizes">{{ size.title }}</option>
<option :key="size.value" :value="size.value" v-for="size in cardSizes">{{ size.title }}</option>
</select>
</label>
<label for="print-option-arrangement">
Arrangement
<select class="print-option-select" id="print-option-arrangement" v-model="arrangement">
<option :key="arrangement" :value="arrangement.value" v-for="arrangement in arrangements">{{ arrangement.title }}</option>
<option :key="arrangement.value" :value="arrangement.value" v-for="arrangement in arrangements">{{ arrangement.title }}</option>
</select>
</label>
<FlipSwitch id="print-option-rounded-corners" label="Rounded Corners" v-model="roundedCorners">
</FlipSwitch>
<button type="submit">Print deck</button>
<button class="cancel" @click.prevent="$emit('close')">cancel</button>
</div>
@ -33,41 +36,49 @@
</template>
<script lang="ts">
import { Component, Prop, Emit, Vue } from 'vue-property-decorator'
import { cardSizeFromWH } from '../lib'
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Deck, Arrangement, PageSize, CardSize } from '@/types'
import FlipSwitch from '@/components/flip-switch.vue'
@Component
@Component({
components: { FlipSwitch }
})
export default class EditDeckForm extends Vue {
@Prop() public readonly deck!: Deck
private pageSizes = [
{ title: 'A4', value: 'a4' }, // 210mm × 297mm
{ title: 'US Letter', value: 'usletter' }, // 8.5in × 11in
{ title: 'JIS-B4', value: 'jisb4' }, // 182mm × 257mm
{ title: 'A3', value: 'a3' }, // 297mm × 420mm
{ title: 'A5', value: 'a5' }, // 148mm × 210mm
{ title: 'US Legal', value: 'uslegal' }, // 8.5in × 14in
{ title: 'US Ledger', value: 'usledger' }, // 11in × 17in
{ title: 'JIS-B5', value: 'jisb5' } // 257mm × 364mm
{ 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
]
private cardSizes = [
{ title: '88x62 (Poker)', value: '88x62' },
{ title: '88x56 (Bridge)', value: '88x56' }
{ title: '88x62 (Poker)', value: CardSize.Poker },
{ title: '88x56 (Bridge)', value: CardSize.Bridge }
]
private arrangements = [
{ title: 'Doublesided', value: 'doublesided' },
{ title: 'Only Front Sides', value: 'frontonly' },
{ title: 'Side by Side', value: 'sidebyside' }
{ title: 'Double Sided', value: Arrangement.DoubleSided },
{ title: 'Only Front Sides', value: Arrangement.FrontOnly },
{ title: 'Side by Side', value: Arrangement.SideBySide }
]
private pageSize = 'a4'
private cardSize = '88x62'
private arrangement = 'doublesided'
private pageSize = PageSize.A4
private cardSize = CardSize.Poker
private arrangement = Arrangement.DoubleSided
private roundedCorners = true
private mounted () {
this.cardSize = cardSizeFromWH(this.deck.cardWidth, this.deck.cardHeight)
this.cardSize = this.deck.cardSize
}
private printDeck () {
console.log('would print on', this.pageSize, `(${this.arrangement})`, this.deck.cards.length, 'cards of size', this.cardSize, this.roundedCorners ? 'with rounded corners' : '')
}
}
</script>

16
src/lib.ts
View file

@ -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: []
}
}

40
src/router.ts
View file

@ -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',

1
src/storage.ts
View file

@ -1,3 +1,4 @@
import { Deck, StoredStuff } from './types'
const KEY = 'rpg-cards-ng'
export default class StorageHandler {

46
src/types.d.ts vendored
View file

@ -1,46 +0,0 @@
interface KV<V> {
[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;
}

66
src/types.ts Normal file
View file

@ -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<V> {
[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;
}

1
src/views/Deck.vue
View file

@ -60,6 +60,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Deck, Card } from '../types'
import DeckCover from '@/components/deck-cover.vue'
import DeckCard from '@/components/deck-card.vue'
import EditDeckForm from '@/components/edit-deck-form.vue'

1
src/views/Home.vue
View file

@ -27,6 +27,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Deck } from '../types'
import DeckCover from '@/components/deck-cover.vue'
import NewDeckForm from '@/components/new-deck-form.vue'

80
src/views/Print.vue Normal file
View file

@ -0,0 +1,80 @@
<template>
<main id="print-view" name="print-view" :class="{ loading, 'not-found': notFound }" :style="pageSizeCSS">
<div class="page">
<header>Page 1</header>
<p>foo bar baz</p>
<ol>
<li :key="`c${i}`" v-for="(card, i) in deck.cards">{{ card.title }}</li>
</ol>
</div>
<div class="page">
<header>Page 2</header>
<p>foo bar baz</p>
</div>
</main>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Deck } from '../types'
import { iconPath } from '../lib'
@Component
export default class PrintDeck extends Vue {
private loading = true
private notFound = false
private deck: Deck | null = null
private size = '210mm 297mm'
private landscape = false // TODO: not yet implemented
private mounted () {
const currentDeckId = this.$route.params.id
this.deck = this.$storage.findDeck(currentDeckId)
if (this.deck === null) this.notFound = true
this.loading = false
}
private get deckIcon () {
if (this.deck === null) return ''
return iconPath(this.deck.icon)
}
private get pageSizeCSS () {
const [w, h] = this.size.split(' ')
return {
'--width': w,
'--height': h,
'--size': this.size
}
}
}
</script>
<style>
@page {
margin: 0;
size: var(--size);
}
#print-view > .page {
display: block;
width: var(--width);
height: var(--height);
margin: 5mm auto;
background-color: white;
color: black;
}
@media print {
html,body {
background-color: gray;
}
#app > .home-link {
display: none;
}
#print-view > .page {
margin: 0;
box-shadow: none;
}
}
</style>