From 77b9a4036ba2df507749a3dcf4e21a67d4dec50a Mon Sep 17 00:00:00 2001
From: Savanni D'Gerinel <savanni@luminescent-dreams.com>
Date: Thu, 2 Mar 2023 10:36:50 -0500
Subject: [PATCH] Start on component building blocks

---
 .../client/src/components/DataCard.ts         |  9 +++
 .../client/src/components/TextField.ts        | 23 ++++++
 .../src/components/{track.ts => TrackCard.ts} | 75 +++----------------
 music-player/client/src/main.ts               |  6 +-
 music-player/client/styles.css                |  5 +-
 5 files changed, 51 insertions(+), 67 deletions(-)
 create mode 100644 music-player/client/src/components/DataCard.ts
 create mode 100644 music-player/client/src/components/TextField.ts
 rename music-player/client/src/components/{track.ts => TrackCard.ts} (62%)

diff --git a/music-player/client/src/components/DataCard.ts b/music-player/client/src/components/DataCard.ts
new file mode 100644
index 0000000..2740011
--- /dev/null
+++ b/music-player/client/src/components/DataCard.ts
@@ -0,0 +1,9 @@
+export class DataCard extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.classList.add("card");
+  }
+}
diff --git a/music-player/client/src/components/TextField.ts b/music-player/client/src/components/TextField.ts
new file mode 100644
index 0000000..243eb9a
--- /dev/null
+++ b/music-player/client/src/components/TextField.ts
@@ -0,0 +1,23 @@
+export class TextField extends HTMLElement {
+  static get observedAttributes() {
+    return ["text"];
+  }
+
+  constructor() {
+    super();
+  }
+
+  get text(): string | null {
+    return this.getAttribute("text");
+  }
+
+  set text(text: string | null) {
+    if (text) {
+      this.setAttribute("text", text);
+      this.innerHTML = text;
+    } else {
+      this.removeAttribute("text");
+      this.innerHTML = "";
+    }
+  }
+}
diff --git a/music-player/client/src/components/track.ts b/music-player/client/src/components/TrackCard.ts
similarity index 62%
rename from music-player/client/src/components/track.ts
rename to music-player/client/src/components/TrackCard.ts
index 24cc468..f060305 100644
--- a/music-player/client/src/components/track.ts
+++ b/music-player/client/src/components/TrackCard.ts
@@ -1,63 +1,5 @@
-import { TrackInfo } from "../client";
-
-/*
-export class TrackName extends HTMLElement {
-  container: HTMLElement;
-
-  static get observedAttributes() {
-    return ["name"];
-  }
-
-  constructor() {
-    super();
-    this.container = document.createElement("div");
-  }
-
-  get name(): string | null {
-    return this.getAttribute("name");
-  }
-
-  set name(name: string | null) {
-    while (this.container.lastChild) {
-      this.container.removeChild(this.container.lastChild);
-    }
-    if (name) {
-      this.setAttribute("name", name);
-      this.container.appendChild(document.createTextNode(name));
-    } else {
-      this.removeAttribute("name");
-    }
-  }
-
-  connectedCallback() {
-    this.appendChild(this.container);
-  }
-}
-*/
-
-export class TextField extends HTMLElement {
-  static get observedAttributes() {
-    return ["text"];
-  }
-
-  constructor() {
-    super();
-  }
-
-  get text(): string | null {
-    return this.getAttribute("text");
-  }
-
-  set text(text: string | null) {
-    if (text) {
-      this.setAttribute("text", text);
-      this.innerHTML = text;
-    } else {
-      this.removeAttribute("text");
-      this.innerHTML = "";
-    }
-  }
-}
+import { TextField } from "./TextField";
+import { DataCard } from "./DataCard";
 
 export class TrackCard extends HTMLElement {
   trackNumberContainer: TextField;
@@ -145,12 +87,15 @@ export class TrackCard extends HTMLElement {
   }
 
   connectedCallback() {
-    this.classList.add("track-card");
+    const container = document.createElement("data-card");
+    container.classList.add("track-card");
 
     // this.appendChild(this.trackNumberContainer);
-    this.appendChild(this.nameContainer);
-    this.appendChild(this.albumContainer);
-    this.appendChild(this.artistContainer);
-    this.appendChild(this.durationContainer);
+    container.appendChild(this.nameContainer);
+    container.appendChild(this.albumContainer);
+    container.appendChild(this.artistContainer);
+    container.appendChild(this.durationContainer);
+
+    this.appendChild(container);
   }
 }
diff --git a/music-player/client/src/main.ts b/music-player/client/src/main.ts
index fcc618a..ec8a90d 100644
--- a/music-player/client/src/main.ts
+++ b/music-player/client/src/main.ts
@@ -1,12 +1,16 @@
 import * as _ from "lodash";
 import { TrackInfo, getTracks } from "./client";
-import { TextField, TrackCard } from "./components/track";
+import { DataCard } from "./components/DataCard";
+import { TextField } from "./components/TextField";
+import { TrackCard } from "./components/TrackCard";
 
+window.customElements.define("data-card", DataCard);
 window.customElements.define("text-field", TextField);
 window.customElements.define("track-card", TrackCard);
 
 declare global {
   interface HTMLElementTagNameMap {
+    "data-card": DataCard;
     "text-field": TextField;
     "track-card": TrackCard;
   }
diff --git a/music-player/client/styles.css b/music-player/client/styles.css
index 440bb1c..10f8ca3 100644
--- a/music-player/client/styles.css
+++ b/music-player/client/styles.css
@@ -29,12 +29,15 @@ body {
     margin-top: 32px;
 }
 
-.track-card {
+.card {
     border: 1px solid black;
     border-radius: 5px;
     padding: 8px;
     width: 300px;
     height: 100px;
+}
+
+.track-card {
     display: grid;
     gap: 4px 4px;
 }