Add minimized displays for every layer's main resource

src/data/layers/boxes.tsx

@@ -384,6 +384,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <Spacer />
                 {renderRow(...Object.values(buyables))}
             </>
+        )),
+        minimizedDisplay: jsx(() => (
+            <div>
+                {name} - {format(boxes.value)} {boxes.displayName}
+            </div>
         ))
     };
 });

src/data/layers/cloth.tsx

@@ -23,7 +23,7 @@ import {
     createSequentialModifier
 } from "game/modifiers";
 import { noPersist, persistent } from "game/persistence";
-import Decimal, { DecimalSource } from "util/bignum";
+import Decimal, { DecimalSource, format } from "util/bignum";
 import { formatWhole } from "util/break_eternity";
 import { Direction } from "util/common";
 import { render, renderCol, renderRow } from "util/vue";
@@ -331,7 +331,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
     }));
     const paperUpgrades = { paperUpgrade4, paperUpgrade3, paperUpgrade2, paperUpgrade1 };
 
-    const hollyEffect = computed(() => Decimal.add(trees.computedAutoCuttingAmount.value, 1).root(3));
+    const hollyEffect = computed(() =>
+        Decimal.add(trees.computedAutoCuttingAmount.value, 1).root(3)
+    );
     const gingersnapEffect = computed(() => Decimal.add(dyes.dyeSum.value, 10).log10());
 
     const sheepGain = createSequentialModifier(() => [
@@ -557,6 +559,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
                     {renderCol(...Object.values(paperUpgrades))}
                 </Row>
             </>
+        )),
+        minimizedDisplay: jsx(() => (
+            <div>
+                {name} - {format(cloth.value)} {cloth.displayName}
+            </div>
         ))
     };
 });

src/data/layers/coal.tsx

@@ -957,6 +957,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 {renderGrid(row1upgrades, row2upgrades, row3upgrades)}
                 {renderRow(...row3buyables)}
             </>
+        )),
+        minimizedDisplay: jsx(() => (
+            <div>
+                {name} - {format(coal.value)} {coal.displayName}
+            </div>
         ))
     };
 });

src/data/layers/metal.tsx

@@ -585,6 +585,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 )}
                 {renderRow(oreDrill, industrialCrucible, hotterForge)}
             </>
+        )),
+        minimizedDisplay: jsx(() => (
+            <div>
+                {name} - {format(metal.value)} {metal.displayName}
+            </div>
         ))
     };
 });

src/data/layers/oil.tsx

@@ -1074,7 +1074,12 @@ const layer = createLayer(id, function (this: BaseLayer) {
                     {Decimal.gte(totalOil.value, 50) ? oilMilestonesDisplay() : ""}
                 </>
             );
-        })
+        }),
+        minimizedDisplay: jsx(() => (
+            <div>
+                {name} - {format(oil.value)} {oil.displayName}
+            </div>
+        ))
     };
 });
 

src/data/layers/paper.tsx

@@ -383,6 +383,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <Spacer />
                 {renderCol(...Object.values(books))}
             </>
+        )),
+        minimizedDisplay: jsx(() => (
+            <div>
+                {name} - {format(paper.value)} {paper.displayName}
+            </div>
         ))
     };
 });

src/data/layers/plastic.tsx

@@ -329,6 +329,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
                     {renderCol(clothTools, clothElf, clothGains)}
                 </Row>
             </>
+        )),
+        minimizedDisplay: jsx(() => (
+            <div>
+                {name} - {format(plastic.value)} {plastic.displayName}
+            </div>
         ))
     };
 });

src/data/layers/trees.tsx

@@ -330,9 +330,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
     ]) as WithRequired<Modifier, "description" | "revert">;
     const computedAutoCuttingAmount = computed(() => autoCuttingAmount.apply(0));
     const lastAutoCuttingAmount = ref<DecimalSource>(0);
-    setInterval(() => watch(computedAutoCuttingAmount, cut => {
+    setInterval(
-        lastAutoCuttingAmount.value = cut;
+        () =>
-    }), 0);
+            watch(computedAutoCuttingAmount, cut => {
+                lastAutoCuttingAmount.value = cut;
+            }),
+        0
+    );
 
     const manualPlantingAmount = createSequentialModifier(() => [
         createAdditiveModifier(() => ({
@@ -421,9 +425,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
     ]) as WithRequired<Modifier, "description" | "revert">;
     const computedAutoPlantingAmount = computed(() => autoPlantingAmount.apply(0));
     const lastAutoPlantedAmount = ref<DecimalSource>(0);
-    setInterval(() => watch(computedAutoPlantingAmount, planted => {
+    setInterval(
-        lastAutoPlantedAmount.value = planted;
+        () =>
-    }), 0);
+            watch(computedAutoPlantingAmount, planted => {
+                lastAutoPlantedAmount.value = planted;
+            }),
+        0
+    );
 
     const logGain = createSequentialModifier(() => [
         createMultiplicativeModifier(() => ({
@@ -808,6 +816,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <Spacer />
                 {renderRow(...row1Buyables)}
             </>
+        )),
+        minimizedDisplay: jsx(() => (
+            <div>
+                {name} - {format(logs.value)} {logs.displayName}
+            </div>
         ))
     };
 });

src/data/layers/workshop.tsx

@@ -19,7 +19,7 @@ import { createResource, displayResource } from "features/resources/resource";
 import { BaseLayer, createLayer } from "game/layers";
 import { createExponentialModifier, createSequentialModifier } from "game/modifiers";
 import { noPersist } from "game/persistence";
-import Decimal, { DecimalSource, formatWhole } from "util/bignum";
+import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
 import { Direction } from "util/common";
 import { render } from "util/vue";
 import { computed, unref, watchEffect } from "vue";
@@ -294,6 +294,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <Spacer />
                 {milestonesDisplay()}
             </>
+        )),
+        minimizedDisplay: jsx(() => (
+            <div>
+                {name} - {format(foundationProgress.value)} {foundationProgress.displayName}
+            </div>
         ))
     };
 });