🎉 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 está en 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);
});
Marcelo Arias
Profesor
SANTIAGO SIERRA HERRERA
Andres Eduardo Maneiro Antunez
Jorge Luis Silva Medina
🎉 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 está en la lista!`; return; }
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
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); });