# Proyecto Juegos

Pagina web, hacha con React + Vite, usando como backend/server un archivo JSON

## Backend/Server

Para el backend he usado un archivo json, donde están todos los juegos que se van a mostrar en la página web.

El archivo se llama juegos.json, y está en un carpeta llamada backend, a la misma altura que la src. Tiene un total de 20 juegos almacenados.

La estructura del json es la siguiente.

```json
{
    "videojuegos": [
      {
        "id": 1,
        "nombre": "Elden Ring",
        "descripcion": "Un RPG de acción y fantasía desarrollado por FromSoftware.",
        "fecha_lanzamiento": "2022-02-25",
        "compania": "FromSoftware",
        "plataformas": ["PC", "PS5", "Xbox One"],
        "categorias": ["Rol", "Aventura"],
        "precio": 59.99,
        "url_imagen": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmgL25VnwHiKYRwmZRO4rrB2CeqUGKHWRTJA&s"
        
      },
      {
        "id": 2,
        "nombre": "Hollow Knight",
        "descripcion": "Un metroidvania de acción y plataformas con un arte hermoso.",
        "fecha_lanzamiento": "2017-02-24",
        "compania": "Team Cherry",
        "plataformas": ["PC", "Switch", "PS5", "Xbox One"],
        "categorias": ["Plataformas", "Aventura"],
        "precio": 14.99,
        "url_imagen": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRf9Hh4CadaxNTsBUBc_LTxG1uj-BToDFueEg&s"
      }
    ]
}
```

## Componenetes

### Componenete Header/Cabecera

Este componenete, como su nombre indica, funciona como cabecera de la pagina web. En el podemos encontrar el titulo, una caja de texto para buscar un juego, y el filtro de búqueda por Categorías.

Para el filtro de las Categorias, tenenmos otro componenete, llamado Filtro Categorias, el cual contiene la lógica para que el filtro funcione.

![alt text](image.png)

### Componente Lista Juegos

Este podemos decir que es el componenete principal de la página. En el es donde se muestran los juegos que hay en el JSON.

Aquí se cargan algunos de los datos del juego, como por ejemplo, el nombre y la imagen de la portada entre otros. Ademas debajo de cada juego hay un botón, el cual muestra un deplegable con el resto de la información del juego correspondiente.

En este componente se anida otro componenete, llamado Juego, al cual pertenece el botón mencionado antes.

![alt text](image-1.png)

### Componenete Juego

En este componenete, se maneja el estado del botón de más informacio, pudienjdo estar cerrado, donde solo se muestra el botón, o abierto, donde se muestra el resto de información del juego, desplegando hacia la parte inferior la card o contenedor del juego.

También tenemos un botón de borrado, que eliminará el juego del archivo JSON.

![alt text](image-2.png)