stuff

src/data/Scene.vue

@@ -58,7 +58,16 @@
             <img v-if="day >= 10" :src="dyes" class="scene-item" />
             <img v-if="day >= 14" :src="wrappingPaper" class="scene-item" />
             <img v-if="day >= 15" :src="ribbons" class="scene-item" />
-            <img v-if="day >= 16" :src="toys" class="scene-item" />
+            <img v-if="day == 16" :src="toys" class="scene-item" />
+        </div>
+        <img
+            v-if="day >= 17"
+            :src="factory"
+            class="scene-item"
+            style="left: 50%; bottom: 33%; width: 70px; height: 70px"
+        />
+        <div v-if="day >= 4" class="scene-bubble left" style="left: 64%; bottom: 37%">
+            <img v-if="day >= 17" :src="toys" class="scene-item" />
         </div>
     </div>
 </template>
@@ -81,6 +90,7 @@ import letters from "./symbols/letterbox.png";
 import wrappingPaper from "./symbols/wrappingPaper.png";
 import ribbons from "./symbols/ribbons.png";
 import toys from "./symbols/truck.png";
+import factory from "./symbols/gears.png";
 
 defineProps<{
     day: number;
@@ -134,6 +144,17 @@ defineProps<{
     border-top: 15px solid white;
 }
 
+.scene-bubble.left::after {
+    left: unset;
+    right: 100%;
+    top: 30px;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 15px solid white;
+    border-left: unset;
+    z-index: 1;
+}
+
 .scene-bubble .scene-item {
     height: calc(100% - 10px);
     width: unset;

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);
@@ -26,8 +26,8 @@ onMounted(() => {
     position: absolute;
     top: 0;
     bottom: 0;
+    left: 148px;
     right: 0;
-    width: 100%;
     touch-action: none;
 }
 </style>

src/data/layers/Toy.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="toy">
+        <img :src="image" />
+        <ResourceVue :resource="resource" :color="color" style="font-size: large" />
+    </div>
+</template>
+<script setup lang="ts">
+import { Resource } from "features/resources/resource";
+import ResourceVue from "features/resources/Resource.vue";
+
+defineProps<{
+    resource: Resource;
+    image: string;
+    color: string;
+}>();
+</script>
+<style scoped>
+.toy {
+    width: 80px;
+    display: flex;
+    flex-direction: column;
+    margin: 10px !important;
+}
+
+.toy img {
+    width: 100%;
+    aspect-ratio: 1/1;
+}
+</style>

src/data/layers/styles/factory.css

@@ -2,7 +2,7 @@
     position: absolute !important;
     top: 0;
     bottom: -6px;
-    left: 0;
+    left: -12px;
     right: 0;
     border: 0px solid var(--outline);
 
@@ -12,14 +12,51 @@
     margin-top: 60px !important;
 }
 
-
 .energy-bar .overlayText {
-    display: inline-block;
-    padding: 5px 10px;
+    display: block;
+    width: 100%;
+    padding: 10px;
+
+    line-height: 30px;
+    height: 30px;
+}
+
+.energy-bar, .energy-bar .overlayTextContainer {
+    overflow: visible !important;
+}
+
+.energy-bar .overlayText > div {
     background: var(--raised-background);
     border-radius: var(--border-radius);
     box-shadow: 0 1px 5px black;
+    line-height: 20px;
+    height: 20px;
 }
+.energy-bar .overlayText > div:first-child {
+    padding: 5px 10px;
+    float: left;
+}
+.energy-bar .overlayText > div:last-child {
+    height: 30px;
+    float: right;
+}
+.energy-bar .overlayText .tooltip-container {
+    display: inline-block;
+}
+
+
+.control-btn {
+    background: transparent;
+    color: var(--foreground);
+    border: none;
+
+    line-height: 30px;
+    height: 30px;
+}
+:not(:first-child) > .control-btn {
+    border-left: 1px solid var(--foreground);
+}
+
 
 
 .factory-container {
@@ -57,24 +94,6 @@
     z-index: 2;
 }
 
-.controls-container {
-    position: absolute;
-    top: 0%;
-    right: 0%;
-    margin: 0;
-    padding: 10px;
-    height: max-content;
-    background: var(--background);
-    border-radius: 0 0 var(--border-radius) var(--border-radius);
-    box-shadow: 0 1px 5px #0007;
-    display: flex;
-}
-.control-btn {
-    border-radius: 5px;
-    border-width: 2px;
-    border-style: solid;
-}
-
 .comp-container {
     position: absolute;
     top: 0;
@@ -129,13 +148,22 @@
     right: 10px;
     background-color: var(--foreground);
 }
-.comp-list > img {
-    display: block;
+.comp-list > div {
+    position: relative;
     width: 50px;
     height: 50px;
     margin: 10px;
 }
-.comp-list > img.selected {
+.comp-list > img.selected:not(.producedItem) {
     transform: translate(-5px, -5px);
     filter: drop-shadow(2px 2px 0 var(--foreground)) drop-shadow(5px 5px 5px #0007);
 }
+
+.producedItem {
+    position: absolute;
+    pointer-events: none;
+    width: calc(50px / 3);
+    height: calc(50px / 3);
+    left: 10px;
+    top: 25px;
+}

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];
@@ -260,7 +260,24 @@ const layer = createLayer(id, function (this: BaseLayer) {
         shouldEarn: () => Decimal.gte(toySum.value, 350),
         visibility: () => showIf(milestone3.earned.value)
     }));
-    const milestones = { milestone1, milestone2, milestone3, milestone4 };
+    const milestone5 = createMilestone(() => ({
+        display: {
+            requirement: "750 toys",
+            effectDisplay: "The wheel crafter now makes 2 wheels instead of 1! Now you should be able to fit everything in the factory."
+        },
+        shouldEarn: () => Decimal.gte(toySum.value, 750),
+        visibility: () => showIf(milestone4.earned.value)
+    }));
+    
+    const milestone6 = createMilestone(() => ({
+        display: {
+            requirement: "1500 toys",
+            effectDisplay: "Running out of energy? Let's increase the limit! Multiply energy capacity by 1.4"
+        },
+        shouldEarn: () => Decimal.gte(toySum.value, 1500),
+        visibility: () => showIf(milestone5.earned.value)
+    }));
+    const milestones = { milestone1, milestone2, milestone3, milestone4, milestone5, milestone6 };
     const { collapseMilestones, display: milestonesDisplay } =
         createCollapsibleMilestones(milestones);
 
@@ -284,21 +301,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,

src/data/projEntry.tsx

@@ -24,6 +24,7 @@ import cloth from "./layers/cloth";
 import coal from "./layers/coal";
 import dyes from "./layers/dyes";
 import elves from "./layers/elves";
+import factory from "./layers/factory";
 import letters from "./layers/letters";
 import management from "./layers/management";
 import metal from "./layers/metal";
@@ -34,7 +35,6 @@ import ribbon from "./layers/ribbon";
 import toys from "./layers/toys";
 import trees from "./layers/trees";
 import workshop from "./layers/workshop";
-import factory from "./layers/factory";
 import wrappingPaper from "./layers/wrapping-paper";
 import boxesSymbol from "./symbols/cardboardBox.png";
 import clothSymbol from "./symbols/cloth.png";
@@ -42,6 +42,7 @@ import coalSymbol from "./symbols/coal.png";
 import dyesSymbol from "./symbols/dyes.png";
 import elfSymbol from "./symbols/elf.png";
 import managementSymbol from "./symbols/elfManagement.png";
+import factorySymbol from "./symbols/gears.png";
 import lettersSymbol from "./symbols/letterbox.png";
 import metalSymbol from "./symbols/metal.png";
 import oilSymbol from "./symbols/oil.png";
@@ -443,9 +444,10 @@ export const main = createLayer("main", function (this: BaseLayer) {
             day: 18,
             shouldNotify: false,
             layer: "factory",
-            symbol: "",
-            story: "",
-            completedStory: "",
+            symbol: factorySymbol,
+            story: "Alright, so those toys were using incredibly amounts of resources to make. Fortunately, you happen to have access to a group of people with an uncanny knack for making stuff without actually consuming materials - Elves! Let's turn this workshop into a proper factory, and get them producing these toys by themselves.",
+            completedStory:
+                "That was a bit different than the usual elf training you are used to. But this factory seems very versatile, so you think it's a fair trade-off for needing to set things up a bit more. Good Job!",
             masteredStory: ""
         })),
         createDay(() => ({

src/features/bars/Bar.vue

@@ -180,7 +180,7 @@ export default defineComponent({
     position: absolute;
     background-color: var(--foreground);
     overflow: hidden;
-    padding: 2px 1px;
+    padding: 0.5px;
     margin-left: -0.5px;
     transition-duration: 0.2s;
     z-index: 2;

src/main.css

@@ -178,7 +178,7 @@ ul {
     top: 10px;
     left: 10px;
     line-height: 30px;
-    margin-top: -50px;
+    margin-top: -43px;
     margin-left: -35px;
     border: none;
     background: var(--background);