Liczniki aktywnych graczy przy opcjach wyboru serwerów

src/App.scss

@@ -213,6 +213,7 @@
     font-weight: bold;
     padding: 0.1em 0.5em;
     color: paleturquoise;
+
   }
 
   .options {

src/App.vue

@@ -42,7 +42,7 @@
               </div>
 
               <span class="info_region">
-                <SelectBox :itemList="options.regions" :defaultItemIndex="0" @selected="changeRegion" />
+                <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
               </span>
             </span>
 
@@ -124,6 +124,20 @@ export default defineComponent({
     trainList() {
       return this.store.trainList.filter((train) => train.online);
     },
+
+    computedRegions() {
+      return this.options.regions.map((region) => {
+        const regionStationCount =
+          this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
+        const regionTrainCount = this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
+
+        return {
+          id: region.id,
+          value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
+          selectedValue: region.value,
+        };
+      });
+    },
   },
 
   data: () => ({
@@ -141,6 +155,8 @@ export default defineComponent({
       pl: require('@/assets/icon-pl.svg'),
       error: require('@/assets/icon-error.svg'),
       dollar: require('@/assets/icon-dollar.svg'),
+      dispatcher: require('@/assets/icon-dispatcher.svg'),
+      train: require('@/assets/icon-train.svg'),
       discord: require('@/assets/icon-discord.png'),
     },
   }),

src/components/Global/SelectBox.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="select-box">
+  <div class="select-box" >
     <div class="select-box_content">
       <button class="selected" @click="toggleBox">
-        <span class="text--primary">{{ prefix }}</span> {{ computedSelectedItem.value }}
+        <span class="text--primary">{{ prefix }}</span>
+        <span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
       </button>
 
       <ul class="options" :ref="(el) => (listRef = el as Element)">
@@ -15,9 +16,7 @@
           >
             <label :for="item.id" v-if="listOpen">
               <input type="button" :id="item.id" name="select-box" @click="selectOption(item)" />
-              <span :style="computedSelectedItem.id == item.id ? 'color: gold;' : ''">
+              <span :style="computedSelectedItem.id == item.id ? 'color: gold;' : ''" v-html="item.value"> </span>
-                {{ item.value }}
-              </span>
             </label>
           </transition>
         </li>
@@ -36,6 +35,7 @@ import { computed, defineComponent, Ref, ref } from '@vue/runtime-core';
 interface Item {
   id: string;
   value: string;
+  selectedValue?: string;
 }
 
 export default defineComponent({
@@ -193,8 +193,6 @@ ul.options {
   z-index: 10;
 
   width: 100%;
-
-  margin-top: 0.25em;
 }
 
 li.option {
@@ -207,10 +205,11 @@ li.option {
     -moz-appearance: none;
     appearance: none;
     border: none;
+    outline: none;
 
     &:focus + span {
       color: $accentCol;
-      font-weight: bold;
+      font-weight: 800;
     }
   }
 
@@ -229,7 +228,7 @@ li.option {
       background-color: hsla(0, 0%, 20%, 0.95);
     }
 
-    padding: 0.75em 0;
+    padding: 0.5em 0;
 
     width: 100%;