onmyoji-deck-builder/src/views/DeckBuilder.vue

<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="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">
              <v-col
                v-for="i in selected_shikigami_decks[index][index]"
                :key="i.id"
                cols="1"
              >
                {{ i.name }}
                <v-img
                  :src="require(`@/assets/deck_of_cards/${i.url}`)"
                ></v-img>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-card>
    </v-row>
  </v-container>
</template>

<script>
import shikigami from "../data/shikigami_cards.json";
export default {
  data: () => ({
    selected_shikigami_names: [],
    selected_shikigami_data: [],
    selected_shikigami_decks: [{ 0: [] }, { 1: [] }, { 2: [] }, { 3: [] }],
    shikigami: shikigami,
    colors: [
      { id: 1, title: "red" },
      { id: 2, title: "blue" },
      { id: 3, title: "red" },
    ],
  }),
  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) {
      console.log("looping");
      const doubled_cards = this.doubled_cards;
      console.log(doubled_cards[index].index);
      console.log(this.doubled_cards[index][index]);
      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[index][index].push(
          { id: id_0, card: el },
          { id: id_1, card: el }
        );
      });
      this.doubled_cards = doubled_cards;
      return this.doubled_cards;
    },
  },
  computed: {},
  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>