No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

PlatziWordle con opci贸n de reinicio

28/36
Recursos

Aportes 4

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Me perdi intentando seguir la linea de la explicaci贸n.
Ademas aparece un c贸digo que no estaba en la ultima clase y se confunde uno al tratar de ubicarse.
El constante cambio entre los 2 proyectos hace perder el enfoque.
Toca mejorar alli, es confuso por lo menos para mi

馃帀 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.

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 esten la lista!`;
      return;
    }

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);
});