Start adding drag&drop

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>

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>