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;

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>