adding latest

src/views/DeckBuilder.vue

@@ -106,19 +106,22 @@
           </v-col>
           <v-col cols="10">
             <div cols="12">
-              {{ selected_shikigami_decks[index][index] }}
+              <!-- {{ selected_shikigami_decks[index][index] }} -->
             </div>
-            <v-row cols="12">
-              <v-col
+            <v-row cols="12" class="d-flex">
+              <v-card
                 v-for="i in selected_shikigami_decks[index][index]"
                 :key="i.id"
-                cols="1"
+                width="12.4%"
               >
-                {{ i.name }}
+                <div class="text-center">
+                  {{ i.name }}
+                </div>
                 <v-img
                   :src="require(`@/assets/deck_of_cards/${i.url}`)"
-                ></v-img>
-              </v-col>
+                  class="deck-card"
+                ></v-img
+              ></v-card>
             </v-row>
           </v-col>
         </v-row>
@@ -135,11 +138,6 @@ export default {
     selected_shikigami_data: [],
     selected_shikigami_decks: [{ 0: [] }, { 1: [] }, { 2: [] }, { 3: [] }],
     shikigami: shikigami,
-    colors: [
-      { id: 1, title: "red" },
-      { id: 2, title: "blue" },
-      { id: 3, title: "red" },
-    ],
   }),
   methods: {
     get_chosen_shikigami_data: function (shikigami_name) {
@@ -176,22 +174,6 @@ export default {
       console.log(this.selected_shikigami_decks[shiki_index].shiki_index);
       console.log(shiki_index, card_index);
     },
-    double_cards(index) {
-      console.log("looping");
-      const doubled_cards = this.doubled_cards;
-      console.log(doubled_cards[index].index);
-      console.log(this.doubled_cards[index][index]);
-      this.selected_shikigami_data[index].cards.forEach(function (el) {
-        let id_0 = Math.random().toString(36).slice(6);
-        let id_1 = Math.random().toString(36).slice(6);
-        doubled_cards[index][index].push(
-          { id: id_0, card: el },
-          { id: id_1, card: el }
-        );
-      });
-      this.doubled_cards = doubled_cards;
-      return this.doubled_cards;
-    },
   },
   computed: {},
   watch: {
@@ -218,4 +200,16 @@ export default {
   height: 60px !important;
   width: 60px !important;
 }
+
+.deck-card:hover {
+  position: relative;
+  animation: scaleMe 500ms ease-in-out 0s forwards;
+  z-index: 100;
+}
+
+@keyframes scaleMe {
+  100% {
+    transform: scale(1.25);
+  }
+}
 </style>