From 611927f96f16e80594cd5e4a1110100534ecf78d Mon Sep 17 00:00:00 2001 From: Spythere Date: Tue, 27 May 2025 16:55:58 +0200 Subject: [PATCH 1/5] feat: added welcome card for new incoming users --- src/App.vue | 10 +- src/components/App/AppWelcomeCard.vue | 223 ++++++++++++++++++++++++++ src/locales/en.json | 22 +++ src/locales/pl.json | 24 ++- 4 files changed, 277 insertions(+), 2 deletions(-) create mode 100644 src/components/App/AppWelcomeCard.vue diff --git a/src/App.vue b/src/App.vue index e038b56..862b70c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,8 +5,13 @@ @toggle-card="() => (isUpdateCardOpen = false)" /> + + - +
@@ -44,6 +49,7 @@ import UpdateCard from './components/App/UpdateCard.vue'; import StorageManager from './managers/storageManager'; import AppFooter from './components/App/AppFooter.vue'; +import AppWelcomeCard from './components/App/AppWelcomeCard.vue'; const STORAGE_VERSION_KEY = 'app_version'; @@ -54,6 +60,7 @@ export default defineComponent({ AppHeader, AppFooter, UpdateCard, + AppWelcomeCard, Tooltip }, @@ -64,6 +71,7 @@ export default defineComponent({ tooltipStore: useTooltipStore(), isUpdateCardOpen: false, + isWelcomeCardOpen: true, currentLang: 'pl', isOnProductionHost: location.hostname == 'stacjownik-td2.web.app' diff --git a/src/components/App/AppWelcomeCard.vue b/src/components/App/AppWelcomeCard.vue new file mode 100644 index 0000000..200ea3f --- /dev/null +++ b/src/components/App/AppWelcomeCard.vue @@ -0,0 +1,223 @@ + + + + + diff --git a/src/locales/en.json b/src/locales/en.json index 8ad8725..11c0a80 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -1,4 +1,26 @@ { + "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": "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.", + "sceneries-desc-b1": "Sceneries", + "trains-header": "Trains", + "trains-desc": "The {b1} tab contains a list of active drivers and timetables that are currently realized on the selected server (server selection is at the top of the page, next to the counters). The list can be filtered and sorted, taking into account the most important criteria, such as driver name, train number or timetable details. You can also click on the train to show additional information.", + "trains-desc-b1": "Trains", + "journal-header": "Journal", + "journal-desc": "The {b1} is a tab where you can find dispatcher duty and timetables history (currently only from the main PL1 game server). You can also search for a particular player's history using additional filters.", + "journal-desc-b1": "Journal", + "other-apps": "Also check out other apps designed to make TD2 gameplay easier:", + "pojazdownik-desc": "online rolling stock editor", + "generator-desc": "graphical manager of train orders", + "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", + "bottom-text": "Enjoy!\n~Spythere", + "button-confirm": "Start using the app!" + }, "donations": { "button-title": "TOSS A COIN", "header": "Toss a coin to Stacjownik!", diff --git a/src/locales/pl.json b/src/locales/pl.json index 65bce7f..de21021 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -1,4 +1,26 @@ { + "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": "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.", + "sceneries-desc-b1": "Scenerie", + "trains-header": "Pociągi", + "trains-desc": " Zakładka {b1} zawiera listę aktywnych maszynistów i rozkładów jazdy, które są obecnie realizowane na wybranym serwerze (wybór serwera znajduje się na górze strony). Listę można filtrować i sortować uwzględniając najważniejsze kryteria, takie jak nazwa maszynisty, numer pociągu lub detale rozkładu jazdy. Możesz również kliknąć na dany pociąg, aby wyświetlić dodatkowe informacje.", + "trains-desc-b1": "Pociągi", + "journal-header": "Dziennik", + "journal-desc": "{b1} to zakładka, w której znajdziesz historię dyżurów i rozkładów jazdy, obecnie jedynie z głównego serwera rozgrywki PL1. Możesz także wyszukać historię danego użytkownika używając dodatkowych filtrów.", + "journal-desc-b1": "Dziennik", + "other-apps": "Sprawdź także inne aplikacje stworzone z myślą ułatwienia rozgrywki w TD2:", + "pojazdownik-desc": "edytor składów online", + "generator-desc": "graficzny menadżer rozkazów pisemnych", + "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", + "bottom-text": "Miłego korzystania\n~Spythere", + "button-confirm": "Zacznij korzystać z aplikacji!" + }, "donations": { "button-title": "GROSZA DAJ", "header": "Grosza daj Stacjownikowi!", @@ -566,4 +588,4 @@ "history": { "title": "DZIENNIK ROZKŁADÓW JAZDY" } -} +} \ No newline at end of file From b9bb9dc201f14617edf1690ac2f41f8767cb0f6d Mon Sep 17 00:00:00 2001 From: Spythere Date: Tue, 27 May 2025 17:19:32 +0200 Subject: [PATCH 2/5] 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, From 742754ceef500d0c0e3408a1769ff285efad7cc4 Mon Sep 17 00:00:00 2001 From: Spythere Date: Tue, 27 May 2025 17:19:48 +0200 Subject: [PATCH 3/5] bump: v1.30.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 940a51f..6584efd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "stacjownik", - "version": "1.30.1", + "version": "1.30.2", "private": true, "type": "module", "scripts": { From 310261fb59a02bd880bc55176f63d40a311bd2e5 Mon Sep 17 00:00:00 2001 From: Spythere Date: Tue, 27 May 2025 17:38:53 +0200 Subject: [PATCH 4/5] chore: queries handling --- src/App.vue | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/App.vue b/src/App.vue index 02c5e18..714628a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,10 +5,7 @@ @toggle-card="() => (isUpdateCardOpen = false)" /> - + @@ -52,6 +49,7 @@ import AppFooter from './components/App/AppFooter.vue'; import AppWelcomeCard from './components/App/AppWelcomeCard.vue'; const STORAGE_VERSION_KEY = 'app_version'; +const WELCOME_CARD_SEEN_KEY = 'welcome_card_seen'; export default defineComponent({ components: { @@ -71,7 +69,7 @@ export default defineComponent({ tooltipStore: useTooltipStore(), isUpdateCardOpen: false, - isWelcomeCardOpen: true, + isWelcomeCardOpen: false, isOnProductionHost: location.hostname == 'stacjownik-td2.web.app' }), @@ -92,13 +90,27 @@ export default defineComponent({ this.loadLang(); this.setupOfflineHandling(); this.checkAppVersion(); + this.handleQueries(); this.apiStore.setupAPIData(); }, + handleQueries() { + const query = new URLSearchParams(window.location.search); + + if (query.get('welcomeCard') == '1') { + this.isWelcomeCardOpen = true; + } + }, + async checkAppVersion() { + const isWelcomeCardSeen = StorageManager.getBooleanValue(WELCOME_CARD_SEEN_KEY); const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY); + if (isWelcomeCardSeen == false && storageVersion == '') { + this.isWelcomeCardOpen = true; + } + try { const releaseData = await ( await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest') @@ -168,6 +180,11 @@ export default defineComponent({ this.changeLang('en'); return; } + }, + + closeWelcomeCard() { + this.isWelcomeCardOpen = false; + StorageManager.setBooleanValue(WELCOME_CARD_SEEN_KEY, true); } } }); From 23767801d5ce3ffeb4bc83ca7c70eec94e9a151c Mon Sep 17 00:00:00 2001 From: Spythere Date: Tue, 27 May 2025 17:42:31 +0200 Subject: [PATCH 5/5] chore: added timeout for welcome card appearance --- src/App.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/App.vue b/src/App.vue index 714628a..5d41439 100644 --- a/src/App.vue +++ b/src/App.vue @@ -97,7 +97,7 @@ export default defineComponent({ handleQueries() { const query = new URLSearchParams(window.location.search); - + if (query.get('welcomeCard') == '1') { this.isWelcomeCardOpen = true; } @@ -108,7 +108,9 @@ export default defineComponent({ const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY); if (isWelcomeCardSeen == false && storageVersion == '') { - this.isWelcomeCardOpen = true; + setTimeout(() => { + this.isWelcomeCardOpen = true; + }, 1500); } try {