chore(app): added the Creator badge

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

@@ -18,7 +18,20 @@
           </b>
 
           <span
-            v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
+            v-if="isCreator(entry.dispatcherName)"
+            data-tooltip-type="CreatorTooltip"
+            :data-tooltip-content="$t('donations.creator-message')"
+          >
+            <router-link
+              class="text--creator"
+              :to="`/journal/dispatchers?search-dispatcher=${entry.dispatcherName}`"
+            >
+              {{ entry.dispatcherName }}
+            </router-link>
+          </span>
+
+          <span
+            v-else-if="apiStore.donatorsData.includes(entry.dispatcherName)"
             data-tooltip-type="DonatorTooltip"
             :data-tooltip-content="$t('donations.dispatcher-message')"
           >
@@ -122,6 +135,7 @@ import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 import FlagIcon from '../../Global/FlagIcon.vue';
+import { isCreator } from '../../../utils/userUtils';
 
 export default defineComponent({
   props: {
@@ -134,7 +148,7 @@ export default defineComponent({
   emits: ['toggleShowExtraInfo'],
 
   data() {
-    return { regions, apiStore: useApiStore() };
+    return { regions, apiStore: useApiStore(), isCreator };
   },
 
   methods: {

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -59,7 +59,17 @@
       </strong>
 
       <router-link
-        v-if="apiStore.donatorsData.includes(timetable.driverName)"
+        v-if="isCreator(timetable.driverName)"
+        class="text--creator"
+        data-tooltip-type="CreatorTooltip"
+        :data-tooltip-content="$t('donations.creator-message')"
+        :to="`/journal/timetables?search-driver=${timetable.driverName}`"
+      >
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>
+
+      <router-link
+        v-else-if="apiStore.donatorsData.includes(timetable.driverName)"
         class="text--donator"
         data-tooltip-type="DonatorTooltip"
         :data-tooltip-content="$t('donations.driver-message')"
@@ -115,6 +125,7 @@ import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
 import FlagIcon from '../../Global/FlagIcon.vue';
+import { isCreator } from '../../../utils/userUtils';
 
 export default defineComponent({
   components: { FlagIcon },
@@ -122,7 +133,8 @@ export default defineComponent({
 
   data() {
     return {
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
     };
   },
 

src/components/PlayerProfileView/ProfileSummary.vue

@@ -5,7 +5,10 @@
         <ProfilePlayerAvatar :playerTD2Info="playerTD2Info" />
 
         <div>
-          <h2 class="player-name-header" :class="{ 'text--donator': isPlayerDonator }">
+          <h2
+            class="player-name-header"
+            :class="{ 'text--donator': isPlayerDonator, 'text--creator': isPlayerCreator }"
+          >
             <a :href="`https://td2.info.pl/profile/?u=${route.query.playerId}`" target="_blank">
               <img
                 v-if="isPlayerDonator"
@@ -232,6 +235,7 @@ import { useApiStore } from '../../store/apiStore';
 import StationStatusBadge from '../Global/StationStatusBadge.vue';
 import ProfilePlayerAvatar from './ProfilePlayerAvatar.vue';
 import { getRegionNameById } from '../../utils/regionUtils';
+import { isCreator } from '../../utils/userUtils';
 
 const { t } = useI18n();
 
@@ -257,6 +261,8 @@ const isPlayerDonator = computed(() =>
   props.playerName ? apiStore.donatorsData.includes(props.playerName) : false
 );
 
+const isPlayerCreator = computed(() => (props.playerName ? isCreator(props.playerName) : false));
+
 const activeDispatches = computed(() => {
   if (!props.playerName) return [];
   if (!apiStore.activeData || !apiStore.activeData.activeSceneries) return [];

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -9,9 +9,16 @@
       </span>
 
       <router-link class="dispatcher-name" :to="`/profile?playerId=${onlineScenery.dispatcherId}`">
+        <span
+          class="text--creator"
+          v-if="isCreator(onlineScenery.dispatcherName)"
+          :title="$t('donations.creator-message')"
+        >
+          {{ onlineScenery.dispatcherName }}
+        </span>
         <span
           class="text--donator"
-          v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
+          v-else-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
           :title="$t('donations.dispatcher-message')"
         >
           {{ onlineScenery.dispatcherName }}
@@ -51,6 +58,7 @@ import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 import { ActiveScenery } from '../../../typings/common';
 import { useApiStore } from '../../../store/apiStore';
 import FlagIcon from '../../Global/FlagIcon.vue';
+import { isCreator } from '../../../utils/userUtils';
 
 export default defineComponent({
   mixins: [styleMixin, dateMixin, routerMixin],
@@ -58,7 +66,8 @@ export default defineComponent({
 
   data() {
     return {
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
     };
   },
 

src/components/StationsView/StationTable.vue

@@ -131,7 +131,16 @@
           <td class="station-dispatcher-name">
             <span v-if="station.onlineInfo?.dispatcherName">
               <b
-                v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
+                v-if="isCreator(station.onlineInfo.dispatcherName)"
+                data-tooltip-type="CreatorTooltip"
+                :data-tooltip-content="$t('donations.creator-message')"
+              >
+                <img src="/images/icon-creator.png" alt="creator icon" />
+                <span class="text--creator">&nbsp;{{ station.onlineInfo.dispatcherName }}</span>
+              </b>
+
+              <b
+                v-else-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
                 data-tooltip-type="DonatorTooltip"
                 :data-tooltip-content="$t('donations.dispatcher-message')"
               >
@@ -353,6 +362,7 @@ import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
 import { filterStations, sortStations } from './utils';
 import { getLanguageNameById } from '../../utils/languageUtils';
 import FlagIcon from '../Global/FlagIcon.vue';
+import { isCreator } from '../../utils/userUtils';
 
 export default defineComponent({
   emits: ['toggleDonationCard'],
@@ -363,8 +373,9 @@ export default defineComponent({
   data: () => ({
     headIconsIds,
     headIds,
+    scrollTop: 0,
     getChangedFilters,
-    scrollTop: 0
+    isCreator
   }),
 
   setup() {
@@ -622,8 +633,8 @@ tbody tr {
 
 .station-dispatcher-name {
   img {
-    max-width: 1.35em;
+    max-height: 1.3em;
-    vertical-align: text-bottom;
+    vertical-align: text-top;
   }
 }
 

src/components/Tooltip/CreatorTooltip.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="tooltip-content">
+    <img src="/images/icon-creator.png" alt="creator icon" />
+    <b class="text--creator">&nbsp;{{ tooltipStore.content }}</b>
+  </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 {
+  padding: 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+
+  background-color: #333;
+  box-shadow: 0 0 10px 2px #aaa;
+}
+
+img {
+  vertical-align: text-bottom;
+  height: 1.25em;
+}
+</style>

src/components/Tooltip/DonatorTooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tooltip-content">
     <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-    <span>{{ tooltipStore.content }}</span>
+    <b class="text--donator">&nbsp;{{ tooltipStore.content }}</b>
   </div>
 </template>
 
@@ -20,11 +20,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .tooltip-content {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  flex-wrap: wrap;
-
   padding: 0.5em;
   border-radius: 0.25em;
 
@@ -35,7 +30,7 @@ export default defineComponent({
 }
 
 img {
-  vertical-align: middle;
+  vertical-align: text-bottom;
-  height: 1em;
+  height: 1.25em;
 }
 </style>

src/components/Tooltip/Tooltip.vue

@@ -8,12 +8,13 @@
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
 import DonatorTooltip from './DonatorTooltip.vue';
+import CreatorTooltip from './CreatorTooltip.vue';
 import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
 import BaseTooltip from './BaseTooltip.vue';
 import SpawnsTooltip from './SpawnsTooltip.vue';
 import UsersTooltip from './UsersTooltip.vue';
 import HtmlTooltip from './HtmlTooltip.vue';
-import TrainInfoTooltip from "./TrainInfoTooltip.vue";
+import TrainInfoTooltip from './TrainInfoTooltip.vue';
 
 const BOX_PADDING_PX = 20;
 
@@ -25,7 +26,8 @@ export default defineComponent({
     SpawnsTooltip,
     UsersTooltip,
     HtmlTooltip,
-    TrainInfoTooltip
+    TrainInfoTooltip,
+    CreatorTooltip
   },
 
   data() {

src/components/TrainsView/TrainInfo.vue

@@ -56,12 +56,21 @@
           </b>
 
           <b
-            v-if="apiStore.donatorsData.includes(train.driverName)"
+            v-if="isCreator(train.driverName)"
+            data-tooltip-type="CreatorTooltip"
+            :data-tooltip-content="$t('donations.creator-message')"
+          >
+            <img src="/images/icon-creator.png" alt="creator icon" />
+            <span class="text--creator">&nbsp;{{ train.driverName }}</span>
+          </b>
+
+          <b
+            v-else-if="apiStore.donatorsData.includes(train.driverName)"
             data-tooltip-type="DonatorTooltip"
             :data-tooltip-content="$t('donations.driver-message')"
           >
-            <span class="text--donator">{{ train.driverName }}&nbsp;</span>
             <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+            <span class="text--donator">&nbsp;{{ train.driverName }}</span>
           </b>
 
           <span v-else>{{ train.driverName }}</span>
@@ -204,6 +213,7 @@ import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import ProgressBar from '../Global/ProgressBar.vue';
 import StockList from '../Global/StockList.vue';
 import FlagIcon from '../Global/FlagIcon.vue';
+import { isCreator } from '../../utils/userUtils';
 
 export default defineComponent({
   mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
@@ -222,7 +232,8 @@ export default defineComponent({
   data() {
     return {
       store: useMainStore(),
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
     };
   },
 

src/locales/en.json

@@ -42,7 +42,8 @@
     "action-paypal": "DONATE WITH PAYPAL",
     "action-buycoffee": "BUY ME A COFFEE!",
     "dispatcher-message": "Dispatcher supporting the Stacjownik project!",
-    "driver-message": "Driver supporting the Stacjownik project!"
+    "driver-message": "Driver supporting the Stacjownik project!",
+    "creator-message": "Creator of the Stacjownik project"
   },
   "warnings": {
     "TWR": "Train with high risk cargo",

src/locales/pl.json

@@ -42,7 +42,8 @@
     "action-paypal": "PRZELEJ PAYPALEM",
     "action-buycoffee": "POSTAW KAWĘ!",
     "dispatcher-message": "Dyżurny wspierający projekt Stacjownika!",
-    "driver-message": "Maszynista wspierający projekt Stacjownika!"
+    "driver-message": "Maszynista wspierający projekt Stacjownika!",
+    "creator-message": "Twórca projektu Stacjownik"
   },
   "warnings": {
     "TWR": "Pociąg z towarami niebezpiecznymi wysokiego ryzyka",

src/store/tooltipStore.ts

@@ -9,7 +9,8 @@ export const tooltipKeys = [
   'SpawnsTooltip',
   'UsersTooltip',
   'HtmlTooltip',
-  'TrainInfoTooltip'
+  'TrainInfoTooltip',
+  'CreatorTooltip'
 ] as const;
 
 export type TooltipType = (typeof tooltipKeys)[number];

src/styles/_global.scss

@@ -217,6 +217,19 @@ ul {
     text-shadow: #f050ff 0 0 10px;
   }
 
+  &--creator {
+    color: var(--clr-primary);
+    color: transparent;
+
+    background: var(--clr-primary);
+    background: linear-gradient(90deg, gold 30%, #ffffff 70%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    text-shadow: gold 0 0 10px;
+  }
+
   &--discord {
     color: var(--clr-donator);
     color: transparent;

src/utils/userUtils.ts

@@ -0,0 +1,3 @@
+export function isCreator(name: string) {
+  return /(spythere|kowbojyt)/.test(name.toLowerCase());
+}