Finalización del Proyecto PlatziWordle

Clase 14 de 36 • Curso de Programación Reactiva con RxJS

Marcelo Arias

teacher•

Avanzamos aquí unos últimos detalles de PlatziWordle.

En esta clase ya hemos integrado el observador deleteLetter (o removeLetter) enfocado a eliminar la última letra de la palabra cuando el usuario presiona la tecla Borrar.

🔗 Puedes ver el código de ese observador aquí.

Otros cambios que realizamos:

Agregar una caja de mensajes al usuario.
Expandir las funciones del observador checkWord agregando colores de fondo para las letras de una palabra (gris, verde y amarillo).

Víctor Andrés Córdova Poma

student•

Hola comunidad, estuve haciendo el proyecto a la par con el profesor. Pero estuve aplicando lo aprendido en los cursos de Ts, ello incluye POO. Así que si quieren darle un vistazo aquí está el repositorio. Posdata: tiene errores al momento de perder, ganar o reiniciar el wordle. Ya que aún no he visto como se manejan los errores por desuscribir un observable.

Andrés Villarraga

student•

Mi función de checkWord:

// Posterior a validar la tecla enter
messageText.textContent = ''

// Informar las letras que faltan
if (userAnswers.length !== 5) {
	messageText.textContent = `¡Hacen falta ${5 - userAnswers.length} letras!`
	return;
}

// Si la respuesta es correcta, usar el Subject (no requiere iterar)
if(userAnswers.join('') === correctWord) {
	userWinOrLoose$.next();
	return;
}

// Si la respuesta no es correcta, verificar cada letra
const letterBox = [...letterRows[letterRowIndex].children]
userAnswers.forEach((value, index) => {
	const letterStatus = correctWord.indexOf(value)
	letterBox[index].classList.add(
`letter-${ ( letterStatus === -1 ? 'grey' : ( index === letterStatus ? 'green' : 'yellow') ) }`
	)
})

letterRowIndex++;
userAnswers = [];
letterColumnIndex = 0;

Queda una parte pendiente, los duplicados, en palabras como GALAS, marca la 2da A como amarillo aunque esté en la posición correcta porque IndexOf devuelve el Index de la primera coincidencia, aún no lo resuelvo.

Andrés Villarraga

student•

Ya lo resolví :sweat_smile:, creé esta función para buscar todos los Indices en la palabra (debería haber un getAllIndexOf() en JS):

const getAllIndexOf = (word, character) => {
    let letterIndex = []
    let currentIndex = -1
    do {
        currentIndex = word.indexOf(character, currentIndex+1)
        currentIndex !== -1 && letterIndex.push(currentIndex)
    } while (currentIndex !== -1)
    return !letterIndex.length ? -1 : letterIndex
}

con esta función la parte de verificar por letra quedaría así:

// Si la respuesta no es correcta, verificar cada letra
const letterBox = [...letterRows[letterRowIndex].children]
userAnswers.forEach((value, index) => {
		const letterStatus = getAllIndexOf(correctWord, value)
		letterBox[index].classList.add(
				`letter-${
					( letterStatus === -1 ? 'grey' :
						( letterStatus.includes(index) ? 'green' : 'yellow')
					)
				}`
		)
})

// Posterior a validar la tecla enter
messageText.textContent = ''

// Informar las letras que faltan
if (userAnswers.length !== 5) {
	messageText.textContent = `¡Hacen falta ${5 - userAnswers.length} letras!`
	return;
}

// Si la respuesta es correcta, usar el Subject (no requiere iterar)
if(userAnswers.join('') === correctWord) {
	userWinOrLoose$.next();
	return;
}

// Si la respuesta no es correcta, verificar cada letra
const letterBox = [...letterRows[letterRowIndex].children]
userAnswers.forEach((value, index) => {
	const letterStatus = correctWord.indexOf(value)
	letterBox[index].classList.add(
`letter-${ ( letterStatus === -1 ? 'grey' : ( index === letterStatus ? 'green' : 'yellow') ) }`
	)
})

letterRowIndex++;
userAnswers = [];
letterColumnIndex = 0;

const getAllIndexOf = (word, character) => {
    let letterIndex = []
    let currentIndex = -1
    do {
        currentIndex = word.indexOf(character, currentIndex+1)
        currentIndex !== -1 && letterIndex.push(currentIndex)
    } while (currentIndex !== -1)
    return !letterIndex.length ? -1 : letterIndex
}

// Si la respuesta no es correcta, verificar cada letra
const letterBox = [...letterRows[letterRowIndex].children]
userAnswers.forEach((value, index) => {
		const letterStatus = getAllIndexOf(correctWord, value)
		letterBox[index].classList.add(
				`letter-${
					( letterStatus === -1 ? 'grey' :
						( letterStatus.includes(index) ? 'green' : 'yellow')
					)
				}`
		)
})

Finalización del Proyecto PlatziWordle

Fundamentos de programación reactiva

¿Por qué deberías aprender programación reactiva con RxJS?

La teoría de la programación reactiva

Introducción a la librería RxJS

Extensiones Reactivas

La idea de la reactividad

Diagrama de canicas

Generación de Observables

Creación de un Observable

Introducción al Proyecto PlatziWordle

Observables: fromEvent

Aplicación de fromEvent en PlatziWordle

Observables: Subject

Aplicación de Subject en PlatziWordle

Observables: from y of

Observables: interval y time

Finalización del Proyecto PlatziWordle

Transformación con Operadores

Introducción al Proyecto PlatziBoard

La idea de un Operador

Operadores: map, reduce y filter

Aplicación de map en PlatziBoard

Operadores de distinción

Operadores de tiempo

Operadores: mergeAll, mergeMap

Aplicación de mergeAll en PlatziBoard

Operadores: takeUntil

Aplicación de TakeUntil en PlatziBoard.

Operadores: pluck

Operadores: startWith, endWith

Finalización del Proyecto PlatziBoard

PlatziWordle con opción de reinicio

Manejo de errores

Manejo de errores en RxJS

Peticiones HTTP con RxJS

ajax

fromFetch

Recomendaciones y conclusión

Documentación de RxJS

Programación Reactiva con RxJS: Fundamentos y Operadores

Recomendaciones y futuro de RxJS

Bonus

Implementación de PlatziBoard en React

Despedida

Próximos pasos con RxJS