refactor: globalized current locale, translation improvements

src/App.vue

@@ -12,7 +12,7 @@
 
     <Tooltip />
 
-    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
+    <AppHeader :current-lang="store.currentLocale" @change-lang="changeLang" />
 
     <main class="app_main">
       <router-view v-slot="{ Component }">
@@ -73,7 +73,6 @@ export default defineComponent({
     isUpdateCardOpen: false,
     isWelcomeCardOpen: true,
 
-    currentLang: 'pl',
     isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
   }),
 
@@ -148,7 +147,7 @@ export default defineComponent({
 
     changeLang(lang: string) {
       this.$i18n.locale = lang;
-      this.currentLang = lang;
+      this.store.currentLocale = lang;
 
       StorageManager.setStringValue('lang', lang);
     },
@@ -165,7 +164,7 @@ export default defineComponent({
 
       const naviLanguage = window.navigator.language.toString();
 
-      if (naviLanguage.startsWith('en')) {
+      if (!naviLanguage.startsWith('pl')) {
         this.changeLang('en');
         return;
       }

src/components/App/AppFooter.vue

@@ -9,7 +9,9 @@
 
     <br />
     <a href="https://discord.gg/x2mpNN3svk">
-      <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
+      <img src="/images/icon-discord.png" alt="discord logo icon" />&nbsp;<b class="text--discord">
+        {{ $t('footer.discord') }}
+      </b>
     </a>
 
     <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>

src/components/App/AppWelcomeCard.vue

@@ -20,7 +20,7 @@
           </template>
 
           <template v-slot:link>
-            <a href="https://td2.info.pl/" class="link">Train Driver 2</a>
+            <a href="https://td2.info.pl/" class="link" target="_blank">Train Driver 2</a>
           </template>
         </i18n-t>
       </section>
@@ -91,6 +91,14 @@
           </template>
         </i18n-t>
 
+        <i18n-t keypath="welcome.discord-info" tag="div" class="discord-info">
+          <template v-slot:discord>
+            <a href="https://discord.gg/x2mpNN3svk" class="link" target="_blank">
+              <b class="text--discord">{{ $t('welcome.discord-info-link-text') }}</b>
+            </a>
+          </template>
+        </i18n-t>
+
         <div class="bottom-text">
           <i>{{ $t('welcome.bottom-text') }}</i>
         </div>
@@ -108,8 +116,11 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import Card from '../Global/Card.vue';
+import { useMainStore } from '../../store/mainStore';
+import StorageManager from '../../managers/storageManager';
 
 const i18n = useI18n();
+const store = useMainStore();
 
 const emit = defineEmits(['toggleCard']);
 const props = defineProps({
@@ -122,6 +133,9 @@ function toggleCard(state: boolean) {
 
 function changeLang(localeName: string) {
   i18n.locale.value = localeName;
+  store.currentLocale = localeName;
+
+  StorageManager.setStringValue('lang', localeName);
 }
 </script>
 
@@ -207,6 +221,15 @@ a.link {
   }
 }
 
+.discord-info {
+  margin-top: 1em;
+  font-weight: bold;
+
+  img {
+    vertical-align: middle;
+  }
+}
+
 .bottom-text {
   margin: 1em 0;
   font-weight: bold;

src/locales/en.json

@@ -1,7 +1,7 @@
 {
   "welcome": {
     "title": "Welcome to Stacjownik!",
-    "app-desc": "{b1} is a web tool made for {link1}, which main goal is to assist in-game dispatchers and drivers on their duties. Here you can find who is currently online and on what scenery, find a train driver or browse the journal, which contains a history of past timetables and dispatcher duty.",
+    "app-desc": "{b1} is a web tool made for {link}, which main goal is to assist in-game dispatchers and drivers on their duties. Here you can find who is currently online and on what scenery, find a train driver or browse the journal, which contains a history of past timetables and dispatcher duty.",
     "app-desc-b1": "Stacjownik",
     "sceneries-header": "Sceneries",
     "sceneries-desc": "Under the {b1} tab, you will find information about the dispatchers and sceneries they currently occupy. You can also browse all available sceneries in the simulator (in the filters, check the “Free” option to show the rest of the unoccupied ones) and filter them by various aspects, such as control types, additional software, signaling types, required duty level or types of routes. Click on the corresponding scenery in the table to show its details.",
@@ -18,6 +18,8 @@
     "srjp-desc": "Polish working train timetable",
     "donation-info": "If you appreciate the Stacjownik project as well as other applications, please consider supporting it financially - click the button with {icon1} to learn more!",
     "donation-info-icon1-text": "the diamond icon",
+    "discord-info": "I also invite you to the official {discord}, where you will find a dedicated Stacjobot, with which you can search for additional data from the simulator, unavailable on this site!",
+    "discord-info-link-text": "Stacjownik Discord server",
     "bottom-text": "Enjoy!\n~Spythere",
     "button-confirm": "Start using the app!"
   },

src/locales/pl.json

@@ -1,7 +1,7 @@
 {
   "welcome": {
     "title": "Witaj na Stacjowniku!",
-    "app-desc": "{b1} to aplikacja stworzona dla symulatora {link1}, której celem jest wspomaganie dyżurnego ruchu i maszynisty. Możesz sprawdzić tutaj kto i na jakiej scenerii obecnie pełni służbę, znaleźć maszynistę lub przejrzeć dziennik, który zawiera historię przeszłych dyżurów i rozkładów jazdy.",
+    "app-desc": "{b1} to aplikacja stworzona dla symulatora {link}, której celem jest wspomaganie dyżurnego ruchu i maszynisty. Możesz sprawdzić tutaj kto i na jakiej scenerii obecnie pełni służbę, znaleźć maszynistę lub przejrzeć dziennik, który zawiera historię przeszłych dyżurów i rozkładów jazdy.",
     "app-desc-b1": "Stacjownik",
     "sceneries-header": "Scenerie",
     "sceneries-desc": "W zakładce {b1} znajdziesz informacje o dyżurnych ruchu pełniących służby na wybranych sceneriach. Możesz również przeglądać wszystkie dostępne scenerie w symulatorze (w filtrach należy zaznaczyć opcję \"Wolna\", aby pokazać resztę niezajętych) i filtrować je pod względem wielu kryteriów, takich jak sterowanie, dodatkowe oprogramowanie, sygnalizacja, wymagany poziom dyżurnego czy szlaki. Aby wyświetlić detale danej scenerii, kliknij na nią w tabelce.",
@@ -18,6 +18,8 @@
     "srjp-desc": "służbowy rozkład jazdy pociągu",
     "donation-info": "Jeśli doceniasz projekt Stacjownika jak i inne aplikacje mojego autorstwa, rozważ jego wsparcie finansowe - kliknij przycisk z {icon1}, aby dowiedzieć się więcej!",
     "donation-info-icon1-text": "ikoną diamentu",
+    "discord-info": "Zapraszam także na oficjalnego {discord}, gdzie znajdziesz dedykowanego Stacjobota, za pomocą którego możesz wyszukiwać dodatkowe dane z symulatora niedostępne na tej stronie",
+    "discord-info-link-text": "Discorda Stacjownika",
     "bottom-text": "Miłego korzystania\n~Spythere",
     "button-confirm": "Zacznij korzystać z aplikacji!"
   },

src/store/mainStore.ts

@@ -32,7 +32,8 @@ export const useMainStore = defineStore('mainStore', {
 
       chosenModalTrainId: undefined,
 
-      modalLastClickedTarget: null
+      modalLastClickedTarget: null,
+      currentLocale: 'pl'
     }) as MainStoreState,
 
   getters: {

src/store/typings.ts

@@ -12,6 +12,7 @@ export interface MainStoreState {
   driverStatsStatus: Status.Data;
   chosenModalTrainId?: string;
   modalLastClickedTarget: EventTarget | null;
+  currentLocale: string;
 }
 
 export interface StationJSONData {

src/styles/_global.scss

@@ -23,7 +23,6 @@
 
   --clr-donator: #f7a4ff;
 
-
   --no-scroll-padding: 17px;
   --max-container-width: 1700px;
 
@@ -211,6 +210,19 @@ ul {
 
     text-shadow: #f050ff 0 0 10px;
   }
+
+  &--discord {
+    color: var(--clr-donator);
+    color: transparent;
+
+    background: var(--clr-donator);
+    background: linear-gradient(90deg, #7fb6ff 0%, #60ecff 70%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    text-shadow: #88ddff 0 0 10px;
+  }
 }
 
 button,