53 lines
1000 B
Vue
53 lines
1000 B
Vue
<template>
|
|
<section class="cardpicker" :style="grid">
|
|
<article class="ccgcard" v-for="(card, i) in cards" :key="i">
|
|
<img :src="imageURL(card.ID)" />
|
|
</article>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
$padding: 10px;
|
|
|
|
.cardpicker {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-gap: $padding;
|
|
padding: $padding;
|
|
.ccgcard {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from "vue-property-decorator";
|
|
import { Card, cardImageURL } from "@/mlpccg";
|
|
|
|
@Component({
|
|
components: {}
|
|
})
|
|
export default class CardPicker extends Vue {
|
|
@Prop()
|
|
public cards!: Card[];
|
|
|
|
@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);
|
|
}
|
|
}
|
|
</script>
|