Add navigation

public/images/deckbuilder/navarrow.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 50 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="Artboard1" transform="matrix(1,0,0,1,0,15.7771)">
+        <rect x="0" y="-15.777" width="50" height="81.873" style="fill:none;"/>
+        <g transform="matrix(0.457009,0,0,1.2614,2.95268,-32.3672)">
+            <path d="M48.243,45.605L90.773,73.875L48.243,73.875L5.712,45.605L48.243,17.336L90.773,17.336L48.243,45.605L48.243,45.605Z" style="fill:url(#_Linear1);"/>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(137.101,65.9713,-182.089,49.6719,-34.1545,12.0871)"><stop offset="0" style="stop-color:rgb(235,235,235);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(163,163,163);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>

src/components/DeckBuilder/CardPicker.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="cardpicker" :style="grid">
-    <article class="ccgcard" v-for="(card, i) in cards" :key="i">
+    <article class="ccgcard" v-for="(card, i) in cards" :key="i + card.ID">
       <img :src="imageURL(card.ID)" />
     </article>
   </section>

src/views/DeckBuilder.vue

@@ -27,7 +27,13 @@
         </div>
       </section>
       <section class="cards">
+        <div @click="prevPage" :class="canGoPrev ? 'prev' : 'prev unavailable'">
+          <img src="/images/deckbuilder/navarrow.svg" />
+        </div>
         <CardPicker :columns="columns" :rows="rows" :cards="currentPage" />
+        <div @click="nextPage" :class="canGoNext ? 'next' : 'next unavailable'">
+          <img src="/images/deckbuilder/navarrow.svg" />
+        </div>
       </section>
     </section>
     <section class="decklist">
@@ -63,6 +69,11 @@
         }
       }
     }
+
+    .cards {
+      display: grid;
+      grid-template-columns: 5% 1fr 5%;
+    }
   }
   .decklist {
     grid-column: 2;
@@ -92,6 +103,24 @@
   width: 32px;
   height: 32px;
 }
+
+.prev,
+.next {
+  opacity: 0.5;
+  display: flex;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.9;
+  }
+  &.unavailable {
+    opacity: 0.1;
+    cursor: not-allowed;
+  }
+}
+
+.next img {
+  transform: scaleX(-1);
+}
 </style>
 
 <script lang="ts">
@@ -275,6 +304,7 @@ export default class DeckBuilder extends Vue {
     }
     const filtered = await getCards(filters);
     this.filtered = filtered.sort(sortByColor);
+    this.offset = 0;
   }
 
   private get itemsPerPage() {
@@ -282,7 +312,7 @@ export default class DeckBuilder extends Vue {
   }
 
   private get currentPage() {
-    return this.filtered.slice(this.offset, this.itemsPerPage);
+    return this.filtered.slice(this.offset, this.offset + this.itemsPerPage);
   }
 
   private elementIconURL(element: string): string {
@@ -328,5 +358,30 @@ export default class DeckBuilder extends Vue {
   private nameChanged() {
     this.applyFilters();
   }
+
+  private get canGoPrev(): boolean {
+    return this.offset > 0;
+  }
+
+  private get canGoNext(): boolean {
+    return this.offset + this.itemsPerPage < this.filtered.length;
+  }
+
+  private prevPage() {
+    if (!this.canGoPrev) {
+      return;
+    }
+    this.offset = Math.max(0, this.offset - this.itemsPerPage);
+  }
+
+  private nextPage() {
+    if (!this.canGoNext) {
+      return;
+    }
+    this.offset = Math.min(
+      this.filtered.length - this.itemsPerPage,
+      this.offset + this.itemsPerPage
+    );
+  }
 }
 </script>