Repository: ImperiAmic/w4-got
Pull request #13: Feature/character card
Author: login: ImperiAmic
Created: 2025-03-26T20:08:35Z | Merged: 2025-03-26T21:49:17Z

Fix:
- Font-family imported

Add:
- CharachterCard component with its function and tests
- Styles to page with new components


Diff:
diff --git a/public/index.html b/public/index.html
index c57912c..b7dd06f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,8 +7,7 @@
   <title>Game of Thrones</title>
   <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=Cinzel+Decorative:wght@400;700;900&display=swap"
-    rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@100..900&display=swap" rel="stylesheet">
   <script src="js/index.js" type="module"></script>
   <link rel="shortcut icon" href="/images/favicon.svg" type="image/svg+xml">
   <meta name="description"
diff --git a/public/styles/styles.css b/public/styles/styles.css
index d4a9ed7..4cec8f0 100644
--- a/public/styles/styles.css
+++ b/public/styles/styles.css
@@ -5,17 +5,50 @@
 }
 
 body {
-  font-family: "Cinzel Decorative", "Courier New", Courier, monospace;
+  font-family: "Grenze Gotisch", "Courier New", Courier, monospace;
+  margin: 0;
+}
+
+h1,
+h2 {
   margin: 0;
-  padding: 0;
 }
 
 .main-container {
   margin: 0 auto;
+  background-color: #b9540b;
+  color: #fff;
 }
 
 .main-header {
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 20px;
+  font-size: 1.875rem;
+}
+
+.title {
+  text-align: center;
+}
+
+.characters {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.character {
+  border-radius: 6px;
+  box-shadow: 3px 3px 2px #000;
+  background-color: #331c0f;
+  padding: 20px;
+  min-height: 410px;
+  min-width: 340px;
+}
+
+.character-title {
+  font-size: 2rem;
 }
diff --git a/src/components/CharacterCard/getCharacterCard.test.ts b/src/components/CharacterCard/getCharacterCard.test.ts
new file mode 100644
index 0000000..0b9f53c
--- /dev/null
+++ b/src/components/CharacterCard/getCharacterCard.test.ts
@@ -0,0 +1,35 @@
+import { King } from "../../king/types";
+import getKing from "../../king/factory/getKing";
+import getCharacterCard from "./getCharacterCard";
+
+describe("Given the CharacterCard component", () => {
+  describe("When it renders the Felipe character", () => {
+    test("Then it should show the Felipe character name and last name inside a character card", () => {
+      const screen = document.createElement("div");
+      const felipe: King = getKing(
+        {
+          name: "Felipe",
+          lastName: "Sesto",
+          age: 0,
+          isAlive: false,
+          die: () => {},
+          portraitUrl: "",
+          portraitDescription: "",
+        },
+        0,
+      );
+      const expectedCardTitle = `${felipe.name} ${felipe.lastName}`;
+
+      const CharacterCard = getCharacterCard(felipe);
+
+      screen.appendChild(CharacterCard);
+
+      const CardArticle = screen.querySelector("li");
+      const CardTitle = screen.querySelector("h2");
+
+      expect(CardArticle).not.toBeNull();
+      expect(CharacterCard).not.toBeNull();
+      expect(CardTitle?.textContent).toBe(expectedCardTitle);
+    });
+  });
+});
diff --git a/src/components/CharacterCard/getCharacterCard.ts b/src/components/CharacterCard/getCharacterCard.ts
new file mode 100644
index 0000000..af8f26b
--- /dev/null
+++ b/src/components/CharacterCard/getCharacterCard.ts
@@ -0,0 +1,15 @@
+import { CharacterType } from "../../character/types";
+
+const getCharacterCard = (character: CharacterType): HTMLElement => {
+  const characterCardElement = document.createElement("li");
+  characterCardElement.className = "character";
+
+  characterCardElement.innerHTML = `
+  <article>
+    <h2 class="character-title">${character.name} ${character.lastName}</h2>
+  </article>`;
+
+  return characterCardElement;
+};
+
+export default getCharacterCard;
diff --git a/src/components/CharactersList/getCharactersList.ts b/src/components/CharactersList/getCharactersList.ts
index 989bbac..74cea91 100644
--- a/src/components/CharactersList/getCharactersList.ts
+++ b/src/components/CharactersList/getCharactersList.ts
@@ -1,7 +1,13 @@
+import { characters } from "../../character/data/data.js";
+import getCharacterCard from "../CharacterCard/getCharacterCard.js";
+
 const getCharactersList = (): HTMLElement => {
   const charactersElement = document.createElement("ul");
   charactersElement.className = "characters";
 
+  const CharacterCard = getCharacterCard(characters[0]);
+  charactersElement.appendChild(CharacterCard);
+
   return charactersElement;
 };
 
diff --git a/src/components/Header/getHeader.ts b/src/components/Header/getHeader.ts
index 9305f8f..b8969f4 100644
--- a/src/components/Header/getHeader.ts
+++ b/src/components/Header/getHeader.ts
@@ -2,7 +2,7 @@ const getHeader = (): HTMLElement => {
   const header = document.createElement("header");
   header.classList.add("main-header");
 
-  header.innerHTML = "<h1>Game of Thrones</h1>";
+  header.innerHTML = "<h1 class='title'>Game of Thrones</h1>";
 
   return header;
 };


Reviews:
user: login: uribeAC
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-03-26T20:59:37Z
user: login: uribeAC
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-26T21:45:40Z

Review comments:
diff_hunk: @@ -0,0 +1,33 @@
+import { CharacterType } from "../../character/types";
+import getCharacterCard from "./getCharacterCard";
+
+describe("Given the CharacterCard component", () => {
+  describe("When it renders the Felipe character", () => {
+    test("Then it should show the Felipe character name and last name inside a card", () => {
+      const screen = document.createElement("div");
+      const felipe: CharacterType = {
+        name: "Felipe",
+        lastName: "Sesto",
+        age: 0,
+        isAlive: true,
+        die: () => {},
+        yearsOfReign: 0,
+        phrase: "You are all going to die",
+        portraitUrl: "",
+        portraitDescription: "",
+        speak: "",
+      };
+      const expectedCardTitle = "Felipe Sesto";
+
+      const CharacterCard = getCharacterCard(felipe);
+
+      screen.appendChild(CharacterCard);
+
+      const CardArticle = screen.querySelector("li");
+      const CardTitle = screen.querySelector("h2");
+      expect(CardArticle).not.toBeNull();
path: src/components/CharacterCard/getCharacterCard.test.ts
user: login: uribeAC
body: Pondria un enter aqui
created_at: 2025-03-26T20:56:18Z
author_association: COLLABORATOR
diff_hunk: @@ -5,17 +5,51 @@
 }
 
 body {
-  font-family: "Cinzel Decorative", "Courier New", Courier, monospace;
+  font-family: "Grenze Gotisch", "Courier New", Courier, monospace;
   margin: 0;
   padding: 0;
path: public/styles/styles.css
user: login: uribeAC
body: Es cagada mia pero ya que arrelgas lo otro aprovechamos
created_at: 2025-03-26T20:58:08Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,33 @@
+import { CharacterType } from "../../character/types";
+import getCharacterCard from "./getCharacterCard";
+
+describe("Given the CharacterCard component", () => {
+  describe("When it renders the Felipe character", () => {
+    test("Then it should show the Felipe character name and last name inside a card", () => {
+      const screen = document.createElement("div");
+      const felipe: CharacterType = {
path: src/components/CharacterCard/getCharacterCard.test.ts
user: login: uribeAC
body: Aqui cuando tengamons todo mergeado tendriamos que crearlo con las funciones
created_at: 2025-03-26T20:59:29Z
author_association: COLLABORATOR

PR comments:
user: login: netlify[bot]
created_at: 2025-03-26T20:09:18Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *ralex-got* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 41e000b95138a9e9d1314414f9fb4e0bc636a747 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/ralex-got/deploys/67e4733294009b00088a9602 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-13--ralex-got.netlify.app](https://deploy-preview-13--ralex-got.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTEzLS1yYWxleC1nb3QubmV0bGlmeS5hcHAifQ.KC7WyslU3li9E636J7dpWyqP_QmKAGb9PazY3dLigvA)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [ralex-got Preview](https://deploy-preview-13--ralex-got.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/ralex-got/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: the-refactor-project
created_at: 2025-03-26T21:01:56Z
body: "Add render" no es nada.
author_association: NONE
user: login: ImperiAmic
created_at: 2025-03-26T21:24:18Z
body: > "Add render" no es nada.

Hm, clar. Potser "Add CharacterCard component in CharacterList component"? O "Add getCharacterCard function in getCharacterList function"?
author_association: OWNER
user: login: the-refactor-project
created_at: 2025-03-27T04:01:33Z
body: > > "Add render" no es nada.
> 
> Hm, clar. Potser "Add CharacterCard component in CharacterList component"? O "Add getCharacterCard function in getCharacterList function"?

Render. Ése es el imperativo que buscas.
author_association: NONE
user: login: ImperiAmic
created_at: 2025-03-27T18:44:25Z
body: > > > "Add render" no es nada.
> > 
> > 
> > Hm, clar. Potser "Add CharacterCard component in CharacterList component"? O "Add getCharacterCard function in getCharacterList function"?
> 
> Render. Ése es el imperativo que buscas.

yeesas craist, true! merci!
author_association: OWNER