Pass more data per card to CardPicker and DeckList
This commit is contained in:
parent
49b74a124e
commit
8188582183
4 changed files with 60 additions and 12 deletions
|
@ -1,7 +1,12 @@
|
|||
<template>
|
||||
<section class="cardpicker" :style="grid">
|
||||
<article class="ccgcard" v-for="(card, i) in cards" :key="i + card.ID">
|
||||
<img :src="imageURL(card.ID)" />
|
||||
<article
|
||||
@click="_picked(card.data)"
|
||||
class="ccgcard"
|
||||
v-for="(card, i) in cards"
|
||||
:key="i + card.data.ID"
|
||||
>
|
||||
<img :src="imageURL(card.data.ID)" />
|
||||
</article>
|
||||
</section>
|
||||
</template>
|
||||
|
@ -23,14 +28,14 @@ $padding: 10px;
|
|||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
import { Card, cardImageURL } from "@/mlpccg";
|
||||
import { Card, CardSlot, cardImageURL } from "@/mlpccg";
|
||||
|
||||
@Component({
|
||||
components: {}
|
||||
})
|
||||
export default class CardPicker extends Vue {
|
||||
@Prop()
|
||||
public cards!: Card[];
|
||||
public cards!: CardSlot[];
|
||||
|
||||
@Prop({ default: 2 })
|
||||
public rows!: number;
|
||||
|
@ -48,5 +53,9 @@ export default class CardPicker extends Vue {
|
|||
private imageURL(id: string) {
|
||||
return cardImageURL(id);
|
||||
}
|
||||
|
||||
private picked(card: Card) {
|
||||
this.$emit("picked", card);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<section class="decklist">
|
||||
<article v-for="(card, i) in cards" :key="i">
|
||||
<div class="name">{{ fullName(card) }}</div>
|
||||
<div class="amt">{{ card.howmany }}</div>
|
||||
<div class="name">{{ fullName(card.data) }}</div>
|
||||
</article>
|
||||
</section>
|
||||
</template>
|
||||
|
@ -14,14 +15,14 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
import { Card, cardFullName } from "@/mlpccg";
|
||||
import { cardFullName, CardSlot, Card } from "@/mlpccg";
|
||||
|
||||
@Component({
|
||||
components: {}
|
||||
})
|
||||
export default class DeckList extends Vue {
|
||||
@Prop()
|
||||
public cards!: Card[];
|
||||
public cards!: CardSlot[];
|
||||
|
||||
private fullName(card: Card): string {
|
||||
return cardFullName(card);
|
||||
|
|
|
@ -43,3 +43,9 @@ export interface CardFilter {
|
|||
Powers?: number[];
|
||||
Rarities?: string[];
|
||||
}
|
||||
|
||||
export interface CardSlot {
|
||||
data: Card;
|
||||
limit: number;
|
||||
howmany: number;
|
||||
}
|
||||
|
|
|
@ -30,7 +30,12 @@
|
|||
<div @click="prevPage" :class="canGoPrev ? 'prev' : 'prev unavailable'">
|
||||
<img src="/images/deckbuilder/navarrow.svg" />
|
||||
</div>
|
||||
<CardPicker :columns="columns" :rows="rows" :cards="currentPage" />
|
||||
<CardPicker
|
||||
@picked="cardPicked"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:cards="currentPage"
|
||||
/>
|
||||
<div @click="nextPage" :class="canGoNext ? 'next' : 'next unavailable'">
|
||||
<img src="/images/deckbuilder/navarrow.svg" />
|
||||
</div>
|
||||
|
@ -127,7 +132,14 @@
|
|||
import { Component, Vue } from "vue-property-decorator";
|
||||
import DeckList from "@/components/DeckBuilder/DeckList.vue";
|
||||
import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
|
||||
import { Card, CardFilter, getCards, allSets, cardFullName } from "@/mlpccg";
|
||||
import {
|
||||
Card,
|
||||
CardFilter,
|
||||
CardSlot,
|
||||
getCards,
|
||||
allSets,
|
||||
cardFullName
|
||||
} from "@/mlpccg";
|
||||
|
||||
const colorNames = [
|
||||
"Loyalty",
|
||||
|
@ -257,7 +269,7 @@ function sortByColor(a: Card, b: Card) {
|
|||
})
|
||||
export default class DeckBuilder extends Vue {
|
||||
// Picked/filtered cards
|
||||
private decklist!: Card[];
|
||||
private decklist!: CardSlot[];
|
||||
private filtered!: Card[];
|
||||
|
||||
// Names
|
||||
|
@ -315,8 +327,14 @@ export default class DeckBuilder extends Vue {
|
|||
return this.columns * this.rows;
|
||||
}
|
||||
|
||||
private get currentPage() {
|
||||
return this.filtered.slice(this.offset, this.offset + this.itemsPerPage);
|
||||
private get currentPage(): CardSlot[] {
|
||||
return this.filtered
|
||||
.slice(this.offset, this.offset + this.itemsPerPage)
|
||||
.map(card => ({
|
||||
data: card,
|
||||
limit: card.Type == "Problem" ? 2 : 3,
|
||||
howmany: this.decklist.filter(c => c.data.ID == card.ID).length
|
||||
}));
|
||||
}
|
||||
|
||||
private elementIconURL(element: string): string {
|
||||
|
@ -387,5 +405,19 @@ export default class DeckBuilder extends Vue {
|
|||
this.offset + this.itemsPerPage
|
||||
);
|
||||
}
|
||||
|
||||
private cardPicked(card: Card) {
|
||||
// Check if card is already in
|
||||
const idx = this.decklist.findIndex(c => c.data.ID == card.ID);
|
||||
if (idx >= 0) {
|
||||
this.decklist[idx].howmany += 1;
|
||||
} else {
|
||||
this.decklist.push({
|
||||
data: card,
|
||||
limit: card.Type == "Problem" ? 2 : 3,
|
||||
howmany: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue