day 5

src/controllers/Resources/ResourceUIC.ts

@@ -0,0 +1,70 @@
+import { ResourceInventoryC } from "./ResourceInventoryC";
+import { ResourceType } from "./ResourceType";
+
+type ResourceUIEntry = {
+  type: ResourceType;
+  icon: HTMLElement;
+  count: HTMLElement;
+};
+
+const PLACEHOLDER_COLORS: Record<ResourceType, string> = {
+  [ResourceType.Wood]: "#6b4423",
+};
+
+export class ResourceUIC {
+  private static entries = new Map<ResourceType, ResourceUIEntry>();
+  private static root: HTMLElement | null = null;
+
+  static init() {
+    const uiRoot = document.getElementById("ui");
+    if (!uiRoot) return;
+
+    this.root = document.createElement("div");
+    this.root.id = "resource-bar";
+    this.root.className = "resource-bar";
+    uiRoot.appendChild(this.root);
+
+    this.register(ResourceType.Wood);
+  }
+
+  static register(type: ResourceType) {
+    if (!this.root || this.entries.has(type)) return;
+
+    const counter = document.createElement("div");
+    counter.className = "resource-counter";
+    counter.dataset.resource = type;
+
+    const icon = document.createElement("div");
+    icon.className = "resource-icon";
+    icon.style.backgroundColor = PLACEHOLDER_COLORS[type];
+
+    const count = document.createElement("span");
+    count.className = "resource-count";
+    count.textContent = "0";
+
+    counter.appendChild(icon);
+    counter.appendChild(count);
+    this.root.appendChild(counter);
+
+    this.entries.set(type, { type, icon, count });
+    this.refresh(type);
+  }
+
+  static getIconCenter(type: ResourceType) {
+    const entry = this.entries.get(type);
+    if (!entry) return null;
+
+    const rect = entry.icon.getBoundingClientRect();
+    return {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2,
+    };
+  }
+
+  static refresh(type: ResourceType) {
+    const entry = this.entries.get(type);
+    if (!entry) return;
+
+    entry.count.textContent = String(ResourceInventoryC.get(type));
+  }
+}