Start on component building blocks

music-player/client/src/components/DataCard.ts

@@ -0,0 +1,9 @@
+export class DataCard extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.classList.add("card");
+  }
+}

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 = "";
+    }
+  }
+}

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);
   }
 }

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;
   }

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;
 }