66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<template>
|
|
<section class="cardpicker" :style="grid">
|
|
<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>
|
|
|
|
<style lang="scss" scoped>
|
|
$padding: 10px;
|
|
|
|
.cardpicker {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-gap: $padding;
|
|
padding: ($padding * 4) $padding;
|
|
grid-row-gap: $padding * 4;
|
|
.ccgcard {
|
|
display: flex;
|
|
align-items: center;
|
|
&:hover img {
|
|
box-shadow: 0 0 15px 5px rgba(200, 210, 255, 0.5);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from "vue-property-decorator";
|
|
import { Card, CardSlot, cardImageURL } from "@/mlpccg";
|
|
|
|
@Component({
|
|
components: {}
|
|
})
|
|
export default class CardPicker extends Vue {
|
|
@Prop()
|
|
public cards!: CardSlot[];
|
|
|
|
@Prop({ default: 2 })
|
|
public rows!: number;
|
|
|
|
@Prop({ default: 5 })
|
|
public columns!: number;
|
|
|
|
private get grid() {
|
|
return {
|
|
gridTemplateRows: "1fr ".repeat(this.rows).trim(),
|
|
gridTemplateColumns: "1fr ".repeat(this.columns).trim()
|
|
};
|
|
}
|
|
|
|
private imageURL(id: string) {
|
|
return cardImageURL(id);
|
|
}
|
|
|
|
private _picked(card: Card) {
|
|
this.$emit("picked", card);
|
|
}
|
|
}
|
|
</script>
|