Fix inflation

src/data/layers/routing.tsx

@@ -21,7 +21,7 @@ import {
     createMultiplicativeModifier,
     createSequentialModifier
 } from "game/modifiers";
-import { persistent } from "game/persistence";
+import { DefaultValue, persistent } from "game/persistence";
 import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
 import { Direction } from "util/common";
 import { render, renderRow } from "util/vue";
@@ -65,7 +65,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const citiesGoal = 10;
 
-    const citiesCompleted = createResource<DecimalSource>(0, "countries solved");
+    const citiesCompleted = createResource<DecimalSource>(0, "cities solved");
     const currentCity = persistent<number[][]>([]);
     const routeIndex = persistent<number>(0);
     const checkRouteProgress = persistent<number>(0);
@@ -143,10 +143,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
     function stringifyRoute(route: number[]) {
         return route
             .map(h => (city.types.house.title as (node: BoardNode) => string)(city.nodes.value[h]))
-            .join("->");
+            .join(" > ");
     }
 
     function generateCity() {
+        if (Decimal.lte(citiesCompleted.value, 50)) {
             const numHouses = new Decimal(computedHouses.value).clampMin(3).toNumber();
             const min = computedMinWeight.value;
             const max = milestone6.earned.value ? min : computedMaxWeight.value;
@@ -173,6 +174,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
             routesToSkip.value = [];
             getNextRoute();
         }
+    }
 
     function getNextRoute() {
         const numRoutes =
@@ -342,12 +344,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
         },
         width: "600px",
         height: "600px",
-        style: {
-            background: "var(--raised-background)",
-            borderRadius: "var(--border-radius) var(--border-radius) 0 0",
-            boxShadow: "0 2px 10px rgb(0 0 0 / 50%)"
-        },
         state: computed(() => {
+            if (Decimal.gte(citiesCompleted.value, 20))
+                return {
+                    nodes: [],
+                    selectedNode: null,
+                    selectedAction: null
+                };
             const nodes: BoardNode[] = [];
             const city = currentCity.value;
             const rows = Math.ceil(Math.sqrt(city.length));
@@ -373,6 +376,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
             };
         }),
         links() {
+            if (Decimal.gte(citiesCompleted.value, 20)) return [];
             const links: BoardNodeLink[] = [];
             const route = currentRoute.value;
             if (route == null) {
@@ -432,6 +436,44 @@ const layer = createLayer(id, function (this: BaseLayer) {
         }
     }));
 
+    const checkCityProgressBar = createBar(() => ({
+        direction: Direction.Right,
+        width: 597,
+        height: 24,
+        style: {
+            borderRadius: "var(--border-radius) var(--border-radius) 0 0",
+            background: "var(--raised-background)",
+            marginBottom: "-24px"
+        },
+        borderStyle: {
+            borderRadius: "var(--border-radius) var(--border-radius) 0 0",
+            borderColor: "transparent",
+            marginBottom: "unset"
+        },
+        fillStyle: {
+            background: "black",
+            marginBottom: "unset"
+        },
+        progress() {
+            return Decimal.div(
+                routeIndex.value,
+                typeof currentRoutes.value == "number"
+                    ? Math.floor(currentRoutes.value)
+                    : currentRoutes.value.length
+            );
+        },
+        display: jsx(() => (
+            <>
+                {formatWhole(Math.floor(routeIndex.value))} /{" "}
+                {formatWhole(
+                    typeof currentRoutes.value == "number"
+                        ? Math.floor(currentRoutes.value)
+                        : currentRoutes.value.length
+                )}
+            </>
+        ))
+    }));
+
     const checkRouteProgressBar = createBar(() => ({
         direction: Direction.Right,
         width: 597,
@@ -443,7 +485,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         },
         borderStyle: {
             borderRadius: "0 0 var(--border-radius) var(--border-radius)",
-            borderColor: "var(--outline)",
+            borderColor: "transparent",
             marginTop: "unset"
         },
         fillStyle: {
@@ -455,7 +497,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
         },
         display: jsx(() => (
             <>
-                {Math.floor(checkRouteProgress.value)}/{currentRouteDuration.value}
+                {formatWhole(Math.floor(checkRouteProgress.value))} /{" "}
+                {formatWhole(currentRouteDuration.value)}
             </>
         ))
     }));
@@ -505,7 +548,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
     const milestone5 = createMilestone(() => ({
         display: {
             requirement: "5 Countries Solved",
-            effectDisplay: "Remove 1 city"
+            effectDisplay: "Remove 1 city from the map"
         },
         shouldEarn() {
             return Decimal.gte(citiesCompleted.value, 5);
@@ -616,46 +659,61 @@ const layer = createLayer(id, function (this: BaseLayer) {
         }))
     ]);
     const computedAutoProcessing = computed(() => autoProcessing.apply(1));
+    const metaSolvingSpeed = createSequentialModifier(() => []);
+    const computedMetaSolvingSpeed = computed(() => metaSolvingSpeed.apply(20));
 
     const [generalTab, generalTabCollapsed] = createCollapsibleModifierSections(() => [
         {
             title: "Cities/country",
             modifier: houses,
-            base: 3
+            base: 3,
+            visible: () => Decimal.lte(citiesCompleted.value, 50)
         },
         {
             title: () => (milestone6.earned.value ? "Weight" : "Minimum Weight"),
             modifier: minWeight,
-            base: 2
+            base: 2,
+            visible: () => Decimal.lte(citiesCompleted.value, 50)
         },
         {
             title: "Maximum Weight",
             modifier: maxWeight,
             base: 10,
-            visible: () => !milestone6.earned.value
+            visible: () => !milestone6.earned.value && Decimal.lte(citiesCompleted.value, 50)
         },
         {
             title: "Manual Processing Amount",
             modifier: manualBoost,
-            base: 1
+            base: 1,
+            visible: () => Decimal.lte(citiesCompleted.value, 50)
         },
         {
             title: "Manual Processing Cooldown",
             modifier: manualCooldown,
             base: 1,
-            unit: "s"
+            unit: "s",
+            visible: () => Decimal.lte(citiesCompleted.value, 50)
         },
         {
             title: "Remove Redundant Route Cooldown",
             modifier: redundantCooldown,
             base: 10,
-            unit: "s"
+            unit: "s",
+            visible: () => Decimal.lte(citiesCompleted.value, 50)
         },
         {
             title: "Auto Processing Speed",
             modifier: autoProcessing,
             base: 1,
-            unit: "/s"
+            unit: "/s",
+            visible: () => Decimal.lte(citiesCompleted.value, 50)
+        },
+        {
+            title: "Post-Inflation Solving Speed",
+            modifier: metaSolvingSpeed,
+            base: 20,
+            unit: "/s",
+            visible: () => Decimal.gt(citiesCompleted.value, 50)
         }
     ]);
     const showModifiersModal = ref(false);
@@ -674,7 +732,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         if (Decimal.lt(main.day.value, day)) {
             return;
         }
-
+        if (Decimal.lte(citiesCompleted[DefaultValue], 50)) {
             if (Decimal.gte(newCityProgress.value, 10)) {
                 newCityProgress.value = 10;
             } else {
@@ -723,6 +781,12 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 }
                 getNextRoute();
             }
+        } else {
+            citiesCompleted.value = Decimal.add(
+                citiesCompleted.value,
+                computedMetaSolvingSpeed.value
+            );
+        }
     });
 
     const dayProgress = createBar(() => ({
@@ -757,16 +821,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
             return "";
         }
         if (typeof currentRoutes.value === "number") {
-            return (
+            return <div class="routes-list">&nbsp;</div>;
-                <div class="routes-list">
-                    {routeIndex.value > 0 ? (
-                        <div class="checked">{formatWhole(routeIndex.value)} already checked</div>
-                    ) : null}
-                    <div>
-                        {formatWhole(currentRoutes.value - routeIndex.value)} routes left to check
-                    </div>
-                </div>
-            );
         }
         if (typeof currentRoutes.value === "number") {
             console.error("Something went horribly wrong");
@@ -774,22 +829,17 @@ const layer = createLayer(id, function (this: BaseLayer) {
         }
         const routes = currentRoutes.value.slice();
         let showPrevious = false;
-        let showNext = 0;
+        if (routes.length > 25) {
-        if (routes.length > 6) {
+            routes.splice(0, Math.max(routeIndex.value - 12, 0));
-            routes.splice(0, routeIndex.value);
             showPrevious = true;
-            if (routes.length > 6) {
+            if (routes.length > 25) {
-                showNext = routes.length - 5;
+                routes.splice(25);
-                routes.splice(5);
             }
         }
         return (
             <div class="routes-list">
-                {showPrevious && routeIndex.value > 0 ? (
-                    <div class="checked">{formatWhole(routeIndex.value)} already checked</div>
-                ) : null}
                 {routes.map((route, i) => {
-                    const index = i + (showPrevious ? routeIndex.value : 0);
+                    const index = i + (showPrevious ? Math.max(routeIndex.value - 12, 0) : 0);
                     return (
                         <div
                             class={{
@@ -799,13 +849,14 @@ const layer = createLayer(id, function (this: BaseLayer) {
                                 skipped:
                                     routeIndex.value < index && routesToSkip.value.includes(index)
                             }}
+                            style={{
+                                "--opacity": 1 - Math.abs(index - routeIndex.value) / 13
+                            }}
                         >
                             {stringifyRoute(route)}
                         </div>
                     );
                 })}
-
-                {showNext > 0 ? <div>+ {formatWhole(showNext)} more</div> : null}
             </div>
         );
     }
@@ -849,19 +900,28 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 {render(modifiersModal)}
                 <Spacer />
                 <MainDisplay resource={citiesCompleted} color={color} />
+                {Decimal.lte(citiesCompleted.value, 50) ? (
+                    <>
                         {renderRow(boost, removeRedundantRoute)}
+                        {render(checkCityProgressBar)}
+                        {displayRoutes()}
                         {render(city)}
                         {render(checkRouteProgressBar)}
                         <Spacer />
-                <h3>Checking Routes...</h3>
-                {displayRoutes()}
-                <Spacer />
                         {milestonesDisplay()}
                     </>
+                ) : (
+                    <>
+                        You're solving {formatWhole(computedMetaSolvingSpeed.value)} cities per
+                        second
+                    </>
+                )}
+            </>
         )),
         minimizedDisplay: jsx(() => (
             <div>
-                {name} <span class="desc">{format(citiesCompleted.value)} countries solved</span>
+                {name}{" "}
+                <span class="desc">{formatWhole(citiesCompleted.value)} countries solved</span>
             </div>
         ))
     };

src/data/layers/styles/routing.css

@@ -1,3 +1,15 @@
+.routes-list {
+    width: 600px;
+    height: 573px;
+    margin-bottom: -604px;
+    margin-top: -4px;
+    padding-top: 35px;
+    pointer-events: none;
+    border-radius: var(--border-radius);
+    background: var(--raised-background);
+    box-shadow: 0 2px 10px rgb(0 0 0 / 50%);
+}
+
 .routes-list .checked {
     color: var(--bought);
 }
@@ -7,7 +19,7 @@
 }
 
 .routes-list .redundant:not(.checked):not(.processing) {
-    opacity: 0.5;
+    color: var(--accent1);
 }
 
 .routes-list .skipped {
@@ -16,5 +28,12 @@
 }
 
 .routes-list > * {
+    position: relative;
+    --opacity: 1;
     flex: 1 1 33%;
+    opacity: var(--opacity);
+    transition: all 0s;
+}
+.routes-list + div {
+    position: relative;
 }