Para ello, Visual Studio tiene una herramienta que se llama extensión, que no es sólo para eso, la realidad es que las extensiones en Visual Studio son complementos, son plugins que nos permiten mejorar la usabilidad, poder trabajar de forma más amena, más práctica y para evitar que cometamos errores.
Para ello entonces vamos a instalar una extensión que se llama Live Server, que nos permite tener recarga automática al momento de hacer cambios en el código, que es lo que estamos necesitando ahora mismo para evitar esos F5 continuos.
Para ello vamos en Visual Studio a este ícono que está aquí, que son las tres cajitas con una cajita adicional, que se llama extensión, venimos aquí, clicamos y nos sale una caja de edición para buscar. Hay muchas extensiones disponibles como te comentaba, en este caso se llama Live Server, van a salir algunas nombradas similar, seleccionamos la primera.
Entonces van a encontrarse con miles de extensiones que van a funcionar no solo en Visual Studio Code, en muchos otros editores de código, pero en este caso Live Server funciona para Visual Studio Code, que es la herramienta que les hemos sugerido para poder construir aquí nuestro juego secreto.
Así es, entonces yo voy a clicar aquí, Live Server, me muestra su presentación y está el botón Install, si por alguna razón ya estuviese instalado, me diría que está instalada, que ya puedo desinstalar o deshabilitar.
Ok, le damos a Install, allí ya está instalada lo que les comentaba, ahora sale la opción de Uninstall para desinstalar o deshabilitar.
Cerramos aquí, vamos a ejecutar nuestro archivo index.html, que es el archivo de interfaz que llama a nuestro archivo de JavaScript, entonces en este caso venimos en la sección de la izquierda, damos botón derecho y abrimos con Live Server el código html, el archivo que estamos allí.
¿Esa opción aparece porque justamente Leo activó la extensión?
Así es, esa opción ahora aparece, probablemente si ustedes prueban sin instalar, no van a tener esa opción, no se preocupen, instalándola va a salir.
Le damos clic en Live Server, él abre el navegador y vean que tiene la misma apariencia de lo que teníamos anteriormente, solo que hay una sutil diferencia, aquí tenemos nuestro código anterior que está con el nombre de un archivo local de la máquina de cada uno de nosotros, en este caso sale como una dirección web, porque él simula un servidor.
¿Qué pasa si cerramos la otra sólo para no generar confusiones?
Vamos a cerrarlo y haremos un pequeño cambio. Si probamos nuestro juego tal como está ahora, el número sería 6. ¿Qué te parece si lo cambiamos? ¿Te parece bien 8? Entonces, vamos a poner 8 aquí, guardamos y sin hacer nada más, ya está solicitando este número. Si intento con el 6, no es correcto.
Esto sucede porque el cambio que hiciste en el código lo guardaste en Visual Studio Code y automáticamente se renderizó en nuestro navegador gracias a Live Server.
Parece que Live Server, cuando tiene un alerta o un prompt, recarga la pantalla automáticamente. Tenemos que tener cuidado con eso. Voy a guardar nuevamente, voy a poner otro número solo para probar que funciona y ahora sí está esperando. Si pongo el 2, que es lo que está esperando en el código, me dice que es correcto.
Aquí solo vamos a recapitular esta última fase. Básicamente, lo que Leo explicó es que cuando el navegador tiene un pop-up, en este caso nuestro alerta, no hace esa renderización de manera automática. ¿Por qué? Porque hay un pop-up interfiriendo en la ejecución del código. Ese pop-up para toda la lectura y renderización del código.
Entonces, una vez que hayan jugado, independientemente de si acertaron o no, deben dar aceptar para que ese pop-up desaparezca y luego podamos ir al código, hacer los cambios que debamos hacer y nuestro Live Server podrá leer y renderizar automáticamente los últimos cambios que se hayan hecho. ¿Correcto, Leo?
