Merge branch 'main' of https://github.com/thepaperpilot/Advent-Incremental

src/data/layers/coal.tsx

@@ -29,6 +29,7 @@ import {
 import { noPersist, persistent } from "game/persistence";
 import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
 import { WithRequired } from "util/common";
+import { Computable } from "util/computed";
 import { render, renderGrid, renderRow } from "util/vue";
 import { computed, ref, unref } from "vue";
 import boxes from "./boxes";
@@ -48,7 +49,7 @@ interface BetterFertilizerUpgOptions {
     canAfford: () => boolean;
     onPurchase: VoidFunction;
     display: JSXFunction;
-    style: StyleValue;
+    style: Computable<StyleValue>;
     visibility: () => Visibility;
 }
 interface UnlockKilnUpgOptions {
@@ -58,7 +59,7 @@ interface UnlockKilnUpgOptions {
         title: string;
         description: string;
     };
-    style: StyleValue;
+    style: Computable<StyleValue>;
     visibility: () => Visibility;
 }
 interface EfficientSmeltherUpgOptions {
@@ -68,7 +69,7 @@ interface EfficientSmeltherUpgOptions {
         title: string;
         description: string;
     };
-    style: StyleValue;
+    style: Computable<StyleValue>;
     visibility: () => Visibility;
 }
 
@@ -361,7 +362,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Warmer Cutters",
             description: "Cut down twice as many trees/s"
         },
-        style: { color: colorText }
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        }
     }));
     const warmerPlanters = createUpgrade(() => ({
         resource: noPersist(coal),
@@ -370,7 +373,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Warmer Planters",
             description: "Plant twice as many trees/s"
         },
-        style: { color: colorText }
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        }
     }));
     const basicFertilizer = createUpgrade(() => ({
         resource: noPersist(ash),
@@ -379,7 +384,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Ashy Soil",
             description: "Trees give 25% more logs"
         },
-        style: { color: colorText }
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        }
     }));
     const unlockBonfire = createUpgrade(() => ({
         resource: fireResource,
@@ -389,9 +396,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             description: "Put all those fires together into a larger blaze"
         },
         onPurchase() {
-            fireResource.value = Decimal.add(fireResource.value, this.cost);
+            fireResource.value = Decimal.add(fireResource.value, this.cost as number);
         },
-        style: { color: colorText }
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        }
     }));
     const row1upgrades = [warmerCutters, warmerPlanters, basicFertilizer, unlockBonfire];
 
@@ -402,7 +411,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Dedicated Cutter Heaters",
             description: "Double the bonus from Heated Cutters"
         },
-        style: { color: colorText },
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        },
         visibility: () => showIf(unlockBonfire.bought.value)
     }));
     const dedicatedPlanters = createUpgrade(() => ({
@@ -412,7 +423,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Dedicated Planter Heaters",
             description: "Double the bonus from Heated Planters"
         },
-        style: { color: colorText },
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        },
         visibility: () => showIf(unlockBonfire.bought.value)
     }));
     const betterFertilizer: Upgrade<BetterFertilizerUpgOptions> = createUpgrade(() => ({
@@ -435,7 +448,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 {formatWhole(1e5)} {ash.displayName}
             </>
         )),
-        style: { color: colorText },
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        },
         visibility: () => showIf(unlockBonfire.bought.value)
     }));
 
@@ -446,7 +461,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Efficient Fires",
             description: "Move the fires underground to keep the coal from turning to ash"
         },
-        style: { color: colorText },
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        },
         visibility: () => showIf(unlockBonfire.bought.value)
     }));
     const row2upgrades = [dedicatedCutters, dedicatedPlanters, betterFertilizer, unlockKiln];
@@ -458,7 +475,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Efficient Crucibles",
             description: "Double auto smelting speed and triple metal gain from auto smelting"
         },
-        style: { color: colorText },
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        },
         visibility: () => showIf(oil.depthMilestones[4].earned.value)
     }));
     const arsonistAssistance = createUpgrade(() => ({
@@ -468,7 +487,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Arsonist Assistance",
             description: "Every elf at or above level 5 doubles ash gain"
         },
-        style: { color: colorText },
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        },
         visibility: () =>
             showIf(management.elfTraining.coalDrillElfTraining.milestones[3].earned.value)
     }));
@@ -479,7 +500,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Refined Coal",
             description: "Refineries boost coal gain"
         },
-        style: { color: colorText },
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        },
         visibility: () =>
             showIf(management.elfTraining.coalDrillElfTraining.milestones[3].earned.value)
     }));
@@ -490,7 +513,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Colored Fire",
             description: "Green dye also affects small fire synergy"
         },
-        style: { color: colorText },
+        style() {
+            return this.bought.value ? "" : { color: colorText };
+        },
         visibility: () =>
             showIf(management.elfTraining.coalDrillElfTraining.milestones[3].earned.value)
     }));

src/data/layers/factory.tsx

@@ -2430,6 +2430,7 @@ const factory = createLayer(id, () => {
         width: 600,
         height: 25,
         fillStyle: `animation: 15s factory-bar linear infinite`,
+        textStyle: `color: var(--feature-foreground)`,
         progress: () =>
             main.day.value === day
                 ? Decimal.div(toys.clothes.value, toyGoal)

src/data/layers/oil.tsx

@@ -626,7 +626,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 description: "Increase drill power by +4% per Coal Drill owned.",
                 effectDisplay: jsx(() => <>x{format(row1UpgradeEffects[0].value)}</>)
             },
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: metal.metal,
@@ -636,7 +638,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 description: "Increase drill power by +4% per Metal Drill owned.",
                 effectDisplay: jsx(() => <>x{format(row1UpgradeEffects[1].value)}</>)
             },
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: coal.coal,
@@ -646,7 +650,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 description: "Increase drill power by +6% per OoM of coal owned.",
                 effectDisplay: jsx(() => <>x{format(row1UpgradeEffects[2].value)}</>)
             },
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: metal.metal,
@@ -656,7 +662,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 description: "Increase drill power by +10% per OoM of metal ingot owned.",
                 effectDisplay: jsx(() => <>x{format(row1UpgradeEffects[3].value)}</>)
             },
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: noPersist(oil),
@@ -668,7 +676,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                     <>+{format(Decimal.mul(row1UpgradeEffects[4].value, 100))}%</>
                 ))
             },
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         }))
     ];
     const row1UpgradeEffects: ComputedRef<DecimalSource>[] = [
@@ -707,7 +717,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 title: "Oil the Oil Pump",
                 description: "Double oil gain."
             },
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: noPersist(oil),
@@ -717,7 +729,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 description:
                     "Double ore mining speed and square the coal drill amount in its effect."
             },
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: noPersist(oil),
@@ -726,7 +740,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 title: "Blaster Burner",
                 description: "The Oil Burner can now increase your auto smelting multi."
             },
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: noPersist(oil),
@@ -735,7 +751,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 title: "Oil Integration",
                 description: "Reduce Oil Pump's coal consumption multipler from 5 to 4"
             },
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: noPersist(oil),
@@ -749,7 +767,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                     </>
                 ))
             },
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         }))
     ];
     const row3Upgrades = [
@@ -762,7 +782,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             },
             visibility: () =>
                 showIf(management.elfTraining.oilElfTraining.milestones[4].earned.value),
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: noPersist(oil),
@@ -773,7 +795,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             },
             visibility: () =>
                 showIf(management.elfTraining.oilElfTraining.milestones[4].earned.value),
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: noPersist(oil),
@@ -789,7 +813,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             },
             visibility: () =>
                 showIf(management.elfTraining.oilElfTraining.milestones[4].earned.value),
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: noPersist(oil),
@@ -800,7 +826,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             },
             visibility: () =>
                 showIf(management.elfTraining.oilElfTraining.milestones[4].earned.value),
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         })),
         createUpgrade(() => ({
             resource: noPersist(oil),
@@ -811,7 +839,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             },
             visibility: () =>
                 showIf(management.elfTraining.oilElfTraining.milestones[4].earned.value),
-            style: { color: colorText }
+            style() {
+                return this.bought.value ? "" : { color: colorText };
+            }
         }))
     ];
     const coalConsumption = createSequentialModifier(() => [

src/data/layers/sleigh.tsx

@@ -0,0 +1,225 @@
+/**
+ * @module
+ * @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 { jsx, showIf } from "features/feature";
+import { createMilestone } from "features/milestones/milestone";
+import { BaseLayer, createLayer } from "game/layers";
+import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
+import { Direction} from "util/common";
+import { render } from "util/vue";
+import { computed, watchEffect } from "vue";
+import management from "./management";
+import trees from "./trees";
+import metal from "./metal";
+import plastic from "./plastic"
+import { createBuyable, GenericBuyable } from "features/buyable";
+import { Resource } from "features/resources/resource";
+import { isArray } from "@vue/shared";
+
+const id = "sleigh";
+const day = 22;
+const layer = createLayer(id, function (this: BaseLayer) {
+    const name = "Sleigh";
+    const color = "#D71830";
+    const colorDark = "#A01020";
+    function displayCost(
+        res: Resource<DecimalSource> | Resource<DecimalSource>[],
+        cost: DecimalSource,
+        label: string
+    ) {
+        const affordable = (isArray(res) ? res : [res]).every(res => Decimal.gte(res.value, cost));
+        return (
+            <span class={affordable ? "" : "unaffordable"}>
+                {format(cost)} {label}
+            </span>
+        );
+    }
+    const sleighProgress = computed(() => sleigh.amount)
+    const sleighCost = computed(() => {
+        let v = sleighProgress.value.value;
+        return {
+            wood: Decimal.mul(1e60, Decimal.pow(1.2, v)),
+            metal: Decimal.mul(1e40, Decimal.pow(1.1, v)),
+            plastic: Decimal.mul(1e10, Decimal.pow(1.05, v))
+        };
+    });
+    const sleigh = createBuyable(() => ({
+        display: jsx(() => (
+            <>
+                <b style="font-size: x-large">Fix 1% of the sleigh</b>
+                <br />
+                <br />
+                <span style="font-size: large">
+                    Cost: {displayCost(trees.logs, sleighCost.value.wood, "logs")},
+                    {displayCost(metal.metal, sleighCost.value.metal, "metal")},
+                    {displayCost(plastic.plastic, sleighCost.value.plastic, "plastic")}
+                </span>
+            </>
+        )),
+        canPurchase(): boolean {
+            return (
+                sleighCost.value.wood.lte(trees.logs.value) &&
+                sleighCost.value.metal.lte(metal.metal.value) &&
+                sleighCost.value.plastic.lte(plastic.plastic.value)
+            );
+        },
+        onPurchase() {
+            this.amount.value = Decimal.add(this.amount.value, 1);
+        },
+        visibility: () => showIf(Decimal.lt(sleighProgress.value.value, 100)),
+        style: "width: 600px"
+    })) as GenericBuyable;
+
+    const shouldShowPopups = computed(() => true);
+    const milestone1 = createMilestone(() => ({
+        display: {
+            requirement: "1% Sleigh Fixed",
+            effectDisplay: "Ore gives 5% more metal for each % of sleigh fixed"
+        },
+        shouldEarn: () => Decimal.gte(sleighProgress.value.value, 1),
+        showPopups: shouldShowPopups
+    }));
+    const milestone2 = createMilestone(() => ({
+        display: {
+            requirement: "10% Sleigh Fixed",
+            effectDisplay: "Gain an additional 5% more wood for each 5% of sleigh fixed"
+        },
+        shouldEarn: () => Decimal.gte(sleighProgress.value.value, 10),
+        showPopups: shouldShowPopups
+    }));
+    const milestone3 = createMilestone(() => ({
+        display: {
+            requirement: "20% Sleigh Fixed",
+            effectDisplay: "Gain an additional 5% more plastic for each 5% of sleigh fixed"
+        },
+        shouldEarn: () => Decimal.gte(sleighProgress.value.value, 20),
+        showPopups: shouldShowPopups
+    }));
+    const milestone4 = createMilestone(() => ({
+        display: {
+            requirement: "30% Sleigh Fixed",
+            effectDisplay: "All automatic metal actions are doubled"
+        },
+        shouldEarn: () => Decimal.gte(sleighProgress.value.value, 30),
+        showPopups: shouldShowPopups
+    }));
+    const milestone5 = createMilestone(() => ({
+        display: {
+            requirement: "40% Sleigh Fixed",
+            effectDisplay: "Plastic gain is doubled"
+        },
+        shouldEarn: () => Decimal.gte(sleighProgress.value.value, 40),
+        showPopups: shouldShowPopups
+    }));
+    const milestone6 = createMilestone(() => ({
+        display: {
+            requirement: "50% Sleigh Fixed",
+            effectDisplay: "Trees give 10x as many logs"
+        },
+        shouldEarn: () => Decimal.gte(sleighProgress.value.value, 50),
+        showPopups: shouldShowPopups
+    }));
+    const milestone7 = createMilestone(() => ({
+        display: {
+            requirement: "75% Sleigh Fixed",
+            effectDisplay: "Gain 10 extra refineries for every 2% of sleigh fixed"
+        },
+        shouldEarn: () => Decimal.gte(sleighProgress.value.value, 75),
+        showPopups: shouldShowPopups
+    }));
+    const milestone8 = createMilestone(() => ({
+        display: {
+            requirement: "100% Sleigh Fixed",
+            effectDisplay: "Metal per ore is raised to the 1.2th power"
+        },
+        shouldEarn: () => Decimal.gte(sleighProgress.value.value, 100),
+        showPopups: shouldShowPopups
+    }));
+    const milestones = {
+        milestone1,
+        milestone2,
+        milestone3,
+        milestone4,
+        milestone5,
+        milestone6,
+        milestone7,
+        milestone8
+    };
+    const { collapseMilestones, display: milestonesDisplay } =
+        createCollapsibleMilestones(milestones);
+
+    const dayProgress = createBar(() => ({
+        direction: Direction.Right,
+        width: 600,
+        height: 25,
+        fillStyle: `backgroundColor: ${colorDark}`,
+        progress: () =>
+            main.day.value === day || main.currentlyMastering.value?.name === name
+                ? Decimal.div(sleighProgress.value.value, 100)
+                : 1,
+        display: jsx(() =>
+            main.day.value === day || main.currentlyMastering.value?.name === name ? (
+                <>{formatWhole(sleighProgress.value.value)}%</>
+            ) : (
+                ""
+            )
+        )
+    }));
+
+    watchEffect(() => {
+        if (main.day.value === day && Decimal.gte(sleighProgress.value.value, 100)) {
+            main.completeDay();
+        } 
+    });
+
+    return {
+        name,
+        day,
+        color,
+        sleighProgress,
+        milestones,
+        collapseMilestones,
+        minWidth: 700,
+        sleigh,
+        display: jsx(() => (
+            <>
+                <div>
+                    {main.day.value === day
+                        ? `Fix the sleigh to complete the day`
+                        : `${name} Complete!`}
+                </div>
+                {render(dayProgress)}
+                <Spacer />
+                <div>
+                    <span>The sleigh is </span>
+                    <h2 style={`color: ${color}; text-shadow: 0 0 10px ${color}`}>
+                        {formatWhole(sleighProgress.value.value)}
+                    </h2>
+                    % fixed
+                </div>
+                {Decimal.lt(sleighProgress.value.value, 100) ||
+                management.elfTraining.expandersElfTraining.milestones[2].earned.value ? (
+                    <Spacer />
+                ) : null}
+                {render(sleigh)}
+                <Spacer />
+                {milestonesDisplay()}
+            </>
+        )),
+        minimizedDisplay: jsx(() => (
+            <div>
+                {name}{" "}
+                <span class="desc">
+                    {formatWhole(sleighProgress.value.value)}% sleigh
+                </span>
+            </div>
+        )),
+    };
+});
+
+export default layer;

src/data/layers/workshop.tsx

@@ -30,6 +30,7 @@ import {
 import { noPersist, persistent } from "game/persistence";
 import Decimal, { DecimalSource, formatWhole } from "util/bignum";
 import { Direction, WithRequired } from "util/common";
+import { loadingSave } from "util/save";
 import { render } from "util/vue";
 import { computed, ref, unref, watchEffect } from "vue";
 import elves from "./elves";
@@ -144,7 +145,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
     }));
 
     watchEffect(() => {
-        if (Decimal.lt(computedMaxFoundation.value, foundationProgress.value)) {
+        if (
+            !loadingSave.value &&
+            Decimal.lt(computedMaxFoundation.value, foundationProgress.value)
+        ) {
             foundationProgress.value = Decimal.min(0, computedMaxFoundation.value);
         }
     });

src/data/projEntry.tsx

@@ -36,6 +36,7 @@ import ribbon from "./layers/ribbon";
 import toys from "./layers/toys";
 import trees from "./layers/trees";
 import workshop from "./layers/workshop";
+import sleigh from "./layers/sleigh";
 import wrappingPaper from "./layers/wrapping-paper";
 import boxesSymbol from "./symbols/cardboardBox.png";
 import clothSymbol from "./symbols/cloth.png";
@@ -487,9 +488,9 @@ export const main = createLayer("main", function (this: BaseLayer) {
         createDay(() => ({
             day: 22,
             shouldNotify: false,
-            layer: null, // "sleigh"
+            layer: "sleigh", // "sleigh"
             symbol: "",
-            story: "",
+            story: "default body",
             completedStory: "",
             masteredStory: ""
         })),
@@ -621,7 +622,8 @@ export const getInitialLayers = (
     ribbon,
     toys,
     factory,
-    reindeer
+    reindeer,
+    sleigh
 ];
 
 /**