Add barebones ribbons layer

src/data/layers/ribbon.tsx

@@ -0,0 +1,142 @@
+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 { createResource } from "features/resources/resource";
+import { createLayer, layers } from "game/layers";
+import player from "game/player";
+import { DecimalSource } from "lib/break_eternity";
+import Decimal, { formatWhole } from "util/bignum";
+import { Direction } from "util/common";
+import { render } from "util/vue";
+import { computed, unref, watchEffect } from "vue";
+import { main } from "../projEntry";
+import elves from "./elves";
+
+const id = "ribbon";
+const day = 16;
+
+const layer = createLayer(id, () => {
+    const name = "Ribbon";
+    const color = "darkred";
+
+    const ribbon = createResource<DecimalSource>(0, "Ribbon");
+
+    const masteryReq = computed(() => Decimal.pow(2, masteredDays.value).times(30));
+    const enterMasteryButton = createClickable(() => ({
+        display: () => ({
+            title: `${main.isMastery.value ? "Stop Decorating" : "Begin Decorating"} ${
+                Object.values(layers).find(
+                    layer =>
+                        unref((layer as any).mastered) === false &&
+                        !["Elves", "Management"].includes(unref(layer?.name ?? ""))
+                )?.name
+            }`,
+            description: jsx(() => {
+                return (
+                    <>
+                        <br />
+                        Decorating brings you to a separate version of each day that only allows
+                        layers that are decorated or being decorated to work. These days will have a
+                        new decoration effect that applies outside of decorating as well.
+                        <br />
+                        You can safely start and stop decorating without losing progress
+                        {main.isMastery.value ? null : (
+                            <>
+                                <br />
+                                <br />
+                                Requires {formatWhole(masteryReq.value)} total wrapping paper
+                            </>
+                        )}
+                    </>
+                );
+            })
+        }),
+        visibility: () => showIf(main.day.value === day),
+        canClick() {
+            return main.isMastery.value || Decimal.gte(ribbon.value, masteryReq.value);
+        },
+        onClick() {
+            if (!unref(enterMasteryButton.canClick)) {
+                return;
+            }
+            main.toggleMastery();
+            const layer = main.currentlyMastering.value?.id ?? "trees";
+            if (!player.tabs.includes(layer)) {
+                main.openDay(layer);
+            }
+            if (layer === "paper") {
+                // Purchase first 6 elves
+                elves.elves.cuttersElf.bought.value = true;
+                elves.elves.plantersElf.bought.value = true;
+                elves.elves.expandersElf.bought.value = true;
+                elves.elves.heatedCuttersElf.bought.value = true;
+                elves.elves.heatedPlantersElf.bought.value = true;
+                elves.elves.fertilizerElf.bought.value = true;
+            }
+        },
+        style: {
+            width: "300px",
+            minHeight: "160px"
+        }
+    }));
+
+    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}`,
+        textStyle: `color: var(--feature-foreground)`,
+        progress: () => (main.day.value === day ? Decimal.div(masteredDays.value - 6, 5) : 1),
+        display: jsx(() =>
+            main.day.value === day ? (
+                <>
+                    {masteredDays.value - 6}
+                    /5 days decorated
+                </>
+            ) : (
+                ""
+            )
+        )
+    })) as GenericBar;
+
+    watchEffect(() => {
+        if (
+            main.day.value === day &&
+            Decimal.gte(masteredDays.value, 11) &&
+            main.showLoreModal.value === false
+        ) {
+            main.completeDay();
+        }
+    });
+
+    return {
+        name,
+        day,
+        color,
+        ribbon,
+        display: jsx(() => {
+            return (
+                <div style="width: 620px">
+                    <div>
+                        {main.day.value === day
+                            ? `Decorate 5 previous days to complete the day`
+                            : `${name} Complete!`}
+                    </div>
+                    {render(dayProgress)}
+                    <Spacer />
+                    {render(enterMasteryButton)}
+                </div>
+            );
+        }),
+        minWidth: 700
+    };
+});
+
+export default layer;

src/data/projEntry.tsx

@@ -33,6 +33,7 @@ import plastic from "./layers/plastic";
 import trees from "./layers/trees";
 import workshop from "./layers/workshop";
 import wrappingPaper from "./layers/wrapping-paper";
+import ribbon from "./layers/ribbon";
 import boxesSymbol from "./symbols/cardboardBox.png";
 import clothSymbol from "./symbols/cloth.png";
 import coalSymbol from "./symbols/coal.png";
@@ -377,7 +378,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
             symbol: wrappingPaperSymbol,
             story: "You'll need to produce wrapping paper so the presents can be wrapped. The elves are getting a bit bored of their boring old workstations, so you decide to let them decorate with some wrapping paper.",
             completedStory:
-                "You've produced enough wrapping paper, and the elves are happy with their new workstations. However, some will need more than just wrapping paper to decorate.",
+                "You've produced enough wrapping paper, and the elves are happy with their new workstations. However, some will need more than just wrapping paper to decorate. For now, Good Job!",
             masteredStory: ""
         })),
         createDay(() => ({
@@ -385,8 +386,9 @@ export const main = createLayer("main", function (this: BaseLayer) {
             shouldNotify: false,
             layer: null, // "ribbons"
             symbol: ribbonsSymbol,
-            story: "",
-            completedStory: "",
+            story: "In addition to wrapping paper, you think some ribbons are in order! These should work pretty similarly, allowing you to decorate even more workstations!",
+            completedStory:
+                "Ribbon surrounds the north pole now - everything looks fantastic, and you're pretty sure now you have every single material you could possibly need to start making toys and preparing them for Christmas! With just under 10 days left until Christmas, you go to sleep giddy with anticipation. Good Job!",
             masteredStory: ""
         })),
         createDay(() => ({
@@ -555,9 +557,10 @@ export const getInitialLayers = (
     oil,
     plastic,
     dyes,
-    wrappingPaper,
     management,
-    letters
+    letters,
+    wrappingPaper,
+    ribbon
 ];
 
 /**