fix: refinning pseudo validation logic commit issues

Author: Tydesigner007

src/assets/js/pseudoValidation.js

@@ -308,7 +308,7 @@ const PROFANITY_WORDS = [
 /**
  * Validates a pseudo (username) and returns an error code or null if valid
  * @param {string} pseudo - The username to validate
- * @returns {string|null} - Error code ('tooShort', 'tooLong', 'profanity') or null if valid
+ * @returns {string|null} - Error code ('tooShort', 'profanity') or null if valid
  */
 function validatePseudo(pseudo) {
   const trimmed = pseudo.trim();
@@ -318,11 +318,6 @@ function validatePseudo(pseudo) {
     return 'tooShort';
   }
 
-  // Check maximum length
-  if (trimmed.length > PSEUDO_MAX_LENGTH) {
-    return 'tooLong';
-  }
-
   // Check for profanity - convert to lowercase for comparison
   const pseudoLower = trimmed.toLowerCase();
 
@@ -359,20 +354,16 @@ function validatePseudo(pseudo) {
 }
 
 /**
- * Gets the error message for a given error code
- * @param {string} errorCode - The error code ('tooShort', 'tooLong', 'profanity')
- * @returns {string} - The localized error message
+ * Returns the translation key for a given error code
+ * @param {string} errorCode - The error code ('tooShort', 'profanity')
+ * @returns {string} - The translation key
  */
 function getPseudoErrorMessage(errorCode) {
-  if (!errorCode) return '';
-
   switch (errorCode) {
     case 'tooShort':
-      return i18next.t('welcome.errorPseudoTooShort', { min: PSEUDO_MIN_LENGTH });
-    case 'tooLong':
-      return i18next.t('welcome.errorPseudoTooLong', { max: PSEUDO_MAX_LENGTH });
+      return 'welcome.errorPseudoTooShort';
     case 'profanity':
-      return i18next.t('welcome.errorPseudoProfanity');
+      return 'welcome.errorPseudoProfanity';
     default:
       return '';
   }
@@ -389,16 +380,13 @@ function displayPseudoError(errorCode, errorContainer) {
   if (errorCode) {
     const errorMessage = getPseudoErrorMessage(errorCode);
     errorContainer.innerHTML = `
-      <div class="alert alert-danger fade show mt-2" role="alert">
-        <span class="alert-icon" aria-hidden="true"></span>
-        <div class="alert-container">
-          <div class="alert-text-container">
-            <p class="alert-label m-0">${errorMessage}</p>
-          </div>
-        </div>
+      <div class="alert alert-danger alert-sm mt-2" role="alert">
+        <span class="alert-icon"><span class="visually-hidden">Error</span></span>
+        <p data-i18n="${errorMessage}"></p>
       </div>
     `;
     errorContainer.classList.remove('d-none');
+    updateTranslations();
   } else {
     errorContainer.innerHTML = '';
     errorContainer.classList.add('d-none');

src/index.html

@@ -102,7 +102,7 @@ <h4 class="mt-3" id="pseudoLabel" data-i18n="welcome.pseudo"></h4>
     </form>
   </div>
   <div class="ms-5 col-4">
-    <img src="assets/img/Start.svg" alt="" role="presentation">
+    <img src="assets/img/Start.svg" alt="">
   </div>
 </main>
 

src/locales/en.json

@@ -49,8 +49,7 @@
     "placeholder_enterPseudo": "Enter your nickname",
     "oninvalid_errorMessageEmptyPseudo": "this.setCustomValidity(\"Please enter a nickname\")",
     "buttonStartAdventure": "Start the adventure",
-    "errorPseudoTooShort": "Nickname must be at least {min} characters.",
-    "errorPseudoTooLong": "Nickname must not exceed {max} characters.",
+    "errorPseudoTooShort": "Nickname must be at least 3 characters.",
     "errorPseudoProfanity": "This nickname contains inappropriate terms. Please choose another one."
   },
   "intro": {

src/locales/es.json

@@ -50,7 +50,6 @@
       "oninvalid_errorMessageEmptyPseudo": "this.setCustomValidity(\"Por favor, indica un apodo\")",
       "buttonStartAdventure": "Iniciar la aventura",
       "errorPseudoTooShort": "El apodo debe tener al menos 3 caracteres.",
-      "errorPseudoTooLong": "El apodo no debe superar los 20 caracteres.",
       "errorPseudoProfanity": "Este apodo contiene términos inapropiados. Por favor, elige otro."
   },
   "intro": {

src/locales/fr.json

@@ -50,7 +50,6 @@
     "oninvalid_errorMessageEmptyPseudo": "this.setCustomValidity(\"Merci d'entrer un pseudo\")",
     "buttonStartAdventure": "Démarrer l'aventure",
     "errorPseudoTooShort": "Le pseudo doit contenir au moins 3 caractères.",
-    "errorPseudoTooLong": "Le pseudo ne doit pas dépasser 20 caractères.",
     "errorPseudoProfanity": "Ce pseudo contient des termes inappropriés. Veuillez en choisir un autre."
   },
   "intro": {