Add basic deck builder #12

Merged
hamcha merged 42 commits from feature/deckbuilder into master 2019-09-12 09:11:32 +00:00
Showing only changes of commit 4e8d9a543b - Show all commits

View file

@ -1,9 +1,13 @@
<template> <template>
<section class="decklist"> <section class="decklist">
<section class="card-section" v-for="section in sections" :key="section">
<header>
<h1>{{ section }}</h1>
</header>
<article <article
class="ccgcard" class="ccgcard"
@click="() => _drop(card)" @click="() => _drop(card)"
v-for="(card, i) in cards" v-for="(card, i) in getCards(section, true)"
:key="i" :key="i"
> >
<img :src="imageURL(card.data.ID)" class="cardbg" /> <img :src="imageURL(card.data.ID)" class="cardbg" />
@ -16,6 +20,7 @@
</div> </div>
</article> </article>
</section> </section>
</section>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -26,6 +31,16 @@
flex-direction: column; flex-direction: column;
} }
.card-section {
header {
h1 {
padding: 5px 10px;
font-family: $fantasy;
font-size: 10pt;
}
}
}
.ccgcard { .ccgcard {
display: flex; display: flex;
align-content: space-between; align-content: space-between;
@ -59,12 +74,11 @@
} }
.amt { .amt {
margin: 0 10pt; margin: 0 6pt 0 10pt;
font-weight: bold; font-weight: bold;
font-size: 13pt; font-size: 13pt;
padding-bottom: 5px;
&:after { &:after {
content: " x"; content: " ×";
font-weight: 300; font-weight: 300;
} }
} }
@ -84,7 +98,102 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator"; import { Component, Vue, Prop } from "vue-property-decorator";
import { cardFullName, CardSlot, Card, cardImageURL } from "@/mlpccg"; import {
cardFullName,
CardSlot,
Card,
cardImageURL,
multiElemStr,
typeNames
} from "@/mlpccg";
function sortCards(a: CardSlot, b: CardSlot): number {
// Sort by element
// (Cards are guaranteed to be the same type)
switch (a.data.Type) {
case "Friend":
{
// Sort by requirement
if (a.data.Requirement && b.data.Requirement) {
const reqA = multiElemStr(Object.keys(a.data.Requirement));
const reqB = multiElemStr(Object.keys(b.data.Requirement));
if (reqA > reqB) {
return 1;
}
if (reqB > reqA) {
return -1;
}
}
// Sort by cost
if (a.data.Cost && b.data.Cost) {
if (a.data.Cost > b.data.Cost) {
return 1;
}
if (a.data.Cost < b.data.Cost) {
return -1;
}
}
// Sort by element
const elemA = multiElemStr(a.data.Element);
const elemB = multiElemStr(b.data.Element);
if (elemA > elemB) {
return 1;
}
if (elemB > elemA) {
return -1;
}
}
break;
case "Problem":
if (a.data.ProblemRequirement && b.data.ProblemRequirement) {
const preqA = multiElemStr(Object.keys(a.data.ProblemRequirement));
const preqB = multiElemStr(Object.keys(b.data.ProblemRequirement));
if (preqA > preqB) {
return 1;
}
if (preqB > preqA) {
return -1;
}
}
break;
case "Event":
case "Resource":
if (a.data.Requirement && b.data.Requirement) {
const reqA = multiElemStr(Object.keys(a.data.Requirement));
const reqB = multiElemStr(Object.keys(b.data.Requirement));
if (reqA > reqB) {
return 1;
}
if (reqB > reqA) {
return -1;
}
}
break;
}
// Sort by power
if (a.data.Power && b.data.Power) {
if (a.data.Power > b.data.Power) {
return 1;
}
if (a.data.Power < b.data.Power) {
return -1;
}
}
// If all else fail, sort by name
const nameA = cardFullName(a.data);
const nameB = cardFullName(b.data);
if (nameA > nameB) {
return 1;
}
if (nameA < nameB) {
return -1;
}
return 0;
}
@Component({ @Component({
components: {} components: {}
@ -104,5 +213,17 @@ export default class DeckList extends Vue {
private imageURL(id: string) { private imageURL(id: string) {
return cardImageURL(id); return cardImageURL(id);
} }
private getCards(section: string, sort: boolean): CardSlot[] {
let cards = this.cards.filter(c => c.data.Type == section);
if (!sort) {
return cards;
}
return cards.sort(sortCards);
}
private get sections(): string[] {
return typeNames.filter(s => this.getCards(s, false).length > 0);
}
} }
</script> </script>