First commit

components/StarsLine.vue

@@ -0,0 +1,133 @@
+<template>
+  <div v-if="base !== undefined" class="flex flex-col flex-nowrap" :title="title">
+    <div class="flex flex-row flex-nowrap">
+      <img
+        v-for="i in getYellowStarsCount"
+        :key="'y' + i"
+        :class="readOnly ? '' : 'cursor-pointer'"
+        :src="getImage('y', i)"
+        :style="'width: ' + 100/max + '%;'"
+        @click="click(i)"
+      >
+      <img
+        v-for="i in getBlueStarsCount"
+        :key="'b' + i"
+        :class="readOnly ? '' : 'cursor-pointer'"
+        :src="getImage('b', i+base)"
+        :style="'width: ' + 100/max + '%;'"
+        @click="click(i+base)"
+      >
+      <img
+        v-for="i in getInvisibleStarsCount"
+        :key="'i' + i"
+        class="hidden"
+        src="/img/star_b1.png"
+        :style="'width: ' + 100/max + '%;'"
+      >
+    </div>
+    <div v-if="transcendance && extra > 5" class="flex flex-row flex-nowrap">
+      <img
+        v-for="i in 5"
+        :key="'v' + i"
+        :class="getTranscendanceClass(5+i)"
+        :src="getTranscendanceImage(i)"
+        :style="'width: 20%;'"
+        @click="click(5+i)"
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    base: { // Yellow stars
+      type: Number,
+      required: true
+    },
+    extra: { // Blue stars
+      type: Number,
+      required: true
+    },
+    current: { // Number of checked stars
+      type: Number,
+      required: true
+    },
+    max: { // For line size
+      type: Number,
+      required: true
+    },
+    transcendance: {
+      type: Boolean,
+      default: false
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: 'Uncap level'
+    }
+  },
+  methods: {
+    isStarEnabled(index) {
+      return index <= this.current;
+    },
+    getImage(type, index) {
+      return '/img/star_' + type + (this.isStarEnabled(index) ? "1" : "0") + '.png';
+    },
+    getTranscendanceImage(index) {
+      if ( ! this.isStarEnabled(index + 5)) {
+        return '/img/star_v0.png';
+      }
+      return '/img/star_v' + index + '.png';
+      //return '/img/star_v' + index + '.png';
+    },
+    getTranscendanceClass(index) {
+      let result = '';
+      if ( ! this.readOnly) result += 'cursor-pointer ';
+      if ( ! this.isStarEnabled(index)) result += 'grayscale-80 opacity-70';
+      return result;
+    },
+    click(index) {
+      if (this.readOnly) {
+        return;
+      }
+
+      let current_stars = index;
+
+      if (index === 1 && this.current !== 0) {
+        // First click on 1st star sets 0 stars instead of 1
+        current_stars = 0;
+      }
+      else if (index === this.current) {
+        current_stars = index - 1;
+      }
+
+      this.$emit('update:current', current_stars);
+    }
+  },
+  computed: {
+    getYellowStarsCount() {
+      return this.base;
+    },
+    getBlueStarsCount() {
+      if (this.base > this.extra) {
+        return 0;
+      }
+      if (this.transcendance && this.extra > 5) {
+        return Math.min(this.extra, 5) - this.base;
+      }
+      return this.extra - this.base;
+    },
+    getInvisibleStarsCount() {
+      const baseStars = Math.max(this.base, this.extra);
+      if (baseStars > this.max) {
+        return 0;
+      }
+      return this.max - baseStars;
+    },
+  },
+}
+</script>