PlatziWordle con opción de reinicio

Curso de Programación Reactiva con RxJS

Contenido del curso

Fundamentos de programación reactiva

Introducción a la librería RxJS

Generación de Observables

Transformación con Operadores

Manejo de errores

29
Manejo de errores en RxJS
07:44 min

Peticiones HTTP con RxJS

Recomendaciones y conclusión

Bonus

35
Implementación de PlatziBoard en React
02:03 min

Despedida

36
Próximos pasos con RxJS
01:07 min

Tomar examen

PlatziWordle con opción de reinicio

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