From c2a515c17cd3890c57da4deb8f1530630892094b Mon Sep 17 00:00:00 2001 From: Alexandre PETIT Date: Tue, 5 Mar 2024 16:29:34 +0100 Subject: [PATCH] Sync cache value with configurator --- frontend/src/assets/locales/en.json | 1 + frontend/src/assets/locales/fr.json | 1 + frontend/src/components/Config.vue | 75 ++++++++++++++++++++++-- frontend/src/objects/Fleet.ts | 1 + frontend/src/objects/stores/UserStore.ts | 8 +++ frontend/src/vue/form/InputText.vue | 1 + frontend/vite.config.ts | 5 -- 7 files changed, 82 insertions(+), 10 deletions(-) diff --git a/frontend/src/assets/locales/en.json b/frontend/src/assets/locales/en.json index ab879fb8..0822822a 100644 --- a/frontend/src/assets/locales/en.json +++ b/frontend/src/assets/locales/en.json @@ -7,6 +7,7 @@ }, "appName": "Better Fleet", "config": { + "devmode": "Activate developer mod", "lang": { "label": "Lang" }, diff --git a/frontend/src/assets/locales/fr.json b/frontend/src/assets/locales/fr.json index 4a14e0a4..dc07904b 100644 --- a/frontend/src/assets/locales/fr.json +++ b/frontend/src/assets/locales/fr.json @@ -7,6 +7,7 @@ }, "appName": "Better Fleet", "config": { + "devmode": "Activer le mode développeur", "lang": { "label": "Langue" }, diff --git a/frontend/src/components/Config.vue b/frontend/src/components/Config.vue index 2ba169b9..6ac979ec 100644 --- a/frontend/src/components/Config.vue +++ b/frontend/src/components/Config.vue @@ -13,18 +13,25 @@
+
+ +

{{ t('config.devmode') }}

+
- +
@@ -64,21 +71,43 @@ import {useI18n} from "vue-i18n"; import InputText from "@/vue/form/InputText.vue"; import SingleSelect from "@/vue/form/SingleSelect.vue"; import {SingleSelectInterface} from "@/vue/form/Inputs.ts"; -import {onMounted, ref} from "vue"; +import {onMounted, ref, watch} from "vue"; import fr from "@/assets/icons/locales/fr.svg" import en from "@/assets/icons/locales/en.svg" +import {UserStore} from "@/objects/stores/UserStore.ts"; +import {onBeforeRouteLeave} from "vue-router"; const {t, availableLocales} = useI18n(); const langOptions = ref({data: []}); +const devMode = ref(false) +const username = ref(UserStore.player.username) onMounted(() => { for (const locale of availableLocales) { langOptions.value.data.push({display: t('locales.' + locale), id: locale, image: getImgUrl(locale)}) } - langOptions.value.selectedValue = langOptions.value.data[0] + + if (UserStore.player.lang) { + langOptions.value.selectedValue = langOptions.value.data.filter(x => x.id == UserStore.player.lang)[0] + } else { + langOptions.value.selectedValue = langOptions.value.data[0] + } }); +watch(langOptions.value, () => { + UserStore.setLang(langOptions.value.selectedValue!.id) +}) + +onBeforeRouteLeave((to, from, next) => { + if (username.value.length == 0) { + next(false) + } else { + UserStore.player.username = username.value; + next() + } +}) + function getImgUrl(iconName: string): string { switch (iconName) { case "fr": @@ -124,6 +153,12 @@ function getImgUrl(iconName: string): string { padding: 16px 8px; //overflow: hidden; + .dev-mode-wrapper { + display: flex; + align-items: center; + gap: 12px; + } + h2 { font-family: BrushTip, sans-serif; color: var(--primary); @@ -148,6 +183,36 @@ function getImgUrl(iconName: string): string { gap: 24px; } } + + input[type="checkbox"] { + appearance: none; + border: 1px solid var(--primary); + border-radius: 4px; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + + &:before { + content: ''; + width: 10px; + transform: scale(0); + height: 10px; + background: var(--primary-text); + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + transform-origin: bottom left; + } + + &:checked { + background: var(--primary); + border: 2px solid var(--primary); + + &:before { + transform: scale(1); + } + } + } } &.credits { diff --git a/frontend/src/objects/Fleet.ts b/frontend/src/objects/Fleet.ts index 5af70fa4..ecbf285e 100644 --- a/frontend/src/objects/Fleet.ts +++ b/frontend/src/objects/Fleet.ts @@ -110,6 +110,7 @@ export interface Player extends Preferences { isMaster: boolean; fleet?: Fleet; sessionId?: string; + serverHostName?:string } export interface Preferences { diff --git a/frontend/src/objects/stores/UserStore.ts b/frontend/src/objects/stores/UserStore.ts index f22313ae..434ad952 100644 --- a/frontend/src/objects/stores/UserStore.ts +++ b/frontend/src/objects/stores/UserStore.ts @@ -13,9 +13,11 @@ export const UserStore = reactive({ this.player = defaultPlayerValue; this.player.username = readedPlayer.username; this.player.lang = readedPlayer.lang; + this.player.serverHostName = readedPlayer.serverHostName; if (!this.player.lang) this.player.lang = browserLang; if (!this.player.username) this.player.username = ""; + if (!this.player.serverHostName) this.player.serverHostName = import.meta.env.VITE_SOCKET_HOST; //@ts-ignore I18N typescript implementation i18n.global.locale.value = this.player.lang; @@ -24,4 +26,10 @@ export const UserStore = reactive({ setUser(user: Player) { this.player = user; }, + + setLang(lang: string) { + //@ts-ignore I18N typescript implementation + this.player.lang = lang; + i18n.global.locale.value = this.player.lang; + } }); diff --git a/frontend/src/vue/form/InputText.vue b/frontend/src/vue/form/InputText.vue index 02f40672..8b6ae937 100644 --- a/frontend/src/vue/form/InputText.vue +++ b/frontend/src/vue/form/InputText.vue @@ -66,6 +66,7 @@ function resetInput() { &.disabled { cursor: no-drop; background: rgba(23, 26, 33, 0.40); + color: var(--secondary-text); } input[type="text"] { diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 4857a098..f5a3feb4 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -20,11 +20,6 @@ export default defineConfig({ minify: !process.env.TAURI_DEBUG ? 'esbuild' : false, // produce sourcemaps for debug builds sourcemap: !!process.env.TAURI_DEBUG, - rollupOptions: { - output: { - assetFileNames: `assets/[name].[ext]` - } - } }, resolve: { alias: [