Implement goal

src/data/layers/Factory.vue

@@ -10,7 +10,7 @@ const element = shallowRef<HTMLElement | null>(null);
 const props = defineProps<{
     application: Application;
 }>();
-console.log(props.application);
+
 onMounted(() => {
     if (element.value !== null) {
         element.value?.append(props.application.view);

src/data/layers/factory.tsx

@@ -65,6 +65,8 @@ const id = "factory";
 // what is the actual day?
 const day = 18;
 
+const toyGoal = 1e3;
+
 // 20x20 block size
 // TODO: unhardcode stuff
 
@@ -1325,7 +1327,7 @@ const factory = createLayer(id, () => {
                         <>
                             <div>
                                 {main.day.value === day
-                                    ? `Do something to complete the day`
+                                    ? `Reach ${format(toyGoal)} for each toy to complete the day`
                                     : `${name} Complete!`}{" "}
                                 -{" "}
                                 <button
@@ -1418,12 +1420,38 @@ const factory = createLayer(id, () => {
         direction: Direction.Right,
         width: 600,
         height: 25,
-        progress: () => (main.day.value === day ? 0 : 1),
+        fillStyle: `backgroundColor: ${color}`,
-        display: jsx(() => (main.day.value === day ? <>Requirement progress here</> : ""))
+        progress: () =>
+            main.day.value === day
+                ? Decimal.div(toys.clothes.value, toyGoal)
+                      .clampMax(1)
+                      .add(Decimal.div(toys.woodenBlocks.value, toyGoal).clampMax(1))
+                      .add(Decimal.div(toys.trucks.value, toyGoal).clampMax(1))
+                      .div(3)
+                : 1,
+        display: jsx(() =>
+            main.day.value === day ? (
+                <>
+                    {
+                        [toys.clothes.value, toys.woodenBlocks.value, toys.trucks.value].filter(t =>
+                            Decimal.gte(t, toyGoal)
+                        ).length
+                    }{" "}
+                    / 3
+                </>
+            ) : (
+                ""
+            )
+        )
     })) as GenericBar;
 
     watchEffect(() => {
-        if (main.day.value === day && false) {
+        if (
+            main.day.value === day &&
+            Decimal.gte(toys.clothes.value, toyGoal) &&
+            Decimal.gte(toys.woodenBlocks.value, toyGoal) &&
+            Decimal.gte(toys.trucks.value, toyGoal)
+        ) {
             main.completeDay();
         }
     });

src/data/layers/toys.tsx

@@ -104,7 +104,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         onPurchase() {
             cloth.cloth.value = Decimal.sub(cloth.cloth.value, clothesCost.value.cloth);
             this.amount.value = Decimal.add(this.amount.value, 1);
-            clothes.value = this.amount.value;
+            clothes.value = Decimal.add(clothes.value, 1);
         }
     })) as GenericBuyable;
     const woodenBlocksCost = computed(() => {
@@ -136,7 +136,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         onPurchase() {
             trees.logs.value = Decimal.sub(trees.logs.value, woodenBlocksCost.value.wood);
             this.amount.value = Decimal.add(this.amount.value, 1);
-            woodenBlocks.value = this.amount.value;
+            woodenBlocks.value = Decimal.add(woodenBlocks.value, 1);
         }
     })) as GenericBuyable;
     const trucksCost = computed(() => {
@@ -196,7 +196,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
             metal.metal.value = Decimal.sub(metal.metal.value, trucksCost.value.metal);
             plastic.plastic.value = Decimal.sub(plastic.plastic.value, trucksCost.value.plastic);
             this.amount.value = Decimal.add(this.amount.value, 1);
-            trucks.value = this.amount.value;
+            trucks.value = Decimal.add(trucks.value, 1);
         }
     })) as GenericBuyable;
     const buyables = [clothesBuyable, woodenBlocksBuyable, trucksBuyable];
@@ -284,21 +284,6 @@ const layer = createLayer(id, function (this: BaseLayer) {
         />
     ));
 
-    globalBus.on("update", diff => {
-        if (Decimal.lt(main.day.value, day)) {
-            return;
-        }
-        if (Decimal.lt(clothes.value, clothesBuyable.amount.value)) {
-            clothesBuyable.amount.value = clothes.value;
-        }
-        if (Decimal.lt(woodenBlocks.value, woodenBlocksBuyable.amount.value)) {
-            woodenBlocksBuyable.amount.value = woodenBlocks.value;
-        }
-        if (Decimal.lt(trucks.value, trucksBuyable.amount.value)) {
-            trucksBuyable.amount.value = trucks.value;
-        }
-    });
-
     const { total: totalToys, trackerDisplay } = setUpDailyProgressTracker({
         resource: toySum,
         goal: 500,