diff --git a/src/data/common.tsx b/src/data/common.tsx
index 0b71257..df7094c 100644
--- a/src/data/common.tsx
+++ b/src/data/common.tsx
@@ -1,9 +1,16 @@
 import Collapsible from "components/layout/Collapsible.vue";
 import { createBar } from "features/bars/bar";
+import { GenericBuyable } from "features/buyable";
 import type { Clickable, ClickableOptions, GenericClickable } from "features/clickables/clickable";
 import { createClickable } from "features/clickables/clickable";
 import type { GenericConversion } from "features/conversion";
-import type { CoercableComponent, JSXFunction, OptionsFunc, Replace } from "features/feature";
+import type {
+    CoercableComponent,
+    JSXFunction,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { jsx, setDefault } from "features/feature";
 import { GenericMilestone } from "features/milestones/milestone";
 import { displayResource, Resource, trackTotal } from "features/resources/resource";
@@ -481,3 +488,57 @@ export function setUpDailyProgressTracker(options: {
         trackerDisplay
     };
 }
+
+export function changeActiveBuyables(options: {
+    style?: StyleValue;
+    active: Persistent<DecimalSource>;
+    buyable: GenericBuyable;
+}) {
+    const style = options.style ?? { minHeight: "20px", width: "40px", color: "var(--foreground)" };
+    const min = createClickable(() => ({
+        display: "0",
+        style,
+        canClick() {
+            return Decimal.gt(options.active.value, 0);
+        },
+        onClick() {
+            options.active.value = 0;
+        }
+    }));
+    const remove = createClickable(() => ({
+        display: "-",
+        style,
+        canClick() {
+            return Decimal.gt(options.active.value, 0);
+        },
+        onClick() {
+            options.active.value = Decimal.sub(options.active.value, 1);
+        }
+    }));
+    const add = createClickable(() => ({
+        display: "+",
+        style,
+        canClick() {
+            return Decimal.lt(options.active.value, options.buyable.amount.value);
+        },
+        onClick() {
+            options.active.value = Decimal.add(options.active.value, 1);
+        }
+    }));
+    const max = createClickable(() => ({
+        display: "Max",
+        style,
+        canClick() {
+            return Decimal.lt(options.active.value, options.buyable.amount.value);
+        },
+        onClick() {
+            options.active.value = options.buyable.amount.value;
+        }
+    }));
+    return {
+        min,
+        remove,
+        add,
+        max
+    };
+}
diff --git a/src/data/layers/coal.tsx b/src/data/layers/coal.tsx
index 605dec4..66ffd22 100644
--- a/src/data/layers/coal.tsx
+++ b/src/data/layers/coal.tsx
@@ -7,10 +7,13 @@ import Modal from "components/Modal.vue";
 import MainDisplay from "features/resources/MainDisplay.vue";
 import Row from "components/layout/Row.vue";
 import Column from "components/layout/Column.vue";
-import { createCollapsibleModifierSections, setUpDailyProgressTracker } from "data/common";
+import {
+    createCollapsibleModifierSections,
+    setUpDailyProgressTracker,
+    changeActiveBuyables
+} from "data/common";
 import { main } from "data/projEntry";
 import { createBuyable, GenericBuyable } from "features/buyable";
-import { createClickable } from "features/clickables/clickable";
 import { jsx, JSXFunction, showIf, StyleValue, Visibility } from "features/feature";
 import { createResource, Resource } from "features/resources/resource";
 import { globalBus } from "game/events";
@@ -27,12 +30,11 @@ import {
     createSequentialModifier,
     Modifier
 } from "game/modifiers";
-import { createUpgrade, Upgrade, UpgradeOptions } from "features/upgrades/upgrade";
+import { createUpgrade, Upgrade } from "features/upgrades/upgrade";
 import elves from "./elves";
 import paper from "./paper";
 import boxes from "./boxes";
 import metal from "./metal";
-import { cloneWithoutLoc } from "@babel/types";
 import cloth from "./cloth";
 import { WithRequired } from "util/common";
 import oil from "./oil";
@@ -115,48 +117,18 @@ const layer = createLayer(id, function (this: BaseLayer) {
             width: "160px"
         }
     })) as GenericBuyable & { resource: Resource };
-    const minFire = createClickable(() => ({
-        display: "0",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeFires.value, 0);
-        },
-        onClick() {
-            activeFires.value = 0;
-        }
-    }));
-    const removeFire = createClickable(() => ({
-        display: "-",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeFires.value, 0);
-        },
-        onClick() {
-            activeFires.value = Decimal.sub(activeFires.value, 1);
-        }
-    }));
-    const addFire = createClickable(() => ({
-        display: "+",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeFires.value, buildFire.amount.value);
-        },
-        onClick() {
-            activeFires.value = Decimal.add(activeFires.value, 1);
-        }
-    }));
-    const maxFire = createClickable(() => ({
-        display: "Max",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeFires.value, buildFire.amount.value);
-        },
-        onClick() {
-            activeFires.value = buildFire.amount.value;
-        }
-    }));
+
+    const {
+        min: minFire,
+        max: maxFire,
+        add: addFire,
+        remove: removeFire
+    } = changeActiveBuyables({
+        active: activeFires,
+        buyable: buildFire
+    });
     const fireResource = createResource(buildFire.amount, "small fires");
-    
+
     const activeBonfires = persistent<DecimalSource>(0);
     const bonfireLogs = computed(() => Decimal.times(activeBonfires.value, 10000));
     const bonfireCoal = computed(() => Decimal.times(activeBonfires.value, 10));
@@ -192,47 +164,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
         },
         visibility: () => showIf(unlockBonfire.bought.value)
     })) as GenericBuyable & { resource: Resource };
-    const minBonfire = createClickable(() => ({
-        display: "0",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeBonfires.value, 0);
-        },
-        onClick() {
-            activeBonfires.value = 0;
-        }
-    }));
-    const removeBonfire = createClickable(() => ({
-        display: "-",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeBonfires.value, 0);
-        },
-        onClick() {
-            activeBonfires.value = Decimal.sub(activeBonfires.value, 1);
-        }
-    }));
-    const addBonfire = createClickable(() => ({
-        display: "+",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeBonfires.value, buildBonfire.amount.value);
-        },
-        onClick() {
-            activeBonfires.value = Decimal.add(activeBonfires.value, 1);
-        }
-    }));
-    const maxBonfire = createClickable(() => ({
-        display: "Max",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeBonfires.value, buildBonfire.amount.value);
-        },
-        onClick() {
-            activeBonfires.value = buildBonfire.amount.value;
-        }
-    }));
-
+    const {
+        min: minBonfire,
+        max: maxBonfire,
+        add: addBonfire,
+        remove: removeBonfire
+    } = changeActiveBuyables({
+        buyable: buildBonfire,
+        active: activeBonfires
+    });
     const activeKilns = persistent<DecimalSource>(0);
     const kilnLogs = computed(() => Decimal.times(activeKilns.value, 1e6));
     const kilnCoal = computed(() => Decimal.times(activeKilns.value, 1e4));
@@ -271,49 +211,22 @@ const layer = createLayer(id, function (this: BaseLayer) {
         },
         visibility: () => showIf(unlockKiln.bought.value)
     })) as GenericBuyable & { resource: Resource };
-    const minKiln = createClickable(() => ({
-        display: "0",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeKilns.value, 0);
-        },
-        onClick() {
-            activeKilns.value = 0;
-        }
-    }));
-    const removeKiln = createClickable(() => ({
-        display: "-",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeKilns.value, 0);
-        },
-        onClick() {
-            activeKilns.value = Decimal.sub(activeKilns.value, 1);
-        }
-    }));
-    const addKiln = createClickable(() => ({
-        display: "+",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeKilns.value, buildKiln.amount.value);
-        },
-        onClick() {
-            activeKilns.value = Decimal.add(activeKilns.value, 1);
-        }
-    }));
-    const maxKiln = createClickable(() => ({
-        display: "Max",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeKilns.value, buildKiln.amount.value);
-        },
-        onClick() {
-            activeKilns.value = buildKiln.amount.value;
-        }
-    }));
-
+    const {
+        min: minKiln,
+        max: maxKiln,
+        add: addKiln,
+        remove: removeKiln
+    } = changeActiveBuyables({
+        buyable: buildKiln,
+        active: activeKilns
+    });
     const activeDrills = persistent<DecimalSource>(0);
-    const drillCoal = computed(() => Decimal.times(Decimal.pow(activeDrills.value, oil.row2Upgrades[1].bought.value ? 2 : 1), 5e7).times(metal.efficientDrill.bought.value ? 2 : 1));
+    const drillCoal = computed(() =>
+        Decimal.times(
+            Decimal.pow(activeDrills.value, oil.row2Upgrades[1].bought.value ? 2 : 1),
+            5e7
+        ).times(metal.efficientDrill.bought.value ? 2 : 1)
+    );
     const buildDrill = createBuyable(() => ({
         resource: metal.metal,
         cost() {
@@ -346,46 +259,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
         },
         visibility: () => showIf(metal.coalDrill.bought.value)
     })) as GenericBuyable & { resource: Resource };
-    const minDrill = createClickable(() => ({
-        display: "0",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeDrills.value, 0);
-        },
-        onClick() {
-            activeDrills.value = 0;
-        }
-    }));
-    const removeDrill = createClickable(() => ({
-        display: "-",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeDrills.value, 0);
-        },
-        onClick() {
-            activeDrills.value = Decimal.sub(activeDrills.value, 1);
-        }
-    }));
-    const addDrill = createClickable(() => ({
-        display: "+",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeDrills.value, buildDrill.amount.value);
-        },
-        onClick() {
-            activeDrills.value = Decimal.add(activeDrills.value, 1);
-        }
-    }));
-    const maxDrill = createClickable(() => ({
-        display: "Max",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeDrills.value, buildDrill.amount.value);
-        },
-        onClick() {
-            activeDrills.value = buildDrill.amount.value;
-        }
-    }));
+    const {
+        max: maxDrill,
+        min: minDrill,
+        add: addDrill,
+        remove: removeDrill
+    } = changeActiveBuyables({
+        buyable: buildDrill,
+        active: activeDrills
+    });
 
     const warmerCutters = createUpgrade(() => ({
         resource: noPersist(coal),
@@ -483,7 +365,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         visibility: () => showIf(unlockBonfire.bought.value)
     }));
     const row2upgrades = [dedicatedCutters, dedicatedPlanters, betterFertilizer, unlockKiln];
-    
+
     const efficientSmelther: Upgrade<EfficientSmeltherUpgOptions> = createUpgrade(() => ({
         resource: noPersist(coal),
         cost: 1e19,
@@ -693,13 +575,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
         createMultiplicativeModifier(() => ({
             multiplier: () => Decimal.mul(oil.depth.value, 0.25).add(1),
             description: "5m Well Depth",
-            enabled: oil.depthMilestones[0].earned,
+            enabled: oil.depthMilestones[0].earned
         })),
         createMultiplicativeModifier(() => ({
             multiplier: oil.extractorCoal,
             description: "Heavy Extractor",
             enabled: () => Decimal.gt(oil.activeExtractor.value, 0)
-        })),
+        }))
     ]) as WithRequired<Modifier, "description" | "revert">;
     const computedCoalGain = computed(() => coalGain.apply(0));
 
diff --git a/src/data/layers/oil.tsx b/src/data/layers/oil.tsx
index 5699209..97ee31b 100644
--- a/src/data/layers/oil.tsx
+++ b/src/data/layers/oil.tsx
@@ -6,20 +6,19 @@ import MainDisplay from "features/resources/MainDisplay.vue";
 import Sqrt from "components/math/Sqrt.vue";
 
 import {
-    colorText,
     createCollapsibleModifierSections,
     createCollapsibleMilestones,
-    setUpDailyProgressTracker
+    setUpDailyProgressTracker,
+    changeActiveBuyables
 } from "data/common";
 import { jsx, showIf } from "features/feature";
-import { createResource, Resource, trackBest } from "features/resources/resource";
+import { createResource, Resource } from "features/resources/resource";
 import { BaseLayer, createLayer } from "game/layers";
 import Decimal, { DecimalSource } from "lib/break_eternity";
 import { render, renderRow } from "util/vue";
 import { computed, ComputedRef, ref, unref } from "vue";
 import { noPersist, persistent } from "game/persistence";
 import { createBuyable, GenericBuyable } from "features/buyable";
-import { createClickable } from "features/clickables/clickable";
 import { format, formatWhole } from "util/break_eternity";
 import metal from "./metal";
 import {
@@ -31,7 +30,7 @@ import { main } from "data/projEntry";
 import { globalBus } from "game/events";
 import coal from "./coal";
 import { createUpgrade, GenericUpgrade } from "features/upgrades/upgrade";
-import { createMilestone, GenericMilestone, Milestone } from "features/milestones/milestone";
+import { createMilestone, GenericMilestone } from "features/milestones/milestone";
 import { formatGain } from "util/bignum";
 
 const id = "oil";
@@ -117,47 +116,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
             width: "160px"
         }
     })) as GenericBuyable & { resource: Resource };
-    const minHeavy = createClickable(() => ({
-        display: "0",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeHeavy.value, 0);
-        },
-        onClick() {
-            activeHeavy.value = 0;
-        }
-    }));
-    const removeHeavy = createClickable(() => ({
-        display: "-",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeHeavy.value, 0);
-        },
-        onClick() {
-            activeHeavy.value = Decimal.sub(activeHeavy.value, 1);
-        }
-    }));
-    const addHeavy = createClickable(() => ({
-        display: "+",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeHeavy.value, buildHeavy.amount.value);
-        },
-        onClick() {
-            activeHeavy.value = Decimal.add(activeHeavy.value, 1);
-        }
-    }));
-    const maxHeavy = createClickable(() => ({
-        display: "Max",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeHeavy.value, buildHeavy.amount.value);
-        },
-        onClick() {
-            activeHeavy.value = buildHeavy.amount.value;
-        }
-    }));
-
+    const {
+        min: minHeavy,
+        max: maxHeavy,
+        add: addHeavy,
+        remove: removeHeavy
+    } = changeActiveBuyables({
+        buyable: buildHeavy,
+        active: activeHeavy
+    });
     const activeHeavy2 = persistent<DecimalSource>(0);
     const heavy2Power = computed(() => Decimal.add(activeHeavy2.value, Math.E).ln());
     const buildHeavy2 = createBuyable(() => ({
@@ -192,46 +159,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
             width: "160px"
         }
     })) as GenericBuyable & { resource: Resource };
-    const minHeavy2 = createClickable(() => ({
-        display: "0",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeHeavy2.value, 0);
-        },
-        onClick() {
-            activeHeavy2.value = 0;
-        }
-    }));
-    const removeHeavy2 = createClickable(() => ({
-        display: "-",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeHeavy2.value, 0);
-        },
-        onClick() {
-            activeHeavy2.value = Decimal.sub(activeHeavy2.value, 1);
-        }
-    }));
-    const addHeavy2 = createClickable(() => ({
-        display: "+",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeHeavy2.value, buildHeavy2.amount.value);
-        },
-        onClick() {
-            activeHeavy2.value = Decimal.add(activeHeavy2.value, 1);
-        }
-    }));
-    const maxHeavy2 = createClickable(() => ({
-        display: "Max",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeHeavy2.value, buildHeavy2.amount.value);
-        },
-        onClick() {
-            activeHeavy2.value = buildHeavy2.amount.value;
-        }
-    }));
+    const {
+        min: minHeavy2,
+        max: maxHeavy2,
+        add: addHeavy2,
+        remove: removeHeavy2
+    } = changeActiveBuyables({
+        buyable: buildHeavy2,
+        active: activeHeavy2
+    });
 
     const activeExtractor = persistent<DecimalSource>(0);
     const extractorPower = computed(() => Decimal.pow(1 / 3, activeExtractor.value));
@@ -270,46 +206,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
             width: "160px"
         }
     })) as GenericBuyable & { resource: Resource };
-    const minExtractor = createClickable(() => ({
-        display: "0",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeExtractor.value, 0);
-        },
-        onClick() {
-            activeExtractor.value = 0;
-        }
-    }));
-    const removeExtractor = createClickable(() => ({
-        display: "-",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeExtractor.value, 0);
-        },
-        onClick() {
-            activeExtractor.value = Decimal.sub(activeExtractor.value, 1);
-        }
-    }));
-    const addExtractor = createClickable(() => ({
-        display: "+",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeExtractor.value, buildExtractor.amount.value);
-        },
-        onClick() {
-            activeExtractor.value = Decimal.add(activeExtractor.value, 1);
-        }
-    }));
-    const maxExtractor = createClickable(() => ({
-        display: "Max",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeExtractor.value, buildExtractor.amount.value);
-        },
-        onClick() {
-            activeExtractor.value = buildExtractor.amount.value;
-        }
-    }));
+    const {
+        min: minExtractor,
+        max: maxExtractor,
+        add: addExtractor,
+        remove: removeExtractor
+    } = changeActiveBuyables({
+        buyable: buildExtractor,
+        active: activeExtractor
+    });
 
     const activePump = persistent<DecimalSource>(0);
     const pumpCoal = computed(() =>
@@ -358,46 +263,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
             width: "160px"
         }
     })) as GenericBuyable & { resource: Resource };
-    const minPump = createClickable(() => ({
-        display: "0",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activePump.value, 0);
-        },
-        onClick() {
-            activePump.value = 0;
-        }
-    }));
-    const removePump = createClickable(() => ({
-        display: "-",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activePump.value, 0);
-        },
-        onClick() {
-            activePump.value = Decimal.sub(activePump.value, 1);
-        }
-    }));
-    const addPump = createClickable(() => ({
-        display: "+",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activePump.value, buildPump.amount.value);
-        },
-        onClick() {
-            activePump.value = Decimal.add(activePump.value, 1);
-        }
-    }));
-    const maxPump = createClickable(() => ({
-        display: "Max",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activePump.value, buildPump.amount.value);
-        },
-        onClick() {
-            activePump.value = buildPump.amount.value;
-        }
-    }));
+    const {
+        max: maxPump,
+        min: minPump,
+        add: addPump,
+        remove: removePump
+    } = changeActiveBuyables({
+        buyable: buildPump,
+        active: activePump
+    });
 
     const activeBurner = persistent<DecimalSource>(0);
     const burnerOil = computed(() => Decimal.pow(activeBurner.value, 2));
@@ -442,46 +316,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
             width: "160px"
         }
     })) as GenericBuyable & { resource: Resource };
-    const minBurner = createClickable(() => ({
-        display: "0",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeBurner.value, 0);
-        },
-        onClick() {
-            activeBurner.value = 0;
-        }
-    }));
-    const removeBurner = createClickable(() => ({
-        display: "-",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeBurner.value, 0);
-        },
-        onClick() {
-            activeBurner.value = Decimal.sub(activeBurner.value, 1);
-        }
-    }));
-    const addBurner = createClickable(() => ({
-        display: "+",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeBurner.value, buildBurner.amount.value);
-        },
-        onClick() {
-            activeBurner.value = Decimal.add(activeBurner.value, 1);
-        }
-    }));
-    const maxBurner = createClickable(() => ({
-        display: "Max",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeBurner.value, buildBurner.amount.value);
-        },
-        onClick() {
-            activeBurner.value = buildBurner.amount.value;
-        }
-    }));
+    const {
+        max: maxBurner,
+        min: minBurner,
+        add: addBurner,
+        remove: removeBurner
+    } = changeActiveBuyables({
+        buyable: buildBurner,
+        active: activeBurner
+    });
 
     const activeSmelter = persistent<DecimalSource>(0);
     const smelterOil = computed(() => Decimal.pow(activeSmelter.value, 2).mul(100));
@@ -520,46 +363,16 @@ const layer = createLayer(id, function (this: BaseLayer) {
             width: "160px"
         }
     })) as GenericBuyable & { resource: Resource };
-    const minSmelter = createClickable(() => ({
-        display: "0",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeSmelter.value, 0);
-        },
-        onClick() {
-            activeSmelter.value = 0;
-        }
-    }));
-    const removeSmelter = createClickable(() => ({
-        display: "-",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.gt(activeSmelter.value, 0);
-        },
-        onClick() {
-            activeSmelter.value = Decimal.sub(activeSmelter.value, 1);
-        }
-    }));
-    const addSmelter = createClickable(() => ({
-        display: "+",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeSmelter.value, buildSmelter.amount.value);
-        },
-        onClick() {
-            activeSmelter.value = Decimal.add(activeSmelter.value, 1);
-        }
-    }));
-    const maxSmelter = createClickable(() => ({
-        display: "Max",
-        style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() {
-            return Decimal.lt(activeSmelter.value, buildSmelter.amount.value);
-        },
-        onClick() {
-            activeSmelter.value = buildSmelter.amount.value;
-        }
-    }));
+
+    const {
+        max: maxSmelter,
+        min: minSmelter,
+        add: addSmelter,
+        remove: removeSmelter
+    } = changeActiveBuyables({
+        buyable: buildSmelter,
+        active: activeSmelter
+    });
 
     // --------------------------------------------------------------------------- Milestones
 
@@ -668,7 +481,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         createCollapsibleMilestones(oilMilestones);
 
     // --------------------------------------------------------------------------- Upgrades
-    
+
     const row1Upgrades: GenericUpgrade[] = [
         createUpgrade(() => ({
             resource: coal.coal,