From bfc7d8a5d6fd5d462890d9cf8d136f40a0fd954f Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sun, 15 Sep 2019 11:53:48 +0200
Subject: [PATCH 1/4] Add card picker to draft screen

---
 src/components/DeckBuilder/CardPicker.vue |  7 ++-
 src/views/Draft.vue                       | 59 +++++++++++++++++++++--
 2 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/src/components/DeckBuilder/CardPicker.vue b/src/components/DeckBuilder/CardPicker.vue
index 90dc017..427494d 100644
--- a/src/components/DeckBuilder/CardPicker.vue
+++ b/src/components/DeckBuilder/CardPicker.vue
@@ -15,17 +15,22 @@
 $padding: 10px;
 
 .cardpicker {
-  height: 100%;
+  max-height: 100%;
   display: grid;
   gap: $padding;
   padding: ($padding * 4) $padding;
   row-gap: $padding * 4;
+  place-items: stretch;
 }
 
 .ccgcard {
   display: flex;
   align-items: center;
   transition: 100ms all;
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
   &.available:hover img {
     box-shadow: 0 0 15px 5px rgba(200, 210, 255, 0.5);
   }
diff --git a/src/views/Draft.vue b/src/views/Draft.vue
index e274df2..b0efb73 100644
--- a/src/views/Draft.vue
+++ b/src/views/Draft.vue
@@ -4,7 +4,13 @@
       <b>Players</b>
     </section>
     <section class="pool">
-      <b>Card pool</b>
+      <CardPicker
+        @picked="cardPicked"
+        :columns="columns"
+        :rows="rows"
+        :cards="currentPicks"
+        class="picker"
+      />
     </section>
     <section class="cardlist">
       <b>Cards</b>
@@ -13,14 +19,23 @@
 </template>
 
 <style lang="scss" scoped>
+@import "@/assets/scss/_variables.scss";
+
 .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;
+  }
+}
+
+.pool {
+  .picker {
+    height: 100%;
   }
 }
 
@@ -58,9 +73,43 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { getCards, CardSlot } from "@/mlpccg";
+import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
 
 @Component({
-  components: {}
+  components: {
+    CardPicker
+  }
 })
-export default class DraftView extends Vue {}
+export default class DraftView extends Vue {
+  // Card picker size
+  private rows!: number;
+  private columns!: number;
+
+  // Draft data
+  private currentPicks!: CardSlot[];
+
+  private data() {
+    return {
+      rows: 3,
+      columns: 4,
+      currentPicks: []
+    };
+  }
+
+  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() {}
+}
 </script>
-- 
2.40.1


From 8ad7c273dc7821e220165046675f50eb73c7637a Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sun, 15 Sep 2019 12:14:16 +0200
Subject: [PATCH 2/4] Fix headers and spacing

---
 src/components/DeckBuilder/CardPicker.vue |  5 +++--
 src/views/DeckBuilder.vue                 |  1 +
 src/views/Draft.vue                       | 23 ++++++++++++++++++++---
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/DeckBuilder/CardPicker.vue b/src/components/DeckBuilder/CardPicker.vue
index 427494d..90b7fc5 100644
--- a/src/components/DeckBuilder/CardPicker.vue
+++ b/src/components/DeckBuilder/CardPicker.vue
@@ -18,8 +18,7 @@ $padding: 10px;
   max-height: 100%;
   display: grid;
   gap: $padding;
-  padding: ($padding * 4) $padding;
-  row-gap: $padding * 4;
+  padding: $padding;
   place-items: stretch;
 }
 
@@ -27,9 +26,11 @@ $padding: 10px;
   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);
diff --git a/src/views/DeckBuilder.vue b/src/views/DeckBuilder.vue
index ef2b9d3..51df709 100644
--- a/src/views/DeckBuilder.vue
+++ b/src/views/DeckBuilder.vue
@@ -103,6 +103,7 @@
 .cards {
   display: grid;
   grid-template-columns: 5% 1fr 5%;
+  column-gap: 10px;
 }
 
 .decklist {
diff --git a/src/views/Draft.vue b/src/views/Draft.vue
index b0efb73..9f38860 100644
--- a/src/views/Draft.vue
+++ b/src/views/Draft.vue
@@ -1,9 +1,14 @@
 <template>
   <section class="draftview">
     <section class="playerlist">
-      <b>Players</b>
+      <header>
+        <h2>Players</h2>
+      </header>
     </section>
     <section class="pool">
+      <header>
+        <h2>Available picks</h2>
+      </header>
       <CardPicker
         @picked="cardPicked"
         :columns="columns"
@@ -13,7 +18,9 @@
       />
     </section>
     <section class="cardlist">
-      <b>Cards</b>
+      <header>
+        <h2>Cards</h2>
+      </header>
     </section>
   </section>
 </template>
@@ -31,11 +38,21 @@
     padding: 10px 20px;
     grid-row: 1;
   }
+
+  header > h2 {
+    font-family: $fantasy;
+    font-weight: 600;
+    text-align: center;
+    font-size: 2.5vh;
+    padding: 1vh;
+  }
 }
 
 .pool {
+  display: flex;
+  flex-direction: column;
   .picker {
-    height: 100%;
+    flex: 1;
   }
 }
 
-- 
2.40.1


From ae9c46c969689a6b9aef15de0091c55a59c19ef8 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sun, 15 Sep 2019 12:36:37 +0200
Subject: [PATCH 3/4] Add player list

---
 src/views/Draft.vue | 71 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 70 insertions(+), 1 deletion(-)

diff --git a/src/views/Draft.vue b/src/views/Draft.vue
index 9f38860..211e49f 100644
--- a/src/views/Draft.vue
+++ b/src/views/Draft.vue
@@ -4,6 +4,19 @@
       <header>
         <h2>Players</h2>
       </header>
+      <section class="players">
+        <article
+          v-for="player in playerStatus"
+          :key="player.name"
+          :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">
       <header>
@@ -42,12 +55,34 @@
   header > h2 {
     font-family: $fantasy;
     font-weight: 600;
-    text-align: center;
     font-size: 2.5vh;
     padding: 1vh;
   }
 }
 
+.playerlist {
+  .players {
+    display: flex;
+    flex-flow: column wrap;
+    max-height: 100%;
+  }
+  .player {
+    display: flex;
+    color: $red;
+    align-items: center;
+    &.picked,
+    &.bot {
+      color: $green;
+    }
+    &.me::after {
+      content: " (me)";
+      font-size: 10pt;
+      margin-left: 5px;
+      color: $purple;
+    }
+  }
+}
+
 .pool {
   display: flex;
   flex-direction: column;
@@ -93,6 +128,13 @@ import { Component, Vue } from "vue-property-decorator";
 import { getCards, CardSlot } from "@/mlpccg";
 import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
 
+interface PlayerStatus {
+  name: string;
+  isBot: boolean;
+  isMe: boolean;
+  picked: boolean;
+}
+
 @Component({
   components: {
     CardPicker
@@ -128,5 +170,32 @@ export default class DraftView extends Vue {
   }
 
   private cardPicked() {}
+
+  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>
-- 
2.40.1


From 33cf37cbf09a1a147a776ab00ce16740d74021e9 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sun, 15 Sep 2019 12:59:51 +0200
Subject: [PATCH 4/4] Add pack count and make player list prettier

---
 src/components/DeckBuilder/DeckList.vue |  2 +-
 src/views/Draft.vue                     | 66 +++++++++++++++++++++----
 2 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/src/components/DeckBuilder/DeckList.vue b/src/components/DeckBuilder/DeckList.vue
index 6b56b57..519ab6a 100644
--- a/src/components/DeckBuilder/DeckList.vue
+++ b/src/components/DeckBuilder/DeckList.vue
@@ -78,7 +78,7 @@
   font-weight: bold;
   font-size: 13pt;
   &:after {
-    content: " ×";
+    content: "×";
     font-weight: 300;
   }
 }
diff --git a/src/views/Draft.vue b/src/views/Draft.vue
index 211e49f..9a699b0 100644
--- a/src/views/Draft.vue
+++ b/src/views/Draft.vue
@@ -6,8 +6,8 @@
       </header>
       <section class="players">
         <article
-          v-for="player in playerStatus"
-          :key="player.name"
+          v-for="(player, i) in playerStatus"
+          :key="player.name + i"
           :class="playerClass(player)"
         >
           <div class="icon">
@@ -20,7 +20,12 @@
     </section>
     <section class="pool">
       <header>
-        <h2>Available picks</h2>
+        <h2>
+          Available picks (Pack
+          <span class="pack-number">{{ packNumber }}</span> of
+          <span class="pack-count">{{ packCount }}</span
+          >)
+        </h2>
       </header>
       <CardPicker
         @picked="cardPicked"
@@ -34,6 +39,7 @@
       <header>
         <h2>Cards</h2>
       </header>
+      <DeckList :cards="pickedCards" />
     </section>
   </section>
 </template>
@@ -41,6 +47,11 @@
 <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;
@@ -67,18 +78,27 @@
     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: $green;
+      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: $purple;
+      color: $player-me;
     }
   }
 }
@@ -91,6 +111,10 @@
   }
 }
 
+.pack-number {
+  color: $primary;
+}
+
 @media (max-width: 800px) {
   .draftview {
     grid-template-columns: 2fr 250px;
@@ -125,8 +149,9 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { getCards, CardSlot } from "@/mlpccg";
+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;
@@ -137,7 +162,8 @@ interface PlayerStatus {
 
 @Component({
   components: {
-    CardPicker
+    CardPicker,
+    DeckList
   }
 })
 export default class DraftView extends Vue {
@@ -146,13 +172,19 @@ export default class DraftView extends Vue {
   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: []
+      currentPicks: [],
+      pickedCards: []
     };
   }
 
@@ -169,7 +201,23 @@ export default class DraftView extends Vue {
     }));
   }
 
-  private cardPicked() {}
+  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 [
-- 
2.40.1