adding initial data

src/App.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-app>
+    <v-navigation-drawer
+      v-model="primaryDrawer.model"
+      :clipped="false"
+      :floating="false"
+      :mini-variant="false"
+      app
+      :expand-on-hover="true"
+      overflow
+      color="#070042"
+    >
+      <v-list>
+        <v-list-item
+          v-for="item in primaryDrawer.items"
+          :key="item.title"
+          link
+          :to="item.link"
+        >
+          <v-list-item-icon>
+            <v-icon >{{ item.icon }}</v-icon>
+          </v-list-item-icon>
+
+          <v-list-item-content >
+            <v-list-item-title>{{ 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-nav-icon
+        @click.stop="primaryDrawer.model = !primaryDrawer.model"
+      ></v-app-bar-nav-icon>
+      <v-toolbar-title >Onmyoji Deck Builder</v-toolbar-title>
+    </v-app-bar>
+
+    <v-main>
+      <router-view></router-view>
+    </v-main>
+
+    <v-footer :inset="false" color="#04002E" app>
+      <!-- <span class="px-4"
+        >&copy; {{ new Date().getFullYear() }} Daniel Tomlinson</span
+      >
+      <v-spacer /> -->
+      <span class="px-2">
+        <v-icon>{{ icons.mdiGithub }}</v-icon> View on GitHub
+      </span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+import {
+  mdiViewDashboard,
+  mdiCalculator,
+  mdiHelpBox,
+  mdiGithub,
+} from "@mdi/js";
+
+export default {
+  name: "App",
+
+  data: () => ({
+    primaryDrawer: {
+      model: true,
+      items: [
+        { title: "Home", icon: mdiViewDashboard, link: "/" },
+        { title: "Deck Builder", icon: mdiCalculator, link: "deck-builder" },
+        { title: "Help", icon: mdiHelpBox, link: "help" },
+      ],
+    },
+    icons: {
+      mdiGithub: mdiGithub,
+    },
+  }),
+};
+</script>

src/assets/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

src/data/chains_headers.json

@@ -0,0 +1,12 @@
+[
+  { "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

@@ -0,0 +1,18 @@
+[
+  { "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/main.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import vuetify from './plugins/vuetify';
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  vuetify,
+  render: h => h(App)
+}).$mount('#app')

src/plugins/vuetify.js

@@ -0,0 +1,13 @@
+import Vue from "vue";
+import Vuetify from "vuetify/lib";
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+  theme: {
+    dark: true,
+  },
+  icons: {
+    iconfont: "mdiSvg",
+  },
+});

src/router/index.js

@@ -0,0 +1,36 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: () => import(/* webpackChunkName: "help" */ "../views/Home.vue"),
+  },
+  {
+    path: "/help",
+    name: "Help",
+    component: () => import(/* webpackChunkName: "help" */ "../views/Help.vue"),
+  },
+  {
+    path: "/deck-builder",
+    name: "DeckBuilder",
+    component: () => import(/* webpackChunkName: "deckbuilder" */ "../views/DeckBuilder.vue"),
+  },
+  // {
+  //   path: '/about',
+  //   name: 'About',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  // }
+];
+
+const router = new VueRouter({
+  routes,
+});
+
+export default router;

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/styles/variables.scss

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

src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

src/views/DeckBuilder.vue

@@ -0,0 +1,303 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <div class="text-center">
+          <h1>Deck Builder</h1>
+          <br />
+          <!-- {{ temp }} -->
+        </div>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <v-select
+          v-model="selected_shikigami_names"
+          v-on:input="limit_shikigami"
+          :items="shikigami"
+          label="Select Shikigami"
+          chips
+          multiple
+          hint="Choose 4 Shikgigami for your deck."
+          persistent-hint
+          item-text="name"
+          item-value="name"
+        >
+          <template v-slot:selection="data">
+            <v-chip
+              v-bind="data.attrs"
+              :input-value="data.selected"
+              close
+              x-large
+              @click="data.select"
+              @click:close="remove_shikigami(data.item)"
+              color="#070042"
+            >
+              <v-avatar size="90" left>
+                <v-img :src="data.item.avatar"></v-img>
+              </v-avatar>
+              {{ data.item.name }}
+            </v-chip>
+          </template>
+          <template v-slot:item="data">
+            <template>
+              <v-list-item-avatar>
+                <img :src="data.item.avatar" />
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title v-html="data.item.name"></v-list-item-title>
+                <v-list-item-subtitle
+                  v-html="data.item.group"
+                ></v-list-item-subtitle>
+              </v-list-item-content>
+            </template>
+          </template>
+        </v-select>
+      </v-col>
+      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-row>
+          <v-col cols="2">
+            <div cols="12">
+              <div cols="12" class="text-h5 text-center">
+                {{ `${selected_shikigami_data[index].name}` }}
+              </div>
+              <div cols="12">
+                <v-img
+                  :src="`${selected_shikigami_data[index].avatar}`"
+                  aspect-ratio="1"
+                  width="100%"
+                ></v-img>
+              </div>
+              <div cols="12">
+                {{ index }}
+                <v-select
+                  v-model="selected_shikigami_decks[index][index]"
+                  v-on:input="limit_decks"
+                  :items="double_cards(index)"
+                  item-text="card.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.card.name }}</v-chip
+                    ></template
+                  >
+                </v-select>
+              </div>
+            </div>
+          </v-col>
+          <v-col cols="10">{{ selected_shikigami_decks[index][index] }}</v-col>
+        </v-row>
+      </v-card>
+    </v-row>
+    <v-container grid-list-xl>
+      <v-select
+        v-model="color"
+        :items="colors"
+        item-text="title"
+        item-value="id"
+        multiple
+        return-object
+      >
+      </v-select>
+      colors: {{ color }}<br />
+      computed: {{ getColors }}
+    </v-container>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    selected_shikigami_names: [],
+    selected_shikigami_data: [],
+    selected_shikigami_decks: [{ 0: [] }, { 1: [] }, { 2: [] }, { 3: [] }],
+    shikigami: [
+      {
+        header: "Group 1",
+      },
+      {
+        name: "Shiki_0",
+        cards: [
+          { name: "shiki_0_card_0", url: "https://shiki_0_card_0.png" },
+          { name: "shiki_0_card_1", url: "https://shiki_0_card_1.png" },
+          { name: "shiki_0_card_2", url: "https://shiki_0_card_2.png" },
+          { name: "shiki_0_card_3", url: "https://shiki_0_card_3.png" },
+          { name: "shiki_0_card_4", url: "https://shiki_0_card_4.png" },
+          { name: "shiki_0_card_5", url: "https://shiki_0_card_5.png" },
+          { name: "shiki_0_card_6", url: "https://shiki_0_card_6.png" },
+          { name: "shiki_0_card_7", url: "https://shiki_0_card_7.png" },
+        ],
+        avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
+      },
+      {
+        name: "Shiki_1",
+        cards: [
+          { name: "shiki_1_card_0", url: "https://shiki_1_card_0.png" },
+          { name: "shiki_1_card_1", url: "https://shiki_1_card_1.png" },
+          { name: "shiki_1_card_2", url: "https://shiki_1_card_2.png" },
+          { name: "shiki_1_card_3", url: "https://shiki_1_card_3.png" },
+          { name: "shiki_1_card_4", url: "https://shiki_1_card_4.png" },
+          { name: "shiki_1_card_5", url: "https://shiki_1_card_5.png" },
+          { name: "shiki_1_card_6", url: "https://shiki_1_card_6.png" },
+          { name: "shiki_1_card_7", url: "https://shiki_1_card_7.png" },
+        ],
+        avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
+      },
+      {
+        name: "Shiki_2",
+        cards: [
+          { name: "shiki_2_card_0", url: "https://shiki_2_card_0.png" },
+          { name: "shiki_2_card_1", url: "https://shiki_2_card_1.png" },
+          { name: "shiki_2_card_2", url: "https://shiki_2_card_2.png" },
+          { name: "shiki_2_card_3", url: "https://shiki_2_card_3.png" },
+          { name: "shiki_2_card_4", url: "https://shiki_2_card_4.png" },
+          { name: "shiki_2_card_5", url: "https://shiki_2_card_5.png" },
+          { name: "shiki_2_card_6", url: "https://shiki_2_card_6.png" },
+          { name: "shiki_2_card_7", url: "https://shiki_2_card_7.png" },
+        ],
+        avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
+      },
+      {
+        header: "Group 2",
+      },
+      {
+        divider: true,
+      },
+      {
+        name: "Shiki_3",
+        cards: [
+          { name: "shiki_3_card_0", url: "https://shiki_3_card_0.png" },
+          { name: "shiki_3_card_1", url: "https://shiki_3_card_1.png" },
+          { name: "shiki_3_card_2", url: "https://shiki_3_card_2.png" },
+          { name: "shiki_3_card_3", url: "https://shiki_3_card_3.png" },
+          { name: "shiki_3_card_4", url: "https://shiki_3_card_4.png" },
+          { name: "shiki_3_card_5", url: "https://shiki_3_card_5.png" },
+          { name: "shiki_3_card_6", url: "https://shiki_3_card_6.png" },
+          { name: "shiki_3_card_7", url: "https://shiki_3_card_7.png" },
+        ],
+        avatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
+      },
+      {
+        name: "Shiki_4",
+        cards: [
+          { name: "shiki_4_card_0", url: "https://shiki_4_card_0.png" },
+          { name: "shiki_4_card_1", url: "https://shiki_4_card_1.png" },
+          { name: "shiki_4_card_2", url: "https://shiki_4_card_2.png" },
+          { name: "shiki_4_card_3", url: "https://shiki_4_card_3.png" },
+          { name: "shiki_4_card_4", url: "https://shiki_4_card_4.png" },
+          { name: "shiki_4_card_5", url: "https://shiki_4_card_5.png" },
+          { name: "shiki_4_card_6", url: "https://shiki_4_card_6.png" },
+          { name: "shiki_4_card_7", url: "https://shiki_4_card_7.png" },
+        ],
+        avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
+      },
+    ],
+    colors: [
+      { id: 1, title: "red" },
+      { id: 2, title: "blue" },
+      { id: 3, title: "red" },
+    ],
+    color: [],
+  }),
+  methods: {
+    get_chosen_shikigami_data: function (shikigami_name) {
+      for (let i = 0; i < this.shikigami.length; i++) {
+        try {
+          if (this.shikigami[i].name == shikigami_name) {
+            return this.shikigami[i];
+          }
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    },
+    limit_shikigami: function (e) {
+      if (e.length == 5) {
+        e.pop();
+      }
+    },
+    limit_decks: function (e) {
+      if (e.length == 9) {
+        e.pop();
+      }
+    },
+    remove_shikigami(item) {
+      const index = this.selected_shikigami_names.indexOf(item.name);
+      if (index >= 0) this.selected_shikigami_names.splice(index, 1);
+    },
+    remove_decks(shiki_index, card_index) {
+      ``;
+      this.selected_shikigami_decks[shiki_index][shiki_index].splice(
+        card_index,
+        1
+      );
+      console.log(this.selected_shikigami_decks[shiki_index].shiki_index);
+      console.log(shiki_index, card_index);
+    },
+    double_cards(index) {
+      const doubled_cards = [];
+      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.push({ id: id_0, card: el }, { id: id_1, card: el });
+      });
+      console.log(doubled_cards);
+      return doubled_cards;
+
+      // return this.selected_shikigami_data[index].cards.concat.apply(
+      //   [],
+      //   this.selected_shikigami_data[index].cards.map(function (el) {
+      //     return [el, el];
+      //   })
+      // );
+    },
+  },
+  computed: {
+    getColors() {
+      return this.color.map((c) => c.title);
+    },
+  },
+  watch: {
+    selected_shikigami_names: function () {
+      this.selected_shikigami_data = [];
+      for (let i = 0; i < this.selected_shikigami_names.length; i++) {
+        for (let j = 0; j < this.shikigami.length; j++) {
+          try {
+            if (this.shikigami[j].name == this.selected_shikigami_names[i]) {
+              this.selected_shikigami_data.push(this.shikigami[j]);
+            }
+          } catch (err) {
+            /* nothing */
+          }
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.v-chip .v-avatar {
+  height: 60px !important;
+  width: 60px !important;
+}
+</style>

src/views/Help.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <div class="text-center white--text">
+          <h1>Help Page</h1>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="sass" scoped></style>

src/views/Home.vue

@@ -0,0 +1,86 @@
+<template>
+  <v-container>
+    <v-row class="text-center">
+      <v-col cols="12">
+        <v-img
+          :src="require('../assets/logo.svg')"
+          class="my-3"
+          contain
+          height="200"
+        />
+      </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>
+        <v-btn elevation="1" x-large color="#EA6F1A">Get started</v-btn>
+      </v-col>
+    </v-row>
+    <!-- <v-row class="text-center">
+      <v-col cols="12">
+        What next?
+      </v-col>
+    </v-row> -->
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "HelloWorld",
+
+  data: () => ({
+    ecosystem: [
+      {
+        text: "vuetify-loader",
+        href: "https://github.com/vuetifyjs/vuetify-loader",
+      },
+      {
+        text: "github",
+        href: "https://github.com/vuetifyjs/vuetify",
+      },
+      {
+        text: "awesome-vuetify",
+        href: "https://github.com/vuetifyjs/awesome-vuetify",
+      },
+    ],
+    importantLinks: [
+      {
+        text: "Documentation",
+        href: "https://vuetifyjs.com",
+      },
+      {
+        text: "Chat",
+        href: "https://community.vuetifyjs.com",
+      },
+      {
+        text: "Made with Vuetify",
+        href: "https://madewithvuejs.com/vuetify",
+      },
+      {
+        text: "Twitter",
+        href: "https://twitter.com/vuetifyjs",
+      },
+      {
+        text: "Articles",
+        href: "https://medium.com/vuetify",
+      },
+    ],
+    whatsNext: [
+      {
+        text: "Explore components",
+        href: "https://vuetifyjs.com/components/api-explorer",
+      },
+      {
+        text: "Select a layout",
+        href: "https://vuetifyjs.com/getting-started/pre-made-layouts",
+      },
+      {
+        text: "Frequently Asked Questions",
+        href:
+          "https://vuetifyjs.com/getting-started/frequently-asked-questions",
+      },
+    ],
+  }),
+};
+</script>