feat: Simplification of UI and icons creation

public/js/ui/gambleView.js

@@ -4,6 +4,7 @@ import { chipCost, odds, reliabilityCost } from '../engine/gamble.js';
 import { chipDemandBonus } from '../engine/formulas.js';
 import { t } from '../services/i18n.js';
 import { h, icon } from './dom.js';
+import { bump, floater, pop, purchased } from './fx.js';
 import { moneyFormatter, setText } from './text.js';
 
 const STAKES = [
@@ -43,6 +44,10 @@ export function createGambleView(root, actions) {
     const result = actions.run(stakeCount(state.chips));
     if (!result) return;
     log.unshift(result);
+    pop(els.run);
+    const sign = result.delta > 0 ? '+' : '−';
+    floater(els.run, `${sign}${fmt.number(Math.abs(result.delta))}`, undefined, result.delta > 0 ? 'good' : 'bad');
+    bump(els.chips);
     log.length = Math.min(log.length, LOG_SIZE);
     renderLog();
   }
@@ -57,8 +62,23 @@ export function createGambleView(root, actions) {
     els = {
       chips: h('strong'),
       bonus: h('span', { class: 'hint' }),
-      buyChip: h('button', { class: 'btn btn--wide', type: 'button', onclick: () => actions.buyChip() }),
-      reliability: h('button', { class: 'btn btn--wide', type: 'button', onclick: () => actions.buyReliability() }),
+      buyChip: h('button', {
+        class: 'btn btn--wide',
+        type: 'button',
+        onclick: () => {
+          if (actions.buyChip()) {
+            purchased(els.buyChip, '+1');
+            bump(els.chips);
+          }
+        },
+      }),
+      reliability: h('button', {
+        class: 'btn btn--wide',
+        type: 'button',
+        onclick: () => {
+          if (actions.buyReliability()) purchased(els.reliability, '+1');
+        },
+      }),
       odds: h('p', { class: 'hint' }),
       run: h('button', { class: 'btn btn--primary btn--big', type: 'button', onclick: () => run(lastState) }),
       log: h('ul', { class: 'log' }),