scroller sponsorów projektu w modalu

src/components/Global/Donation.vue

@@ -1,129 +1,157 @@
 <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)"
+  >
-    >
+    <div class="modal_content">
-      <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
+      <div class="modal_main">
-      <span>{{ $t('donations.button-title') }}</span>
+        <h1 v-html="$t('donations.header')"></h1>
-    </button>
+        <div class="donators-slider" v-if="donatorList.length != 0">
+          <span v-html="$t('donations.donator-title', { count: donatorList.length })"></span>
 
-    <AnimatedModal :isOpen="isModalOpen" @toggleModal="toggleModal">
+          <transition mode="out-in" name="slider-anim" class="current-name">
-      <div class="modal_content">
+            <span :key="displayingName">
-        <div class="modal_main">
-          <h1 v-html="$t('donations.header')"></h1>
-          <br />
-          <p v-html="$t('donations.p1')"></p>
-          <br />
-          <i18n-t keypath="donations.p2" tag="p">
-            <template v-slot:b1>
-              <b>{{ $t('donations.p2-b1') }}</b>
-            </template>
-            <template v-slot:b2>
-              <b>{{ $t('donations.p2-b2') }}</b>
-            </template>
-            <template v-slot:b3>
-              <b>{{ $t('donations.p2-b3') }}</b>
-            </template>
-            <template v-slot:link>
-              <a class="discord" href="https://discord.gg/x2mpNN3svk" target="_blank">
-                {{ $t('donations.p2-a1') }}
-              </a>
-            </template>
-          </i18n-t>
-          <br />
-          <p v-html="$t('donations.p3')"></p>
-          <br />
-          <i18n-t keypath="donations.p4" tag="p">
-            <template v-slot:img>
               <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-            </template>
+              {{ displayingName }}
-
+            </span>
-            <template v-slot:b1>
+          </transition>
-              <b>{{ $t('donations.p4-b1') }}</b>
-            </template>
-
-            <template v-slot:b2>
-              <b>{{ $t('donations.p4-b2') }}</b>
-            </template>
-          </i18n-t>
-          <br />
-          <i
-            v-html="$t('donations.p5')"
-            style="display: flex; justify-content: flex-end; text-align: right"
-          >
-          </i>
         </div>
+        <br />
+        <p v-html="$t('donations.p1')"></p>
+        <br />
+        <i18n-t keypath="donations.p2" tag="p">
+          <template v-slot:b1>
+            <b>{{ $t('donations.p2-b1') }}</b>
+          </template>
+          <template v-slot:b2>
+            <b>{{ $t('donations.p2-b2') }}</b>
+          </template>
+          <template v-slot:b3>
+            <b>{{ $t('donations.p2-b3') }}</b>
+          </template>
+          <template v-slot:link>
+            <a class="discord" href="https://discord.gg/x2mpNN3svk" target="_blank">
+              {{ $t('donations.p2-a1') }}
+            </a>
+          </template>
+        </i18n-t>
+        <br />
+        <p v-html="$t('donations.p3')"></p>
+        <br />
+        <i18n-t keypath="donations.p4" tag="p">
+          <template v-slot:img>
+            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+          </template>
 
-        <div class="modal_actions">
+          <template v-slot:b1>
-          <a
+            <b>{{ $t('donations.p4-b1') }}</b>
-            class="modal-action a-button btn--image coffee"
+          </template>
-            href="https://buycoffee.to/spythere"
-            target="_blank"
-          >
-            <img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
-            {{ $t('donations.action-buycoffee') }}
-          </a>
 
-          <a
+          <template v-slot:b2>
-            class="modal-action a-button btn--image paypal"
+            <b>{{ $t('donations.p4-b2') }}</b>
-            href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
+          </template>
-            target="_blank"
+        </i18n-t>
-          >
+        <br />
-            <img src="/images/icon-dollar.svg" alt="paypal donation" />
+        <i
-            {{ $t('donations.action-paypal') }}
+          v-html="$t('donations.p5')"
-          </a>
+          style="display: flex; justify-content: flex-end; text-align: right"
-
+        >
-          <button class="modal-action btn--image exit" @click="toggleModal(false)">
+        </i>
-            <img src="/images/icon-exit.svg" alt="dollar donation icon" />
-            {{ $t('donations.action-exit') }}
-          </button>
-        </div>
       </div>
-    </AnimatedModal>
+
-  </div>
+      <div class="modal_actions">
+        <a
+          class="modal-action a-button btn--image coffee"
+          href="https://buycoffee.to/spythere"
+          target="_blank"
+        >
+          <img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
+          {{ $t('donations.action-buycoffee') }}
+        </a>
+
+        <a
+          class="modal-action a-button btn--image paypal"
+          href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
+          target="_blank"
+        >
+          <img src="/images/icon-dollar.svg" alt="paypal donation" />
+          {{ $t('donations.action-paypal') }}
+        </a>
+
+        <button class="modal-action btn--image exit" @click="toggleModal(false)">
+          <img src="/images/icon-exit.svg" alt="dollar donation icon" />
+          {{ $t('donations.action-exit') }}
+        </button>
+      </div>
+    </div>
+  </AnimatedModal>
 </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);
+    },
+
+    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);
     }
-  },
+  }
-  components: { AnimatedModal }
 });
 </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>