src/components/DeckBuilder/CardPicker.vue

@@ -15,17 +15,23 @@
 $padding: 10px;
 
 .cardpicker {
-  height: 100%;
+  max-height: 100%;
   display: grid;
   gap: $padding;
-  padding: ($padding * 4) $padding;
+  padding: $padding;
-  row-gap: $padding * 4;
+  place-items: stretch;
 }
 
 .ccgcard {
   display: flex;
   align-items: center;
   transition: 100ms all;
+  cursor: pointer;
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    transition: box-shadow 60ms;
+  }
   &.available:hover img {
     box-shadow: 0 0 15px 5px rgba(200, 210, 255, 0.5);
   }

src/components/DeckBuilder/DeckList.vue

@@ -78,7 +78,7 @@
   font-weight: bold;
   font-size: 13pt;
   &:after {
-    content: " ×";
+    content: "×";
     font-weight: 300;
   }
 }

src/views/DeckBuilder.vue

@@ -103,6 +103,7 @@
 .cards {
   display: grid;
   grid-template-columns: 5% 1fr 5%;
+  column-gap: 10px;
 }
 
 .decklist {

src/views/Draft.vue

@@ -1,27 +1,118 @@
 <template>
   <section class="draftview">
     <section class="playerlist">
-      <b>Players</b>
+      <header>
+        <h2>Players</h2>
+      </header>
+      <section class="players">
+        <article
+          v-for="(player, i) in playerStatus"
+          :key="player.name + i"
+          :class="playerClass(player)"
+        >
+          <div class="icon">
+            <b-icon v-if="player.isBot" icon="robot" size="is-small" />
+            <b-icon v-else icon="account-box" size="is-small" />
+          </div>
+          <div class="name">{{ player.name }}</div>
+        </article>
+      </section>
     </section>
     <section class="pool">
-      <b>Card pool</b>
+      <header>
+        <h2>
+          Available picks (Pack
+          <span class="pack-number">{{ packNumber }}</span> of
+          <span class="pack-count">{{ packCount }}</span
+          >)
+        </h2>
+      </header>
+      <CardPicker
+        @picked="cardPicked"
+        :columns="columns"
+        :rows="rows"
+        :cards="currentPicks"
+        class="picker"
+      />
     </section>
     <section class="cardlist">
-      <b>Cards</b>
+      <header>
+        <h2>Cards</h2>
+      </header>
+      <DeckList :cards="pickedCards" />
     </section>
   </section>
 </template>
 
 <style lang="scss" scoped>
+@import "@/assets/scss/_variables.scss";
+
+$player-not-picked: $red;
+$player-picked: $green;
+$player-me: $purple;
+$border-opacity: 0.6;
+
 .draftview {
+  background: url("../assets/images/backgrounds/draftbg.webp") center;
   display: grid;
   height: 100vh;
   gap: 10px;
   grid-template-columns: minmax(200px, 1fr) 3fr minmax(250px, 1fr);
-  section {
+  & > section {
+    padding: 10px 20px;
     grid-row: 1;
-    border: 1px solid #555;
   }
+
+  header > h2 {
+    font-family: $fantasy;
+    font-weight: 600;
+    font-size: 2.5vh;
+    padding: 1vh;
+  }
+}
+
+.playerlist {
+  .players {
+    display: flex;
+    flex-flow: column wrap;
+    max-height: 100%;
+  }
+  .player {
+    border-radius: 3px;
+    margin: 2px;
+    padding: 2px;
+    border: 2px solid rgba($player-not-picked, $border-opacity);
+    display: flex;
+    color: $red;
+    align-items: center;
+    user-select: all;
+    &.picked,
+    &.bot {
+      color: $player-picked;
+      border-color: rgba($player-picked, $border-opacity);
+    }
+    &.me {
+      border-color: rgba($player-me, $border-opacity);
+    }
+    &.me::after {
+      content: " (me)";
+      font-size: 10pt;
+      margin-left: 5px;
+      color: $player-me;
+    }
+  }
+}
+
+.pool {
+  display: flex;
+  flex-direction: column;
+  .picker {
+    flex: 1;
+  }
+}
+
+.pack-number {
+  color: $primary;
 }
 
 @media (max-width: 800px) {
@@ -58,9 +149,101 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { getCards, CardSlot, cardLimit, Card } from "@/mlpccg";
+import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
+import DeckList from "@/components/DeckBuilder/DeckList.vue";
+
+interface PlayerStatus {
+  name: string;
+  isBot: boolean;
+  isMe: boolean;
+  picked: boolean;
+}
 
 @Component({
-  components: {}
+  components: {
+    CardPicker,
+    DeckList
+  }
 })
-export default class DraftView extends Vue {}
+export default class DraftView extends Vue {
+  // Card picker size
+  private rows!: number;
+  private columns!: number;
+
+  // Draft data
+  private packNumber!: number;
+  private packCount!: number;
+  private currentPicks!: CardSlot[];
+  private pickedCards!: CardSlot[];
+
+  private data() {
+    return {
+      packNumber: 1,
+      packCount: 4,
+      rows: 3,
+      columns: 4,
+      currentPicks: [],
+      pickedCards: []
+    };
+  }
+
+  private mounted() {
+    this.fillcards();
+  }
+
+  private async fillcards() {
+    const cards = await getCards({ Sets: ["FF"] });
+    this.currentPicks = cards.slice(0, 12).map(c => ({
+      data: c,
+      howmany: 1,
+      limit: 0
+    }));
+  }
+
+  private cardPicked(card: Card) {
+    // Check if card is already in
+    const idx = this.pickedCards.findIndex(c => c.data.ID == card.ID);
+    if (idx >= 0) {
+      const deckitem = this.pickedCards[idx];
+      deckitem.howmany += 1;
+      Vue.set(this.pickedCards, idx, deckitem);
+    } else {
+      this.pickedCards.push({
+        data: card,
+        limit: cardLimit(card.Type),
+        howmany: 1
+      });
+    }
+    const origIdx = this.currentPicks.findIndex(c => c.data.ID == card.ID);
+    this.currentPicks.splice(origIdx, 1);
+  }
+
+  private get playerStatus(): PlayerStatus[] {
+    return [
+      "Player1",
+      "bot",
+      "bot",
+      "Player2",
+      "bot",
+      "bot",
+      "Hamcha",
+      "bot"
+    ].map(s => ({
+      name: s,
+      isBot: s == "bot",
+      isMe: s == "Hamcha",
+      picked: s == "b" || s == "Player2"
+    }));
+  }
+
+  private playerClass(player: PlayerStatus) {
+    return {
+      player: true,
+      me: player.isMe,
+      bot: player.isBot,
+      picked: player.picked
+    };
+  }
+}
 </script>