feat: Simplification of UI and icons creation

public/js/ui/endlessView.js

@@ -2,7 +2,8 @@
 
 import { endlessQuote, lineAvailable, lineLevel } from '../engine/endless.js';
 import { t } from '../services/i18n.js';
-import { h, icon } from './dom.js';
+import { h, icon, makeBuyable, setBuyable } from './dom.js';
+import { bump, purchased } from './fx.js';
 import { effectText, moneyFormatter, setText } from './text.js';
 
 const AMOUNTS = [1, 10, 100, 'max'];
@@ -22,14 +23,8 @@ export function createEndlessView(root, actions) {
   function rowFor(line) {
     const level = h('span', { class: 'badge' });
     const total = h('p', { class: 'card__meta' });
-    const label = h('span', { class: 'btn__label' });
+    const label = h('strong');
     const cost = h('small');
-    const buy = h(
-      'button',
-      { class: 'btn btn--buy', type: 'button', onclick: () => actions.buy(line.id, amount) },
-      label,
-      cost,
-    );
     const li = h(
       'li',
       { class: 'card', hidden: true },
@@ -41,9 +36,15 @@ export function createEndlessView(root, actions) {
         h('p', { class: 'card__desc', text: t('endless.perLevel', { effect: effectText(line.effect, fmt) }) }),
         total,
       ),
-      buy,
+      h('div', { class: 'card__price' }, label, cost),
     );
-    return { li, level, total, label, cost, buy, line };
+    const row = { li, level, total, label, cost, line, shown: 1 };
+    makeBuyable(li, () => {
+      if (!actions.buy(line.id, amount)) return;
+      purchased(li, `+${fmt.number(row.shown)}`);
+      bump(level);
+    });
+    return row;
   }
 
   function rebuild(newCtx, formatter) {
@@ -87,14 +88,15 @@ export function createEndlessView(root, actions) {
         h('h2', { class: 'panel__title', text: t('endless.title') }),
         amountGroup,
       ),
-      h('p', { class: 'hint', text: t('endless.intro') }),
+      h('p', { class: 'hint', text: `${t('endless.intro')} ${t('ui.clickToBuy')}` }),
       list,
     );
   }
 
   function update(state) {
     let any = false;
-    for (const { li, level, total, label, cost, buy, line } of rows.values()) {
+    for (const row of rows.values()) {
+      const { li, level, total, label, cost, line } = row;
       const open = lineAvailable(state, line);
       li.hidden = !open;
       if (!open) continue;
@@ -112,9 +114,10 @@ export function createEndlessView(root, actions) {
           ? t('endless.total', { effect: effectText({ ...line.effect, value: line.effect.value ** lv }, fmt) })
           : t('endless.none'),
       );
-      setText(label, maxed ? t('endless.maxed') : t('endless.buy', { count: fmt.number(quote.count) }));
+      row.shown = quote.count;
+      setText(label, maxed ? t('endless.maxed') : `×${fmt.number(quote.count)}`);
       setText(cost, maxed ? '' : money(quote.cost));
-      buy.disabled = maxed || quote.count <= 0 || !(state.funds >= quote.cost);
+      setBuyable(li, !maxed && quote.count > 0 && state.funds >= quote.cost);
     }
     root.hidden = !any;
   }