First commit

components/BoxSummon.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="flex flex-col" style="min-width: 110px; max-width: 110px;">
+    <!-- Title -->
+    <a
+      class="text-xs text-primary hover:text-primary rounded-t h-5 px-1 text-center truncate"
+      target="_blank"
+      :href="'https://gbf.wiki/' + object.nameen"
+      :style="getTitleColor"
+      :title="getName"
+      v-if="! objectIsEmpty"
+    >{{ getName }}</a>
+    <span class="text-xs h-5" v-else> </span>
+
+    <!-- Portrait -->
+    <portrait
+      :object="object"
+      @drag-portrait="$emit('drag-portrait', $event)"
+      @drop-portrait="drop"
+      @click-portrait="$emit('click-portrait')"
+      @stars-changed="starsChanged"
+    ></portrait>
+
+    <!-- Stats -->
+    <div class="flex flex-row flex-nowrap justify-around text-xs" v-if="! objectIsEmpty && showLevel">
+      <stat-input shortName="lvl" longName="Summon level" :prop.sync="object.level" :length="3"></stat-input>
+      <stat-input shortName="+" longName="Plus bonuses" :prop.sync="object.pluses" :length="3"></stat-input>
+    </div>
+  </div>
+</template>
+
+<script>
+import { objectIsEmpty, getName } from "@/js/mixins"
+import UtilsParty from '@/js/utils-party'
+
+import Portrait from '@/components/BoxSummonPortrait.vue'
+import StatInput from '@/components/common/StatInput.vue'
+
+export default {
+  components: {
+    StatInput,
+    Portrait
+  },
+  mixins: [
+    objectIsEmpty,
+    getName
+  ],
+  props: {
+    object: {
+      type: Object,
+      required: true
+    },
+    showLevel: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    drop(ev) {
+      const data = ev.dataTransfer.getData("summon");
+      if (data.length > 0) {
+        this.$emit('swap', JSON.parse(data));
+      }
+    },
+    starsChanged(count) {
+      this.$set(this.object, "stars", count);
+
+      if ( ! this.showLevel || this.object.level > this.getLevel) {
+        this.$set(this.object, "level", this.getLevel);
+      }
+
+      UtilsParty.setSummonCurrentData(this.object);
+    },
+  },
+  computed: {
+    getTitleColor() {
+      switch (this.object.stars) {
+        case 3:
+          return 'color: #ffa826;';
+        case 4:
+          return 'color: #e3b7ff;';
+        case 5:
+          return 'color: #a1e3ff;';
+        default:
+          return '';
+      }
+    },
+    getLevel() {
+      return UtilsParty.getSummonLevel(this.object);
+    }
+  },
+}
+</script>