adding title and description

src/views/DeckBuilder.vue

@@ -10,6 +10,19 @@
         </div>
       </v-col>
     </v-row>
+    <v-row>
+      <v-textarea
+        v-model="deck_title"
+        label="Deck Title"
+        class="user-deck-title"
+        rows="1"
+        row-height="80"
+      ></v-textarea>
+    </v-row>
+    <v-row>
+      <v-textarea v-model="deck_description" label="Deck Description">
+      </v-textarea>
+    </v-row>
     <v-row>
       <v-col cols="12">
         <v-select
@@ -60,10 +73,7 @@
       <!-- selected_shikigami_names: {{ selected_shikigami_names }} <br /> -->
       <!-- selected_shikigami_data: {{ selected_shikigami_data }} <br /> -->
       <!-- selected_shikigami_decks: {{ selected_shikigami_decks }} -->
-      <v-textarea :value="construct_url()" color="teal"> </v-textarea>
-    </v-row>
-    <v-row>
-      <v-textarea :value="title" class="user-title"></v-textarea>
+      <!-- deck_title: {{ deck_title }} -->
     </v-row>
     <v-row v-for="(_, index) in selected_shikigami_names" :key="index">
       <v-card elevation="2" width="100%" class="pa-3" flat tile color="#070042">
@@ -137,6 +147,10 @@
         </v-row>
       </v-card>
     </v-row>
+    <v-row>
+      <!-- <v-textarea :value="construct_url()" color="teal"> </v-textarea> -->
+      <v-textarea :value="construct_url()" color="teal"> </v-textarea>
+    </v-row>
   </v-container>
 </template>
 
@@ -148,7 +162,8 @@ export default {
     selected_shikigami_data: [],
     selected_shikigami_decks: [{ 0: [] }, { 1: [] }, { 2: [] }, { 3: [] }],
     shikigami: shikigami,
-    title: "some title",
+    deck_title: "",
+    deck_description: "",
   }),
   methods: {
     get_chosen_shikigami_data: function (shikigami_name) {
@@ -206,14 +221,18 @@ export default {
       console.log(this.selected_shikigami_decks[shiki_index].shiki_index);
       console.log(shiki_index, card_index);
     },
-    construct_url() {
+    construct_url: function () {
       const saved_selected_shikigami_names = btoa(
         JSON.stringify(this.selected_shikigami_names)
       );
       const saved_selected_shikigami_decks = btoa(
         JSON.stringify(this.selected_shikigami_decks)
       );
-      const url = `?selected_shikigami_names=${saved_selected_shikigami_names}&selected_shikigami_decks=${saved_selected_shikigami_decks}`;
+      const saved_deck_title = btoa(JSON.stringify(this.deck_title));
+      const saved_deck_description = btoa(
+        JSON.stringify(this.deck_description)
+      );
+      const url = `?deck_title=${saved_deck_title}&deck_description=${saved_deck_description}&selected_shikigami_names=${saved_selected_shikigami_names}&selected_shikigami_decks=${saved_selected_shikigami_decks}`;
       return url;
     },
   },
@@ -242,7 +261,12 @@ export default {
       );
 
       if (typeof saved_selected_shikigami_decks != "object") {
-        this.selected_shikigami_decks = [];
+        this.selected_shikigami_decks = [
+          { 0: [] },
+          { 1: [] },
+          { 2: [] },
+          { 3: [] },
+        ];
       } else {
         this.selected_shikigami_decks = [];
         for (let i = 0; i < saved_selected_shikigami_decks.length; i++) {
@@ -250,9 +274,43 @@ export default {
         }
       }
     } else {
-      this.selected_shikigami_decks = [];
+      this.selected_shikigami_decks = [
+        { 0: [] },
+        { 1: [] },
+        { 2: [] },
+        { 3: [] },
+      ];
+    }
+
+    if (this.$route.query.deck_title) {
+      const saved_deck_title = JSON.parse(atob(this.$route.query.deck_title));
+
+      if (typeof saved_deck_title != "string") {
+        this.deck_title = "";
+      } else {
+        this.deck_title = "";
+        for (let i = 0; i < saved_deck_title.length; i++) {
+          this.deck_title = saved_deck_title;
+        }
+      }
+    } else {
+      this.deck_title = "";
+    }
+
+    if (this.$route.query.deck_description) {
+      const saved_deck_description = JSON.parse(atob(this.$route.query.deck_description));
+
+      if (typeof saved_deck_description != "string") {
+        this.deck_description = "";
+      } else {
+        this.deck_description = "";
+        for (let i = 0; i < saved_deck_description.length; i++) {
+          this.deck_description = saved_deck_description;
+        }
+      }
+    } else {
+      this.deck_description = "";
     }
-    console.log(JSON.stringify(this.selected_shikigami_decks));
   },
   watch: {
     selected_shikigami_names: function () {
@@ -291,13 +349,21 @@ export default {
   }
 }
 
-.user-title {
+.v-textarea textarea {
+  padding: 50px 0px 0px 0px !important;
+}
+
+.user-deck-title {
   font-size: 50px !important;
   // margin-top: 50px !important;
   // margin-bottom: -50px !important;
 }
+</style>
 
-::before .v-text-field__slot {
-  padding: 50px !important;
+<style lang="scss">
+.user-deck-title textarea {
+  padding-top: 10px !important;
+  padding-bottom: 15px !important;
+  text-align: center;
 }
 </style>