src/components/DeckBuilder/CardPicker.vue

@@ -0,0 +1,12 @@
+<template>
+  <section></section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {}
+})
+export default class CardPicker extends Vue {}
+</script>

src/components/DeckBuilder/DeckList.vue

@@ -0,0 +1,35 @@
+<template>
+  <section class="decklist">
+    <article v-for="(card, i) in cards" :key="i">
+      <div class="name">{{fullname(card)}}</div>
+    </article>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.decklist {
+  display: flex;
+}
+</style>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { Card } from "@/mlpccg/types";
+
+@Component({
+  components: {}
+})
+export default class DeckList extends Vue {
+  @Prop({
+    default: []
+  })
+  public cards!: Card[];
+
+  private fullname(card: Card): string {
+    if (card.Subname != "") {
+      return `${card.Name}, ${card.Subname}`;
+    }
+    return card.Name;
+  }
+}
+</script>

src/views/DeckBuilder.vue

@@ -1,14 +1,68 @@
 <template>
-  <section class="deckbuilder"></section>
+  <section class="deckbuilder">
+    <section class="cardlist">
+      <section class="filters"></section>
+      <section class="cards">
+        <CardPicker :cards="filtered" />
+      </section>
+    </section>
+    <section class="decklist">
+      <DeckList :cards="decklist" />
+    </section>
+  </section>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.deckbuilder {
+  background: url("/images/backgrounds/deckbuilderbg.webp") center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 3fr minmax(250px, 1fr);
+
+  .cardlist {
+    display: grid;
+    grid-column: 1;
+    grid-template-rows: 50px 1fr;
+  }
+  .decklist {
+    grid-column: 2;
+  }
+  section {
+    border: 1px solid red;
+  }
+}
+</style>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { Card, CardFilter } from "@/mlpccg/types";
+import DeckList from "@/components/DeckBuilder/DeckList.vue";
+import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
+import { getCards } from "@/mlpccg/database";
 
 @Component({
-  components: {}
+  components: {
+    DeckList,
+    CardPicker
+  }
 })
-export default class DeckBuilder extends Vue {}
+export default class DeckBuilder extends Vue {
+  private decklist!: Card[];
+  private filter!: CardFilter;
+  private filtered!: Card[];
+
+  private data() {
+    return {
+      decklist: [],
+      filter: {},
+      filtered: []
+    };
+  }
+
+  private async applyFilters() {
+    this.filtered = await getCards(this.filter);
+  }
+}
 </script>