36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import { type ResourceGenerator } from "@idle-economy/engine";
|
|
import { observer } from "mobx-react-lite";
|
|
import { root } from "./state/Root";
|
|
import { ResourcesView } from "./ResourcesView";
|
|
import { ProgressView } from "./ProgressView";
|
|
|
|
export const Page = observer(function () {
|
|
|
|
|
|
function handleGeneratorUpgradeClick(generator: ResourceGenerator): void {
|
|
generator.upgrade();
|
|
}
|
|
|
|
|
|
return (<>
|
|
<div>Resources: <ResourcesView resources={root.resources.toObject()} /></div>
|
|
<div>
|
|
{
|
|
root.generators.filter((gen) => gen.isVisible).map((gen) => (<button className={`generator ${gen.rule.name}`} key={gen.rule.name} disabled={!gen.isOpen} onClick={() => handleGeneratorUpgradeClick(gen)}>
|
|
<div className="name">{gen.rule.name}</div>
|
|
<div>LEVEL {gen.level}</div>
|
|
<div>+<ResourcesView resources={gen.generation.toObject()} /></div>
|
|
{/* <div>+<ResourcesView resources={gen.generation.toObject()} /> / {gen.period} sec</div> */}
|
|
<div><ProgressView period={gen.period} progress={gen.progress} /></div>
|
|
{
|
|
true
|
|
? <div>{gen.level} ⇒ {gen.level + 1} for <ResourcesView resources={gen.openPrice.toObject()} /></div>
|
|
: <></>
|
|
}
|
|
</button>))
|
|
}
|
|
</div>
|
|
|
|
</>)
|
|
});
|