Use renderGrid

src/data/layers/boxes.tsx

@@ -16,7 +16,7 @@ import { globalBus } from "game/events";
 import { BaseLayer, createLayer } from "game/layers";
 import { noPersist } from "game/persistence";
 import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
-import { render, renderRow } from "util/vue";
+import { render, renderGrid, renderRow } from "util/vue";
 import { unref } from "vue";
 import paper from "./paper";
 import plastic from "./plastic";
@@ -161,7 +161,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         cost() {
             let v = this.amount.value;
             v = Decimal.pow(0.95, paper.books.boxBook.amount.value).times(v);
-            return Decimal.pow(5, v).times(1000).div(dyes.boosts.orange2.value);;
+            return Decimal.pow(5, v).times(1000).div(dyes.boosts.orange2.value);
         },
         visibility: () => showIf(ashUpgrade.bought.value)
     })) as GenericBuyable & { resource: Resource };
@@ -221,8 +221,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <Spacer />
                 {render(makeBoxes)}
                 <Spacer />
-                {renderRow(...Object.values(upgrades))}
-                {renderRow(...Object.values(row2Upgrades))}
+                {renderGrid(Object.values(upgrades), Object.values(row2Upgrades))}
+                <Spacer />
                 {renderRow(...Object.values(buyables))}
             </>
         ))

src/data/layers/coal.tsx

@@ -7,8 +7,9 @@ import Row from "components/layout/Row.vue";
 import Spacer from "components/layout/Spacer.vue";
 import Modal from "components/Modal.vue";
 import {
-changeActiveBuyables, createCollapsibleModifierSections,
-setUpDailyProgressTracker
+    changeActiveBuyables,
+    createCollapsibleModifierSections,
+    setUpDailyProgressTracker
 } from "data/common";
 import { main } from "data/projEntry";
 import { createBuyable, GenericBuyable } from "features/buyable";
@@ -19,16 +20,16 @@ import { createUpgrade, Upgrade } from "features/upgrades/upgrade";
 import { globalBus } from "game/events";
 import { BaseLayer, createLayer } from "game/layers";
 import {
-createAdditiveModifier,
-createExponentialModifier,
-createMultiplicativeModifier,
-createSequentialModifier,
-Modifier
+    createAdditiveModifier,
+    createExponentialModifier,
+    createMultiplicativeModifier,
+    createSequentialModifier,
+    Modifier
 } from "game/modifiers";
 import { noPersist, persistent } from "game/persistence";
 import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
 import { WithRequired } from "util/common";
-import { render, renderRow } from "util/vue";
+import { render, renderGrid, renderRow } from "util/vue";
 import { computed, ref, unref } from "vue";
 import boxes from "./boxes";
 import cloth from "./cloth";
@@ -552,7 +553,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
             enabled: elves.elves.bonfireElf.bought
         })),
         createMultiplicativeModifier(() => ({
-            multiplier: () => Decimal.div(buildKiln.amount.value, 100).times(dyes.boosts.green2.value).add(1),
+            multiplier: () =>
+                Decimal.div(buildKiln.amount.value, 100).times(dyes.boosts.green2.value).add(1),
             description: "Kiln Synergy",
             enabled: elves.elves.kilnElf.bought
         })),
@@ -644,7 +646,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
             enabled: elves.elves.bonfireElf.bought
         })),
         createMultiplicativeModifier(() => ({
-            multiplier: () => Decimal.div(buildKiln.amount.value, 100).times(dyes.boosts.green2.value).add(1),
+            multiplier: () =>
+                Decimal.div(buildKiln.amount.value, 100).times(dyes.boosts.green2.value).add(1),
             description: "Kiln Synergy",
             enabled: elves.elves.kilnElf.bought
         })),
@@ -871,9 +874,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
                     ) : undefined}
                 </Row>
                 <Spacer />
-                {renderRow(...row1upgrades)}
-                {renderRow(...row2upgrades)}
-                {renderRow(...row3upgrades)}
+                {renderGrid(row1upgrades, row2upgrades, row3upgrades)}
                 {renderRow(...row3buyables)}
             </>
         ))

src/data/layers/elves.tsx

@@ -23,7 +23,7 @@ import { persistent } from "game/persistence";
 import Decimal, { DecimalSource, formatWhole } from "util/bignum";
 import { Direction } from "util/common";
 import { Computable, convertComputable } from "util/computed";
-import { render, renderRow } from "util/vue";
+import { render, renderGrid, renderRow } from "util/vue";
 import { computed, ref, Ref, unref, watchEffect } from "vue";
 import boxes from "./boxes";
 import cloth from "./cloth";
@@ -840,10 +840,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 {render(modifiersModal)}
                 <Spacer />
                 <div style="width: 600px">
-                    {renderRow(...treesElves)}
-                    {renderRow(...coalElves)}
-                    {renderRow(...fireElves)}
-                    {renderRow(...plasticElves)}
+                    {renderGrid(treesElves, coalElves, fireElves, plasticElves)}
                 </div>
                 {milestonesDisplay()}
             </>

src/data/layers/oil.tsx

@@ -15,7 +15,7 @@ import { jsx, showIf } from "features/feature";
 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 { render, renderGrid, renderRow } from "util/vue";
 import { computed, ComputedRef, ref, unref } from "vue";
 import { noPersist, persistent } from "game/persistence";
 import { createBuyable, GenericBuyable } from "features/buyable";
@@ -761,7 +761,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
             description: "Red Dye Boost 1",
             enabled: () => Decimal.gte(dyes.dyes.red.amount.value, 1)
         }))
-    ])
+    ]);
     const computedExtraOilPumps = computed(() => extraOilPumps.apply(0));
 
     const [generalTab, generalTabCollapsed] = createCollapsibleModifierSections(() => [
@@ -816,7 +816,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
             modifier: extraOilPumps,
             base: 0,
             visible() {
-                return Decimal.gt(computedExtraOilPumps.value, 0)
+                return Decimal.gt(computedExtraOilPumps.value, 0);
             }
         }
     ]);
@@ -1042,8 +1042,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
                     ) : null}
                 </Row>
                 <Spacer />
-                {depthMilestones[1].earned.value ? renderRow(...row1Upgrades) : null}
-                {oilMilestones[1].earned.value ? renderRow(...row2Upgrades) : null}
+                {renderGrid(
+                    ...(oilMilestones[1].earned.value
+                        ? depthMilestones[1].earned.value
+                            ? [row1Upgrades, row2Upgrades]
+                            : [row1Upgrades]
+                        : [])
+                )}
                 <Spacer />
                 {depthMilestonesDisplay()}
                 {Decimal.gte(totalOil.value, 50) ? oilMilestonesDisplay() : ""}

src/data/layers/trees.tsx

@@ -742,8 +742,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 {renderRow(cutTree, plantTree)}
                 <div>Tip: You can hold down on actions to perform them automatically</div>
                 <Spacer />
-                {renderRow(...row1Upgrades)}
-                {renderRow(...row2Upgrades)}
+                {renderGrid(row1Upgrades, row2Upgrades)}
+                <Spacer />
                 {renderRow(...row1Buyables)}
             </>
         ))