Implemented letters mastery

src/data/layers/elves.tsx

@@ -38,6 +38,7 @@ import workshop from "./workshop";
 import wrappingPaper from "./wrapping-paper";
 import dyes, { enumColor } from "./dyes";
 import ribbon from "./ribbon";
+import letters from "./letters";
 
 export interface ElfBuyable extends GenericBuyable {
     /** The inverse function of the cost formula, used to calculate the maximum amount that can be bought by elves. */
@@ -545,28 +546,36 @@ const layer = createLayer(id, function (this: BaseLayer) {
             modifier: coalDrillCooldown,
             base: 10,
             unit: "/s",
-            visible: management.elfTraining.expandersElfTraining.milestones[3].earned
+            visible: () =>
+                management.elfTraining.expandersElfTraining.milestones[3].earned.value ||
+                letters.masteryEffectActive.value
         },
         {
             title: "Frosty Auto-Buy Frequency",
             modifier: heavyDrillCooldown,
             base: 10,
             unit: "/s",
-            visible: management.elfTraining.cutterElfTraining.milestones[4].earned.value
+            visible: () =>
+                management.elfTraining.cutterElfTraining.milestones[4].earned.value ||
+                letters.masteryEffectActive.value
         },
         {
             title: "Cocoa Auto-Buy Frequency",
             modifier: oilCooldown,
             base: 10,
             unit: "/s",
-            visible: management.elfTraining.heatedCutterElfTraining.milestones[4].earned.value
+            visible: () =>
+                management.elfTraining.heatedCutterElfTraining.milestones[4].earned.value ||
+                letters.masteryEffectActive.value
         },
         {
             title: "Twinkle Auto-Buy Frequency",
             modifier: metalCooldown,
             base: 10,
             unit: "/s",
-            visible: management.elfTraining.fertilizerElfTraining.milestones[4].earned
+            visible: () =>
+                management.elfTraining.fertilizerElfTraining.milestones[4].earned.value ||
+                letters.masteryEffectActive.value
         },
         {
             title: "Carol Auto-Buy Frequency",
@@ -580,7 +589,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
             modifier: plasticCooldown,
             base: 10,
             unit: "/s",
-            visible: plastic.masteryEffectActive.value
+            visible: plastic.masteryEffectActive
         }
     ]);
     const showModifiersModal = ref(false);
@@ -887,7 +896,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         buyable: coal.buildDrill,
         cooldownModifier: coalDrillCooldown,
         visibility: () =>
-            showIf(management.elfTraining.expandersElfTraining.milestones[3].earned.value),
+            showIf(
+                management.elfTraining.expandersElfTraining.milestones[3].earned.value ||
+                    letters.masteryEffectActive.value
+            ),
         hasToggle: true,
         toggleDesc: "Activate auto-purchased coal drills",
         onAutoPurchase(_, amount) {
@@ -903,7 +915,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         buyable: [oil.buildHeavy, oil.buildHeavy2, oil.buildExtractor],
         cooldownModifier: heavyDrillCooldown,
         visibility: () =>
-            showIf(management.elfTraining.cutterElfTraining.milestones[4].earned.value),
+            showIf(
+                management.elfTraining.cutterElfTraining.milestones[4].earned.value ||
+                    letters.masteryEffectActive.value
+            ),
         hasToggle: true,
         toggleDesc: "Activate auto-purchased oil drills",
         onAutoPurchase(buyable, amount) {
@@ -925,7 +940,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         buyable: [oil.buildPump, oil.buildBurner, oil.buildSmelter],
         cooldownModifier: oilCooldown,
         visibility: () =>
-            showIf(management.elfTraining.heatedCutterElfTraining.milestones[4].earned.value),
+            showIf(
+                management.elfTraining.heatedCutterElfTraining.milestones[4].earned.value ||
+                    letters.masteryEffectActive.value
+            ),
         hasToggle: true,
         toggleDesc: "Activate auto-purchased oil-using machines",
         onAutoPurchase(buyable, amount) {
@@ -948,7 +966,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         buyable: [metal.oreDrill, metal.industrialCrucible, metal.hotterForge],
         cooldownModifier: metalCooldown,
         visibility: () =>
-            showIf(management.elfTraining.fertilizerElfTraining.milestones[4].earned.value)
+            showIf(
+                management.elfTraining.fertilizerElfTraining.milestones[4].earned.value ||
+                    letters.masteryEffectActive.value
+            )
     });
     const managementElves2 = [metalElf];
 

src/data/layers/letters.tsx

@@ -189,13 +189,17 @@ const layer = createLayer(id, function (this: BaseLayer) {
         createCollapsibleMilestones(milestones);
 
     const synergy = computed(() => {
-        const amount = Decimal.add(totalLetters.value, 1);
+        let amount = Decimal.add(totalLetters.value, 1);
         if (synergyMilestone.earned.value) {
             const preSoftcap = Decimal.log2(10001).add(1);
-            return preSoftcap.add(amount.sub(9999).sqrt());
+            amount = preSoftcap.add(amount.sub(9999).sqrt());
         } else {
-            return Decimal.log2(amount).add(1);
+            amount = Decimal.log2(amount).add(1);
         }
+        if (masteryEffectActive.value) {
+            amount = Decimal.pow(amount, 2);
+        }
+        return amount;
     });
 
     const lettersGain = createSequentialModifier(() => [
@@ -217,6 +221,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
         createMultiplicativeModifier(() => ({
             multiplier: () => Decimal.div(metalBuyable.amount.value, 2).add(1).recip(),
             description: "Sorting Machine"
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: () => Decimal.sqrt(synergy.value).recip(),
+            description: "Letters Decoration",
+            enabled: masteryEffectActive
         }))
     ]);
     const computedProcessingCooldown = computed(() => processingCooldown.apply(5));
@@ -313,6 +322,17 @@ const layer = createLayer(id, function (this: BaseLayer) {
             <>
                 {render(trackerDisplay)}
                 <Spacer />
+                {masteryEffectActive.value ? (
+                    <>
+                        <div class="decoration-effect ribbon">
+                            Decoration effect:
+                            <br />
+                            Letter processing experience is stronger and affects processing cooldown
+                            at reduced rate
+                        </div>
+                        <Spacer />
+                    </>
+                ) : null}
                 <MainDisplay resource={letters} color={color} />
                 {render(process)}
                 <div>
@@ -334,7 +354,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
             </div>
         )),
         mastery,
-        mastered
+        mastered,
+        masteryEffectActive
     };
 });
 

src/data/layers/ribbon.tsx

@@ -128,7 +128,9 @@ const layer = createLayer(id, () => {
         createCollapsibleMilestones(milestones);
 
     const masteryReq = computed(() =>
-        Decimal.sub(masteredDays.value, 5).times(Decimal.sub(masteredDays.value, 4).div(2))
+        Decimal.sub(main.masteredDays.value, 5).times(
+            Decimal.sub(main.masteredDays.value, 4).div(2)
+        )
     );
     const enterMasteryButton = createClickable(() => ({
         display: () => ({
@@ -174,6 +176,11 @@ const layer = createLayer(id, () => {
             }
             if (layer === "cloth") {
                 elves.elves.plasticElf.bought.value = true;
+            } else if (layer === "letters") {
+                elves.elves.coalDrillElf.bought.value = true;
+                elves.elves.heavyDrillElf.bought.value = true;
+                elves.elves.oilElf.bought.value = true;
+                elves.elves.metalElf.bought.value = true;
             }
         },
         style: {
@@ -182,22 +189,16 @@ const layer = createLayer(id, () => {
         }
     }));
 
-    const masteredDays = computed(() =>
-        Object.values(layers)
-            .filter(l => l && "mastered" in l)
-            .findIndex(l => (l as any).mastered.value === false)
-    );
-
     const dayProgress = createBar(() => ({
         direction: Direction.Right,
         width: 600,
         height: 25,
         fillStyle: `backgroundColor: ${color}`,
-        progress: () => (main.day.value === day ? Decimal.div(masteredDays.value - 6, 5) : 1),
+        progress: () => (main.day.value === day ? Decimal.div(main.masteredDays.value - 6, 5) : 1),
         display: jsx(() =>
             main.day.value === day ? (
                 <>
-                    {masteredDays.value - 6}
+                    {main.masteredDays.value - 6}
                     /5 days decorated
                 </>
             ) : (
@@ -209,7 +210,7 @@ const layer = createLayer(id, () => {
     watchEffect(() => {
         if (
             main.day.value === day &&
-            Decimal.gte(masteredDays.value, 11) &&
+            Decimal.gte(main.masteredDays.value, 11) &&
             main.showLoreModal.value === false
         ) {
             main.completeDay();

src/data/layers/wrapping-paper.tsx

@@ -300,7 +300,9 @@ const layer = createLayer(id, () => {
         }
     }));
 
-    const masteryReq = computed(() => Decimal.add(masteredDays.value, 1).times(20).add(140).ceil());
+    const masteryReq = computed(() =>
+        Decimal.add(main.masteredDays.value, 1).times(20).add(140).ceil()
+    );
 
     const enterMasteryButton = createClickable(() => ({
         display: () => ({
@@ -360,23 +362,17 @@ const layer = createLayer(id, () => {
         }
     }));
 
-    const masteredDays = computed(() =>
-        Object.values(layers)
-            .filter(l => l && "mastered" in l)
-            .findIndex(l => (l as any).mastered.value === false)
-    );
-
     const dayProgress = createBar(() => ({
         direction: Direction.Right,
         width: 600,
         height: 25,
         fillStyle: `animation: 15s wrapping-paper-bar linear infinite`,
         textStyle: `color: var(--feature-foreground)`,
-        progress: () => (main.day.value === day ? Decimal.div(masteredDays.value, 6) : 1),
+        progress: () => (main.day.value === day ? Decimal.div(main.masteredDays.value, 6) : 1),
         display: jsx(() =>
             main.day.value === day ? (
                 <>
-                    {masteredDays.value}
+                    {main.masteredDays.value}
                     /6 days decorated
                 </>
             ) : (
@@ -388,7 +384,7 @@ const layer = createLayer(id, () => {
     watchEffect(() => {
         if (
             main.day.value === day &&
-            Decimal.gte(masteredDays.value, 6) &&
+            Decimal.gte(main.masteredDays.value, 6) &&
             main.showLoreModal.value === false
         ) {
             main.completeDay();

src/data/projEntry.tsx

@@ -119,6 +119,16 @@ export const main = createLayer("main", function (this: BaseLayer) {
         }
     }
 
+    const masteredDays = computed(() => {
+        let index = Object.values(layers)
+            .filter(l => l && "mastered" in l)
+            .findIndex(l => (l as any).mastered.value === false);
+        if (index === -1) {
+            index = Object.values(layers).filter(l => l && "mastered" in l).length;
+        }
+        return index;
+    });
+
     function openDay(layer: string) {
         // 1468 is because two tabs with minWidth of 700px plus the minimized calendar of 60px plus 2 dividers of 4px each
         if (window.matchMedia("(min-width: 1468px)").matches) {
@@ -513,6 +523,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
         toggleMastery,
         swappingMastery,
         currentlyMastering,
+        masteredDays,
         display: jsx(() => (
             <>
                 {player.devSpeed === 0 ? <div>Game Paused</div> : null}