Merge branch 'query-params' into develop

.gitignore

@@ -25,6 +25,7 @@ pnpm-debug.log*
 # Custom
 src/assets/deck_of_cards
 src/assets/avatars
+src/assets/navbar
 
 # terraform
 *.terraform

commands.md

@@ -7,3 +7,9 @@
 - Sort lines by natural
 - Add `"id": ""`
 - Generate GUID and remove the tails
+
+## Deploy to S3
+
+<https://github.com/bep/s3deploy>
+
+`s3deploy -source=./dist -region=eu-west-1 -bucket=prod-onmyojideckbuilder-origin -distribution-id=E8811LTEVQX71`

src/App.vue

@@ -8,7 +8,7 @@
       app
       :expand-on-hover="true"
       overflow
-      color="#070042"
+      color="#272935"
     >
       <v-list>
         <v-list-item
@@ -18,17 +18,20 @@
           :to="item.link"
         >
           <v-list-item-icon>
-            <v-icon >{{ item.icon }}</v-icon>
+            <!-- <v-icon>{{ item.icon }}</v-icon> -->
+            <v-img :src="item.icon" width="50"></v-img>
           </v-list-item-icon>
 
           <v-list-item-content>
-            <v-list-item-title>{{ item.title }}</v-list-item-title>
+            <v-list-item-title class="text-button">{{
+              item.title
+            }}</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </v-list>
     </v-navigation-drawer>
 
-    <v-app-bar :clipped-left="false" app color="#070042" >
+    <v-app-bar :clipped-left="false" app color="#272935">
       <v-app-bar-nav-icon
         @click.stop="primaryDrawer.model = !primaryDrawer.model"
       ></v-app-bar-nav-icon>
@@ -39,7 +42,7 @@
       <router-view></router-view>
     </v-main>
 
-    <v-footer :inset="false" color="#04002E" app>
+    <v-footer :inset="false" color="#272935" app>
       <!-- <span class="px-4"
         >&copy; {{ new Date().getFullYear() }} Daniel Tomlinson</span
       >
@@ -53,12 +56,13 @@
 
 <script>
 import {
-  mdiViewDashboard,
-  mdiCalculator,
-  mdiHelpBox,
   mdiGithub,
 } from "@mdi/js";
 
+const home_icon = require(`@/assets/navbar/0000034a.png`);
+const deck_icon = require(`@/assets/navbar/00000047.png`);
+const help_icon = require(`@/assets/navbar/00000121.png`);
+
 export default {
   name: "App",
 
@@ -66,9 +70,9 @@ export default {
     primaryDrawer: {
       model: true,
       items: [
-        { title: "Home", icon: mdiViewDashboard, link: "/" },
+        { title: "Home", icon: home_icon, link: "/" },
-        { title: "Deck Builder", icon: mdiCalculator, link: "deck-builder" },
+        { title: "Deck Builder", icon: deck_icon, link: "deck-builder" },
-        { title: "Help", icon: mdiHelpBox, link: "help" },
+        { title: "Help", icon: help_icon, link: "help" },
       ],
     },
     icons: {

src/router/index.js

@@ -30,6 +30,7 @@ const routes = [
 ];
 
 const router = new VueRouter({
+  mode: 'history',
   routes,
 });
 

src/styles/variables.scss

@@ -1,3 +1,3 @@
 $material-dark: (
-  'background': #04002E
+  'background': #16192B
 );

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_names: {{ selected_shikigami_names }} <br /> -->
-      selected_shikigami_data: {{ selected_shikigami_data }} <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>

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.</p>
-        <v-btn elevation="1" x-large color="#EA6F1A">Get started</v-btn>
+        <v-btn elevation="1" x-large color="#C0B094">Get started</v-btn>
       </v-col>
     </v-row>
     <!-- <v-row class="text-center">