scroller sponsorów projektu w modalu

src/components/Global/Donation.vue

@@ -1,19 +1,23 @@
 <template>
-  <div class="donation-modal" @keydown.esc="toggleModal(false)">
+  <AnimatedModal
-    <button
+    class="donation-modal"
-      class="btn-toggle btn--image"
+    :isOpen="isModalOpen"
-      ref="btn"
+    @toggleModal="toggleModal"
-      @click="toggleModal(true)"
+    @keydown.esc="toggleModal(false)"
-      @focus="toggleModal(false)"
   >
-      <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
-      <span>{{ $t('donations.button-title') }}</span>
-    </button>
-
-    <AnimatedModal :isOpen="isModalOpen" @toggleModal="toggleModal">
     <div class="modal_content">
       <div class="modal_main">
         <h1 v-html="$t('donations.header')"></h1>
+        <div class="donators-slider" v-if="donatorList.length != 0">
+          <span v-html="$t('donations.donator-title', { count: donatorList.length })"></span>
+
+          <transition mode="out-in" name="slider-anim" class="current-name">
+            <span :key="displayingName">
+              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+              {{ displayingName }}
+            </span>
+          </transition>
+        </div>
         <br />
         <p v-html="$t('donations.p1')"></p>
         <br />
@@ -83,47 +87,71 @@
       </div>
     </div>
   </AnimatedModal>
-  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import AnimatedModal from './AnimatedModal.vue';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
+  components: { AnimatedModal },
   props: {
     isModalOpen: Boolean
   },
+
   emits: ['toggleModal'],
 
+  watch: {
+    isModalOpen(b: boolean) {
+      this.running = b;
+      this.lastUpdate = Date.now();
+    }
+  },
+
+  created() {
+    this.runUpdate();
+  },
+
+  data() {
+    return {
+      apiStore: useApiStore(),
+      displayingIndex: 0,
+      lastUpdate: 0,
+      running: false
+    };
+  },
+
+  computed: {
+    displayingName() {
+      return this.donatorList[this.displayingIndex];
+    },
+
+    donatorList() {
+      return this.apiStore.donatorsData.slice().sort(() => Math.sign(Math.random() * -2 + 1));
+    }
+  },
+
   methods: {
     toggleModal(value: boolean) {
       this.$emit('toggleModal', value);
-    }
     },
-  components: { AnimatedModal }
+
+    runUpdate() {
+      if (Date.now() >= this.lastUpdate + 2000 && this.running) {
+        this.displayingIndex = (this.displayingIndex + 1) % this.donatorList.length;
+        this.lastUpdate = Date.now();
+      }
+
+      window.requestAnimationFrame(this.runUpdate);
+    }
+  }
 });
 </script>
 
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-button.btn-toggle {
-  $btnColor: #254069;
-
-  background-color: $btnColor;
-
-  &:hover {
-    background-color: lighten($btnColor, 5%);
-  }
-
-  @include smallScreen {
-    span {
-      display: none;
-    }
-  }
-}
-
 .modal_content {
   display: grid;
   grid-template-rows: 1fr auto;
@@ -151,6 +179,7 @@ button.btn-toggle {
 
 .modal_main {
   overflow: auto;
+  overflow-x: hidden;
 
   img {
     max-height: 20px;
@@ -198,4 +227,30 @@ button.btn-toggle {
     }
   }
 }
+
+.donators-slider {
+  text-align: center;
+  line-height: 30px;
+
+  .current-name {
+    backface-visibility: hidden;
+    display: block;
+    font-weight: bold;
+    word-wrap: break-word;
+    color: var(--clr-donator);
+  }
+}
+
+.slider-anim {
+  &-move,
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
 </style>

src/components/Global/RegionDropdown.vue

@@ -59,8 +59,6 @@ export default defineComponent({
     'store.region.id': {
       handler(regionId) {
         this.selectedItemIndex = this.regionList.findIndex((reg) => reg.id == regionId);
-
-        console.log('region id', regionId);
       }
     },
     '$route.query.region': {

src/components/Global/StockList.vue

@@ -98,8 +98,6 @@ export default defineComponent({
         fallbackName += isCarPassenger ? 'passenger' : 'cargo';
       }
 
-      console.log(stockName, fallbackName);
-
       (event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
     }
   }

src/components/StationsView/StationFilterCard.vue

@@ -256,8 +256,6 @@ export default defineComponent({
     },
 
     handleAuthorsInput() {
-      console.log(this.authorsInputValue);
-
       this.filterStore.changeFilterValue('authors', this.authorsInputValue);
 
       if (this.saveOptions) StorageManager.setStringValue('authors', this.authorsInputValue);

src/locales/en.json

@@ -2,6 +2,7 @@
   "donations": {
     "button-title": "TOSS A COIN",
     "header": "Toss a coin to Stacjownik!",
+    "donator-title": "Project is supported by more than <b>{count}</b> people, including:",
     "p1": "<b>Hello o7!</b> This is Spythere, the creator of Stacjownik, Pojazdownik and several other applications that enhance the gameplay of Train Driver 2!",
     "p2": "{b1} is a completely free tool, created and continuously developed for the Train Driver 2 simulator community since 2020. However, a part of the project is sustained solely through my private financial contribution.  Features such as  {b2} or {b3} (operating on my {link} - to which you are warmly invited) must function on a dedicated server where they can collect and process data, and then display it on the website.",
     "p2-b1": "Stacjownik",

src/locales/pl.json

@@ -2,6 +2,7 @@
   "donations": {
     "button-title": "GROSZA DAJ",
     "header": "Grosza daj Stacjownikowi!",
+    "donator-title": "Projekt wspiera już ponad <b>{count}</b> osób, w tym:",
     "p1": "<b>Hej o7!</b> Z tej strony Spythere, twórca Stacjownika, Pojazdownika oraz kilku innych aplikacji wspomagających rozgrywkę symulatora Train Driver 2!",
     "p2": "{b1} to narzędzie całkowicie darmowe, tworzone i rozwijane dla społeczności symulatora TD2 nieprzerwanie od 2020 roku. Jednakże, część projektu jest podtrzymywana wyłącznie dzięki mojemu prywatnemu wkładowi finansowemu. Funkcje takie jak {b2} czy też {b3} działający na moim {link} (na który serdeczne zapraszam) muszą działać na wydzielonym serwerze, gdzie będą mogły zbierać i przetwarzać dane, aby następnie pokazać je na stronie.",
     "p2-b1": "Stacjownik",

src/styles/global.scss

@@ -49,6 +49,9 @@ body {
   padding: 0;
   font-family: 'Quicksand', sans-serif;
   font-weight: 500;
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+
   overflow-y: scroll;
 
   &.no-scroll {

src/views/StationsView.vue

@@ -8,9 +8,18 @@
           ref="filterCardRef"
         />
 
-        <Donation :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
+        <button
+          class="btn-donation btn--image"
+          ref="btn"
+          @click="isDonationModalOpen = true"
+          @focus="isDonationModalOpen = false"
+        >
+          <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
+          <span>{{ $t('donations.button-title') }}</span>
+        </button>
       </div>
 
+      <Donation :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
       <StationTable :stations="computedStationList" @toggleDonationModal="toggleDonationModal" />
     </div>
   </section>
@@ -109,4 +118,20 @@ export default defineComponent({
 
   margin-bottom: 0.5em;
 }
+
+button.btn-donation {
+  $btnColor: #254069;
+
+  background-color: $btnColor;
+
+  &:hover {
+    background-color: lighten($btnColor, 5%);
+  }
+
+  @include smallScreen {
+    span {
+      display: none;
+    }
+  }
+}
 </style>