adding latest working

.gitignore

@@ -24,3 +24,4 @@ pnpm-debug.log*
 
 # Custom
 src/assets/deck_of_cards
+src/assets/avatars

package.json

@@ -11,7 +11,7 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuetify": "^2.2.11",
+    "vuetify": "^2.4",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/data/chains_headers.json

@@ -1,12 +0,0 @@
-[
-  { "text": "Building", "value": "building", "groupable": false },
-  { "text": "Number Needed", "value": "number_needed", "groupable": false },
-  {
-    "text": "Electricity Supplied?",
-    "value": "electricity_supplied",
-    "groupable": false
-  },
-  { "text": "Chain", "value": "chain", "groupable": true },
-  { "text": "Final Building?", "value": "final_building", "groupable": false },
-  { "text": "Base Duration", "value": "base_duration", "groupable": false }
-]

src/data/old_chains_headers.json

@@ -1,18 +0,0 @@
-[
-  { "text": "Building", "value": "building", "groupable": false },
-  {
-    "text": "Electricity Supplied?",
-    "value": "electricity_supplied",
-    "groupable": false
-  },
-  { "text": "Feeds Into", "value": "feeds_into", "groupable": false },
-  { "text": "Chain", "value": "chain", "groupable": true },
-  { "text": "Tier", "value": "tier", "groupable": false },
-  { "text": "Final Building?", "value": "final_building", "groupable": false },
-  {
-    "text": "Improved By Electricity?",
-    "value": "improved_by_electricity",
-    "groupable": false
-  },
-  { "text": "Base Duration", "value": "base_duration", "groupable": false },
-]

src/data/shikigami_cards.json

@@ -22,51 +22,51 @@
       { "id": "e715a175", "name": "shiki_0_card_7", "url": "7S.png" },
       { "id": "0b19a276", "name": "shiki_0_card_7", "url": "7S.png" }
     ],
-    "avatar": "https://cdn.vuetifyjs.com/images/lists/1.jpg"
+    "avatar": "avatar_0.png"
   },
   {
     "name": "Shiki_1",
     "cards": [
-      { "id": "a1731031", "name": "shiki_1_card_0", "url": "https://shiki_1_card_0.png" },
-      { "id": "e7e726da", "name": "shiki_1_card_0", "url": "https://shiki_1_card_0.png" },
-      { "id": "78a98586", "name": "shiki_1_card_1", "url": "https://shiki_1_card_1.png" },
-      { "id": "d86c45ad", "name": "shiki_1_card_1", "url": "https://shiki_1_card_1.png" },
-      { "id": "8bc7bd43", "name": "shiki_1_card_2", "url": "https://shiki_1_card_2.png" },
-      { "id": "7189320d", "name": "shiki_1_card_2", "url": "https://shiki_1_card_2.png" },
-      { "id": "b497c29d", "name": "shiki_1_card_3", "url": "https://shiki_1_card_3.png" },
-      { "id": "ef18f102", "name": "shiki_1_card_3", "url": "https://shiki_1_card_3.png" },
-      { "id": "9bcc73a4", "name": "shiki_1_card_4", "url": "https://shiki_1_card_4.png" },
-      { "id": "1303292a", "name": "shiki_1_card_4", "url": "https://shiki_1_card_4.png" },
-      { "id": "746a7c46", "name": "shiki_1_card_5", "url": "https://shiki_1_card_5.png" },
-      { "id": "e36abe58", "name": "shiki_1_card_5", "url": "https://shiki_1_card_5.png" },
-      { "id": "0e70898a", "name": "shiki_1_card_6", "url": "https://shiki_1_card_6.png" },
-      { "id": "a703e2e1", "name": "shiki_1_card_6", "url": "https://shiki_1_card_6.png" },
-      { "id": "2a9cbb60", "name": "shiki_1_card_7", "url": "https://shiki_1_card_7.png" },
-      { "id": "90770c78", "name": "shiki_1_card_7", "url": "https://shiki_1_card_7.png" }
+      { "id": "a1731031", "name": "shiki_1_card_0", "url": "Untitled_0.png" },
+      { "id": "e7e726da", "name": "shiki_1_card_0", "url": "Untitled_0.png" },
+      { "id": "78a98586", "name": "shiki_1_card_1", "url": "Untitled_0.png" },
+      { "id": "d86c45ad", "name": "shiki_1_card_1", "url": "Untitled_0.png" },
+      { "id": "8bc7bd43", "name": "shiki_1_card_2", "url": "Untitled_0.png" },
+      { "id": "7189320d", "name": "shiki_1_card_2", "url": "Untitled_0.png" },
+      { "id": "b497c29d", "name": "shiki_1_card_3", "url": "Untitled_0.png" },
+      { "id": "ef18f102", "name": "shiki_1_card_3", "url": "Untitled_0.png" },
+      { "id": "9bcc73a4", "name": "shiki_1_card_4", "url": "Untitled_0.png" },
+      { "id": "1303292a", "name": "shiki_1_card_4", "url": "Untitled_0.png" },
+      { "id": "746a7c46", "name": "shiki_1_card_5", "url": "Untitled_0.png" },
+      { "id": "e36abe58", "name": "shiki_1_card_5", "url": "Untitled_0.png" },
+      { "id": "0e70898a", "name": "shiki_1_card_6", "url": "Untitled_0.png" },
+      { "id": "a703e2e1", "name": "shiki_1_card_6", "url": "Untitled_0.png" },
+      { "id": "2a9cbb60", "name": "shiki_1_card_7", "url": "Untitled_0.png" },
+      { "id": "90770c78", "name": "shiki_1_card_7", "url": "Untitled_0.png" }
     ],
-    "avatar": "https://cdn.vuetifyjs.com/images/lists/2.jpg"
+    "avatar": "avatar_0.png"
   },
   {
     "name": "Shiki_2",
     "cards": [
-      { "id": "01ccb58e", "name": "shiki_2_card_0", "url": "https://shiki_2_card_0.png" },
-      { "id": "14f56042", "name": "shiki_2_card_0", "url": "https://shiki_2_card_0.png" },
-      { "id": "9a254d1b", "name": "shiki_2_card_1", "url": "https://shiki_2_card_1.png" },
-      { "id": "69f4fdb2", "name": "shiki_2_card_1", "url": "https://shiki_2_card_1.png" },
-      { "id": "df6c5fed", "name": "shiki_2_card_2", "url": "https://shiki_2_card_2.png" },
-      { "id": "bb45fa3d", "name": "shiki_2_card_2", "url": "https://shiki_2_card_2.png" },
-      { "id": "b542a22d", "name": "shiki_2_card_3", "url": "https://shiki_2_card_3.png" },
-      { "id": "9c456857", "name": "shiki_2_card_3", "url": "https://shiki_2_card_3.png" },
-      { "id": "dff9a535", "name": "shiki_2_card_4", "url": "https://shiki_2_card_4.png" },
-      { "id": "aafef844", "name": "shiki_2_card_4", "url": "https://shiki_2_card_4.png" },
-      { "id": "32afefe6", "name": "shiki_2_card_5", "url": "https://shiki_2_card_5.png" },
-      { "id": "2883340a", "name": "shiki_2_card_5", "url": "https://shiki_2_card_5.png" },
-      { "id": "a3272322", "name": "shiki_2_card_6", "url": "https://shiki_2_card_6.png" },
-      { "id": "4cce0001", "name": "shiki_2_card_6", "url": "https://shiki_2_card_6.png" },
-      { "id": "5f36e966", "name": "shiki_2_card_7", "url": "https://shiki_2_card_7.png" },
-      { "id": "aceb124d", "name": "shiki_2_card_7", "url": "https://shiki_2_card_7.png" }
+      { "id": "01ccb58e", "name": "shiki_2_card_0", "url": "AD.png" },
+      { "id": "14f56042", "name": "shiki_2_card_0", "url": "AD.png" },
+      { "id": "9a254d1b", "name": "shiki_2_card_1", "url": "KD.png" },
+      { "id": "69f4fdb2", "name": "shiki_2_card_1", "url": "KD.png" },
+      { "id": "df6c5fed", "name": "shiki_2_card_2", "url": "2D.png" },
+      { "id": "bb45fa3d", "name": "shiki_2_card_2", "url": "2D.png" },
+      { "id": "b542a22d", "name": "shiki_2_card_3", "url": "3D.png" },
+      { "id": "9c456857", "name": "shiki_2_card_3", "url": "3D.png" },
+      { "id": "dff9a535", "name": "shiki_2_card_4", "url": "4D.png" },
+      { "id": "aafef844", "name": "shiki_2_card_4", "url": "4D.png" },
+      { "id": "32afefe6", "name": "shiki_2_card_5", "url": "5D.png" },
+      { "id": "2883340a", "name": "shiki_2_card_5", "url": "5D.png" },
+      { "id": "a3272322", "name": "shiki_2_card_6", "url": "6D.png" },
+      { "id": "4cce0001", "name": "shiki_2_card_6", "url": "6D.png" },
+      { "id": "5f36e966", "name": "shiki_2_card_7", "url": "7D.png" },
+      { "id": "aceb124d", "name": "shiki_2_card_7", "url": "7D.png" }
     ],
-    "avatar": "https://cdn.vuetifyjs.com/images/lists/3.jpg"
+    "avatar": "avatar_0.png"
   },
   {
     "header": "Group 2"
@@ -77,24 +77,24 @@
   {
     "name": "Shiki_3",
     "cards": [
-      { "id": "a2d14b50", "name": "shiki_3_card_0", "url": "https://shiki_3_card_0.png" },
-      { "id": "5e781f61", "name": "shiki_3_card_0", "url": "https://shiki_3_card_0.png" },
-      { "id": "3ac7b446", "name": "shiki_3_card_1", "url": "https://shiki_3_card_1.png" },
-      { "id": "ed75a6d1", "name": "shiki_3_card_1", "url": "https://shiki_3_card_1.png" },
-      { "id": "e3fa8e21", "name": "shiki_3_card_2", "url": "https://shiki_3_card_2.png" },
-      { "id": "5de5f2f5", "name": "shiki_3_card_2", "url": "https://shiki_3_card_2.png" },
-      { "id": "cfaff11f", "name": "shiki_3_card_3", "url": "https://shiki_3_card_3.png" },
-      { "id": "7dc06ad2", "name": "shiki_3_card_3", "url": "https://shiki_3_card_3.png" },
-      { "id": "f3eac1e9", "name": "shiki_3_card_4", "url": "https://shiki_3_card_4.png" },
-      { "id": "d6063473", "name": "shiki_3_card_4", "url": "https://shiki_3_card_4.png" },
-      { "id": "b982300e", "name": "shiki_3_card_5", "url": "https://shiki_3_card_5.png" },
-      { "id": "099e6321", "name": "shiki_3_card_5", "url": "https://shiki_3_card_5.png" },
-      { "id": "cac026ec", "name": "shiki_3_card_6", "url": "https://shiki_3_card_6.png" },
-      { "id": "28d709ad", "name": "shiki_3_card_6", "url": "https://shiki_3_card_6.png" },
-      { "id": "e37841b5", "name": "shiki_3_card_7", "url": "https://shiki_3_card_7.png" },
-      { "id": "8a7a1fe6", "name": "shiki_3_card_7", "url": "https://shiki_3_card_7.png" }
+      { "id": "a2d14b50", "name": "shiki_3_card_0", "url": "AC.png" },
+      { "id": "5e781f61", "name": "shiki_3_card_0", "url": "AC.png" },
+      { "id": "3ac7b446", "name": "shiki_3_card_1", "url": "KC.png" },
+      { "id": "ed75a6d1", "name": "shiki_3_card_1", "url": "KC.png" },
+      { "id": "e3fa8e21", "name": "shiki_3_card_2", "url": "2C.png" },
+      { "id": "5de5f2f5", "name": "shiki_3_card_2", "url": "2C.png" },
+      { "id": "cfaff11f", "name": "shiki_3_card_3", "url": "3C.png" },
+      { "id": "7dc06ad2", "name": "shiki_3_card_3", "url": "3C.png" },
+      { "id": "f3eac1e9", "name": "shiki_3_card_4", "url": "4C.png" },
+      { "id": "d6063473", "name": "shiki_3_card_4", "url": "4C.png" },
+      { "id": "b982300e", "name": "shiki_3_card_5", "url": "5C.png" },
+      { "id": "099e6321", "name": "shiki_3_card_5", "url": "5C.png" },
+      { "id": "cac026ec", "name": "shiki_3_card_6", "url": "6C.png" },
+      { "id": "28d709ad", "name": "shiki_3_card_6", "url": "6C.png" },
+      { "id": "e37841b5", "name": "shiki_3_card_7", "url": "7C.png" },
+      { "id": "8a7a1fe6", "name": "shiki_3_card_7", "url": "7C.png" }
     ],
-    "avatar": "https://cdn.vuetifyjs.com/images/lists/4.jpg"
+    "avatar": "avatar_0.png"
   },
   {
     "name": "Shiki_4",
@@ -116,6 +116,6 @@
       { "id": "c6607d02", "name": "shiki_4_card_7", "url": "https://shiki_4_card_7.png" },
       { "id": "32f4bcb3", "name": "shiki_4_card_7", "url": "https://shiki_4_card_7.png" }
     ],
-    "avatar": "https://cdn.vuetifyjs.com/images/lists/5.jpg"
+    "avatar": "avatar_0.png"
   }
 ]

src/views/DeckBuilder.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- <v-container fluid px-16 pb-10> -->
   <v-container>
     <v-row>
       <v-col cols="12">
@@ -34,7 +35,9 @@
               color="#070042"
             >
               <v-avatar size="90" left>
-                <v-img :src="data.item.avatar"></v-img>
+                <v-img
+                  :src="require(`@/assets/avatars/${data.item.avatar}`)"
+                ></v-img>
               </v-avatar>
               {{ data.item.name }}
             </v-chip>
@@ -42,7 +45,7 @@
           <template v-slot:item="data">
             <template>
               <v-list-item-avatar>
-                <img :src="data.item.avatar" />
+                <img :src="require(`@/assets/avatars/${data.item.avatar}`)" />
               </v-list-item-avatar>
               <v-list-item-content>
                 <v-list-item-title v-html="data.item.name"></v-list-item-title>
@@ -54,76 +57,79 @@
           </template>
         </v-select>
       </v-col>
-      selected_shikigami_names: {{ selected_shikigami_names }} <br />
-      selected_shikigami_data: {{ selected_shikigami_data }} <br />
+      <!-- selected_shikigami_names: {{ selected_shikigami_names }} <br />
+      selected_shikigami_data: {{ selected_shikigami_data }} <br /> -->
       selected_shikigami_decks: {{ selected_shikigami_decks }}
     </v-row>
     <v-row v-for="(_, index) in selected_shikigami_names" :key="index">
-      <v-card elevation="2" width="100%" class="py-4" flat tile color="#070042">
+      <v-card elevation="2" width="100%" class="pa-3" flat tile color="#070042">
         <v-row>
           <v-col cols="2">
             <div cols="12">
               <div cols="12" class="text-h5 text-center">
-                {{ `${selected_shikigami_data[index].name}` }}
+                <!-- {{ `${selected_shikigami_data[index].name}` }} -->
               </div>
               <div cols="12">
                 <v-img
-                  :src="`${selected_shikigami_data[index].avatar}`"
-                  aspect-ratio="1"
+                  :src="
+                    require(`@/assets/avatars/${selected_shikigami_data[index].avatar}`)
+                  "
                   width="100%"
                 ></v-img>
               </div>
-              <div cols="12">
-                {{ index }}
-                <v-select
-                  v-model="selected_shikigami_decks[index][index]"
-                  v-on:input="limit_decks"
-                  :items="selected_shikigami_data[index].cards"
-                  item-text="name"
-                  item-value="id"
-                  chips
-                  multiple
-                  hint="Choose 8 cards for your deck."
-                  persistent-hint
-                  return-object
-                >
-                  <template v-slot:selection="data">
-                    <v-chip
-                      v-bind="data.attrs"
-                      :input-value="data.selected"
-                      close
-                      label
-                      x-small
-                      @click="data.select"
-                      @click:close="remove_decks(index, data.index)"
-                      color="#04002E"
-                      >{{ data.item.name }}</v-chip
-                    ></template
-                  >
-                </v-select>
-              </div>
             </div>
           </v-col>
-          <v-col cols="10">
-            <div cols="12">
-              <!-- {{ selected_shikigami_decks[index][index] }} -->
-            </div>
-            <v-row cols="12" class="d-flex">
+          <v-col cols="10" class="d-flex flex-column"
+            ><v-row cols="12">
+              <!-- {{ index }} -->
+              <!-- {{ selected_shikigami_decks[index][index].length }} -->
+              <v-select
+                v-model="selected_shikigami_decks[index][index]"
+                v-on:input="limit_decks"
+                :items="selected_shikigami_data[index].cards"
+                item-text="name"
+                item-value="id"
+                chips
+                multiple
+                hint="Choose 8 cards for your deck."
+                persistent-hint
+                return-object
+                clearable
+              >
+                <template v-slot:selection="data">
+                  <v-chip
+                    v-bind="data.attrs"
+                    :input-value="data.selected"
+                    close
+                    label
+                    @click="data.select"
+                    @click:close="remove_decks(index, data.index)"
+                    color="#04002E"
+                    >{{ data.item.name }}</v-chip
+                  ></template
+                >
+              </v-select>
+            </v-row>
+            <!-- <div cols="12">
+              {{ selected_shikigami_decks[index][index] }}
+            </div> -->
+            <v-row cols="12">
               <v-card
                 v-for="i in selected_shikigami_decks[index][index]"
                 :key="i.id"
-                width="12.4%"
+                width="12.3%"
+                color="#070042"
               >
-                <div class="text-center">
+                <!-- <div class="text-center">
                   {{ i.name }}
-                </div>
-                <v-img
-                  :src="require(`@/assets/deck_of_cards/${i.url}`)"
-                  class="deck-card"
-                ></v-img
-              ></v-card>
-            </v-row>
-          </v-col>
+                </div> -->
+                <div class="">
+                  <v-img
+                    :src="require(`@/assets/deck_of_cards/${i.url}`)"
+                    class="deck-card"
+                  ></v-img></div
+              ></v-card> </v-row
+          ></v-col>
         </v-row>
       </v-card>
     </v-row>
@@ -163,7 +169,28 @@ export default {
     },
     remove_shikigami(item) {
       const index = this.selected_shikigami_names.indexOf(item.name);
-      if (index >= 0) this.selected_shikigami_names.splice(index, 1);
+      if (index >= 0) {
+        this.selected_shikigami_names.splice(index, 1);
+        this.selected_shikigami_decks[index][index].splice(0);
+        // shuffle shikigami down by 1
+        if (index <= 3) {
+          for (let j = index; j <= 2; j++) {
+            for (
+              let i = 0;
+              i < this.selected_shikigami_decks[j + 1][j + 1].length;
+              i++
+            ) {
+              // this if is optional?
+              if (index < 3) {
+                this.selected_shikigami_decks[j][j].push(
+                  this.selected_shikigami_decks[j + 1][j + 1][i]
+                );
+              }
+            }
+            this.selected_shikigami_decks[j + 1][j + 1] = [];
+          }
+        }
+      }
     },
     remove_decks(shiki_index, card_index) {
       ``;

src/views/Home.vue

@@ -3,17 +3,17 @@
     <v-row class="text-center">
       <v-col cols="12">
         <v-img
-          :src="require('../assets/logo.svg')"
+          :src="require('../assets/front_page_shikigami.png')"
           class="my-3"
           contain
-          height="200"
+          height="500"
         />
       </v-col>
 
       <v-col class="mb-4">
         <h1 class="display-2 font-weight-bold mb-3">Onymoji Deck Builder</h1>
 
-        <p class="subheading font-weight-regular">Share and build decks.</p>
+        <p class="subheading font-weight-regular">Build and share decks.</p>
         <v-btn elevation="1" x-large color="#EA6F1A">Get started</v-btn>
       </v-col>
     </v-row>

yarn.lock

@@ -8743,10 +8743,10 @@ vuetify-loader@^1.3.0:
     file-loader "^6.2.0"
     loader-utils "^2.0.0"
 
-vuetify@^2.2.11:
-  version "2.4.6"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.4.6.tgz#127b37bd36c7a63f61615e0cd6f97e8b203e7a07"
-  integrity sha512-oqAWKAin07ip/QuT/p4bL1LegE3MYPbfojrOcj80RATZDSnJyco2PZD8QuIzd0RhYfdAuSTkY8elvHsLu90RuQ==
+vuetify@^2.4:
+  version "2.4.7"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.4.7.tgz#341f16950475466a7fa43f4cb507cc8c3ef170b9"
+  integrity sha512-4RvdZ+BO23fPq8JCEdo9ENjE1AoMqDe1bm+4M57wNTfvW4djScxQnVYeUSE/7PHuzdSW/nROR5oyLQnGDB+DIA==
 
 vuex@^3.4.0:
   version "3.6.2"