Compare commits
No commits in common. "4e8d9a543b0f27934fd126df32770b1617b77bd7" and "e415da87c38515263e59b9d1b96de1e4ca80a08c" have entirely different histories.
4e8d9a543b
...
e415da87c3
3 changed files with 77 additions and 204 deletions
|
@ -1,13 +1,9 @@
|
|||
<template>
|
||||
<section class="decklist">
|
||||
<section class="card-section" v-for="section in sections" :key="section">
|
||||
<header>
|
||||
<h1>{{ section }}</h1>
|
||||
</header>
|
||||
<article
|
||||
class="ccgcard"
|
||||
@click="() => _drop(card)"
|
||||
v-for="(card, i) in getCards(section, true)"
|
||||
v-for="(card, i) in cards"
|
||||
:key="i"
|
||||
>
|
||||
<img :src="imageURL(card.data.ID)" class="cardbg" />
|
||||
|
@ -20,7 +16,6 @@
|
|||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -31,16 +26,6 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-section {
|
||||
header {
|
||||
h1 {
|
||||
padding: 5px 10px;
|
||||
font-family: $fantasy;
|
||||
font-size: 10pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ccgcard {
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
|
@ -74,11 +59,12 @@
|
|||
}
|
||||
|
||||
.amt {
|
||||
margin: 0 6pt 0 10pt;
|
||||
margin: 0 10pt;
|
||||
font-weight: bold;
|
||||
font-size: 13pt;
|
||||
padding-bottom: 5px;
|
||||
&:after {
|
||||
content: " ×";
|
||||
content: " x";
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
@ -98,102 +84,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
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;
|
||||
}
|
||||
import { cardFullName, CardSlot, Card, cardImageURL } from "@/mlpccg";
|
||||
|
||||
@Component({
|
||||
components: {}
|
||||
|
@ -213,17 +104,5 @@ export default class DeckList extends Vue {
|
|||
private imageURL(id: string) {
|
||||
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>
|
||||
|
|
|
@ -11,61 +11,3 @@ export function createPonyheadURL(cards: Card[]): string {
|
|||
const cardlist = cards.map(c => `${c.ID}x1`);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -191,15 +191,56 @@ import {
|
|||
getCards,
|
||||
allSets,
|
||||
cardFullName,
|
||||
createPonyheadURL,
|
||||
multiElemStr,
|
||||
typeIndex,
|
||||
rarityIndex,
|
||||
colorNames,
|
||||
typeNames,
|
||||
cardLimit
|
||||
createPonyheadURL
|
||||
} 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
|
||||
function sortByColor(a: Card, b: Card) {
|
||||
const typeA = typeIndex(a.Type);
|
||||
|
@ -273,6 +314,17 @@ function sortByColor(a: Card, b: Card) {
|
|||
return 0;
|
||||
}
|
||||
|
||||
function cardLimit(type: string) {
|
||||
switch (type) {
|
||||
case "Mane Character":
|
||||
return 1;
|
||||
case "Problem":
|
||||
return 2;
|
||||
default:
|
||||
return 3;
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
DeckList,
|
||||
|
|
Loading…
Reference in a new issue