Ejercicio clases Dungeons & Dragons

Vamos a hacer una especie de juego antiguo de dragones y mazmorras. Tendremos un tablero y en medio estará nuestro héroe. Puede moverse en todas las direcciones y en principio no sabe lo que se va a encontrar. Hay tesoros (que sirven para incrementar nuestra potencia) y monstruos (con los que peleamos). Si derrotamos a todos los monstruos hemos ganado.

Antes de empezar nos pedirá el tamaño del tablero (ancho y alto) aunque tendremos valores por defecto. También el número de monstruos y de tesoros. Se crea el tablero se coloca al héroe y se piden movimientos hasta que el usuario escriba ‘FIN’, se derroten a todos los monstruos o nos muramos.

Cada vez que proporcionamos un movimiento (U,D,L,R) movemos al héroe a esa posición. Las posiciones que no se han visitado se muestran con asterisco, las visitadas se dejan en blanco.

Cuando el héroe encuentra un tesoro se le da el mensaje, las monedas que ha ganado y cuanto se ha incrementado la potencia. Se le pide que pulse una tecla para continuar.

Cuando el héroe encuentra un monstruo se le avisa, se calcula quien ha ganado (un porcentaje respecto a la potencia) y pueden pasar dos cosas:
1.- Gana el héroe: se incrementa su potencia
2.- Pierde el héroe: Se acaba el juego y se le pregunta si quiere volver a empezar.

Esto sería lo básico. Posibles mejoras:

1.- Poción de vida. Si el usuario las encuentra y lo mata un monstruo puede seguir la partida.
2.- Poción de visión: Si el usuario la usa cuando le toca su movimiento puede ver lo que tiene a su alrededor.
3.- Modificar el enfrentamiento para que sea por turnos y que reste ‘vida’ dependiendo de la potencia. Esto nos permitiría tener monstruos con más personalidad (mucha vida pero poca potencia, poca vida pero mucha potencia)
4.- Que las monedas no te den automáticamente potencia, sino que te permitan comprar más vida o más potencia (u otras cosas que se nos puedan ocurrir)
5.- Modo automático: el héroe se mueve a través del tablero aleatoriamente y nos va mostrando los mensajes sin que tengamos que intervenir.
6.- Mundo infinito: Poner puertas en los lados del tablero que nos permitan ir a otras habitaciones que se irán generando.

Ejercicios Java

Escribir una función que invierta el orden de los caracteres de una cadena dada.

Escribir una función que cuente el número de veces que se repite un carácter específico en una cadena dada.

Escribir una función que elimine los espacios en blanco al principio y al final de una cadena dada.

Escribir una función que compruebe si una cadena es un palíndromo (una palabra o frase que se lee igual de izquierda a derecha y de derecha a izquierda).

Escribir una función que elimine todas las ocurrencias de una subcadena específica de una cadena dada.

Escribir una función que reemplace todas las ocurrencias de un carácter específico en una cadena dada con otro carácter.

https://github.com/juanpfuentes/Java/blob/main/src/java/strings.md

Mini ejercicio react

Descargar el código de la cesta de la compra:

https://github.com/PacktPublishing/React—The-Complete-Guide-includes-Hooks-React-Router-and-Redux-Second-Edition/tree/main/Section%2011/code/12-finished

Y añadimos las siguientes mejoras:

1.- Botón en la cesta para eliminar completamente un producto
2.- Si la compra es superior a 1000 que se muestre un aviso de que se puede pagar en tres plazos
3.- Poder filtrar las carnes por el nombre.

Truco para eliminar listeners de funciones flechas

Básicamente cambiar el prototype para que internamente guarde un Symbol (id única) y nos permita eliminarlas:

(function()
{
    let target = EventTarget.prototype;
    let functionName = 'addEventListener';
    let func = target[functionName];

    let symbolHidden = Symbol('hidden');

    function hidden(instance)
    {
        if(instance[symbolHidden] === undefined)
        {
            let area = {};
            instance[symbolHidden] = area;
            return area;
        }

        return instance[symbolHidden];
    }

    function listenersFrom(instance)
    {
        let area = hidden(instance);
        if(!area.listeners) { area.listeners = []; }
        return area.listeners;
    }

    target[functionName] = function(type, listener)
    {
        let listeners = listenersFrom(this);

        listeners.push({ type, listener });

        func.apply(this, [type, listener]);
    };

    target['removeEventListeners'] = function(targetType)
    {
        let self = this;

        let listeners = listenersFrom(this);
        let removed = [];

        listeners.forEach(item =>
        {
            let type = item.type;
            let listener = item.listener;

            if(type == targetType)
            {
                self.removeEventListener(type, listener);
            }
        });
    };
})();

document.addEventListener("DOMContentLoaded", event => { console.log('event 1'); });
document.addEventListener("DOMContentLoaded", event => { console.log('event 2'); });
document.addEventListener("click", event => { console.log('click event'); });

document.dispatchEvent(new Event('DOMContentLoaded'));
document.removeEventListeners('DOMContentLoaded');
document.dispatchEvent(new Event('DOMContentLoaded'));

Ejercicio useReducer

Vamos a crear un formulario con dos inputs de type number y cuatro botones para sumar, restar, dividir y multiplicar. El resultado se mostrará en un div.

Para la lógica usaremos useReducer

React router

En una aplicación de React, el enrutamiento es la habilidad de mostrar diferentes componentes según la URL actual. Puedes usar una librería de enrutamiento como React Router para manejar el enrutamiento en tu aplicación de React.

Para usar React Router, primero debes instalarlo mediante npm o yarn:

npm install react-router-dom

Una vez que hayas instalado React Router, puedes importar los componentes BrowserRouter, Route y Link y usarlos en tu aplicación.

BrowserRouter es un componente que proporciona un contexto de enrutamiento para tu aplicación. Debe ser el componente padre de todos los componentes de enrutamiento.

import { BrowserRouter } from 'react-router-dom';

Route es un componente que se usa para definir una ruta. Cada Route tiene un atributo path que indica qué URL debe mostrar el componente correspondiente.

import { Route } from 'react-router-dom';

Link es un componente que se utiliza para crear enlaces entre diferentes rutas de tu aplicación. A diferencia de los enlaces tradicionales , los enlaces de React Router no recargan la página completa cuando se hacen clic.

import { Link } from 'react-router-dom';

Aquí hay un ejemplo de cómo utilizar estos componentes para configurar el enrutamiento en una aplicación de React:

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';

import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </BrowserRouter>
  );
}

export default App;

En este ejemplo se tiene un componente principal App que envuelve toda la aplicación en un BrowserRouter componente. Dentro de éste se tiene un navegador con tres links, cada uno apuntando a una ruta diferente, el componente Route se usa para definir las rutas y se le especifica que componente se tiene que cargar.

https://www.w3schools.com/react/react_router.asp
https://pablomonteserin.com/curso/react/react-router/
https://guias.makeitreal.camp/react/react-router