Implemented day 8

src/data/Scene.vue

@@ -1,5 +1,11 @@
 <template>
     <div class="scene">
+        <img
+            v-if="day >= 7"
+            :src="cloth"
+            class="scene-item"
+            style="left: 4%; bottom: 3%; width: 40px; height: 40px"
+        />
         <img v-if="day >= 0" :src="tree" class="scene-item" style="left: 10%; bottom: 10%" />
         <img v-if="day >= 1" :src="workshop" class="scene-item" style="left: 40%; bottom: 12%" />
         <img
@@ -30,6 +36,7 @@ import elves from "./symbols/elf.png";
 import paper from "./symbols/paperStacks.png";
 import boxes from "./symbols/cardboardBox.png";
 import metal from "./symbols/metal.png";
+import cloth from "./symbols/cloth.png";
 
 defineProps<{
     day: number;

src/data/layers/cloth.tsx

@@ -0,0 +1,430 @@
+/**
+ * @module
+ * @hidden
+ */
+import Spacer from "components/layout/Spacer.vue";
+import Modal from "components/Modal.vue";
+import { createCollapsibleModifierSections, setUpDailyProgressTracker } from "data/common";
+import { main } from "data/projEntry";
+import { createBar } from "features/bars/bar";
+import { createBuyable } from "features/buyable";
+import { createClickable } from "features/clickables/clickable";
+import { jsx, showIf } from "features/feature";
+import MainDisplay from "features/resources/MainDisplay.vue";
+import { createResource } from "features/resources/resource";
+import { createUpgrade } from "features/upgrades/upgrade";
+import { globalBus } from "game/events";
+import { BaseLayer, createLayer } from "game/layers";
+import { createAdditiveModifier, createSequentialModifier } from "game/modifiers";
+import { noPersist, persistent } from "game/persistence";
+import Decimal, { DecimalSource } from "util/bignum";
+import { formatWhole } from "util/break_eternity";
+import { Direction } from "util/common";
+import { render, renderRow } from "util/vue";
+import { computed, ref } from "vue";
+import metal from "./metal";
+import paper from "./paper";
+import trees from "./trees";
+
+const id = "cloth";
+const day = 8;
+const layer = createLayer(id, function (this: BaseLayer) {
+    const name = "Cloth";
+    const color = "white";
+
+    const cloth = createResource<DecimalSource>(0, "cloth");
+    const wool = createResource<DecimalSource>(0, "wool");
+    const sheep = createResource<DecimalSource>(10, "sheep");
+
+    const breedingProgress = persistent<DecimalSource>(0);
+    const breedingProgressBar = createBar(() => ({
+        direction: Direction.Right,
+        width: 100,
+        height: 10,
+        style: "margin-top: 8px",
+        baseStyle: "margin-top: 0",
+        fillStyle: "margin-top: 0; transition-duration: 0s",
+        progress: () => Decimal.div(breedingProgress.value, computedBreedingCooldown.value)
+    }));
+    const breeding = createClickable(() => ({
+        display: {
+            title: "Breed sheep",
+            description: jsx(() => (
+                <>
+                    Breed {formatWhole(Decimal.floor(computedSheepGain.value))} sheep
+                    <br />
+                    {render(breedingProgressBar)}
+                </>
+            ))
+        },
+        style: {
+            minHeight: "80px"
+        },
+        canClick: () => Decimal.gte(breedingProgress.value, computedBreedingCooldown.value),
+        onClick() {
+            if (Decimal.lt(breedingProgress.value, computedBreedingCooldown.value)) {
+                return;
+            }
+            const amount = Decimal.floor(computedSheepGain.value);
+            sheep.value = Decimal.add(sheep.value, amount);
+            breedingProgress.value = 0;
+        }
+    }));
+
+    const shearingProgress = persistent<DecimalSource>(0);
+    const shearingProgressBar = createBar(() => ({
+        direction: Direction.Right,
+        width: 100,
+        height: 10,
+        style: "margin-top: 8px",
+        baseStyle: "margin-top: 0",
+        fillStyle: "margin-top: 0; transition-duration: 0s",
+        progress: () => Decimal.div(shearingProgress.value, computedShearingCooldown.value)
+    }));
+    const shearing = createClickable(() => ({
+        display: {
+            title: "Shear sheep",
+            description: jsx(() => (
+                <>
+                    Shear up to {formatWhole(Decimal.floor(computedShearingAmount.value))} sheep
+                    <br />
+                    {render(shearingProgressBar)}
+                </>
+            ))
+        },
+        style: {
+            minHeight: "80px"
+        },
+        canClick: () => Decimal.gte(shearingProgress.value, computedShearingCooldown.value),
+        onClick() {
+            if (Decimal.lt(shearingProgress.value, computedShearingCooldown.value)) {
+                return;
+            }
+            const amount = Decimal.min(sheep.value, computedShearingAmount.value).floor();
+            wool.value = Decimal.add(wool.value, amount);
+            shearingProgress.value = 0;
+        }
+    }));
+
+    const spinningProgress = persistent<DecimalSource>(0);
+    const spinningProgressBar = createBar(() => ({
+        direction: Direction.Right,
+        width: 100,
+        height: 10,
+        style: "margin-top: 8px",
+        baseStyle: "margin-top: 0",
+        fillStyle: "margin-top: 0; transition-duration: 0s",
+        progress: () => Decimal.div(spinningProgress.value, computedSpinningCooldown.value)
+    }));
+    const spinning = createClickable(() => ({
+        display: {
+            title: "Spinning wool",
+            description: jsx(() => (
+                <>
+                    Spin {formatWhole(Decimal.floor(computedSpinningAmount.value))} wool
+                    <br />
+                    {render(spinningProgressBar)}
+                </>
+            ))
+        },
+        style: {
+            minHeight: "80px"
+        },
+        canClick: () => Decimal.gte(spinningProgress.value, computedSpinningCooldown.value),
+        onClick() {
+            if (Decimal.lt(spinningProgress.value, computedSpinningCooldown.value)) {
+                return;
+            }
+            const amount = Decimal.min(wool.value, computedSpinningAmount.value).floor();
+            cloth.value = Decimal.add(cloth.value, amount);
+            wool.value = Decimal.sub(wool.value, amount);
+            spinningProgress.value = 0;
+        }
+    }));
+
+    const buildPens = createBuyable(() => ({
+        resource: trees.logs,
+        cost() {
+            let v = this.amount.value;
+            if (Decimal.gte(v, 100)) v = Decimal.pow(v, 2).div(100);
+            return Decimal.pow(1.5, v).times(1e14);
+        },
+        display: {
+            title: "Build more pens",
+            description: "Breed +1 sheep at once"
+        }
+    }));
+
+    const betterShears = createBuyable(() => ({
+        resource: metal.metal,
+        cost() {
+            let v = this.amount.value;
+            if (Decimal.gte(v, 100)) v = Decimal.pow(v, 2).div(100);
+            return Decimal.pow(1.4, v).times(10000);
+        },
+        display: {
+            title: "Make stronger shears",
+            description: "Shear +1 sheep at once"
+        }
+    }));
+
+    const fasterSpinning = createBuyable(() => ({
+        resource: paper.paper,
+        cost() {
+            let v = this.amount.value;
+            if (Decimal.gte(v, 100)) v = Decimal.pow(v, 2).div(100);
+            return Decimal.pow(1.3, v).times(1000000);
+        },
+        display: {
+            title: "Learn how to spin",
+            description: "Spin +1 wool at once"
+        }
+    }));
+
+    const treesUpgrade1 = createUpgrade(() => ({
+        resource: noPersist(cloth),
+        cost: 100,
+        display: {
+            title: "Lumberjack Boots",
+            description: "Quadruple log gain"
+        }
+    }));
+    const treesUpgrade2 = createUpgrade(() => ({
+        resource: noPersist(wool),
+        cost: 150,
+        visibility: () => showIf(treesUpgrade1.bought.value),
+        display: {
+            title: "Lumberjack Jeans",
+            description: "Quadruple trees cut"
+        }
+    }));
+    const treesUpgrade3 = createUpgrade(() => ({
+        resource: noPersist(sheep),
+        cost: 200,
+        visibility: () => showIf(treesUpgrade2.bought.value),
+        display: {
+            title: "Lumberjack Plaid",
+            description: "Quadruple trees planted"
+        }
+    }));
+    const treesUpgrades = { treesUpgrade1, treesUpgrade2, treesUpgrade3 };
+
+    const metalUpgrade1 = createUpgrade(() => ({
+        resource: noPersist(cloth),
+        cost: 150,
+        display: {
+            title: "Mining boots",
+            description: "Quadruple ash gain"
+        }
+    }));
+    const metalUpgrade2 = createUpgrade(() => ({
+        resource: noPersist(wool),
+        cost: 225,
+        visibility: () => showIf(metalUpgrade1.bought.value),
+        display: {
+            title: "Mining overalls",
+            description: "Double coal gain"
+        }
+    }));
+    const metalUpgrade3 = createUpgrade(() => ({
+        resource: noPersist(sheep),
+        cost: 300,
+        visibility: () => showIf(metalUpgrade2.bought.value),
+        display: {
+            title: "Mining helmet",
+            description: "Triple coal gain"
+        }
+    }));
+    const metalUpgrades = { metalUpgrade1, metalUpgrade2, metalUpgrade3 };
+
+    const paperUpgrade1 = createUpgrade(() => ({
+        resource: noPersist(cloth),
+        cost: 200,
+        display: {
+            title: "Scholar's shoes",
+            description: "Double paper gain"
+        }
+    }));
+    const paperUpgrade2 = createUpgrade(() => ({
+        resource: noPersist(wool),
+        cost: 200,
+        visibility: () => showIf(paperUpgrade1.bought.value),
+        display: {
+            title: "Scholar's slacks",
+            description: "Double paper gain"
+        }
+    }));
+    const paperUpgrade3 = createUpgrade(() => ({
+        resource: noPersist(sheep),
+        cost: 400,
+        visibility: () => showIf(paperUpgrade2.bought.value),
+        display: {
+            title: "Scholar's jacket",
+            description: "Double paper gain"
+        }
+    }));
+    const paperUpgrades = { paperUpgrade1, paperUpgrade2, paperUpgrade3 };
+
+    const sheepGain = createSequentialModifier(() => [
+        createAdditiveModifier(() => ({
+            addend: buildPens.amount,
+            description: "Build more pens"
+        }))
+    ]);
+    const computedSheepGain = computed(() => sheepGain.apply(1));
+    const breedingCooldown = createSequentialModifier(() => []);
+    const computedBreedingCooldown = computed(() => breedingCooldown.apply(1));
+
+    const shearingAmount = createSequentialModifier(() => [
+        createAdditiveModifier(() => ({
+            addend: betterShears.amount,
+            description: "Make stronger shears"
+        }))
+    ]);
+    const computedShearingAmount = computed(() => shearingAmount.apply(1));
+    const shearingCooldown = createSequentialModifier(() => []);
+    const computedShearingCooldown = computed(() => shearingCooldown.apply(1));
+
+    const spinningAmount = createSequentialModifier(() => [
+        createAdditiveModifier(() => ({
+            addend: fasterSpinning.amount,
+            description: "Learn how to spin"
+        }))
+    ]);
+    const computedSpinningAmount = computed(() => spinningAmount.apply(1));
+    const spinningCooldown = createSequentialModifier(() => []);
+    const computedSpinningCooldown = computed(() => spinningCooldown.apply(1));
+
+    const [generalTab, generalTabCollapsed] = createCollapsibleModifierSections(() => [
+        {
+            title: "Sheep Gain",
+            modifier: sheepGain,
+            base: 1
+        },
+        {
+            title: "Sheep Breeding Cooldown",
+            modifier: breedingCooldown,
+            base: 1,
+            visible: false,
+            unit: "s"
+        },
+        {
+            title: "Shearing Amount",
+            modifier: shearingAmount,
+            base: 1
+        },
+        {
+            title: "Shearing Cooldown",
+            modifier: shearingCooldown,
+            base: 1,
+            visible: false,
+            unit: "s"
+        },
+        {
+            title: "Spinning Amount",
+            modifier: spinningAmount,
+            base: 1
+        },
+        {
+            title: "Spinning Cooldown",
+            modifier: spinningCooldown,
+            base: 1,
+            visible: false,
+            unit: "s"
+        }
+    ]);
+    const showModifiersModal = ref(false);
+    const modifiersModal = jsx(() => (
+        <Modal
+            modelValue={showModifiersModal.value}
+            onUpdate:modelValue={(value: boolean) => (showModifiersModal.value = value)}
+            v-slots={{
+                header: () => <h2>{name} Modifiers</h2>,
+                body: generalTab
+            }}
+        />
+    ));
+
+    globalBus.on("update", diff => {
+        if (Decimal.lt(main.day.value, day)) {
+            return;
+        }
+
+        if (Decimal.gte(breedingProgress.value, computedBreedingCooldown.value)) {
+            breedingProgress.value = computedBreedingCooldown.value;
+        } else {
+            breedingProgress.value = Decimal.add(breedingProgress.value, diff);
+            if (breeding.isHolding.value) {
+                breeding.onClick();
+            }
+        }
+
+        if (Decimal.gte(shearingProgress.value, computedShearingCooldown.value)) {
+            shearingProgress.value = computedShearingCooldown.value;
+        } else {
+            shearingProgress.value = Decimal.add(shearingProgress.value, diff);
+            if (shearing.isHolding.value) {
+                shearing.onClick();
+            }
+        }
+
+        if (Decimal.gte(spinningProgress.value, computedSpinningCooldown.value)) {
+            spinningProgress.value = computedSpinningCooldown.value;
+        } else {
+            spinningProgress.value = Decimal.add(spinningProgress.value, diff);
+            if (spinning.isHolding.value) {
+                spinning.onClick();
+            }
+        }
+    });
+
+    const { total: totalCloth, trackerDisplay } = setUpDailyProgressTracker({
+        resource: cloth,
+        goal: 1e3,
+        name,
+        day,
+        color,
+        textColor: "var(--feature-foreground)",
+        modal: {
+            show: showModifiersModal,
+            display: modifiersModal
+        }
+    });
+
+    return {
+        name,
+        color,
+        cloth,
+        totalCloth,
+        wool,
+        sheep,
+        buildPens,
+        betterShears,
+        fasterSpinning,
+        treesUpgrades,
+        metalUpgrades,
+        paperUpgrades,
+        generalTabCollapsed,
+        breedingProgress,
+        shearingProgress,
+        spinningProgress,
+        minWidth: 700,
+        display: jsx(() => (
+            <>
+                {render(trackerDisplay)}
+                <Spacer />
+                <MainDisplay resource={cloth} style="margin-bottom: 0" />
+                <MainDisplay resource={wool} style="margin-bottom: 0" />
+                <MainDisplay resource={sheep} style="margin-bottom: 0" />
+                {renderRow(breeding, shearing, spinning)}
+                {renderRow(buildPens, betterShears, fasterSpinning)}
+                <Spacer />
+                {renderRow(...Object.values(treesUpgrades))}
+                {renderRow(...Object.values(metalUpgrades))}
+                {renderRow(...Object.values(paperUpgrades))}
+            </>
+        ))
+    };
+});
+
+export default layer;

src/data/layers/coal.tsx

@@ -24,13 +24,17 @@ import {
     createAdditiveModifier,
     createExponentialModifier,
     createMultiplicativeModifier,
-    createSequentialModifier
+    createSequentialModifier,
+    Modifier
 } from "game/modifiers";
 import { createUpgrade, Upgrade } from "features/upgrades/upgrade";
 import elves from "./elves";
 import paper from "./paper";
 import boxes from "./boxes";
 import metal from "./metal";
+import { cloneWithoutLoc } from "@babel/types";
+import cloth from "./cloth";
+import { WithRequired } from "util/common";
 
 interface BetterFertilizerUpgOptions {
     canAfford: () => boolean;
@@ -647,13 +651,23 @@ const layer = createLayer(id, function (this: BaseLayer) {
             description: "Kiln Synergy",
             enabled: elves.elves.kilnElf.bought
         })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 2,
+            description: "Mining overalls",
+            enabled: cloth.metalUpgrades.metalUpgrade2.bought
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 3,
+            description: "Mining helmet",
+            enabled: cloth.metalUpgrades.metalUpgrade3.bought
+        })),
         createExponentialModifier(() => ({
             exponent: 1.25,
             description: "3 Elves Trained",
             enabled: elves.milestones[2].earned,
             supportLowNumbers: true
         }))
-    ]);
+    ]) as WithRequired<Modifier, "description" | "revert">;
     const computedCoalGain = computed(() => coalGain.apply(0));
 
     const ashGain = createSequentialModifier(() => [
@@ -708,6 +722,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             multiplier: () => Decimal.div(buildKiln.amount.value, 100).add(1),
             description: "Kiln Synergy",
             enabled: elves.elves.kilnElf.bought
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 4,
+            description: "Mining boots",
+            enabled: cloth.metalUpgrades.metalUpgrade1.bought
         }))
     ]);
     const computedAshGain = computed(() => ashGain.apply(0));
@@ -804,7 +823,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         trees.logs.value = Decimal.times(diff, computedLogConsumption.value).plus(trees.logs.value);
         coal.value = Decimal.times(diff, computedCoalGain.value).plus(coal.value);
         ash.value = Decimal.times(diff, computedAshGain.value).plus(ash.value);
-        activeFires.value = Decimal.max(activeFires.value, 0)
+        activeFires.value = Decimal.max(activeFires.value, 0);
     });
 
     const { total: totalCoal, trackerDisplay } = setUpDailyProgressTracker({

src/data/layers/paper.tsx

@@ -3,7 +3,8 @@
  * @hidden
  */
 import Spacer from "components/layout/Spacer.vue";
-import { setUpDailyProgressTracker } from "data/common";
+import Modal from "components/Modal.vue";
+import { createCollapsibleModifierSections, setUpDailyProgressTracker } from "data/common";
 import { BuyableOptions, createBuyable, GenericBuyable } from "features/buyable";
 import { createClickable } from "features/clickables/clickable";
 import { createCumulativeConversion, createPolynomialScaling } from "features/conversion";
@@ -11,10 +12,13 @@ import { jsx, showIf } from "features/feature";
 import MainDisplay from "features/resources/MainDisplay.vue";
 import { createResource, displayResource } from "features/resources/resource";
 import { BaseLayer, createLayer } from "game/layers";
+import { createMultiplicativeModifier, createSequentialModifier, Modifier } from "game/modifiers";
 import { noPersist } from "game/persistence";
 import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
+import { WithRequired } from "util/common";
 import { render, renderCol } from "util/vue";
-import { computed, unref } from "vue";
+import { computed, ref, unref } from "vue";
+import cloth from "./cloth";
 import coal from "./coal";
 import elves from "./elves";
 import trees from "./trees";
@@ -42,7 +46,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
         spend(gain, cost) {
             trees.logs.value = Decimal.sub(trees.logs.value, Decimal.times(cost, 1e9));
             coal.ash.value = Decimal.sub(coal.ash.value, Decimal.times(cost, 1e6));
-        }
+        },
+        gainModifier: paperGain
     }));
 
     const makePaper = createClickable(() => ({
@@ -157,13 +162,54 @@ const layer = createLayer(id, function (this: BaseLayer) {
         kilnBook
     };
 
+    const paperGain = createSequentialModifier(() => [
+        createMultiplicativeModifier(() => ({
+            multiplier: 2,
+            description: "Scholar's shoes",
+            enabled: cloth.paperUpgrades.paperUpgrade1.bought
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 2,
+            description: "Scholar's slacks",
+            enabled: cloth.paperUpgrades.paperUpgrade2.bought
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 2,
+            description: "Scholar's jacket",
+            enabled: cloth.paperUpgrades.paperUpgrade3.bought
+        }))
+    ]) as WithRequired<Modifier, "description" | "revert">;
+
+    const [generalTab, generalTabCollapsed] = createCollapsibleModifierSections(() => [
+        {
+            title: "Paper Gain",
+            modifier: paperGain,
+            base: 1
+        }
+    ]);
+    const showModifiersModal = ref(false);
+    const modifiersModal = jsx(() => (
+        <Modal
+            modelValue={showModifiersModal.value}
+            onUpdate:modelValue={(value: boolean) => (showModifiersModal.value = value)}
+            v-slots={{
+                header: () => <h2>{name} Modifiers</h2>,
+                body: generalTab
+            }}
+        />
+    ));
+
     const { total: totalPaper, trackerDisplay } = setUpDailyProgressTracker({
         resource: paper,
         goal: 5e3,
         name,
         day,
         color,
-        textColor: "var(--feature-foreground)"
+        textColor: "var(--feature-foreground)",
+        modal: {
+            show: showModifiersModal,
+            display: modifiersModal
+        }
     });
 
     return {
@@ -174,6 +220,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         totalPaper,
         paperConversion,
         books,
+        generalTabCollapsed,
         minWidth: 700,
         display: jsx(() => (
             <>

src/data/layers/trees.tsx

@@ -29,6 +29,7 @@ import { Direction, WithRequired } from "util/common";
 import { render, renderRow } from "util/vue";
 import { computed, ref } from "vue";
 import boxes from "./boxes";
+import cloth from "./cloth";
 import coal from "./coal";
 import elves from "./elves";
 import paper from "./paper";
@@ -70,6 +71,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             multiplier: 2,
             description: "8 Elves Trained",
             enabled: elves.milestones[7].earned
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 4,
+            description: "Lumberjack Boots",
+            enabled: cloth.treesUpgrades.treesUpgrade1.bought
         }))
     ]) as WithRequired<Modifier, "description" | "revert">;
     const trees = createResource(
@@ -287,6 +293,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             multiplier: coal.computedHeatedCutterEffect,
             description: "Heated Cutters",
             enabled: () => Decimal.gt(coal.heatedCutters.amount.value, 0)
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 4,
+            description: "Lumberjack Jeans",
+            enabled: cloth.treesUpgrades.treesUpgrade2.bought
         }))
     ]) as WithRequired<Modifier, "description" | "revert">;
     const computedAutoCuttingAmount = computed(() => autoCuttingAmount.apply(0));
@@ -348,6 +359,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             multiplier: coal.computedHeatedPlanterEffect,
             description: "Heated Planters",
             enabled: () => Decimal.gt(coal.heatedPlanters.amount.value, 0)
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 4,
+            description: "Lumberjack Plaid",
+            enabled: cloth.treesUpgrades.treesUpgrade3.bought
         }))
     ]) as WithRequired<Modifier, "description" | "revert">;
     const computedAutoPlantingAmount = computed(() => autoPlantingAmount.apply(0));

src/data/projEntry.tsx

@@ -27,11 +27,13 @@ import elfSymbol from "./symbols/elf.png";
 import paperSymbol from "./symbols/paperStacks.png";
 import boxesSymbol from "./symbols/cardboardBox.png";
 import metalSymbol from "./symbols/metal.png";
+import clothSymbol from "./symbols/cloth.png";
 import coal from "./layers/coal";
 import elves from "./layers/elves";
 import paper from "./layers/paper";
 import boxes from "./layers/boxes";
 import metal from "./layers/metal";
+import cloth from "./layers/cloth";
 
 export interface Day extends VueFeature {
     day: number;
@@ -46,7 +48,9 @@ export interface Day extends VueFeature {
 
 export const main = createLayer("main", function (this: BaseLayer) {
     const day = persistent<number>(1);
-    const timeUntilNewDay = computed(() => (+new Date(new Date().getFullYear(), 11, day.value) - player.time) / 1000);
+    const timeUntilNewDay = computed(
+        () => (+new Date(new Date().getFullYear(), 11, day.value) - player.time) / 1000
+    );
 
     const showLoreModal = ref<boolean>(false);
     const loreScene = ref<number>(-1);
@@ -209,10 +213,11 @@ export const main = createLayer("main", function (this: BaseLayer) {
         createDay(() => ({
             day: 8,
             shouldNotify: false,
-            layer: null, // "cloth"
+            layer: "cloth",
-            symbol: "",
+            symbol: clothSymbol,
-            story: "",
+            story: "Another resource you're going to need for gifts is cloth! Fortunately you think this should be pretty easy to prepare using a sheep farm - and as you've already proven with the tree farm, that's something you can handle!",
-            completedStory: ""
+            completedStory:
+                "You fall into a pile of wool, sighing contentedly as you look at all the progress you've made today. Good Job!"
         })),
         createDay(() => ({
             day: 9,
@@ -401,7 +406,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
 export const getInitialLayers = (
     /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
     player: Partial<PlayerData>
-): Array<GenericLayer> => [main, trees, workshop, coal, elves, paper, boxes, metal];
+): Array<GenericLayer> => [main, trees, workshop, coal, elves, paper, boxes, metal, cloth];
 
 /**
  * A computed ref whose value is true whenever the game is over.