refactor: popups -> tooltips

src/components/Tooltip/BaseTooltip.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="tooltip-content">
+    <span>{{ tooltipStore.content }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5em;
+
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #333;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+
+img {
+  height: 1em;
+}
+</style>

src/components/Tooltip/DonatorTooltip.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tooltip-content">
+    <img src="/images/icon-diamond.svg" alt="" />
+    <span>{{ tooltipStore.content }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  gap: 0.5em;
+
+  padding: 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+
+  background-color: #333;
+  box-shadow: 0 0 10px 2px #aaa;
+}
+
+img {
+  vertical-align: middle;
+  height: 1em;
+  margin-right: 0.5em;
+}
+</style>

src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="tooltip" v-show="tooltipStore.type" ref="preview">
+    <component v-if="tooltipStore.type" :is="tooltipStore.type" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+import DonatorTooltip from './DonatorTooltip.vue';
+import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
+import BaseTooltip from './BaseTooltip.vue';
+
+export default defineComponent({
+  components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip },
+
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  },
+
+  watch: {
+    'tooltipStore.mousePos': {
+      deep: true,
+      // [x, y]
+      handler(val: [number, number]) {
+        this.$nextTick(() => {
+          const previewEl = this.$refs['preview'] as HTMLElement;
+          const clientWidth = document.body.clientWidth;
+          const boxWidth = previewEl.getBoundingClientRect().width;
+
+          let translateX = '0px',
+            translateY = '30px';
+
+          if (clientWidth < 500) {
+            previewEl.style.left = '50%';
+            translateX = '-50%';
+          } else if (val[0] <= boxWidth / 2) {
+            previewEl.style.left = '0';
+            translateX = '0px';
+          } else if (val[0] >= clientWidth - boxWidth / 2) {
+            previewEl.style.left = '100%';
+            translateX = '-100%';
+          } else {
+            previewEl.style.left = `${val[0]}px`;
+            translateX = '-50%';
+          }
+
+          previewEl.style.top = `${val[1]}px`;
+
+          const isOutside =
+            val[1] + previewEl.getBoundingClientRect().height + 30 >=
+            window.innerHeight + window.scrollY;
+
+          if (isOutside) translateY = 'calc(-100% - 30px)';
+          previewEl.style.transform = `translate(${translateX}, ${translateY})`;
+        });
+      }
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip {
+  position: absolute;
+  z-index: 250;
+  max-width: 400px;
+  text-align: center;
+}
+</style>

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="tooltip-content">
+    <div v-if="imageState == 'loading'" class="loading-info">
+      {{ $t('vehicle-preview.loading') }}
+    </div>
+
+    <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
+
+    <img
+      v-if="tooltipStore.type"
+      @load="onImageLoad"
+      @error="onImageError"
+      width="300"
+      height="176"
+      class="rounded-md w-full h-auto"
+      :src="`https://static.spythere.eu/images/${tooltipStore.content}--300px.jpg`"
+    />
+
+    <div class="vehicle-name" v-if="imageState != 'error'">
+      {{ tooltipStore.content.replace(/_/g, ' ') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore(),
+      imageState: 'loading'
+    };
+  },
+
+  mounted() {
+    this.imageState = 'loading';
+  },
+
+  methods: {
+    onImageLoad() {
+      this.imageState = 'loaded';
+    },
+
+    onImageError(e: Event) {
+      this.imageState = 'error';
+
+      (e.target as HTMLElement).style.display = 'none';
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  width: 300px;
+  min-height: 200px;
+  background-color: #333;
+  box-shadow: 0 0 10px 2px #aaa;
+
+  padding: 0.5em;
+  border-radius: 0.5em;
+}
+
+.loading-info {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+img {
+  width: 100%;
+  height: auto;
+}
+
+.vehicle-name {
+  text-align: center;
+  margin-top: 0.5em;
+  color: #ccc;
+  text-wrap: wrap;
+}
+</style>