Świecące nicki i poziomy sponsorów

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -1,7 +1,10 @@
 <template>
   <section class="info-dispatcher">
     <div class="dispatcher" v-if="station.onlineInfo">
-      <span class="dispatcher_level" :style="calculateExpStyle(station.onlineInfo.dispatcherExp)">
+      <span
+        class="dispatcher_level"
+        :style="calculateExpStyle(station.onlineInfo.dispatcherExp, station.onlineInfo.dispatcherIsSupporter)"
+      >
         {{ station.onlineInfo.dispatcherExp > 1 ? station.onlineInfo.dispatcherExp : 'L' }}
       </span>
 

src/components/StationsView/StationTable.vue

@@ -100,7 +100,10 @@
             </td>
 
             <td class="station_dispatcher-exp">
-              <span v-if="station.onlineInfo" :style="calculateExpStyle(station.onlineInfo.dispatcherExp)">
+              <span
+                v-if="station.onlineInfo"
+                :style="calculateExpStyle(station.onlineInfo.dispatcherExp, station.onlineInfo.dispatcherIsSupporter)"
+              >
                 {{ 2 > station.onlineInfo.dispatcherExp ? 'L' : station.onlineInfo.dispatcherExp }}
               </span>
             </td>

src/components/TrainsView/TrainInfo.vue

@@ -4,14 +4,17 @@
       <div class="train_general">
         <span>
           <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
-          
+
           <span class="timetable_warnings">
             <span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
             <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
           </span>
-          <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
-          <strong>{{ train.trainNo }}</strong>
-          <span>&nbsp;| {{ train.driverName }}&nbsp;</span>
+          <strong class="timetable-category" v-if="train.timetableData">
+            {{ train.timetableData.category }}&nbsp;
+          </strong>
+          <strong class="train-number">{{ train.trainNo }}</strong>
+          |
+          <span class="train-driver" :class="{ supporter: train.isSupporter }">{{ train.driverName }}</span>
           <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
         </span>
       </div>
@@ -151,10 +154,10 @@ export default defineComponent({
 
 .warning-timeout {
   background-color: #be3728;
-  
+
   display: inline-block;
   text-align: center;
-  
+
   width: 1.25em;
   height: 1.25em;
   border-radius: 50%;
@@ -195,6 +198,13 @@ export default defineComponent({
   }
 }
 
+.train-driver {
+  &.supporter {
+    color: orange;
+    text-shadow: orange 0 0 5px;
+  }
+}
+
 .timetable_route {
   display: flex;
   align-items: center;

src/mixins/styleMixin.ts

@@ -5,7 +5,7 @@ export default defineComponent({
     calculateExpStyle(exp: number, isSupporter = false): string {
       const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  85%, 50%)`) : '#666';
   
-      const fontColor = exp > 15 || exp == -1 ? 'white' : 'black';
+      const fontColor = exp > 14 || exp == -1 ? 'white' : 'black';
       const boxShadow = isSupporter ? `box-shadow: 0 0 10px 2px ${bgColor};` : '';
   
       return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow}`;

src/scripts/interfaces/Train.ts

@@ -22,6 +22,7 @@ export default interface Train {
   cars: string[];
 
   isTimeout: boolean;
+  isSupporter: boolean;
 
   timetableData?: {
     timetableId: number;

src/store/store.ts

@@ -98,6 +98,8 @@ export const useStore = defineStore('store', {
             lastSeen: train.lastSeen,
             isTimeout: train.isTimeout,
 
+            isSupporter: train.driverIsSupporter,
+
             timetableData: timetable
               ? {
                   timetableId: timetable.timetableId,