Cursos Empresas Blog Live Conf Precios

Aplicación de fromEvent en PlatziWordle

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

Aplicación de fromEvent en PlatziWordle

Me adelanté un poco e implementé que se pueda agregar las letras en la siguiente row. Además, usé Typescript.

import "../src/styles/main.css"
import { fromEvent } from "rxjs";

const onKey$ = fromEvent<KeyboardEvent>(document, "keydown"); //Se crea el observable que lanza un
//evento cuando se presione una tecla.

const wordleRows: Element[] = Array.from(document.querySelectorAll(".wordle__row"));


const regex: RegExp = /[a-z]/i;

class Wordle {

	constructor(
		private maxIndex: number,
		private maxRow: number,
		private index: number = 0,
		private rowIndex: number = 0,
	){
		this.maxIndex--;
		this.maxRow--;
	}

	private alterWordle = (addingLetter: boolean): void => {
		if (addingLetter) {
			if (this.maxIndex > this.index) {
				this.alterIndex(true);
			} else {
				this.alterIndex(true, true);
				this.alterRowIndex(true);
			}
		} else {
			if (this.index === 0 && this.rowIndex !== 0) {
				this.alterIndex(false, false);
				this.alterRowIndex(false);
			} else if(this.index !== 0){
				this.alterIndex(false);
			}
		}
	}

	public writeLetter = (letter: string): void => {

		wordleRows[this.rowIndex].children[this.index].textContent = letter.toUpperCase();
		this.alterWordle(true);
	};

	public deleteLetter = () => {
		this.alterWordle(false);
		wordleRows[this.rowIndex].children[this.index].textContent = " ";
	};

	private alterIndex = (isIncreasing: boolean, atBeginning?: boolean): void => {
		if (atBeginning === undefined) {
			if(isIncreasing) {
				this.index++;
			} else {
				this.index--;
			}
		} else {
			if (isIncreasing && atBeginning){
				this.index = 0;
			} else if (!isIncreasing && !atBeginning){
				this.index = this.maxIndex;
			}
		}

	}

	private alterRowIndex = (isIncreasing: boolean): void => {
		if(isIncreasing && this.rowIndex < this.maxRow) {
			this.rowIndex++;
		} else if (isIncreasing && this.rowIndex !== 0){
			this.rowIndex--;
		}
	}

}

const wordle = new Wordle(5, 6);

const observatorLetter = { //Se crea el observador que indica como usará la data obtenida.
	next: (event: KeyboardEvent) => {
		const keyPressed = event.key;

		if (keyPressed.match(regex) && keyPressed.length === 1) {
			wordle.writeLetter(keyPressed);
		}
	},
	complete: () => {
		console.log("There is no more events");
	},
	error: (error: Error) => {
		console.log("Something went wrong: ", error.message);
	}
}

const observatorBackSpace = { //Se crea el observador que indica como usará la data obtenida.
	next: (event: KeyboardEvent) => {
		const keyPressed = event.key;

		if (keyPressed === "Backspace") {
			wordle.deleteLetter();
		}
	},
	complete: () => {
		console.log("There is no more events");
	},
	error: (error: Error) => {
		console.log("Something went wrong: ", error.message);
	}
}

onKey$.subscribe(observatorLetter); //Se subscribe el observador al observable.
onKey$.subscribe(observatorBackSpace);

Aporte platzi wordle

Hola a tod@s. Aquí mi aportación. He llevado la implementación a una clase que crea una instancia de cada row y encapsula todo su comportamiento. De esta forma, en cada nuevo intento crearemos una nueva instancia pasándole el elemento .letter_row correspondiente. En el futuro, si añadimos un teclado virtual o más posibles comportamientos, quizás sería interesante valorar añadir un patrón command para gestionar los diferentes comandos (escribir, borrar, confirmar, pegar, clickar una tecla en el teclado virtual, etc). Aquí va el código:

import {fromEvent, Observable} from "rxjs";

class LetterRow {
  private index: number = 0;
  private onKeyDown$: Observable<Event> = fromEvent(document, 'keydown');

  private constructor(public readonly element: Element) {
    this.onKeyDown$.subscribe({
      next: (event: any) => {
        switch(event.key) {
          case 'Backspace':
            this.delete();
            break;
          default:
            this.type(event.key);
        }
      }
    });
  }

  static create(element: Element) {
    LetterRow.validate(element);
    return new LetterRow(element);
  }

  static validate(element: Element): void {
    if (!element) {
      throw new Error('No valid element');
    }
  }

  private type(key: string): void {
    if (this.isEndOfRow()) return;
    const pressedKey: string = key.toUpperCase();
    if (pressedKey.length === 1 && pressedKey.match(/[A-Z]/)) {
      let letterBox: Element = this.element.children[this.index];
      letterBox.textContent = pressedKey;
      letterBox.classList.add('filled-letter');
      this.moveForward();
    }
  }

  private delete(): void {
    let letterBox: Element = this.element.children[this.index - 1];
    letterBox.textContent = '';
    letterBox.classList.remove('filled-letter');
    this.moveBackward();
  }

  private moveForward(): void {
    if (this.isEndOfRow()) return;
    this.index++;
  }

  private moveBackward(): void {
    if (this.index <= 0) return;
    this.index--;
  }

  private isEndOfRow(): boolean {
    return this.index >= this.element.children.length;
  }
}

const letterRows: HTMLCollection = document.getElementsByClassName('letter-row');
let letterRowIndex = 0;
const row: LetterRow = LetterRow.create(Array.from(letterRows)[letterRowIndex]);

//importanto operador fromEvent

import {fromEvent} from 'rxjs';
const letterRow= document.querySelectorAll('.letter-row');

const onKeyDown$=fromEvent(document,'keydown');

let letterIndex=0;
let letterRowIndex=0;

const insertLetter={
    next:(event)=>{
        const pressedKey=event.key;
        if(pressedKey.length===1 && pressedKey.match(/[a-z]+/gi)){
            let letterBox=Array.from(letterRow)[0].children[letterIndex];
            letterBox.textContent=pressedKey;
            letterBox.classList.add('filled-letter');
            letterIndex++;
        }
        //console.log(event);
    },
}

const deleteLetter={
    next:(event)=>{
        if(event.keyCode === 8){
            let deleteLetterBox=Array.from(letterRow)[0].children[letterIndex-1];
            deleteLetterBox.textContent='';
            deleteLetterBox.classList.remove('filled-letter');
            letterIndex--;
        }
    }
}




onKeyDown$.subscribe(insertLetter);
onKeyDown$.subscribe(deleteLetter);

```//importanto operador fromEvent
import {fromEvent} from 'rxjs';const letterRow= document.querySelectorAll('.letter-row');
const onKeyDown$=fromEvent(document,'keydown');
let letterIndex=0;let letterRowIndex=0;
const insertLetter={    next:(event)=>{        const pressedKey=event.key;        if(pressedKey.length===1 && pressedKey.match(/\[a-z]+/gi)){            let letterBox=Array.from(letterRow)\[0].children\[letterIndex];            letterBox.textContent=pressedKey;            letterBox.classList.add('filled-letter');            letterIndex++;        }        //console.log(event);    },}
const deleteLetter={    next:(event)=>{        if(event.keyCode === 8){            let deleteLetterBox=Array.from(letterRow)\[0].children\[letterIndex-1];            deleteLetterBox.textContent='';            deleteLetterBox.classList.remove('filled-letter');            letterIndex--;        }    }}



onKeyDown$.subscribe(insertLetter);onKeyDown$.subscribe(deleteLetter);