level upgrade step

engine/src/game/ResourceGenerator.ts

@@ -89,20 +89,27 @@ export class ResourceGenerator {
         return this.rule.upgradePrice(level ?? this.level, this.game);
     }
 
-    public upgradableToLevel(limit: number = 100000): number {
+    public upgradeLevelsAvailable(step: number | 'max' = 1): number {
 
-        for (let idx = 0; idx < limit; idx++) {
+        if (step === 'max') {
+            for (let idx = 0; idx < 1000; idx++) {
                 const level = this.level + idx;
                 if (!this.rule.isUpgradable(level, this.game, this.getUpgradePrice(level)))
-                return level;
+                    return idx;
+            }
+        }
+        else {
+            const level = this.level + step - 1;
+            if (this.rule.isUpgradable(level, this.game, this.getUpgradePrice(level)))
+                return step;
         }
 
-        return -1;
+        return 0;
     }
 
-    public get isUpgradable(): boolean {
-        return this.rule.isUpgradable(this.level, this.game, this.getUpgradePrice());
-    }
+    // public get isUpgradable(): boolean {
+    //     return this.rule.isUpgradable(this.level, this.game, this.getUpgradePrice());
+    // }
 
     public getGain(level?: number): ResourceSet {
         return this.rule.generationGain(level ?? this.level, this.game);

web/src/Page.tsx

@@ -3,10 +3,26 @@ import { root } from "./state/Root";
 import { ResourcesView } from "./ResourcesView";
 import { ResourceGeneratorView } from "./ResourceGeneratorView";
 import { ProgressView } from "./ProgressView";
+import type { ChangeEvent } from "react";
 
 export const Page = observer(function () {
 
+    function handleUpgradeStepChange(event: ChangeEvent<HTMLSelectElement, HTMLSelectElement>): void {
+        const value = event.target.value;
+        root.setUpgradeStep(value === 'max' ? 'max' : Number(value));
+    }
+
     return (<>
+        <div>
+            Upgrade step: <select onChange={handleUpgradeStepChange} value={root.upgradeStep}>
+                <option>1</option>
+                <option>5</option>
+                <option>10</option>
+                <option>25</option>
+                <option>100</option>
+                <option value='max'>max</option>
+            </select>
+        </div>
         <div>Resources: <ResourcesView resources={root.resources.toObject()} /></div>
         <div className="generators">
             {

web/src/ResourceGeneratorView.tsx

@@ -12,18 +12,19 @@ export const ResourceGeneratorView = observer(function (props: Props) {
     let gen = props.generator;
     let showName = gen.rule.name === 'prestige';
 
+    const upgradeLevelsAvailable = gen.upgradeLevelsAvailable(root.upgradeStep);
+    const upgradeToLevel = gen.level + upgradeLevelsAvailable;
+
     function handleGeneratorClick(): void {
         if (props.generator.rule.manualGeneration)
             props.generator.manualGenerate();
     }
 
     function handleGeneratorUpgradeClick(): void {
-        while (props.generator.isUpgradable)
+        for (let i = 0; i < upgradeLevelsAvailable; i++)
             props.generator.upgrade();
     }
 
-    const upgradeLevelAvailable = gen.upgradableToLevel();
-
     return (<>
         <div
             className={['generator', gen.rule.name].join(' ')}
@@ -41,11 +42,15 @@ export const ResourceGeneratorView = observer(function (props: Props) {
                 <div>{gen.isUpgradable ? 'upgradable' : 'not upgradable'}</div>
                 <div>{gen.isFull ? 'full' : 'not full'}</div> */}
             </div>
-            <button onClick={handleGeneratorUpgradeClick} disabled={!gen.isUpgradable} className="upgrade">
-                <div>UPGRADE {gen.level} ⇒ {upgradeLevelAvailable}</div>
-                <div>at: <ResourcesView resources={gen.getUpgradePrice(upgradeLevelAvailable).toObject()} /></div>
+            <button
+                className="upgrade"
+                onClick={handleGeneratorUpgradeClick}
+                disabled={upgradeLevelsAvailable === 0}
+            >
+                <div>UPGRADE {gen.level} ⇒ {upgradeToLevel}</div>
+                <div>at: <ResourcesView resources={gen.getUpgradePrice(upgradeToLevel).toObject()} /></div>
                 <div>cost: </div>
-                <div>+<ResourcesView resources={gen.getGain(upgradeLevelAvailable).toObject()} /> / {gen.getPeriod(upgradeLevelAvailable)} sec</div>
+                <div>+<ResourcesView resources={gen.getGain(upgradeToLevel).toObject()} /> / {gen.getPeriod(upgradeToLevel)} sec</div>
             </button>
         </div>
     </>)

web/src/index.scss

@@ -97,14 +97,21 @@ button,
   box-sizing: border-box;
 }
 
+.generators {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+}
+
 .generator {
-  margin: 1em;
   padding: 0.5em;
   background-color: #ffffff40;
   border: 1px solid #ffffff60;
   color: white;
   border-radius: 4px;
   text-align: center;
+  flex-grow: 1;
+  flex-basis: 20%;
 
   &.interactive {
 
@@ -152,7 +159,7 @@ button,
   }
 
   &.yellow {
-    background-color: #ffff0030;
+    background-color: #ffff0020;
     border-color: #ffff0040;
   }
 
@@ -177,11 +184,6 @@ button,
   }
 }
 
-.generators {
-  display: flex;
-  flex-wrap: wrap;
-}
-
 .resources>span {
   // min-width: 6em;
   display: inline-block;

web/src/state/Root.ts

@@ -16,6 +16,8 @@ export class Root {
     public numberNotationName: keyof typeof Presets = 'Standard';
     public numberNotation: Notation = Presets.Standard;
 
+    public upgradeStep: number | 'max' = 1;
+
     constructor() {
         this.copyGame();
         this.setNumberNotation();
@@ -27,6 +29,13 @@ export class Root {
         this.lastGameTime = value;
     }
 
+    public setUpgradeStep(value: number | 'max') {
+        if (typeof (value) === 'number')
+            this.upgradeStep = Math.min(value, 1000);
+        else
+            this.upgradeStep = value;
+    }
+
     public tick(deltaTime: number): void {
         Array.from(this.game.tick(deltaTime));
         this.copyGame();