Compare commits

..

No commits in common. "4e8d9a543b0f27934fd126df32770b1617b77bd7" and "e415da87c38515263e59b9d1b96de1e4ca80a08c" have entirely different histories.

3 changed files with 77 additions and 204 deletions

View file

@ -1,13 +1,9 @@
<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 getCards(section, true)" v-for="(card, i) in cards"
:key="i" :key="i"
> >
<img :src="imageURL(card.data.ID)" class="cardbg" /> <img :src="imageURL(card.data.ID)" class="cardbg" />
@ -20,7 +16,6 @@
</div> </div>
</article> </article>
</section> </section>
</section>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -31,16 +26,6 @@
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;
@ -74,11 +59,12 @@
} }
.amt { .amt {
margin: 0 6pt 0 10pt; margin: 0 10pt;
font-weight: bold; font-weight: bold;
font-size: 13pt; font-size: 13pt;
padding-bottom: 5px;
&:after { &:after {
content: " ×"; content: " x";
font-weight: 300; font-weight: 300;
} }
} }
@ -98,102 +84,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator"; import { Component, Vue, Prop } from "vue-property-decorator";
import { import { cardFullName, CardSlot, Card, cardImageURL } from "@/mlpccg";
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: {}
@ -213,17 +104,5 @@ 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>

View file

@ -11,61 +11,3 @@ export function createPonyheadURL(cards: Card[]): string {
const cardlist = cards.map(c => `${c.ID}x1`); const cardlist = cards.map(c => `${c.ID}x1`);
return "https://ponyhead.com/deckbuilder?v1code=" + cardlist.join("-"); return "https://ponyhead.com/deckbuilder?v1code=" + cardlist.join("-");
} }
export const colorNames = [
"Loyalty",
"Honesty",
"Laughter",
"Magic",
"Generosity",
"Kindness",
"None"
];
export const typeNames = [
"Mane Character",
"Friend",
"Event",
"Resource",
"Troublemaker",
"Problem"
];
export const rarityNames = ["C", "U", "R", "SR", "UR", "RR", "F"];
// Trasform string from list to a number that can be used for comparison/sorting
function arrIndex(arr: string[]) {
return function(comp: string) {
const idx = arr.indexOf(comp);
if (idx < 0) {
return arr.length;
}
return idx;
};
}
export const elemIndex = arrIndex(colorNames);
export const typeIndex = arrIndex(typeNames);
export const rarityIndex = arrIndex(rarityNames);
// Convert Element[] to number by scaling elements for fair comparisons
// Example: ["Loyalty", "Kindness"] -> [0, 5] -> [1, 6] -> 16
export function multiElemStr(elems: string[]): number {
return elems
.map(elemIndex)
.reduce(
(acc, elem, idx, arr) => acc + (elem + 1) * 10 ** (arr.length - idx - 1),
0
);
}
export function cardLimit(type: string) {
switch (type) {
case "Mane Character":
return 1;
case "Problem":
return 2;
default:
return 3;
}
}

View file

@ -191,15 +191,56 @@ import {
getCards, getCards,
allSets, allSets,
cardFullName, cardFullName,
createPonyheadURL, createPonyheadURL
multiElemStr,
typeIndex,
rarityIndex,
colorNames,
typeNames,
cardLimit
} from "@/mlpccg"; } from "@/mlpccg";
const colorNames = [
"Loyalty",
"Honesty",
"Laughter",
"Magic",
"Generosity",
"Kindness",
"None"
];
const typeNames = [
"Mane Character",
"Friend",
"Event",
"Resource",
"Troublemaker",
"Problem"
];
const rarityNames = ["C", "U", "R", "SR", "UR", "RR", "F"];
// Trasform string from list to a number that can be used for comparison/sorting
function arrIndex(arr: string[]) {
return function(comp: string) {
const idx = arr.indexOf(comp);
if (idx < 0) {
return arr.length;
}
return idx;
};
}
const elemIndex = arrIndex(colorNames);
const typeIndex = arrIndex(typeNames);
const rarityIndex = arrIndex(rarityNames);
// Convert Element[] to number by scaling elements for fair comparisons
// Example: ["Loyalty", "Kindness"] -> [0, 5] -> [1, 6] -> 16
function multiElemStr(elems: string[]): number {
return elems
.map(elemIndex)
.reduce(
(acc, elem, idx, arr) => acc + (elem + 1) * 10 ** (arr.length - idx - 1),
0
);
}
// Sort function for sorting cards // Sort function for sorting cards
function sortByColor(a: Card, b: Card) { function sortByColor(a: Card, b: Card) {
const typeA = typeIndex(a.Type); const typeA = typeIndex(a.Type);
@ -273,6 +314,17 @@ function sortByColor(a: Card, b: Card) {
return 0; return 0;
} }
function cardLimit(type: string) {
switch (type) {
case "Mane Character":
return 1;
case "Problem":
return 2;
default:
return 3;
}
}
@Component({ @Component({
components: { components: {
DeckList, DeckList,