Crear popup de bienvenida (Stepper con info, tutorial interactivo, configuraciones, etc)

[ominousg]

Esbozo general

Popup hecho con React+MUI+Stepper en el borde inferior donde cada step es un icono representando el tema a tratar. Se muestra solamente cuando creó un pj logeando por primera vez. Estos temas tienen su título en el borde superior, y también se puede leer el título hovereando el icono (tooltip) en el stepper. Todo respetando el design system de dakara-client. Se puede revisitar el tutorial clickeando el icono "?" a la derecha de la interfaz. Desactivar este popup en ambiente de desarrollo.

El PJ es considerado nuevo si cumple con estas condiciones: ser nivel 1 + en el localStorage el valor de la key akin to "hasFinishedTutorial" es 0. En ese caso, no puede cerrar el popup hasta que haya completado todos los steps.

Posibles temas (steps):

1 - Introducción con icono de mano saludando: texto de bienvenida, inspirado en el Argentum Online MMORPG argentino, open source, links a discord, ig, etc.

2 - Gameplay con icono de papiro/manual: explicación básica del servidor (solo texto y links).

3 - Performance/Renderizado con icono de tuerca: info sobre WebGPU, WebGL, Canvas, recomendaciones sobre mejorar FPS en PCs viejas, explicación sobre diferentes opciones del popup de configuración relacionadas a performance/renderizado, etc.

4 - Configuración de teclado con icono de teclado, estilo AOLibre: se da la opción de usar la configuración de teclas convencional del AO o WASD. Incluye dos imágenes de los teclados con las teclas relevantes.

5 - Tutorial con icono de sombrero de mago/espada dependiendo de la clase: tiene varias vistas que se desbloquean clickeando en "Siguiente" (que está deshabilitado e invisible hasta que se cumpla el objetivo), pero todo forma parte del mismo step. Se va a usar mucho el focuseo en la interfaz derecha para comunicar cuales son las partes relevantes. Focuseo = aumentar el brillo en el objetivo y disminuirlo en las partes irrelevantes, jugar con la transparencia, box shadow, etc. Siempre la tecla a usar depende de lo que eligió en el step de configuración de teclado, y tiene un estilado específico. Empieza el tutorial interactivo:

• Se enseña para que sirven las potas y cómo se usan: a medida que ocurre la explicación, se highlightean la barra de vida y maná (si es clase mágica/semi-mágica). Después debe clickear en el slot highlighteado de la pocion roja y presionar {Tecla de Usar} un par de veces. Hay una narración mínima explicando que es lo que va ocurriendo y lo que hay que hacer. Incluye feedback audiovisuales dentro del popup, por ej se ve que un NPC le pega a un personaje con una barra de vida que se va rellenando a medida que el usuario potea. Suenan los wavs correspondientes. Todas las animaciones deben ser pre-fetcheadas cuando se llega al step 2, y si no están listas, hay que renderizar un loading spinner. El botón de Siguiente es renderizado cuando poteó lo suficiente para completar la barra de vida.

• Se enseña lo básico del combate: cómo equipar y desequipar un item + cómo lanzar un hechizo y atacar cuerpo a cuerpo, con sus highlighteos, animaciones y sonidos correspondientes.

Caveats:

• En las aperturas de los servidores suele haber acumulación de PJs recien creados en la ciudad. Mientras el popup de bienvenida está abierto, el usuario no debe poder moverse. Un workaround para evitar que haya tantos PJs quietos es que solamente respawneen en el mapa una vez que hayan cerrado el popup.

• Si el primer PJ de un usuario nuevo es no-mágico, no va a realizar el tutorial de lanzar hechizo. Si se crea otro PJ mágico/semi, no va a ver el popup de bienvenida porque el valor de su localStorage key akin to "hasFinishedTutorial" es 1. Hay varios workarounds: definir si completó el tutorial siendo clase no-mágica o no / mostrar mensaje avisando que no hizo el tutorial para su clase y si quiere realizarlo, etc.