Username length & Tooltip (#112)

webapp/src/assets/locales/de.json

@@ -42,6 +42,12 @@
     "unsupportedMedia": {
       "content": "Das Medium, das Sie senden möchten, wird von der Anwendung nicht unterstützt",
       "title": "Nicht unterstützte Medien"
+    },
+    "username": {
+      "length": {
+        "content": "",
+        "title": ""
+      }
     }
   },
   "appName": "Bessere Flotte",
@@ -129,5 +135,12 @@
       "ready": "Bereit",
       "waiting": "Warten"
     }
+  },
+  "tooltips": {
+    "navbar": {
+      "config": "",
+      "fleet": "",
+      "home": ""
+    }
   }
 }

webapp/src/assets/locales/en.json

@@ -42,6 +42,12 @@
     "unsupportedMedia": {
       "content": "The media you are trying to send is not supported by the application",
       "title": "Unsupported media"
+    },
+    "username": {
+      "length": {
+        "content": "",
+        "title": ""
+      }
     }
   },
   "appName": "Better Fleet",
@@ -129,5 +135,12 @@
       "ready": "Ready",
       "waiting": "Waiting"
     }
+  },
+  "tooltips": {
+    "navbar": {
+      "config": "",
+      "fleet": "",
+      "home": ""
+    }
   }
 }

webapp/src/assets/locales/es.json

@@ -42,6 +42,12 @@
     "unsupportedMedia": {
       "content": "El medio que estás intentando enviar no es compatible con la aplicación.",
       "title": "Medios no compatibles"
+    },
+    "username": {
+      "length": {
+        "content": "",
+        "title": ""
+      }
     }
   },
   "appName": "Mejor flota",
@@ -129,5 +135,12 @@
       "ready": "Listo",
       "waiting": "Espera"
     }
+  },
+  "tooltips": {
+    "navbar": {
+      "config": "",
+      "fleet": "",
+      "home": ""
+    }
   }
 }

webapp/src/assets/locales/fr.json

@@ -42,6 +42,12 @@
     "unsupportedMedia": {
       "content": "Le média que vous tentez d'envoyer n'est pas supporté par l'application",
       "title": "Média non supporté"
+    },
+    "username": {
+      "length": {
+        "content": "Le pseudonyme ne doit pas dépasser 16 caractères et ne dois pas etre vide",
+        "title": "Mauvais format de pseudo"
+      }
     }
   },
   "appName": "Better Fleet",
@@ -129,5 +135,12 @@
       "ready": "Prêt",
       "waiting": "En attente"
     }
+  },
+  "tooltips": {
+    "navbar": {
+      "config": "Page de configuration",
+      "fleet": "Session",
+      "home": "Page d'acceuil"
+    }
   }
 }

webapp/src/components/Config.vue

@@ -13,25 +13,25 @@
         <div class="content-wrapper">
           <div class="side-content">
             <InputText
-              v-model:input-value="username"
-              :placeholder="t('config.name.placeholder')"
-              :label="t('config.name.label')"
+                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" />
+              <input type="checkbox" v-model="devMode"/>
               <p>{{ t("config.devmode") }}</p>
             </div>
             <InputText
-              v-model:input-value="UserStore.player.serverHostName"
-              :placeholder="t('config.server.placeholder')"
-              :label="t('config.server.label')"
-              :lock="!devMode"
+                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')"
-              v-model:data="langOptions"
+                :label="t('config.lang.label')"
+                v-model:data="langOptions"
             />
           </div>
         </div>
@@ -52,10 +52,10 @@
         <div class="social-wrapper">
           <p>{{ t("credits.socials") }}</p>
           <a href="https://discord.gg/sHPp5CPxf2" target="_blank"
-            ><img src="@/assets/icons/discord.svg"
+          ><img src="@/assets/icons/discord.svg"
           /></a>
           <a href="https://github.com/zelytra/BetterFleet" target="_blank"
-            ><img src="@/assets/icons/github.svg"
+          ><img src="@/assets/icons/github.svg"
           /></a>
         </div>
         <p class="light">
@@ -68,23 +68,25 @@
 
 <script setup lang="ts">
 import BannerTemplate from "@/vue/templates/BannerTemplate.vue";
-import { useI18n } from "vue-i18n";
+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, watch } from "vue";
+import {SingleSelectInterface} from "@/vue/form/Inputs.ts";
+import {inject, onMounted, ref, watch} from "vue";
 
 import fr from "@/assets/icons/locales/fr.svg";
 import de from "@/assets/icons/locales/de.svg";
 import es from "@/assets/icons/locales/es.svg";
 import en from "@/assets/icons/locales/en.svg";
-import { UserStore } from "@/objects/stores/UserStore.ts";
-import { onBeforeRouteLeave } from "vue-router";
+import {UserStore} from "@/objects/stores/UserStore.ts";
+import {onBeforeRouteLeave} from "vue-router";
+import {AlertProvider, AlertType} from "@/vue/alert/Alert.ts";
 
-const { t, availableLocales } = useI18n();
-const langOptions = ref<SingleSelectInterface>({ data: [] });
+const {t, availableLocales} = useI18n();
+const langOptions = ref<SingleSelectInterface>({data: []});
 const devMode = ref<boolean>(false);
 const username = ref<string>(UserStore.player.username);
+const alerts = inject<AlertProvider>("alertProvider");
 
 onMounted(() => {
   for (const locale of availableLocales) {
@@ -97,7 +99,7 @@ onMounted(() => {
 
   if (UserStore.player.lang) {
     langOptions.value.selectedValue = langOptions.value.data.filter(
-      (x) => x.id == UserStore.player.lang,
+        (x) => x.id == UserStore.player.lang,
     )[0];
   } else {
     langOptions.value.selectedValue = langOptions.value.data[0];
@@ -109,8 +111,13 @@ watch(langOptions.value, () => {
 });
 
 onBeforeRouteLeave((_to, _from, next) => {
-  if (username.value.length == 0) {
+  if (username.value.length == 0 || username.value.length >= 16) {
     next(false);
+    alerts!.sendAlert({
+      content: t('alert.username.length.content'),
+      title: t('alert.username.length.title'),
+      type: AlertType.ERROR
+    })
   } else {
     UserStore.player.username = username.value;
     next();
@@ -214,12 +221,12 @@ function getImgUrl(iconName: string): string {
             height: 10px;
             background: var(--primary-text);
             clip-path: polygon(
-              14% 44%,
-              0 65%,
-              50% 100%,
-              100% 16%,
-              80% 0%,
-              43% 62%
+                    14% 44%,
+                    0 65%,
+                    50% 100%,
+                    100% 16%,
+                    80% 0%,
+                    43% 62%
             );
             transform-origin: bottom left;
           }

webapp/src/components/global/Header.vue

@@ -6,6 +6,7 @@
         :key="route.name"
         class="router-link"
         :to="route.path"
+        :title="route.meta.tooltip"
       >
         <img
           v-if="route.meta"

webapp/src/router/index.ts

@@ -5,42 +5,51 @@ import config from "@/assets/icons/config.svg"
 import sot from "@/assets/icons/logo.svg"
 import Fleet from "@/components/Fleet.vue";
 import Config from "@/components/Config.vue";
+import i18n from "@/objects/i18n";
 
 declare module 'vue-router' {
-    interface RouteMeta {
-        icon?: string,
-        role?: string
-    }
+  interface RouteMeta {
+    icon?: string,
+    role?: string,
+    tooltip?: string
+  }
 }
 
+const {t} = i18n.global;
+
 export const routes = [
-    {
-        path: "/",
-        name: "Home",
-        component: Home,
-        meta: {icon: sot}
-    },
-    {
-        path: "/fleet",
-        name: "Fleet",
-        component: Fleet,
-        meta: {
-            icon: fleet
-        }
-    }, {
-        path: "/config",
-        name: "Config",
-        component: Config,
-        meta: {
-            icon: config
-        }
-    },
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+    meta: {
+      icon: sot,
+      tooltip: t('tooltips.navbar.home')
+    }
+  },
+  {
+    path: "/fleet",
+    name: "Fleet",
+    component: Fleet,
+    meta: {
+      icon: fleet,
+      tooltip: t('tooltips.navbar.fleet')
+    }
+  }, {
+    path: "/config",
+    name: "Config",
+    component: Config,
+    meta: {
+      icon: config,
+      tooltip: t('tooltips.navbar.config')
+    }
+  },
 
 ];
 
 export const router = createRouter({
-    history: createWebHistory(),
-    routes,
+  history: createWebHistory(),
+  routes,
 });
 
 export default router;