feat: Simplification of UI and icons creation

public/js/ui/dom.js

@@ -39,3 +39,31 @@ export function icon(key) {
 export function refreshStaticIcons(root = document) {
   for (const el of root.querySelectorAll('.resourcebar [data-icon]')) el.replaceWith(icon(el.dataset.icon));
 }
+
+// ------------------------------------------------------------ buyable blocks
+// A block you click to buy (instead of a button inside it): it is announced as
+// a button, reachable with the keyboard (Enter / Space), outlined when hovered
+// and greyed out when it cannot be bought.
+
+/** Make `el` act as one big button. `activate(event)` runs on click, Enter or Space. */
+export function makeBuyable(el, activate) {
+  el.classList.add('card--buy');
+  el.setAttribute('role', 'button');
+  el.tabIndex = 0;
+  const allowed = () => el.getAttribute('aria-disabled') !== 'true';
+  el.addEventListener('click', (event) => {
+    if (allowed()) activate(event);
+  });
+  el.addEventListener('keydown', (event) => {
+    if ((event.key === 'Enter' || event.key === ' ') && event.target === el) {
+      event.preventDefault();
+      if (allowed()) activate(event);
+    }
+  });
+}
+
+/** Show whether a buyable block can currently be bought. */
+export function setBuyable(el, canBuy) {
+  el.classList.toggle('is-disabled', !canBuy);
+  el.setAttribute('aria-disabled', String(!canBuy));
+}