Add ribbon milestones for dye elf

src/data/layers/elves.tsx

@@ -37,6 +37,7 @@ import trees from "./trees";
 import workshop from "./workshop";
 import wrappingPaper from "./wrapping-paper";
 import dyes, { enumColor } from "./dyes";
+import ribbon from "./ribbon";
 
 export interface ElfBuyable extends GenericBuyable {
     /** The inverse function of the cost formula, used to calculate the maximum amount that can be bought by elves. */
@@ -912,7 +913,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         buyMax: management.elfTraining.dyeElfTraining.milestones[2].earned,
         onAutoPurchase(buyable, amount) {
             if (["orange", "green", "purple"].includes(dyeColors[buyable.id])) {
-                if (false) { // does not have ribbon milestone 1
+                if (!ribbon.milestones.secondaryDyeElf.earned.value) {
                     buyable.amount.value = Decimal.sub(buyable.amount.value, amount)
                     return;
                 }

src/data/layers/paper.tsx

@@ -27,6 +27,7 @@ import dyes from "./dyes";
 import elves, { ElfBuyable } from "./elves";
 import management from "./management";
 import plastic from "./plastic";
+import ribbon from "./ribbon";
 import trees from "./trees";
 import workshop from "./workshop";
 import wrappingPaper from "./wrapping-paper";
@@ -294,7 +295,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         name: "",
         elfName: "Carol",
         buyableName: "Secondary Dyes",
-        visibility: () => showIf(elves.elves.dyeElf.bought.value && true) // ribbons secondary dye book milestone
+        visibility: () => showIf(elves.elves.dyeElf.bought.value && ribbon.milestones.dyeBook.earned.value)
     });
     const books = {
         cuttersBook,

src/data/layers/ribbon.tsx

@@ -2,6 +2,7 @@ import Spacer from "components/layout/Spacer.vue";
 import { createBar, GenericBar } from "features/bars/bar";
 import { createClickable } from "features/clickables/clickable";
 import { jsx, showIf } from "features/feature";
+import { createMilestone } from "features/milestones/milestone";
 import { createResource } from "features/resources/resource";
 import { createLayer, layers } from "game/layers";
 import player from "game/player";
@@ -22,6 +23,23 @@ const layer = createLayer(id, () => {
 
     const ribbon = createResource<DecimalSource>(0, "Ribbon");
 
+    const milestones = {
+        secondaryDyeElf: createMilestone(() => ({
+            display: {
+                requirement: "10 Ribbons",
+                effectDisplay: "Carol will now mix secondary dyes for you"
+            },
+            shouldEarn: () => Decimal.gte(ribbon.value, 10)
+        })),
+        dyeBook: createMilestone(() => ({
+            display: {
+                requirement: "20 Ribbons",
+                effectDisplay: "Unlock a new book"
+            },
+            shouldEarn: () => Decimal.gte(ribbon.value, 20)
+        }))
+    }
+
     const masteryReq = computed(() => Decimal.pow(2, masteredDays.value).times(30));
     const enterMasteryButton = createClickable(() => ({
         display: () => ({
@@ -121,6 +139,7 @@ const layer = createLayer(id, () => {
         day,
         color,
         ribbon,
+        milestones,
         display: jsx(() => {
             return (
                 <div style="width: 620px">

src/data/layers/wrapping-paper.tsx

@@ -2,7 +2,7 @@ import Spacer from "components/layout/Spacer.vue";
 import { createBar, GenericBar } from "features/bars/bar";
 import { BuyableOptions, createBuyable, GenericBuyable } from "features/buyable";
 import { createClickable } from "features/clickables/clickable";
-import { jsx, JSXFunction } from "features/feature";
+import { jsx, JSXFunction, showIf } from "features/feature";
 import { createMilestone } from "features/milestones/milestone";
 import MainDisplay from "features/resources/MainDisplay.vue";
 import { createResource, Resource } from "features/resources/resource";