consulte el enlace para comprender la aplicación - https://assets.ccbp.in/frontend/content/react-js/emoji-game-output.gif -
npm installnpm startLa aplicación debe tener las siguientes funcionalidades.
La puntuación y la puntuación total del juego actual deben ser 0 inicialmente.
Cuando se hace clic en un emoji
Si el emoji en el que se hizo clic no es el mismo que cualquiera de los emojis en los que se hizo clic anteriormente, entonces la puntuación debe aumentarse en 1 .
Si se hace clic en todos los emojis exactamente una vez
Si el emoji en el que se hizo clic es el mismo que cualquiera de los emojis en los que se hizo clic anteriormente
El estado del juego junto con el puntaje actual y el botón Jugar de nuevo deben mostrarse como se muestra en el archivo de diseño (el juego se pierde) .
Si la puntuación obtenida en el juego actual es mayor que las puntuaciones anteriores, entonces la puntuación máxima debe actualizarse en consecuencia.
Cuando se hace clic en el botón Jugar de nuevo , deberíamos poder volver a jugar.
El botón Jugar de nuevo debería restablecer el juego y la puntuación, pero no el valor de puntuación máxima .
La lista de emojis se pasa al componente EmojiGame como una emojisList de utilería en forma de objeto de matriz.
Cada objeto emoji tendrá las siguientes propiedades
| Llave | Tipo de datos |
|---|---|
| identificación | Número |
| emojiNombre | Cadena |
| emojiUrl | Cadena |
El valor de la id de la clave en el objeto emoji debe usarse como clave para el componente EmojiCard .
El valor de la clave emojiName en el objeto emoji debe usarse como texto alternativo para la imagen emoji .
Su tarea es completar la implementación de
src/components/EmojiGame/index.jssrc/components/EmojiGame/index.csssrc/components/NavBar/index.jssrc/components/NavBar/index.csssrc/components/EmojiCard/index.jssrc/components/EmojiCard/index.csssrc/components/WinOrLoseCard/index.jssrc/components/WinOrLoseCard/index.css La propiedad CSS del cursor establece el tipo de cursor del mouse, si lo hay, para mostrar cuando el puntero del mouse está sobre un elemento. Utilice el cursor de propiedad CSS con un pointer de valor para indicar un enlace. Haga clic aquí para saber más.
Un contorno es una línea que se dibuja alrededor de un elemento, fuera del borde. La propiedad abreviada CSS del esquema establece todas las propiedades del esquema. Utilice el outline de propiedad CSS con valor none para ocultar todas las propiedades del esquema. Haga clic aquí para saber más.
###La aplicación es completamente responsiva (diseño web responsivo)
