Sync cache value with configurator

zelytra · Mar 5, 2024 · 8d77197 · 8d77197
1 parent feb6c85
commit 8d77197
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 10 deletions.
diff --git 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
@@ -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
@@ -13,18 +13,25 @@
         <div class="content-wrapper">
           <div class="side-content">
             <InputText
-                input-value=""
+                v-model:input-value="username"
                 :placeholder="t('config.name.placeholder')"
                 :label="t('config.name.label')"
             />
+            <div class="dev-mode-wrapper">
+              <input type="checkbox"
+                     v-model="devMode"
+              />
+              <p>{{ t('config.devmode') }}</p>
+            </div>
             <InputText
-                input-value=""
+                v-model:input-value="UserStore.player.serverHostName"
                 :placeholder="t('config.server.placeholder')"
                 :label="t('config.server.label')"
+                :lock="!devMode"
             />
           </div>
           <div class="side-content">
-            <SingleSelect :label="t('config.lang.label')" :data="langOptions"/>
+            <SingleSelect :label="t('config.lang.label')" v-model:data="langOptions"/>
           </div>
         </div>
       </div>
@@ -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<SingleSelectInterface>({data: []});
+const devMode = ref<boolean>(false)
+const username = ref<string>(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
@@ -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
@@ -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
@@ -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
@@ -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: [