Fix card positioning and rotation

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;
+  justify-content: center;
-  flex: 1;
+}
+
+.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 { Component, Vue, Prop } from "vue-property-decorator";
-import { cardImageURL } from "@/mlpccg";
+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() {

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) {