gauvain/idle_clicker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Simplification of UI and icons creation

Browse Source
This commit is contained in:
gauvainboiche
2026-10-08 16:52:21 +02:00
parent a88b8f5f14
commit 2f7c307f0e
22 changed files with 1099 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/ui/researchView.js
+21 -14
View File
@@ -2,7 +2,8 @@
import { labCost, researchStatus } from '../engine/research.js';
import { t } from '../services/i18n.js';
import { h, icon } from './dom.js';
import { h, icon, makeBuyable, setBuyable } from './dom.js';
import { purchased } from './fx.js';
import { effectText, moneyFormatter, setText } from './text.js';
const BRANCHES = ['prod', 'mkt', 'log', 'fin', 'ins'];
@@ -16,11 +17,8 @@ export function createResearchView(root, actions) {
function nodeRow(node) {
const status = h('p', { class: 'card__meta' });
const buy = h('button', {
class: 'btn btn--buy',
type: 'button',
onclick: () => actions.buyNode(node.id),
});
const cost = h('strong');
const price = h('div', { class: 'card__price' }, cost);
const li = h(
'li',
{ class: 'card' },
@@ -32,9 +30,12 @@ export function createResearchView(root, actions) {
h('p', { class: 'card__desc', text: effectText(node.effect, fmt) }),
status,
),
buy,
price,
);
return { li, status, buy, node };
makeBuyable(li, () => {
if (actions.buyNode(node.id)) purchased(li, '✓', null);
});
return { li, status, price, cost, node };
}
function rebuild(newCtx, formatter) {
@@ -47,7 +48,13 @@ export function createResearchView(root, actions) {
rp: h('strong'),
rate: h('span', { class: 'hint' }),
labs: h('span', { class: 'hint' }),
buyLab: h('button', { class: 'btn btn--wide', type: 'button', onclick: () => actions.buyLab() }),
buyLab: h('button', {
class: 'btn btn--wide',
type: 'button',
onclick: () => {
if (actions.buyLab()) purchased(els.buyLab, '+1');
},
}),
};
const branchPanels = BRANCHES.map((branch) => {
@@ -70,7 +77,7 @@ export function createResearchView(root, actions) {
'section',
{ class: 'panel panel--wide' },
h('h2', { class: 'panel__title', text: t('tab.research') }),
h('p', { class: 'hint', text: t('research.intro') }),
h('p', { class: 'hint', text: `${t('research.intro')} ${t('ui.clickToBuy')}` }),
h(
'div',
{ class: 'tile' },
@@ -95,13 +102,13 @@ export function createResearchView(root, actions) {
setText(els.buyLab, maxed ? t('research.labMax') : t('research.buyLab', { cost: money(cost) }));
els.buyLab.disabled = maxed || state.funds < cost;
for (const { li, status, buy, node } of nodeRows.values()) {
for (const { li, status, price, cost, node } of nodeRows.values()) {
const s = researchStatus(state, node);
li.classList.toggle('card--done', s === 'owned');
li.classList.toggle('card--locked', s === 'locked');
buy.hidden = s !== 'available';
buy.disabled = state.rp < node.cost;
setText(buy, t('research.cost', { cost: fmt.number(node.cost) }));
price.hidden = s !== 'available';
setText(cost, t('research.cost', { cost: fmt.number(node.cost) }));
setBuyable(li, s === 'available' && state.rp >= node.cost);
if (s === 'owned') setText(status, t('research.owned'));
else if (s === 'locked') {
const names = node.requires.map((id) => t(`research.node.${id}`)).join(', ');