From b9bb9dc201f14617edf1690ac2f41f8767cb0f6d Mon Sep 17 00:00:00 2001 From: Spythere Date: Tue, 27 May 2025 17:19:32 +0200 Subject: [PATCH] refactor: globalized current locale, translation improvements --- src/App.vue | 7 +++---- src/components/App/AppFooter.vue | 6 ++++-- src/components/App/AppWelcomeCard.vue | 25 ++++++++++++++++++++++++- src/locales/en.json | 4 +++- src/locales/pl.json | 4 +++- src/store/mainStore.ts | 3 ++- src/store/typings.ts | 1 + src/styles/_global.scss | 16 ++++++++++++++-- 8 files changed, 54 insertions(+), 12 deletions(-) diff --git a/src/App.vue b/src/App.vue index 862b70c..02c5e18 100644 --- a/src/App.vue +++ b/src/App.vue @@ -12,7 +12,7 @@ - +
@@ -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; } diff --git a/src/components/App/AppFooter.vue b/src/components/App/AppFooter.vue index c0825f6..a8834d3 100644 --- a/src/components/App/AppFooter.vue +++ b/src/components/App/AppFooter.vue @@ -9,7 +9,9 @@
-  {{ $t('footer.discord') }} + discord logo icon  + {{ $t('footer.discord') }} +
∫ ukryta taktyczna całka do programowania w HTMLu
@@ -36,4 +38,4 @@ export default defineComponent({ } } }); - \ No newline at end of file + diff --git a/src/components/App/AppWelcomeCard.vue b/src/components/App/AppWelcomeCard.vue index 200ea3f..688f473 100644 --- a/src/components/App/AppWelcomeCard.vue +++ b/src/components/App/AppWelcomeCard.vue @@ -20,7 +20,7 @@ @@ -91,6 +91,14 @@ + + + +
{{ $t('welcome.bottom-text') }}
@@ -108,8 +116,11 @@ @@ -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; diff --git a/src/locales/en.json b/src/locales/en.json index 11c0a80..f5bfe7e 100644 --- a/src/locales/en.json +++ b/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!" }, diff --git a/src/locales/pl.json b/src/locales/pl.json index de21021..7b69a9b 100644 --- a/src/locales/pl.json +++ b/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!" }, diff --git a/src/store/mainStore.ts b/src/store/mainStore.ts index ad6e49c..341f3ee 100644 --- a/src/store/mainStore.ts +++ b/src/store/mainStore.ts @@ -32,7 +32,8 @@ export const useMainStore = defineStore('mainStore', { chosenModalTrainId: undefined, - modalLastClickedTarget: null + modalLastClickedTarget: null, + currentLocale: 'pl' }) as MainStoreState, getters: { diff --git a/src/store/typings.ts b/src/store/typings.ts index bdb486a..d7793da 100644 --- a/src/store/typings.ts +++ b/src/store/typings.ts @@ -12,6 +12,7 @@ export interface MainStoreState { driverStatsStatus: Status.Data; chosenModalTrainId?: string; modalLastClickedTarget: EventTarget | null; + currentLocale: string; } export interface StationJSONData { diff --git a/src/styles/_global.scss b/src/styles/_global.scss index 6880c22..6e94677 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -23,7 +23,6 @@ --clr-donator: #f7a4ff; - --no-scroll-padding: 17px; --max-container-width: 1700px; @@ -207,10 +206,23 @@ ul { background: linear-gradient(90deg, #ff88db 30%, #ffffff 70%); background-clip: text; -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + -webkit-text-fill-color: transparent; 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,