Añadir una librería

Clase 47 de 51 • Fundamentos de JavaScript 2017

Resumen

Casi terminamos nuestro juego, implementaremos la librería Sweet Alert para hacer más lindos nuestros mensajes al usuario.

En la sección de Enlaces encontrarás el sitio oficial de Sweet Alert para descargar la librería o ver la documentación.

Una vez añadida la librería la usaremos para todos nuestros alerts, algo así:

alert('Ganaste!') por return swal({ title: 'Ganaste!', type: 'success' })

Y ahora nuestro alert lucirá más lindo.

David Brito

student•

Dejo aquí mis modificaciones para quien las quiera:
https://github.com/dbritobcn/SimonSays
Demo: http://simon.davidbrito.com/

Le agregué:

Diferentes niveles de dificultad (mayor o menor velocidad y número de niveles)
Responsive design
Posibilidad de hacer click directamente en las teclas

David Brito

student•

Intenté meter los botones de dificultad en un swal, pero no supe como agregarle un listener a esos botones (que metí habilitando {html: true}), ya que creo que son generados en el DOM a posteriori, o algo por el estilo. Si alguien me quiere ayudar, estaría genial

Victor Hugo Cortés Posada

student•

Para utilizar el swal con los botones de dificultad, lo puedes hacer utilizando las promesas Using promises lo puedes ver en la misma documentación.

Aquí un ejemplo avanzado dentro de la misma documentación Customizing buttons

De tu código, realice unoa pequeños cambios para realizar el menú de dificultad con swal. Lo puedas revisar en el siguiente enlace codepen.io - Simón Dice

Abdiel David Dioses Curay

student•

Tras la actualización de SweetAlert, hay cambios para este video:

Ya no tenemos para descargar los archivos de la web, pero antes de nuestro script digitar:

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

-Para el alert cuando perdiste usaremos promesas como indica la documentación:

setTimeout ( function() {
              swal({
                title: 'Perdiste',
                text: '¿Quieres jugar de nuevo?'
              })
                .then((ok) =>{
                      if (ok) {
                      teclas = generarTeclas(niveles)
                      siguienteNivel(0)
                      }
              })
                }, 1000)

Manuel Andres Santizo Avila

student•

Un gran aporte! me sirvió muchisimo!

José Ricardo Romo Gutiérrez

student•

genial, estuve buscando en la documentacion por media hora, y a cada rato me decia que tenia un error con un segundo argumento. Ya cambiaron la manera de pasar parametros a Swal por una promesa. Me parece mejor.

Yefferson Guarnizo

student•

les comparto mi juego en versión Halloween, por eventos de click.

http://izofer.globso.co/games/1/

Abdiel David Dioses Curay

student•

te ha quedado genial, e intuitivo para presionar con el mouse

Yefferson Guarnizo

student•

Gracias 😃

Fco Castro

student•

SOLUCIONADO!! marzo 2018

Actualmente la librería no funciona así.

En mi caso se instala con(dentro del directorio):

npm install sweetalert --save

Luego se añade este script en el código, justo antes del nuestro:

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Y por último la clave type ya no se usa, sino que se usa la clave icon, con lo que queda:

function siguienteNivel(nivelActual) {
      if (nivelActual == niveles) {
        return swal({
          title: 'Ganaste',
          icon: 'success'  // ESTA CLAVE icon DIGO YO.
        })
      }
// Y el código continúa por aquí

Tenéis que REPASAR LA DOCUMENTACIÓN actual de la librería. , icon, no es la única clave que no coincide con el vídeo actualmente.

Espero que os sirva a los que leáis esto a partir de esta fecha.

VAMOOOSSSS !!!

nota:
La última pregunta se hace con , .then , así(en simple):

	swal({
              title: `Perdiste`,
              text: `Quieres jugar de nuevo?`
            })
            .then((ok) => {
              if (ok) {
                teclas = generarTeclas(niveles)
                siguienteNivel(0)
              }

Carlos Eduardo Estrada Guardado

student•

Excelente, solo agregando que si queremos ‘esconder’ los botones es necesario usar

buttons: false

Eden Gomez Gress

student•

Exelente aporte companero, solo una pregunta como curiosidad. Ya no se puede usar una funcion en lugar del metodo .then? Si es asi? Es porque la libreria va cambiando constantemente?

Lucio Flores

student•

Me hubiese gustado que el ejemplo no esté resuelto en el Html, sino en archivos Js, pero de forma modular.
Así poder observar bien como utilizar los exports, imports, convertir con babel y como luce luego de tener todo listo para producción.

Saludos.

Yeison Daza

student•

Justo eso lo vas a aprender en el curso de JavaScript Definitivo, sigue adelante 😃

Lucio Flores

student•

Si, vi el curso. Lo que yo pido es algo puntual que hace referencia a casi todo el contenido del curso. En el curso Definitivo se enfocan en una aplicación SPA,y yo lo que quiero es una página tradicional módular.

Kevin Lozoya Giner

student•

Pongo el código de la librería después de su actualización

swal({
          title: 'Perdiste',
          text: '¿Quieres jugar de nuevo?',
          buttons: {
            cancel: 'No',
            Sí: true
          }
        })
        .then((ok) => {
          if (ok) {
            teclas = generarTeclas(niveles)
            siguienteNivel(0)
          }
        })```

Evert Escalante

student•

Gracias justo lo que buscaba 😄

David Santiago González Ramos

student•

@slifsyc Reto completado!!! 😃
Hice pequeñas modificaciones en los delay de los setTimeOut y agregue la opción de que al ganar el usuario pueda volver a jugar
Comparto el código del script:

<script>
      const niveles = 15
      let teclas = generarTeclas(niveles)

      function siguienteNivel(nivelActual) {
      	if (nivelActual == niveles) {
         	return swal({
            title: 'Ganaste!',
            text: 'Quieres jugar otra vez?',
            type: 'success',
            showCancelButton: true,
            confirmButtonText: 'Sí',
            cancelButtonText: 'No',
            closeOnConfirm: true
         	}, function (ok) {
            		teclas = generarTeclas(niveles)
            		siguienteNivel(0)
          	})
        	}


         setTimeout( function () {

	      	swal({
	         	timer: 1500,
	         	title: `Nivel ${nivelActual + 1}`,
	         	showConfirmButton: false
	         })

          	for (let i = 0; i <= nivelActual; i++) {
            setTimeout(() => activate(teclas[i]), 
            1000 * (i+1) + 1500)
          	}

	      }, 800)
	       

	      let i = 0
	      let index = nivelActual
	      let teclaActual = teclas[index]
	      window.addEventListener('keydown', onkeydown)


         function onkeydown(ev) {

          	if (ev.keyCode == teclaActual) {

            	activate(teclaActual, { success: true })
            	i++
            	if (i > nivelActual) {
               window.removeEventListener('keydown', onkeydown)
               siguienteNivel(i)
             	}
             	index--
             	teclaActual = teclas[index]

            } 
            else {

            	activate(ev.keyCode, { fail: true })
            	window.removeEventListener('keydown', onkeydown)
            	swal({
               	title: 'Perdiste',
              		text: '¿Quieres jugar de nuevo?',
               	showCancelButton: true,
               	confirmButtonText: 'Sí',
               	cancelButtonText: 'No',
               	closeOnConfirm: true
             	}, function (ok) {
               	if (ok) {
                		teclas = generarTeclas(niveles)
                 		siguienteNivel(0)
               	}
             	})

            }

         }
      }

		siguienteNivel(0)

      function generarTeclas(niveles) {
      	return new Array(niveles).fill(0).map(generarTeclaAleatoria)
      }

      function generarTeclaAleatoria() {
       	const min = 65
       	const max = 90
        	return Math.round(Math.random() * (max - min) + min)
      }
      

      function getElementByKeyCode(keyCode) {
      	return document.querySelector(`[data-key="${keyCode}"]`)
      }

      function activate(keyCode, opts = {}) {

       	const el = getElementByKeyCode(keyCode)
        	el.classList.add('active')

        	if (opts.success) {
         	el.classList.add('success')
        	} 
        	
        	else if (opts.fail) {
         	el.classList.add('fail')
        	}
        	setTimeout(() => deactivate(el), 500)

      }

      function deactivate(el) {
        el.className = 'key'
      }

</script>

Daniel Sepulveda

student•

Para quienes Entran al Vídeo este es el código actualizado en javascript:

 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>
      const niveles = 15
      let teclas = generarTeclas(niveles)

      function siguienteNivel(nivelActual) {
        if (nivelActual == niveles) {
          return swal("Ganaste!", "Partida exitosa", "success")
        }

        swal({
          title:`Nivel ${nivelActual + 1}`,
          timer: 1000,
          showConfirmButton: false
         })

        for (let i = 0; i <= nivelActual; i++) {
          setTimeout(() => activate(teclas[i]),1000 * (i+1) + 1000)
        }
        let i = 0
        let teclaActual = teclas[i]
        window.addEventListener('keydown',onkeydown)
        
        function onkeydown(ev) {
          if(ev.keyCode == teclaActual) {
            activate(teclaActual, {success: true })
            i++
            if (i > nivelActual) {
              window.removeEventListener('keydown',onkeydown)
              setTimeout(() => siguienteNivel(i),1500) 
            }
            teclaActual = teclas[i]
          }
          else{
            activate(ev.keyCode, {fail: true})
            window.removeEventListener('keydown',onkeydown)
            swal({
              title: 'Perdiste',
              text: '¿Quieres jugar de nuevo?',
              buttons: ["Si", "No"],
              closeModal: true
            }).then((ok) => {
               	if (ok) {
                		teclas = generarTeclas(niveles)
                 		siguienteNivel(0)
               	}
             	})
          }
        }
      }

      siguienteNivel(0)

      function generarTeclas(niveles) {
        return new Array(niveles).fill(0).map(generarTeclaAleatoria)
      }

      function generarTeclaAleatoria() {
        const min = 65
        const max = 90
        return Math.round(Math.random() * (max - min) + min)
      }

      function getElementByKeyCode(keyCode) {
        return document.querySelector(`[data-key='${keyCode}']`)
      }

      function activate(keyCode, opts = {}) {
        const el = getElementByKeyCode(keyCode)
        el.classList.add('active')
        if (opts.success) {
          el.classList.add('success')
        }
        else if (opts.fail) {
          el.classList.add('fail')
        }
        setTimeout(() => deactivate(el), 500)
      }

      function deactivate(el) {
        el.className = 'key'
      }

    </script>

Wilson Romero

student•

Demo: http://demo.e-action.co/simon/
Github: https://github.com/e-action/simon

Aportes y mejoras:

Adición del voz al activar las teclas (Librería externa)
Espera que se termine la secuencia para recibir selección de teclas (El usuario presionaba las teclas al tiempo como se mostraba haciendo el juego muy fácil)
Actualización de SweetAlert a la version 2.1.0 (Manejo de promesas)
Responsive y niveles tomadas de los proyectos publicados en los comentarios

Jorge Giraldo Guerrero R.

student•

Cambio el link de descarga de https://sweetalert.js.org/

Favor me pueden dar la direccion de donde descargo las librerias? gracias

Fernando Pullutasig

student•

Tienes que instalar con el CDN pegando este link <script src=“https://unpkg.com/sweetalert/dist/sweetalert.min.js”></script> // debajo de la etiqueta title del html y te funciona igual que si lo hubieses descargado, en la misma página puedes ver la documentación en caso algo no te corra como se debe.

Saludos

Hebert lughi villafuerte ccacala

student•

exelente curso!! gracias sacha u.u 😦 me lloroooo

Pedro Caicedo

student•

Acá dejo el proyecto Simon Dice https://github.com/caicedo1089/SimonSays con un poco de refactory. Se muestran las 3 formas de definir clases en Javascript y un uso de los iteradores cuando se quiere obtener las keys iniciales.

Kevin Daniel Guzmán Delgadillo

student•

En las ultimas versiones de Sweet Alert se utilizan promesas asi que se hace uso del metodo then cuando se da aceptar o cancelar en cualquiera de los botones de la alerta 😄

Mateo Gomez

student•

alguien sabe como hacer import de la libreria sweetalert descargada desde npm?

siempre que lo intento en la consola me sale:
“Uncaught SyntaxError: Unexpected identifier”

Diego Forero

Team Platzi•

La estas importando como explica la documentación? https://sweetalert.js.org/guides/

Mateo Gomez

student•

lo que pasa es que estaba intentando agregar la libreria haciendo
import swal from 'sweetalert'
pero supongo que eso es unicamente cuando se trabaja con node.js, pero queria usar los archivos locales descargados de npm y no usar <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

lo solucioné poniendo la ruta directamente en el HTML <script src="node_modules/sweetalert/dist/sweetalert.min.js" charset="utf-8"></script>, sin hacer import

juan david jaramillo zuñiga

student•

como se pone el boton de “no” en caso de perder el juego con la nueva version de sweetalert?

Diego Forero

Team Platzi•

se definen así
buttons: ["foo", "bar"]

Donde el texto del boton de cancelar es foo y el de aceptar es bar

Jordy Rojas Aliaga

student•

de donde puedo buscar librerías similares, ya lo google pero quería preguntar si ustedes buscan de algún lugar en especifico o como se enteran de estas librerías ? gracias amigos 😃

Sergio Toshio Minei

student•

En lo personal siempre que busco una librería para una tarea específica lo hago por Google.

Pero si lo que deseas es una lista de librerías en donde puedas escoger lo puedes hacer en páginas como estas:

Jordy Rojas Aliaga

student•

@MineiToshio muchas gracias por los enlaces y sobretodo por compartirlo 😃

Cristian Camilo Cucunubá

student•

Comparto mi juego con modificaciones le agregue :

Niveles de dificultad
Estilos a las swal
Turno a el jugador

https://cristiancucunuba.github.io/keyboard-game/

Oqueber Diazar Navarro Perez

student•

Asi quedan las sentencia despues de la actualizacion de sweetAlert

swal({
    icon : "error",
    tittle: "Perdiste :(",
    text:"¿Quieres jugar de nuevo?",
    buttons: {
        cancel: "No",
        Si: true
    }
}).then((ok) => {
        if(ok){
            teclas = generarTeclas(niveles);
            siguienteNivel(0);
        }
    })

José Vinicio Flores Arias

student•

Hola, les dejo aqui mi proyecto lo edite un poco para lograr un mini juego de palabras con niveles y un diccionario les dejo el codigo. Este curso fue de lo mejor ❤️!

Github: https://github.com/Xfirepc/WriteWordsJS

PD: Si alguien me ayuda a obtener un dominio personal o alguna idea dejare el juego aqui: https://xfirepc.000webhostapp.com

José Vinicio Flores Arias

student•

Actualizo con github.io ❤️
https://xfirepc.github.io/writewords/

Mateo Gomez

student•

Hola!
Este es mi proyecto con el reto que propone sacha al final del video.
Al inicio pregunta por el nivel de dificultad, donde fácil es el juego normal y difícil es oprimiendo las teclas al revés

Link al proyecto en codepen.io

Añadir una librería

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial

Casi terminamos nuestro juego, implementaremos la librería Sweet Alert para hacer más lindos nuestros mensajes al usuario.