feat: Simplification of UI and icons creation

public/js/ui/legacyView.js

@@ -2,7 +2,8 @@
 
 import { legacyGain, perkCost, perkLevel } from '../engine/legacy.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, setText } from './text.js';
 
 export function createLegacyView(root, actions) {
@@ -30,8 +31,7 @@ export function createLegacyView(root, actions) {
     const perks = h('ul', { class: 'cards' });
     for (const perk of ctx.legacy) {
       const level = h('span', { class: 'badge' });
-      const cost = h('span', { class: 'btn__label' });
-      const buy = h('button', { class: 'btn btn--buy', type: 'button', onclick: () => actions.buyPerk(perk.id) }, cost);
+      const cost = h('strong');
       const li = h(
         'li',
         { class: 'card' },
@@ -42,10 +42,15 @@ export function createLegacyView(root, actions) {
           h('h3', { class: 'card__title' }, h('span', { text: t(`legacy.perk.${perk.id}`) }), level),
           h('p', { class: 'card__desc', text: effectText(perk.effect, fmt) }),
         ),
-        buy,
+        h('div', { class: 'card__price' }, cost),
       );
+      makeBuyable(li, () => {
+        if (!actions.buyPerk(perk.id)) return;
+        purchased(li, '+1', null);
+        bump(level);
+      });
       perks.append(li);
-      perkRows.set(perk.id, { perk, level, cost, buy });
+      perkRows.set(perk.id, { perk, li, level, cost });
     }
 
     root.replaceChildren(
@@ -68,7 +73,13 @@ export function createLegacyView(root, actions) {
         els.need,
         els.restart,
       ),
-      h('section', { class: 'panel' }, h('h2', { class: 'panel__title', text: t('legacy.perks') }), perks),
+      h(
+        'section',
+        { class: 'panel' },
+        h('h2', { class: 'panel__title', text: t('legacy.perks') }),
+        h('p', { class: 'hint', text: t('ui.clickToBuy') }),
+        perks,
+      ),
     );
   }
 
@@ -92,13 +103,13 @@ export function createLegacyView(root, actions) {
     setText(els.restart, t('legacy.restart'));
     els.restart.disabled = gain < 1;
 
-    for (const { perk, level, cost, buy } of perkRows.values()) {
+    for (const { perk, li, level, cost } of perkRows.values()) {
       const lv = perkLevel(state, perk);
       const maxed = lv >= perk.maxLevel;
       const price = perkCost(perk, lv);
       setText(level, t('legacy.level', { level: lv, max: perk.maxLevel }));
       setText(cost, maxed ? t('legacy.maxed') : t('legacy.perkCost', { cost: fmt.number(price) }));
-      buy.disabled = maxed || state.legacy.points < price;
+      setBuyable(li, !maxed && state.legacy.points >= price);
     }
   }