feat: Simplification of UI and icons creation

public/js/ui/contractsView.js

@@ -2,7 +2,8 @@
 // and the board of offers.
 
 import { t } from '../services/i18n.js';
-import { h } from './dom.js';
+import { h, makeBuyable, setBuyable } from './dom.js';
+import { purchased } from './fx.js';
 import { formatDuration, moneyFormatter, rewardText, setText } from './text.js';
 
 const BUFF_LABEL = {
@@ -133,24 +134,31 @@ export function createContractsView(root, actions) {
     if (signature !== offersSignature) {
       offersSignature = signature;
       els.offers.replaceChildren(
-        ...offers.map((offer, index) =>
-          h(
+        ...offers.map((offer, index) => {
+          const li = h(
             'li',
             { class: 'card' },
             h(
               'div',
               { class: 'card__body' },
               h('h3', { class: 'card__title', text: t(`contracts.template.${offer.template}`) }),
-              h('p', { class: 'card__desc', text: t('contracts.goal', { target: fmt.number(offer.target), duration: formatDuration(offer.seconds) }) }),
+              h('p', {
+                class: 'card__desc',
+                text: t('contracts.goal', { target: fmt.number(offer.target), duration: formatDuration(offer.seconds) }),
+              }),
               h('p', { class: 'card__meta', text: rewardText(offer.reward, fmt, offer.seconds) }),
             ),
-            h('button', { class: 'btn btn--buy', type: 'button', text: t('contracts.accept'), 'data-index': index, onclick: () => actions.accept(index) }),
-          ),
-        ),
+            h('div', { class: 'card__price' }, h('strong', { text: t('contracts.accept') })),
+          );
+          makeBuyable(li, () => {
+            if (actions.accept(index)) purchased(li, '✓', null);
+          });
+          return li;
+        }),
       );
     }
     els.offersNone.hidden = offers.length > 0;
-    for (const button of els.offers.querySelectorAll('button')) button.disabled = Boolean(state.contracts.active);
+    for (const li of els.offers.children) setBuyable(li, !state.contracts.active);
   }
 
   function update(state) {