Calculadora de experiencia Eidolon

🎮 Pequeño helper para la comunidad de AuraKingdom de varios servers 🇪🇸 🇧🇷 🇬🇧 🇫🇷 🇩🇪

Click here for the english version of this readme.

---

Puede visitar este proyecto deployado aqui.

En ReactJS

Creado con create-react-app. Las librerias de Bootstrap son tomadas de su CDN 😊

Special Input

Un imput númerico con dos estilos en uno. Ideal para valores monetarios, porcentajes, etc., donde se requiera diferenciar las partes para un mejor entendimieto del cliente, ya sea con otro tamaño, otro color, etc.

Multilenguaje

El sitio web se encuentra en español, inglés, portugués, francés y alemán. Las traducciones fueron realizadas con herramientas de internet y verificadas con mis limitados conocimientos. Es posible que haya errores de dialecto 😥

En principio utilizaría i18next, pero la configurción y el poder de esta herramienta era inmenso para lo que es el proyecto 😅. Por ello me diseñe mi propia infraestructura para los idiomas. Simples JSON, ordenados como se ordenan los componentes de react para mayor comodidad a la hora de presentar y/o comparar las traducciones.

Orden y uso: ejemplo

Estructura de carpetas

- src
   |- components
   |     └ Header.jsx
   └- lang
         └ Header.json

Header.json

{
  "welcome":{
    "es": "Bienvenido",
    "en": "Welcome",
    "fr": "Bienvenue"
  }
}

Header.jsx

import TXT from '../lang/Header.json'

function Header(props) {
  const lang = props.lang;
  return (
      <h1>{ TXT.welcome[lang] }</h1>
  );
}

export default Header;

La propiedad lang viene heredado desde el componente más alto del proyecto (App.jsx), donde tiene su 'default' establecido.
En este proyecto se puede encontrar el componente Lang que es, basicamente, un <select> que cambiara el state de App y con ello todos los textos existentes. Y gracias al DOM virtual de React, esto sucede instantaneamente 😲

---

🎠 Todo proyecto de mi autoría es de libre uso y mejora para quién desee hacerlo
Hecho con amor por CrystalMoon ❤️