PlatziWordle con opción de reinicio

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

Marcelo Arias

teacher•

🎉 Finalmente implementaremos los últimos detalles de PlatziWordle como un botón de reinicio para volver a jugar adivinando una palabra aleatoria nueva.

Para ello usaremos el observable restartGame$ para configurar el inicio del juego cuando carga la página por primera vez y cuando presionamos el botón de Reiniciar.

📁 Puedes ver el código de esta clase en el repositorio.

SANTIAGO SIERRA HERRERA

student•

Creo que este pedazo de código daña la lógica del juego. Funciona mejor removiéndolo

if (!WORDS_LIST.includes(userAnswer.join(""))) {
      messageText.textContent = `¡La palabra ${userAnswer
        .join("")
        .toUpperCase()} no está en la lista!`;
      return;
    }

Andres Eduardo Maneiro Antunez

student•

Yo tambien note ese error justo cuando lo escribio, hace un return de la condicion pero no ejecuta nada de la logica que haga que salte a la siguiente linea

Jorge Luis Silva Medina

student•

Hola, aqui esta el código, corregido. Algunas condiciones no estaban en el lugar correcto para que dejaran ejecutar el flujo de check world. Espero y les sirva, cualquier duda me comentan.

const { fromEvent, map, filter, Subject, takeUntil, merge } = require("rxjs");
import WORD_LIST from "./words-list.json";

const restartButton = document.getElementById("restart-button");
const letterRows = document.getElementsByClassName("letter-row");
const onKeyDown$ = fromEvent(document, "keydown");
const messageText = document.getElementById("message-text");
const getLetterPressed$ = map((x) => x.key);
const upperCase$ = map((x) => x.toUpperCase());
const getRandomWord = () =>
  WORD_LIST[Math.floor(Math.random() * WORD_LIST.length)];

let letterIndex = 0;
let letterRowIndex = 0;
let userAnswer = [];
let rightWord = getRandomWord();
const userWinOrLoose$ = new Subject();

const insertLetter = {
  next: (pressedKey) => {
    let letterBox =
      Array.from(letterRows)[letterRowIndex].children[letterIndex];
    letterBox.textContent = pressedKey;
    letterBox.classList.add("filled-letter");
    userAnswer.push(pressedKey);
    letterIndex++;
  },
};

const removeLetter = {
  next: () => {
    let letterBox =
      Array.from(letterRows)[letterRowIndex].children[letterIndex];
    letterBox.textContent = "";
    letterBox.classList.remove("filled-letter");
    userAnswer.pop();
    if (letterIndex > 0) letterIndex--;
  },
};

const checkWord = {
  next: () => {
    console.log(`User answer: ${userAnswer} - Right word: ${rightWord}`);
    messageText.textContent = "";

    if (userAnswer.length !== 5) {
      messageText.textContent =
        userAnswer.length === 4
          ? "Te falta una letra!"
          : `Te faltan ${5 - userAnswer.length} letras!`;
      return;
    }

    const rightWordArray = Array.from(rightWord);
    userAnswer.map((_, i) => {
      let letterColor = "";
      let letterBox = Array.from(letterRows)[letterRowIndex].children[i];
      let letterPosition = rightWordArray.indexOf(userAnswer[i]);
      if (letterPosition === -1) {
        letterColor = "letter-grey";
      } else {
        if (rightWordArray[i] === userAnswer[i]) {
          letterColor = "letter-green";
        } else {
          letterColor = "letter-yellow";
        }
      }

      letterBox.classList.add(letterColor);
    });
    const isRightAnswer = userAnswer.join("") === rightWord;

    if (!WORD_LIST.includes(userAnswer.join("")) && !isRightAnswer) {
      messageText.textContent = `La palabra ${userAnswer.join(
        ""
      )} no esta en la lista, intenta de nuevo`;
    }

    if (isRightAnswer) {
      messageText.textContent = `😊 ¡Sí! La palabra ${rightWord.toUpperCase()} es la correcta`;
      userWinOrLoose$.next();
      restartButton.disabled = false;
    } else {
      if (letterRowIndex === 5) {
        messageText.textContent = `😭 Perdiste. La palabra  correcta era: ${rightWord.toUpperCase()}`;
        userWinOrLoose$.next();
        restartButton.disabled = false;
      } else {
        letterIndex = 0;
        letterRowIndex++;
        userAnswer = [];
      }
      return;
    }
  },
};

const insertLetter$ = onKeyDown$.pipe(
  getLetterPressed$,
  upperCase$,
  filter(
    (pressedKey) =>
      pressedKey.length === 1 && pressedKey.match(/[a-z]/i) && letterIndex < 5
  )
);

const removeLetter$ = onKeyDown$.pipe(
  getLetterPressed$,
  upperCase$,
  filter((key) => key === "BACKSPACE")
);

const checkWord$ = onKeyDown$.pipe(
  getLetterPressed$,
  upperCase$,
  filter((key) => key === "ENTER" && letterRowIndex < 6)
);

userWinOrLoose$.subscribe(() => {
  let letterRowsWinned = Array.from(letterRows)[letterRowIndex];
  for (let i = 0; i < 5; i++) {
    letterRowsWinned.children[i].classList.add("letter-green");
  }
});

const onWindowLoad$ = fromEvent(window, "load");
const onRestartClick$ = fromEvent(restartButton, "click");

const restartGame$ = merge(onWindowLoad$, onRestartClick$);

restartGame$.subscribe(() => {
  Array.from(letterRows).map((row) => {
    Array.from(row.children).map((letterBox) => {
      letterBox.textContent = "";
      letterBox.classList = "letter";
    });
  });
  letterIndex = 0;
  letterRowIndex = 0;
  userAnswer = [];
  rightWord = getRandomWord();
  messageText.textContent = "";
  restartButton.disabled = true;

  console.log(`Right word: ${rightWord}`);

  // Ahora suscribimos los observables, pero antes los encadenamos con takeUntil(userWinOrLoose$):
  // ✅ De esa forma, cuando se ejecuta userWinOrLoose$.next() (ver línea 85, línea 94), se completarán
  // los observables devueltos por insertLetter$, checkWord$, removeLetter$.
  let insertLetterSubscription = insertLetter$
    .pipe(takeUntil(userWinOrLoose$))
    .subscribe(insertLetter);
  let removerLetterSubscription = removeLetter$
    .pipe(takeUntil(userWinOrLoose$))
    .subscribe(removeLetter);
  let checkWordSubscription = checkWord$
    .pipe(takeUntil(userWinOrLoose$))
    .subscribe(checkWord);
});

const { fromEvent, map, filter, Subject, takeUntil, merge } = require("rxjs");
import WORD_LIST from "./words-list.json";

const restartButton = document.getElementById("restart-button");
const letterRows = document.getElementsByClassName("letter-row");
const onKeyDown$ = fromEvent(document, "keydown");
const messageText = document.getElementById("message-text");
const getLetterPressed$ = map((x) => x.key);
const upperCase$ = map((x) => x.toUpperCase());
const getRandomWord = () =>
  WORD_LIST[Math.floor(Math.random() * WORD_LIST.length)];

let letterIndex = 0;
let letterRowIndex = 0;
let userAnswer = [];
let rightWord = getRandomWord();
const userWinOrLoose$ = new Subject();

const insertLetter = {
  next: (pressedKey) => {
    let letterBox =
      Array.from(letterRows)[letterRowIndex].children[letterIndex];
    letterBox.textContent = pressedKey;
    letterBox.classList.add("filled-letter");
    userAnswer.push(pressedKey);
    letterIndex++;
  },
};

const removeLetter = {
  next: () => {
    let letterBox =
      Array.from(letterRows)[letterRowIndex].children[letterIndex];
    letterBox.textContent = "";
    letterBox.classList.remove("filled-letter");
    userAnswer.pop();
    if (letterIndex > 0) letterIndex--;
  },
};

const checkWord = {
  next: () => {
    console.log(`User answer: ${userAnswer} - Right word: ${rightWord}`);
    messageText.textContent = "";

    if (userAnswer.length !== 5) {
      messageText.textContent =
        userAnswer.length === 4
          ? "Te falta una letra!"
          : `Te faltan ${5 - userAnswer.length} letras!`;
      return;
    }

    const rightWordArray = Array.from(rightWord);
    userAnswer.map((_, i) => {
      let letterColor = "";
      let letterBox = Array.from(letterRows)[letterRowIndex].children[i];
      let letterPosition = rightWordArray.indexOf(userAnswer[i]);
      if (letterPosition === -1) {
        letterColor = "letter-grey";
      } else {
        if (rightWordArray[i] === userAnswer[i]) {
          letterColor = "letter-green";
        } else {
          letterColor = "letter-yellow";
        }
      }

      letterBox.classList.add(letterColor);
    });
    const isRightAnswer = userAnswer.join("") === rightWord;

    if (!WORD_LIST.includes(userAnswer.join("")) && !isRightAnswer) {
      messageText.textContent = `La palabra ${userAnswer.join(
        ""
      )} no esta en la lista, intenta de nuevo`;
    }

    if (isRightAnswer) {
      messageText.textContent = `😊 ¡Sí! La palabra ${rightWord.toUpperCase()} es la correcta`;
      userWinOrLoose$.next();
      restartButton.disabled = false;
    } else {
      if (letterRowIndex === 5) {
        messageText.textContent = `😭 Perdiste. La palabra  correcta era: ${rightWord.toUpperCase()}`;
        userWinOrLoose$.next();
        restartButton.disabled = false;
      } else {
        letterIndex = 0;
        letterRowIndex++;
        userAnswer = [];
      }
      return;
    }
  },
};

const insertLetter$ = onKeyDown$.pipe(
  getLetterPressed$,
  upperCase$,
  filter(
    (pressedKey) =>
      pressedKey.length === 1 && pressedKey.match(/[a-z]/i) && letterIndex < 5
  )
);

const removeLetter$ = onKeyDown$.pipe(
  getLetterPressed$,
  upperCase$,
  filter((key) => key === "BACKSPACE")
);

const checkWord$ = onKeyDown$.pipe(
  getLetterPressed$,
  upperCase$,
  filter((key) => key === "ENTER" && letterRowIndex < 6)
);

userWinOrLoose$.subscribe(() => {
  let letterRowsWinned = Array.from(letterRows)[letterRowIndex];
  for (let i = 0; i < 5; i++) {
    letterRowsWinned.children[i].classList.add("letter-green");
  }
});

const onWindowLoad$ = fromEvent(window, "load");
const onRestartClick$ = fromEvent(restartButton, "click");

const restartGame$ = merge(onWindowLoad$, onRestartClick$);

restartGame$.subscribe(() => {
  Array.from(letterRows).map((row) => {
    Array.from(row.children).map((letterBox) => {
      letterBox.textContent = "";
      letterBox.classList = "letter";
    });
  });
  letterIndex = 0;
  letterRowIndex = 0;
  userAnswer = [];
  rightWord = getRandomWord();
  messageText.textContent = "";
  restartButton.disabled = true;

  console.log(`Right word: ${rightWord}`);

  // Ahora suscribimos los observables, pero antes los encadenamos con takeUntil(userWinOrLoose$):
  // ✅ De esa forma, cuando se ejecuta userWinOrLoose$.next() (ver línea 85, línea 94), se completarán
  // los observables devueltos por insertLetter$, checkWord$, removeLetter$.
  let insertLetterSubscription = insertLetter$
    .pipe(takeUntil(userWinOrLoose$))
    .subscribe(insertLetter);
  let removerLetterSubscription = removeLetter$
    .pipe(takeUntil(userWinOrLoose$))
    .subscribe(removeLetter);
  let checkWordSubscription = checkWord$
    .pipe(takeUntil(userWinOrLoose$))
    .subscribe(checkWord);
});

PlatziWordle con opción de reinicio

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