Laboratoria · estefanymoramellado · Jul 29, 2024 · Jul 29, 2024 · Jul 29, 2024 · Jul 29, 2024
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,24 +5,27 @@
   "license": "MIT",
   "scripts": {
     "htmlhint": "htmlhint src/*.html test/*.html",
-    "eslint": "eslint --ext .js src/ test/",
-    "pretest": "npm run eslint && npm run htmlhint",
-    "test": "jest --verbose --coverage test/",
+    "pretest": "npm run eslint",
+    "test": "jest",
+    "eslint": "eslint --ext .js src/",
     "open-coverage-report": "opener ./coverage/lcov-report/index.html",
     "start": "serve src/ -s"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
     "@babel/plugin-transform-modules-commonjs": "^7.6.0",
+    "@playwright/test": "^1.46.1",
     "acorn": "^8.8.2",
     "babel-jest": "^27.0.1",
     "css": "^3.0.0",
     "eslint": "^8.3.0",
+    "eslint-plugin-import": "^2.29.1",
     "gh-pages": "^3.1.0",
     "htmlhint": "^1.0.0",
-    "jest": "^27.0.1",
+    "jest": "^27.5.1",
     "jsdom": "^22.1.0",
     "opener": "^1.5.1",
+    "prettier": "^3.3.3",
     "serve": "^14.2.1"
   },
   "engines": {
@@ -36,4 +39,4 @@
     "version": "9.1.1",
     "commit": "1843c213affffa12aa456fa8842b6d28f97de2d3"
   }
-}
+}
diff --git a/src/Data/dataset.js b/src/Data/dataset.js
diff --git a/src/components/card.js b/src/components/card.js
@@ -0,0 +1,24 @@
+export default function renderCard(item) {
+  const li = document.createElement("li");
+  li.classList.add("card-list");
+  li.innerHTML = `
+    <div>
+          <h2 itemprop="nombre">${item.name} (${item.shortDescription})</h2>
+
+        <div class="div-item">
+            <img itemprop="image" src="${item.imageUrl}" alt="${item.name}">     
+
+           <div class="item-facts">
+              <p class="date"><strong>Fecha de nacimiento:</strong> <span itemprop="birthDate">${item.facts.fechaDeNacimiento}</span></p>
+              <p class="sign"><strong>Signo Zodiacal:</strong> <span itemprop="zodiacSign">${item.facts.signoZodiacal}</span></p>
+
+            </div>
+        </div>
+        <div class="description">
+         <p class="type"><strong>Tipo de Guardiana:</strong> <span itemprop="guardianType">${item.facts.tipoDeGuardiana}</span></p>
+         <h3 itemprop="description"> ${item.description}</h3>
+        </div>
+    </div>
+`;
+  return li;
+}
diff --git a/src/components/filters.js b/src/components/filters.js
@@ -0,0 +1,15 @@
+export default function filterComponent() {
+  const filterEl = document.createElement("select");
+  filterEl.setAttribute("id", "filterBy");
+  filterEl.innerHTML = `
+      <option value="">Tipo Guardián</option>
+      <option value="">Selecciona una opción</option>
+      <option value="guardian sistema solar interno">Guardian Sistema Solar Interno</option>
+      <option value="guardian sistema solar externo">Guardian Sistema Solar Externo</option>
+      <option value="guardian fuera del sistema solar">Guardian Fuera Sistema Solar</option>
+      <option value="protectores">Protectores</option>
+      <option value="gato guardian">Gato Guardian</option>
+      <option value="enemigos">Enemigos</option>
+  `;
+  return filterEl;
+}
diff --git a/src/components/order.js b/src/components/order.js
@@ -0,0 +1,11 @@
+export default function Order() {
+  const sortEl = document.createElement("select");
+  sortEl.setAttribute("id", "sortBy");
+  sortEl.innerHTML = `
+        <option value="vacio">Orden</option>
+        <option value="vacio">Selecciona una opción</option>
+        <option value="asc"> Orden A-Z </option>
+        <option value="desc"> Orden Z-A </option>
+    `;
+  return sortEl;
+}
diff --git a/src/images/banner.jpg b/src/images/banner.jpg
diff --git a/src/images/cat.png b/src/images/cat.png
diff --git a/src/images/cats.png b/src/images/cats.png
diff --git a/src/images/logobanner.png b/src/images/logobanner.png
diff --git a/src/images/logosailor1.png b/src/images/logosailor1.png
diff --git a/src/images/prototipo.jpg b/src/images/prototipo.jpg
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,42 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Dataverse Chat</title>
-    <!--Aquí puedes importar tu archivo de CSS para agregar estilos.-->
-  </head>
-  <body>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>Dataverse Chat</title>
+
+  <link rel="stylesheet" href="styles/styles.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Fresca&display=swap" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Handjet:[email protected]&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+    rel="stylesheet" />
+  <link rel="stylesheet" href="styles/styleCards.css" />
+</head>
+
+<body>
+  <nav>
+    <a href="/" data-link>Home</a>
+    <a href="/character" data-link>Personajes</a>
+    <a href="/groupChat" data-link>Chat Sailor</a>
+    <a href="/viewApi" data-link>ApiKey</a>
+  </nav>
+
+  <main>
     <div id="root"></div>
-    <script src="index.js" type="module"></script>
-  </body>
+  </main>
+
+  <footer>
+    <p>Creación: Estefany Mora &copy; 2024</p>
+  </footer>
+
+  <script src="index.js" type="module"></script>
+
+</body>
+
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,19 +1,29 @@
-// En este archivo definirás tus rutas e importarás los componentes que vas a renderizar.
+import Home from "./views/home.js";
+import Character from "./views/characterOld.js";
+import ErrorView from "./views/errorView.js";
+import viewApi from "./views/viewApi.js";
+import renderChat from "./views/chat.js";
+import { setRootEl, setRoutes, onURLChange } from "./router.js";
 
-/*
-import Example from './views/Example.js';
-
-Ejemplo de definición de rutas:
+//CONFIGURAR EL ROUTER
 
+// Define las rutas
 const routes = {
-    "/": Example,
-    ...
-}
-*/
+  "/": Home,
+  "/character": Character,
+  "/errorView": ErrorView,
+  "/viewApi": viewApi,
+  "/chat": renderChat,
+};
+
+// Asigna rutas
+setRoutes(routes);
 
-/*
-TODO:
-1.- Definir rutas en router.
-2.- Pasar "root element" a router.
-3.- Invocar el router para renderizar la vista correcta.
-*/
+// Configura el elemento raíz
+window.addEventListener("DOMContentLoaded", () => {
+  const rootElement = document.getElementById("root"); 
+  if (rootElement) {
+    setRootEl(rootElement);
+    onURLChange(window.location); // Entrega la ubicacion actual
+  } 
+});
diff --git a/src/lib/apiKey.js b/src/lib/apiKey.js
@@ -0,0 +1,8 @@
+export const getApiKey = () => {
+  const apiKey = localStorage.getItem("apiKey");
+  return apiKey;
+};
+
+export const setApiKey = (key) => {
+  localStorage.setItem("apiKey", key);
+};
diff --git a/src/lib/comunicateApiKey.js b/src/lib/comunicateApiKey.js
@@ -0,0 +1,42 @@
+import { getApiKey } from "./apiKey.js";
+
+export const communicateWithApi = (messages, characterId, name) => {
+  return fetch("https://api.openai.com/v1/chat/completions", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${getApiKey()}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      model: "gpt-3.5-turbo",
+      messages: [
+        {
+          role: "system",
+          content: `Eres una sailor ${name}. Responde como si fueras ${name}`,
+        },
+        {
+          role: "user",
+          content: `Character ID: ${characterId}. Message: ${messages}`,
+        },
+      ],
+      max_tokens: 150,
+    }),
+  })
+    .then((response) => response.json()) // La solicitud se completó sin errores. then maneja el resultado de una promesa.
+    .then((data) => {
+
+      if (data && data.choices && data.choices.length > 0) {
+        return data.choices[0].message.content.trim();
+      } else {
+        throw new Error(
+          "No se encontraron respuestas en la respuesta de la API.",
+        );
+      }
+    })
+    .catch((error) => {
+      throw new Error(
+        "Error en la comunicación con la API: " +
+        (error.response ? error.response.data : error.message)
+      );
+    });
+};
diff --git a/src/lib/dataFunction.js b/src/lib/dataFunction.js
@@ -0,0 +1,70 @@
+// Crear funcion filterData
+export const filterData = (data, filterBy, value) => {
+  return data.filter(
+    (item) =>
+      item.extraInfo[filterBy] &&
+      item.extraInfo[filterBy].toLowerCase() === value.toLowerCase(),
+  );
+};
+// Crear funcion sortData
+export const sortData = (data, sortBy, sortOrder) => {
+  if (sortOrder === "asc") {
+    data.sort((a, b) => {
+      if (a[sortBy] < b[sortBy]) {
+        return -1;
+      }
+      if (a[sortBy] > b[sortBy]) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+  if (sortOrder === "desc") {
+    data.sort((a, b) => {
+      if (a[sortBy] > b[sortBy]) {
+        return -1;
+      }
+      if (a[sortBy] < b[sortBy]) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+  return data;
+};
+
+// Crear funcion computeStats
+export function computeStats(dataFiltrada, totalPersonajes) {
+  // Se declara objeto para usar en la funcion reduce
+  const elementeReduce = {
+    totalTipoGuardian: 0,
+    tipoGuardian: [],
+  };
+
+  // Obtengo total tipo de guardian (totalTipoGuardian) y listado de guardianes (tipoGuardian)
+  const { totalTipoGuardian, tipoGuardian } = dataFiltrada.reduce(
+    (acumulador, personajes) => {
+      // Contador
+      acumulador.totalTipoGuardian += 1;
+
+      // Almacena el tipo de personaje
+      acumulador.tipoGuardian.push(personajes);
+
+      return acumulador;
+    },
+    elementeReduce,
+  );
+
+  // Calcula porcentaje
+  const porcentajeTipoGuardian = (totalTipoGuardian / totalPersonajes) * 100;
+
+  // Almacena los nombres
+  const nombreTipoPersonaje = tipoGuardian.map((guardian) => guardian.name);
+
+  return {
+    totalPersonajes,
+    totalTipoGuardian,
+    porcentajeTipoGuardian,
+    tipoGuardian: nombreTipoPersonaje,
+  };
+}
diff --git a/src/router.js b/src/router.js
@@ -0,0 +1,76 @@
+import renderChat from "./views/chat.js"; 
+
+let routes = {};
+let rootEl = null;
+
+export function setRoutes(ROUTES) {
+  routes = ROUTES;
+}
+
+export function setRootEl(rootElement) {
+  rootEl = rootElement;
+}
+
+// Convierte la cadena de consulta en un objeto
+export function queryStringToObject(queryString) {
+  const queryParams = new URLSearchParams(queryString);
+  const result = {}; // Va ha almacenar los parametros de búsqueda.
+  queryParams.forEach((value, key) => {
+    result[key] = value;
+  });
+  return result; 
+}
+
+// Actualiza el historial del navegador y renderiza la vista
+export function navigateTo(pathname, props = {}) {
+
+  const queryParams = new URLSearchParams(props).toString();
+  const newPath = `${window.location.origin}${pathname}${queryParams ? `?${queryParams}` : ''}`;
+  // Actualizar la URL sin recargar la página
+  history.pushState(props, '', newPath);
+
+  // Obtener la nueva ruta y propiedades desde la URL
+  const newPathname = location.pathname; // Nuevo pathname
+  const newProps = queryStringToObject(location.search); // Convertir la query string a objeto
+
+  // Renderizar la vista correspondiente
+  renderView(newPathname, newProps);
+}
+
+
+function renderView(pathname, queryParams) {
+  // Verifica si la ruta es exactamente igual a una ruta en el objeto routes
+  if (routes[pathname]) {
+    const view = routes[pathname];
+    const viewElement = view(queryParams);
+    rootEl.innerHTML = ""; // Limpia el contenido actual de root
+    rootEl.appendChild(viewElement);
+  } else {
+    // Manejo de rutas dinámicas como /chat/:id
+    const chatRouteMatch = pathname.match(/^\/chat\/(\d+)(?:\/([^/]+))?$/);
+    if (chatRouteMatch) {
+      const characterId = chatRouteMatch[1]; // Extrae el ID del personaje
+      const viewElement = renderChat({ id: characterId });
+      rootEl.innerHTML = "";
+      rootEl.appendChild(viewElement); 
+    } else {
+      // Si no coincide con ninguna ruta, renderiza la vista de error
+      const errorView = routes["/errorView"];
+      const viewElement = errorView();
+      rootEl.innerHTML = "";
+      rootEl.appendChild(viewElement);
+    }
+  }
+}
+
+// Controla lo cambios en la URL
+export function onURLChange(location) {
+  const path = location.pathname;
+  const queryParams = queryStringToObject(location.search); // Convierte la cadena de consulta (query string) de la URL en un objeto
+  renderView(path, queryParams);
+}
+
+window.addEventListener("popstate", () => {
+  onURLChange(window.location);
+});
+