Use createCollapsibleMilestones to display milestones

src/data/layers/elves.tsx

@@ -5,7 +5,7 @@
 import Toggle from "components/fields/Toggle.vue";
 import Spacer from "components/layout/Spacer.vue";
 import Modal from "components/Modal.vue";
-import { createCollapsibleModifierSections } from "data/common";
+import { createCollapsibleMilestones, createCollapsibleModifierSections } from "data/common";
 import { main } from "data/projEntry";
 import { createBar, GenericBar } from "features/bars/bar";
 import { GenericBuyable } from "features/buyable";
@@ -542,6 +542,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         shouldEarn: () => Decimal.gte(totalElves.value, 9),
         visibility: () => showIf(forestMilestone2.earned.value)
     }));
+    // Gosh why did I make these as an array at first
     const milestones = [
         manualMilestone,
         researchMilestone,
@@ -553,6 +554,19 @@ const layer = createLayer(id, function (this: BaseLayer) {
         forestMilestone2,
         treeUpgradesMilestone
     ];
+    const milestonesDict = {
+        manualMilestone,
+        researchMilestone,
+        coalGainMilestone,
+        logGainMilestone,
+        forestMilestone,
+        elvesMilestone,
+        foundationMilestone,
+        forestMilestone2,
+        treeUpgradesMilestone
+    };
+    const { collapseMilestones, display: milestonesDisplay } =
+        createCollapsibleMilestones(milestonesDict);
 
     globalBus.on("update", diff => {
         if (Decimal.lt(main.day.value, day)) {
@@ -578,6 +592,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         elves,
         totalElves,
         milestones,
+        collapseMilestones,
         generalTabCollapsed,
         minWidth: 700,
         display: jsx(() => (
@@ -605,7 +620,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
                     {renderRow(...coalElves)}
                     {renderRow(...fireElves)}
                 </div>
-                {renderCol(...milestones)}
+                {milestonesDisplay()}
             </>
         ))
     };

src/data/layers/workshop.tsx

@@ -3,28 +3,27 @@
  * @hidden
  */
 import Spacer from "components/layout/Spacer.vue";
+import { createCollapsibleMilestones } from "data/common";
 import { main } from "data/projEntry";
 import { createBar } from "features/bars/bar";
 import { createClickable } from "features/clickables/clickable";
 import {
     Conversion,
-    ConversionOptions,
     createIndependentConversion,
     createPolynomialScaling,
     ScalingFunction
 } from "features/conversion";
 import { jsx, showIf } from "features/feature";
+import { createHotkey } from "features/hotkey";
 import { createMilestone } from "features/milestones/milestone";
 import { createResource, displayResource, Resource } from "features/resources/resource";
-import { createHotkey } from "features/hotkey";
 import { BaseLayer, createLayer } from "game/layers";
-import player from "game/player";
 import Decimal, { DecimalSource, formatWhole } from "util/bignum";
 import { Direction } from "util/common";
-import { render, renderCol } from "util/vue";
+import { render } from "util/vue";
 import { computed, unref, watchEffect } from "vue";
-import trees from "./trees";
 import elves from "./elves";
+import trees from "./trees";
 
 interface FoundationConversionOptions {
     scaling: ScalingFunction;
@@ -178,6 +177,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
         morePlantsMilestone1,
         logGainMilestone3
     };
+    const { collapseMilestones, display: milestonesDisplay } =
+        createCollapsibleMilestones(milestones);
 
     const dayProgress = createBar(() => ({
         direction: Direction.Right,
@@ -203,6 +204,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         foundationProgress,
         foundationConversion,
         milestones,
+        collapseMilestones,
         minWidth: 700,
         buildFoundationHK,
         display: jsx(() => (
@@ -219,7 +221,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
                     <div>You have {formatWhole(foundationProgress.value)}% completed</div>
                 ) : null}
                 <Spacer />
-                {renderCol(...Object.values(milestones))}
+                {milestonesDisplay()}
             </>
         ))
     };