chore: added extra data to vehicles tooltip

src/components/Global/StockList.vue

@@ -23,15 +23,15 @@
     <ul v-else>
       <li v-for="(stockName, i) in computedStockList" :key="i">
         <p>
-          {{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }}
+          {{ stockName.split(':')[0].split('_').splice(0, 3).join(' ') }}
-          {{ stockName.split(':')[1] }}
+          <div v-if="stockName.split(':')[1]">({{ stockName.split(':')[1] }})</div>
         </p>
 
         <span>
           <img
             :data-mouseover="stockName"
             data-tooltip-type="VehiclePreviewTooltip"
-            :data-tooltip-content="stockName.split(':')[0]"
+            :data-tooltip-content="stockName"
             :src="
               getVehicleThumbnailURL(stockName.split(':')[0], /^EN/.test(stockName) ? 'rb' : '')
             "

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -13,13 +13,20 @@
       width="300"
       height="176"
       class="rounded-md w-full h-auto"
-      :src="`https://static.spythere.eu/images/${tooltipStore.content}--300px.jpg`"
+      :src="`https://static.spythere.eu/images/${vehicleName}--300px.jpg`"
     />
 
     <div v-if="imageState == 'error'" class="error-placeholder"></div>
 
     <div class="vehicle-name">
-      {{ tooltipStore.content.replace(/_/g, ' ') }}
+      {{ vehicleName.replace(/_/g, ' ') }}
+      <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
+    </div>
+
+    <div class="vehicle-props" v-if="vehicleProps">
+      {{ vehicleProps.speed }}km/h &bull; {{ vehicleProps.length }}m &bull;
+      {{ (vehicleProps.weight / 1000).toFixed(1) }}t
+      <span v-if="vehicleCargo">(+{{ (vehicleCargo.weight / 1000).toFixed(1) }}t)</span>
     </div>
   </div>
 </template>
@@ -27,11 +34,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   data() {
     return {
       tooltipStore: useTooltipStore(),
+      apiStore: useApiStore(),
       imageState: 'loading'
     };
   },
@@ -56,6 +65,30 @@ export default defineComponent({
 
       (e.target as HTMLElement).style.display = 'none';
     }
+  },
+
+  computed: {
+    vehicleName() {
+      return this.tooltipStore.content.split(':')[0];
+    },
+
+    vehicleCargo() {
+      return this.vehicleProps?.cargoTypes?.find(
+        (c) => c.id == this.tooltipStore.content.split(':')[1]
+      );
+    },
+
+    vehicleProps() {
+      const vehicleDataArray = this.apiStore.vehiclesData?.vehicleList.find(
+        ([name]) => name === this.vehicleName
+      );
+
+      if (!vehicleDataArray) return null;
+
+      return (
+        this.apiStore.vehiclesData!.vehicleProps.find((v) => v.type == vehicleDataArray[1]) ?? null
+      );
+    }
   }
 });
 </script>
@@ -85,10 +118,13 @@ img {
 .vehicle-name {
   text-align: center;
   margin-top: 0.5em;
-  color: #ccc;
   text-wrap: wrap;
 }
 
+.vehicle-props {
+  color: #ccc;
+}
+
 .error-placeholder {
   height: 176px;
 }