updating theme for placeholder

2021-03-18 20:05:39 +00:00
parent 03f184b2d1
commit 2647b029ac
9 changed files with 164 additions and 23 deletions
--- a/src/views/DeckBuilder.vue
+++ b/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
@@ -32,7 +45,7 @@
              x-large
              @click="data.select"
              @click:close="remove_shikigami(data.item)"
-              color="#070042"
+              color="#C0B094"
            >
              <v-avatar size="90" left>
                <v-img
@@ -57,12 +70,13 @@
          </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 }} -->
+      <!-- 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">
+      <v-card elevation="2" width="100%" class="pa-3" flat tile color="#171D29">
        <v-row>
          <v-col cols="2">
            <div cols="12">
@@ -104,7 +118,7 @@
                    label
                    @click="data.select"
                    @click:close="remove_decks(index, data.index)"
-                    color="#04002E"
+                    color="#C0B094"
                    >{{ data.item.name }}</v-chip
                  ></template
                >
@@ -118,7 +132,7 @@
                v-for="i in selected_shikigami_decks[index][index]"
                :key="i.id"
                width="12.3%"
-                color="#070042"
+                color="#171D29"
              >
                <!-- <div class="text-center">
                  {{ i.name }}
@@ -133,6 +147,9 @@
        </v-row>
      </v-card>
    </v-row>
+    <v-row>
+      <!-- <v-textarea :value="construct_url()" color="teal"> </v-textarea> -->
+    </v-row>
  </v-container>
 </template>

@@ -144,6 +161,8 @@ export default {
    selected_shikigami_data: [],
    selected_shikigami_decks: [{ 0: [] }, { 1: [] }, { 2: [] }, { 3: [] }],
    shikigami: shikigami,
+    deck_title: "",
+    deck_description: "",
  }),
  methods: {
    get_chosen_shikigami_data: function (shikigami_name) {
@@ -201,8 +220,97 @@ export default {
      console.log(this.selected_shikigami_decks[shiki_index].shiki_index);
      console.log(shiki_index, card_index);
    },
+    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 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;
+    },
  },
  computed: {},
+  mounted() {
+    if (this.$route.query.selected_shikigami_names) {
+      const saved_selected_shikigami_names = JSON.parse(
+        atob(this.$route.query.selected_shikigami_names)
+      );
+
+      if (typeof saved_selected_shikigami_names != "object") {
+        this.selected_shikigami_names = [];
+      } else {
+        this.selected_shikigami_names = [];
+        for (let i = 0; i < saved_selected_shikigami_names.length; i++) {
+          this.selected_shikigami_names.push(saved_selected_shikigami_names[i]);
+        }
+      }
+    } else {
+      this.selected_shikigami_names = [];
+    }
+
+    if (this.$route.query.selected_shikigami_decks) {
+      const saved_selected_shikigami_decks = JSON.parse(
+        atob(this.$route.query.selected_shikigami_decks)
+      );
+
+      if (typeof saved_selected_shikigami_decks != "object") {
+        this.selected_shikigami_decks = [
+          { 0: [] },
+          { 1: [] },
+          { 2: [] },
+          { 3: [] },
+        ];
+      } else {
+        this.selected_shikigami_decks = [];
+        for (let i = 0; i < saved_selected_shikigami_decks.length; i++) {
+          this.selected_shikigami_decks.push(saved_selected_shikigami_decks[i]);
+        }
+      }
+    } else {
+      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 = "";
+    }
+  },
  watch: {
    selected_shikigami_names: function () {
      this.selected_shikigami_data = [];
@@ -230,13 +338,31 @@ export default {

 .deck-card:hover {
  position: relative;
-  animation: scaleMe 500ms ease-in-out 0s forwards;
+  animation: card-zoom 500ms ease-in-out 0s forwards;
  z-index: 100;
 }

-@keyframes scaleMe {
+@keyframes card-zoom {
  100% {
    transform: scale(1.25);
  }
 }
+
+.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>
+
+<style lang="scss">
+.user-deck-title textarea {
+  padding-top: 10px !important;
+  padding-bottom: 15px !important;
+  text-align: center;
+}
 </style>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -3,7 +3,7 @@
    <v-row class="text-center">
      <v-col cols="12">
        <v-img
-          :src="require('../assets/front_page_shikigami.png')"
+          :src="require('../assets/000000c6.png')"
          class="my-3"
          contain
          height="500"
@@ -11,10 +11,10 @@
      </v-col>

      <v-col class="mb-4">
-        <h1 class="display-2 font-weight-bold mb-3">Onymoji Deck Builder</h1>
+        <h1 class="display-2 font-weight-bold mb-3">Onmyoji Deck Builder</h1>

-        <p class="subheading font-weight-regular">Build and share decks for Onmyoji TCG.</p>
-        <v-btn elevation="1" x-large color="#EA6F1A">Coming Soon</v-btn>
+        <p class="subheading font-weight-regular">Build and share decks.</p>
+        <v-btn elevation="1" x-large color="#C0B094">Get started</v-btn>
      </v-col>
    </v-row>
    <!-- <v-row class="text-center">