Add symbol and lore

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/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(() => ({