feat: Simplification of UI and icons creation

public/js/ui/investView.js

@@ -2,7 +2,8 @@
 
 import { portfolio } from '../engine/investments.js';
 import { t } from '../services/i18n.js';
-import { h, icon } from './dom.js';
+import { h, icon, makeBuyable, setBuyable } from './dom.js';
+import { bump, floater, pop, purchased } from './fx.js';
 import { moneyFormatter, setText, signedPercent } from './text.js';
 
 const AMOUNTS = [0.01, 0.1, 0.5, 1];
@@ -20,17 +21,18 @@ export function createInvestView(root, actions) {
     const change = h('span', { class: 'badge' });
     const price = h('span');
     const held = h('span');
-    const buy = h('button', {
-      class: 'btn',
-      type: 'button',
-      text: t('invest.buy'),
-      onclick: () => actions.buy(society.id, amount),
-    });
     const sell = h('button', {
       class: 'btn',
       type: 'button',
       text: t('invest.sell'),
-      onclick: () => actions.sell(society.id, amount),
+      onclick: (event) => {
+        event.stopPropagation(); // the block itself buys
+        if (actions.sell(society.id, amount)) {
+          pop(root);
+          floater(sell, '↘');
+          bump(held);
+        }
+      },
     });
     const root = h(
       'li',
@@ -47,9 +49,14 @@ export function createInvestView(root, actions) {
           h('p', { class: 'card__meta' }, held),
         ),
       ),
-      h('div', { class: 'card__actions' }, buy, sell),
+      h('div', { class: 'card__actions' }, h('span', { class: 'card__hint', text: t('invest.clickToBuy') }), sell),
     );
-    return { root, change, price, held, buy, sell };
+    makeBuyable(root, () => {
+      if (!actions.buy(society.id, amount)) return;
+      purchased(root, '↗');
+      bump(held);
+    });
+    return { root, change, price, held, sell };
   }
 
   function tierPanel(tier) {
@@ -172,7 +179,7 @@ export function createInvestView(root, actions) {
           ? t('invest.heldLine', { value: money(value), profit: signedPercent(basis > 0 ? value / basis - 1 : 0, fmt) })
           : t('invest.heldNone'),
       );
-      row.buy.disabled = state.funds < 0.01;
+      setBuyable(row.root, state.funds >= 0.01);
       row.sell.disabled = shares <= 0;
     }
   }