From 449465c852ce0d0de4c7d4408f279fcf56b8f834 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sun, 15 Sep 2019 17:47:07 +0200
Subject: [PATCH 1/6] Create basic board

---
 src/views/Draft.vue |  2 ++
 src/views/Game.vue  | 81 +++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/src/views/Draft.vue b/src/views/Draft.vue
index 6a68139..9885b6d 100644
--- a/src/views/Draft.vue
+++ b/src/views/Draft.vue
@@ -54,6 +54,8 @@ $border-opacity: 0.6;
 
 .draftview {
   background: url("../assets/images/backgrounds/draftbg.webp") center;
+  background-repeat: no-repeat;
+  background-size: cover;
   display: grid;
   height: 100vh;
   gap: 10px;
diff --git a/src/views/Game.vue b/src/views/Game.vue
index 6b6adaa..9d49a13 100644
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -1,14 +1,89 @@
 <template>
-  <section class="game"></section>
+  <section class="game">
+    <section class="topbar"></section>
+    <section class="board"></section>
+    <section class="hand">
+      <article v-for="(card, i) in hand" :key="i + card.ID">
+        <img :src="imageURL(card.ID)" />
+      </article>
+    </section>
+  </section>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+$zone-gap: 5px;
+$card-gap: 5px;
+
+.game {
+  background: url("../assets/images/backgrounds/boardbg.webp") center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 100vh;
+  display: grid;
+  gap: $zone-gap;
+  grid: 50px 2fr minmax(100px, 150px) / 1fr 3fr 1fr;
+}
+
+.topbar {
+  grid-column: 1/4;
+  grid-row: 1;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 30, 0.9),
+    rgba(0, 0, 50, 0.6)
+  );
+}
+
+.board {
+  grid-column: 1/4;
+  grid-row: 2;
+}
+
+.hand {
+  grid-column: 2;
+  grid-row: 3;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10px, max-content));
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  article {
+    margin: $card-gap;
+    margin-bottom: 0;
+    min-width: 150px;
+    overflow-y: hidden;
+    cursor: grab;
+    transition: all 100ms;
+    &:hover {
+      margin-top: $card-gap - 30px;
+    }
+  }
+  overflow: visible;
+}
+</style>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { Card, cardImageURL, getCards } from "@/mlpccg";
 
 @Component({
   components: {}
 })
-export default class GameView extends Vue {}
+export default class GameView extends Vue {
+  private hand!: Card[];
+
+  private data() {
+    return {
+      hand: []
+    };
+  }
+
+  private async mounted() {
+    this.hand = (await getCards({ Sets: ["FF"] })).slice(0, 6);
+  }
+
+  private imageURL(id: string) {
+    return cardImageURL(id);
+  }
+}
 </script>
-- 
2.45.2


From cc781709dfe8ac0b4f984a94d25e7dfec234386e Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sun, 15 Sep 2019 18:48:31 +0200
Subject: [PATCH 2/6] Add game zones

---
 src/views/Game.vue | 84 +++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 79 insertions(+), 5 deletions(-)

diff --git a/src/views/Game.vue b/src/views/Game.vue
index 9d49a13..5914eaa 100644
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -1,7 +1,22 @@
 <template>
   <section class="game">
     <section class="topbar"></section>
-    <section class="board"></section>
+    <section class="board">
+      <section class="zone own-home"></section>
+      <section class="problems">
+        <section class="problem own-problem">
+          <section class="zone own-zone"></section>
+          <section class="problem-card"></section>
+          <section class="zone opp-zone"></section>
+        </section>
+        <section class="problem opp-problem">
+          <section class="zone own-zone"></section>
+          <section class="problem-card"></section>
+          <section class="zone opp-zone"></section>
+        </section>
+      </section>
+      <section class="zone opp-home"></section>
+    </section>
     <section class="hand">
       <article v-for="(card, i) in hand" :key="i + card.ID">
         <img :src="imageURL(card.ID)" />
@@ -13,6 +28,10 @@
 <style lang="scss" scoped>
 $zone-gap: 5px;
 $card-gap: 5px;
+$side-min-size: 250px;
+$top-bar-height: 50px;
+$hand-min-height: 100px;
+$hand-max-height: 150px;
 
 .game {
   background: url("../assets/images/backgrounds/boardbg.webp") center;
@@ -21,7 +40,12 @@ $card-gap: 5px;
   height: 100vh;
   display: grid;
   gap: $zone-gap;
-  grid: 50px 2fr minmax(100px, 150px) / 1fr 3fr 1fr;
+  grid:
+    $top-bar-height 2fr minmax($hand-min-height, $hand-max-height) / minmax(
+      $side-min-size,
+      1fr
+    )
+    5fr minmax($side-min-size, 1fr);
 }
 
 .topbar {
@@ -35,8 +59,46 @@ $card-gap: 5px;
 }
 
 .board {
-  grid-column: 1/4;
+  grid-column: 2/3;
   grid-row: 2;
+  display: grid;
+  grid: 1fr 2.5fr 1fr / 1fr;
+
+  .problems {
+    display: flex;
+    flex: 1;
+    flex-flow: row-reverse;
+
+    .problem {
+      display: grid;
+      grid: 1.5fr 0.5fr 1fr 0.5fr 1.5fr / 1fr 1.5fr 1fr;
+      flex: 1;
+
+      .own-zone {
+        grid-row: 4/6;
+        grid-column: 1/4;
+      }
+      .opp-zone {
+        grid-row: 1/3;
+        grid-column: 1/4;
+      }
+      .problem-card {
+        border: 2px solid rgba(255, 255, 255, 0.2);
+        grid-row: 2/5;
+        grid-column: 2;
+      }
+    }
+  }
+}
+
+.zone {
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  margin: 2px;
+  padding: 2px;
+  border-radius: 5px;
+  display: flex;
+  flex-flow: column;
+  flex: 1;
 }
 
 .hand {
@@ -47,19 +109,31 @@ $card-gap: 5px;
   justify-content: center;
   margin: 0;
   padding: 0;
+  padding-right: 100px;
   article {
     margin: $card-gap;
     margin-bottom: 0;
-    min-width: 150px;
     overflow-y: hidden;
     cursor: grab;
     transition: all 100ms;
+    min-width: 150px;
+    max-width: 200px;
     &:hover {
       margin-top: $card-gap - 30px;
     }
   }
   overflow: visible;
 }
+
+@media (max-width: 1200px) {
+  .game {
+    grid-template-columns: $side-min-size 5fr;
+  }
+  .hand {
+    grid-column: 1/3;
+    padding: 0 10px;
+  }
+}
 </style>
 
 <script lang="ts">
@@ -79,7 +153,7 @@ export default class GameView extends Vue {
   }
 
   private async mounted() {
-    this.hand = (await getCards({ Sets: ["FF"] })).slice(0, 6);
+    this.hand = (await getCards({ Sets: ["FF"] })).slice(0, 9);
   }
 
   private imageURL(id: string) {
-- 
2.45.2


From 214290439f24614b66022eb2439aca67d3b5da39 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sun, 15 Sep 2019 23:42:16 +0200
Subject: [PATCH 3/6] Start adding drag&drop

---
 src/components/GameBoard/Zone.vue | 60 +++++++++++++++++++++++++++++++
 src/views/Game.vue                | 46 ++++++++++++++----------
 2 files changed, 87 insertions(+), 19 deletions(-)
 create mode 100644 src/components/GameBoard/Zone.vue

diff --git a/src/components/GameBoard/Zone.vue b/src/components/GameBoard/Zone.vue
new file mode 100644
index 0000000..742ed85
--- /dev/null
+++ b/src/components/GameBoard/Zone.vue
@@ -0,0 +1,60 @@
+<template>
+  <section
+    :class="zoneClass"
+    @dragenter.prevent="dragenter"
+    @dragleave.prevent="dragleave"
+  ></section>
+</template>
+
+<style lang="scss" scoped>
+.zone {
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  margin: 2px;
+  padding: 2px;
+  border-radius: 5px;
+  display: flex;
+  flex-flow: column;
+  flex: 1;
+}
+
+.dragging {
+  background: rgba(255, 255, 255, 0.3);
+}
+</style>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { cardImageURL } from "@/mlpccg";
+
+@Component({
+  components: {}
+})
+export default class Zone extends Vue {
+  private dragging!: boolean;
+
+  private data() {
+    return {
+      dragging: false
+    };
+  }
+
+  private imageURL(id: string) {
+    return cardImageURL(id);
+  }
+
+  private dragenter(e: DragEvent) {
+    this.dragging = true;
+  }
+
+  private dragleave(e: DragEvent) {
+    this.dragging = false;
+  }
+
+  private get zoneClass() {
+    return {
+      zone: true,
+      dragging: this.dragging
+    };
+  }
+}
+</script>
diff --git a/src/views/Game.vue b/src/views/Game.vue
index 5914eaa..72fbc31 100644
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -2,23 +2,28 @@
   <section class="game">
     <section class="topbar"></section>
     <section class="board">
-      <section class="zone own-home"></section>
+      <Zone class="own-zone" id="own-home" />
       <section class="problems">
         <section class="problem own-problem">
-          <section class="zone own-zone"></section>
+          <Zone class="own-zone" id="pown-own-zone" />
           <section class="problem-card"></section>
-          <section class="zone opp-zone"></section>
+          <Zone class="opp-zone" id="pown-opp-zone" />
         </section>
         <section class="problem opp-problem">
-          <section class="zone own-zone"></section>
+          <Zone class="own-zone" id="popp-own-zone" />
           <section class="problem-card"></section>
-          <section class="zone opp-zone"></section>
+          <Zone class="opp-zone" id="popp-opp-zone" />
         </section>
       </section>
-      <section class="zone opp-home"></section>
+      <Zone class="opp-zone" id="opp-home" />
     </section>
     <section class="hand">
-      <article v-for="(card, i) in hand" :key="i + card.ID">
+      <article
+        draggable="true"
+        v-for="(card, i) in hand"
+        :key="i + card.ID"
+        @dragstart="dragStartCard.bind(this, card)"
+      >
         <img :src="imageURL(card.ID)" />
       </article>
     </section>
@@ -83,7 +88,6 @@ $hand-max-height: 150px;
         grid-column: 1/4;
       }
       .problem-card {
-        border: 2px solid rgba(255, 255, 255, 0.2);
         grid-row: 2/5;
         grid-column: 2;
       }
@@ -91,16 +95,6 @@ $hand-max-height: 150px;
   }
 }
 
-.zone {
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  margin: 2px;
-  padding: 2px;
-  border-radius: 5px;
-  display: flex;
-  flex-flow: column;
-  flex: 1;
-}
-
 .hand {
   grid-column: 2;
   grid-row: 3;
@@ -121,6 +115,9 @@ $hand-max-height: 150px;
     &:hover {
       margin-top: $card-gap - 30px;
     }
+    &:active {
+      cursor: grabbing;
+    }
   }
   overflow: visible;
 }
@@ -139,9 +136,12 @@ $hand-max-height: 150px;
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { Card, cardImageURL, getCards } from "@/mlpccg";
+import Zone from "@/components/GameBoard/Zone.vue";
 
 @Component({
-  components: {}
+  components: {
+    Zone
+  }
 })
 export default class GameView extends Vue {
   private hand!: Card[];
@@ -159,5 +159,13 @@ export default class GameView extends Vue {
   private imageURL(id: string) {
     return cardImageURL(id);
   }
+
+  private dragStartCard(card: Card, e: DragEvent) {
+    if (e.dataTransfer) {
+      e.dataTransfer.setData("id", card.ID);
+      e.dataTransfer.dropEffect = "move";
+      e.dataTransfer.effectAllowed = "all";
+    }
+  }
 }
 </script>
-- 
2.45.2


From d2b4774ba94a5aedaca5c666764ab2134a7fcc3a Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sat, 21 Sep 2019 16:46:48 +0200
Subject: [PATCH 4/6] Use CardImage for cards

---
 src/views/Game.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/Game.vue b/src/views/Game.vue
index 72fbc31..7af539b 100644
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -24,7 +24,7 @@
         :key="i + card.ID"
         @dragstart="dragStartCard.bind(this, card)"
       >
-        <img :src="imageURL(card.ID)" />
+        <CardImage :id="card.ID" />
       </article>
     </section>
   </section>
@@ -137,9 +137,11 @@ $hand-max-height: 150px;
 import { Component, Vue } from "vue-property-decorator";
 import { Card, cardImageURL, getCards } from "@/mlpccg";
 import Zone from "@/components/GameBoard/Zone.vue";
+import CardImage from "@/components/Cards/CardImage.vue";
 
 @Component({
   components: {
+    CardImage,
     Zone
   }
 })
-- 
2.45.2


From 46aa311c517c218a3d3d3d9a11290ca96abef611 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sat, 21 Sep 2019 17:44:49 +0200
Subject: [PATCH 5/6] Fix card positioning and rotation

---
 src/components/GameBoard/Zone.vue | 40 +++++++++++++++++++-----
 src/views/Game.vue                | 52 +++++++++++++++++++++++++------
 2 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/src/components/GameBoard/Zone.vue b/src/components/GameBoard/Zone.vue
index 742ed85..aa4fd76 100644
--- a/src/components/GameBoard/Zone.vue
+++ b/src/components/GameBoard/Zone.vue
@@ -3,18 +3,36 @@
     :class="zoneClass"
     @dragenter.prevent="dragenter"
     @dragleave.prevent="dragleave"
-  ></section>
+  >
+    <CardImage
+      class="ccgcard"
+      v-for="(card, i) in cards"
+      :key="i + card.ID"
+      :id="card.ID"
+    />
+  </section>
 </template>
 
 <style lang="scss" scoped>
 .zone {
   border: 2px solid rgba(255, 255, 255, 0.2);
   margin: 2px;
-  padding: 2px;
+  padding: 4px;
   border-radius: 5px;
   display: flex;
-  flex-flow: column;
-  flex: 1;
+  justify-content: center;
+}
+
+.ccgcard {
+  cursor: grab;
+  transition: all 100ms;
+  max-width: none;
+  width: auto;
+  max-height: 100%;
+  margin: 0 10px;
+  &:active {
+    cursor: grabbing;
+  }
 }
 
 .dragging {
@@ -23,13 +41,21 @@
 </style>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { cardImageURL } from "@/mlpccg";
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { cardImageURL, Card } from "@/mlpccg";
+import CardImage from "@/components/Cards/CardImage.vue";
 
 @Component({
-  components: {}
+  components: {
+    CardImage
+  }
 })
 export default class Zone extends Vue {
+  @Prop({
+    default: []
+  })
+  private cards!: Card[];
+
   private dragging!: boolean;
 
   private data() {
diff --git a/src/views/Game.vue b/src/views/Game.vue
index 7af539b..e635ac0 100644
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -2,20 +2,36 @@
   <section class="game">
     <section class="topbar"></section>
     <section class="board">
-      <Zone class="own-zone" id="own-home" />
+      <Zone class="opp-zone" :cards="zones['opp-home']" id="opp-home" />
       <section class="problems">
         <section class="problem own-problem">
-          <Zone class="own-zone" id="pown-own-zone" />
+          <Zone
+            class="opp-zone"
+            :cards="zones['own-problem-opp-zone']"
+            id="pown-opp-zone"
+          />
           <section class="problem-card"></section>
-          <Zone class="opp-zone" id="pown-opp-zone" />
+          <Zone
+            class="own-zone"
+            :cards="zones['own-problem-own-zone']"
+            id="pown-own-zone"
+          />
         </section>
         <section class="problem opp-problem">
-          <Zone class="own-zone" id="popp-own-zone" />
+          <Zone
+            class="opp-zone"
+            :cards="zones['opp-problem-opp-zone']"
+            id="popp-opp-zone"
+          />
           <section class="problem-card"></section>
-          <Zone class="opp-zone" id="popp-opp-zone" />
+          <Zone
+            class="own-zone"
+            :cards="zones['opp-problem-own-zone']"
+            id="popp-own-zone"
+          />
         </section>
       </section>
-      <Zone class="opp-zone" id="opp-home" />
+      <Zone class="own-zone" :cards="zones['own-home']" id="own-home" />
     </section>
     <section class="hand">
       <article
@@ -68,11 +84,12 @@ $hand-max-height: 150px;
   grid-row: 2;
   display: grid;
   grid: 1fr 2.5fr 1fr / 1fr;
+  max-height: 100vh;
 
   .problems {
     display: flex;
     flex: 1;
-    flex-flow: row-reverse;
+    flex-flow: row;
 
     .problem {
       display: grid;
@@ -100,7 +117,6 @@ $hand-max-height: 150px;
   grid-row: 3;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(10px, max-content));
-  justify-content: center;
   margin: 0;
   padding: 0;
   padding-right: 100px;
@@ -122,6 +138,10 @@ $hand-max-height: 150px;
   overflow: visible;
 }
 
+.opp-zone {
+  transform: rotate(180deg);
+}
+
 @media (max-width: 1200px) {
   .game {
     grid-template-columns: $side-min-size 5fr;
@@ -147,15 +167,29 @@ import CardImage from "@/components/Cards/CardImage.vue";
 })
 export default class GameView extends Vue {
   private hand!: Card[];
+  private zones!: Record<string, Card[]>;
 
   private data() {
     return {
-      hand: []
+      hand: [],
+      zones: {
+        "own-home": [],
+        "opp-home": [],
+        "own-problem-own-zone": [],
+        "own-problem-opp-zone": [],
+        "opp-problem-own-zone": [],
+        "opp-problem-opp-zone": []
+      }
     };
   }
 
   private async mounted() {
     this.hand = (await getCards({ Sets: ["FF"] })).slice(0, 9);
+    this.zones["own-home"] = (await getCards({ Sets: ["FF"] })).slice(0, 3);
+    this.zones["own-problem-opp-zone"] = (await getCards({
+      Sets: ["FF"]
+    })).slice(10, 11);
+    this.zones["opp-home"] = (await getCards({ Sets: ["FF"] })).slice(20, 23);
   }
 
   private imageURL(id: string) {
-- 
2.45.2


From 007f1feba119503f541f93ebd8a7aea4a3c053a2 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Wed, 25 Sep 2019 21:20:08 +0200
Subject: [PATCH 6/6] Add problem cards

---
 src/views/Game.vue | 46 +++++++++++++++++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/views/Game.vue b/src/views/Game.vue
index e635ac0..26b2098 100644
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -10,7 +10,12 @@
             :cards="zones['own-problem-opp-zone']"
             id="pown-opp-zone"
           />
-          <section class="problem-card"></section>
+          <section class="problem-card opp-zone">
+            <CardImage
+              v-if="problems['own-problem']"
+              :id="problems['own-problem'].ID"
+            />
+          </section>
           <Zone
             class="own-zone"
             :cards="zones['own-problem-own-zone']"
@@ -23,7 +28,12 @@
             :cards="zones['opp-problem-opp-zone']"
             id="popp-opp-zone"
           />
-          <section class="problem-card"></section>
+          <section class="problem-card">
+            <CardImage
+              v-if="problems['opp-problem']"
+              :id="problems['opp-problem'].ID"
+            />
+          </section>
           <Zone
             class="own-zone"
             :cards="zones['opp-problem-own-zone']"
@@ -93,20 +103,30 @@ $hand-max-height: 150px;
 
     .problem {
       display: grid;
-      grid: 1.5fr 0.5fr 1fr 0.5fr 1.5fr / 1fr 1.5fr 1fr;
+      grid: 1.5fr 0.2fr 1fr 0.2fr 1.5fr / 1fr 1.5fr 1fr;
       flex: 1;
 
       .own-zone {
         grid-row: 4/6;
         grid-column: 1/4;
+        z-index: 2;
       }
       .opp-zone {
         grid-row: 1/3;
         grid-column: 1/4;
+        z-index: 2;
       }
       .problem-card {
         grid-row: 2/5;
         grid-column: 2;
+        z-index: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        img {
+          height: auto;
+          max-height: 100%;
+        }
       }
     }
   }
@@ -168,6 +188,7 @@ import CardImage from "@/components/Cards/CardImage.vue";
 export default class GameView extends Vue {
   private hand!: Card[];
   private zones!: Record<string, Card[]>;
+  private problems!: Record<string, Card | null>;
 
   private data() {
     return {
@@ -179,17 +200,24 @@ export default class GameView extends Vue {
         "own-problem-opp-zone": [],
         "opp-problem-own-zone": [],
         "opp-problem-opp-zone": []
+      },
+      problems: {
+        "own-problem": null,
+        "opp-problem": null
       }
     };
   }
 
   private async mounted() {
-    this.hand = (await getCards({ Sets: ["FF"] })).slice(0, 9);
-    this.zones["own-home"] = (await getCards({ Sets: ["FF"] })).slice(0, 3);
-    this.zones["own-problem-opp-zone"] = (await getCards({
-      Sets: ["FF"]
-    })).slice(10, 11);
-    this.zones["opp-home"] = (await getCards({ Sets: ["FF"] })).slice(20, 23);
+    const cards = await getCards({ Sets: ["FF"] });
+    this.hand = cards.slice(0, 9);
+    this.zones["own-home"] = cards.slice(0, 3);
+    this.zones["own-problem-opp-zone"] = cards.slice(10, 11);
+    this.zones["opp-home"] = cards.slice(20, 23);
+    console.log(cards);
+    const problem = cards.find(c => c.ID == "ff130");
+    this.problems["own-problem"] = problem!;
+    this.problems["opp-problem"] = problem!;
   }
 
   private imageURL(id: string) {
-- 
2.45.2