Merge branch 'main' into day-20-factory

src/components/Layer.vue

@@ -207,3 +207,9 @@ export default defineComponent({
     pointer-events: none;
 }
 </style>
+<style> 
+.layer-tab.minimized > * > .desc {
+    color: var(--accent1);
+    font-size: 30px;
+}
+</style>

src/data/layers/boxes.tsx

@@ -617,9 +617,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         )),
         minimizedDisplay: jsx(() => (
             <div>
-                {name} - {format(boxes.value)} {boxes.displayName}
+                {name}{" "}
-            </div>
+                <span class="desc">{format(boxes.value)} {boxes.displayName}</span>
-        ))
+            </div>   
+        )),
     };
 });
 

src/data/layers/cloth.tsx

@@ -613,9 +613,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         )),
         minimizedDisplay: jsx(() => (
             <div>
-                {name} - {format(cloth.value)} {cloth.displayName}
+                {name}{" "}
-            </div>
+                <span class="desc">{format(cloth.value)} {cloth.displayName}</span>
-        ))
+            </div>   
+        )),
     };
 });
 

src/data/layers/coal.tsx

@@ -1110,9 +1110,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         )),
         minimizedDisplay: jsx(() => (
             <div>
-                {name} - {format(coal.value)} {coal.displayName}
+                {name}{" "}
-            </div>
+                <span class="desc">{format(coal.value)} {coal.displayName}</span>
-        ))
+            </div>   
+        )),
     };
 });
 

src/data/layers/letters.tsx

@@ -283,9 +283,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         )),
         minimizedDisplay: jsx(() => (
             <div>
-                {name} - {format(letters.value)} {letters.displayName}
+                {name}{" "}
-            </div>
+                <span class="desc">{format(letters.value)} {letters.displayName}</span>
-        ))
+            </div>   
+        )),
     };
 });
 

src/data/layers/metal.tsx

@@ -721,9 +721,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         )),
         minimizedDisplay: jsx(() => (
             <div>
-                {name} - {format(metal.value)} {metal.displayName}
+                {name}{" "}
-            </div>
+                <span class="desc">{format(metal.value)} {metal.displayName}</span>
-        ))
+            </div>   
+        )),
     };
 });
 

src/data/layers/oil.tsx

@@ -1283,9 +1283,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
         }),
         minimizedDisplay: jsx(() => (
             <div>
-                {name} - {format(oil.value)} {oil.displayName}
+                {name}{" "}
-            </div>
+                <span class="desc">{format(oil.value)} {oil.displayName}</span>
-        ))
+            </div>   
+        )),
+
     };
 });
 

src/data/layers/paper.tsx

@@ -493,9 +493,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         )),
         minimizedDisplay: jsx(() => (
             <div>
-                {name} - {format(paper.value)} {paper.displayName}
+                {name}{" "}
-            </div>
+                <span class="desc">{format(paper.value)} {paper.displayName}</span>
-        ))
+            </div>   
+        )),
     };
 });
 

src/data/layers/plastic.tsx

@@ -356,9 +356,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         )),
         minimizedDisplay: jsx(() => (
             <div>
-                {name} - {format(plastic.value)} {plastic.displayName}
+                {name}{" "}
-            </div>
+                <span class="desc">{format(plastic.value)} {plastic.displayName}</span>
-        ))
+            </div>   
+        )),
     };
 });
 

src/data/layers/trees.tsx

@@ -863,9 +863,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         )),
         minimizedDisplay: jsx(() => (
             <div>
-                {name} - {format(logs.value)} {logs.displayName}
+                {name}{" "}
-            </div>
+                <span class="desc">{format(logs.value)} {logs.displayName}</span>
-        ))
+            </div>   
+        )),
     };
 });
 

src/data/layers/workshop.tsx

@@ -333,9 +333,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         )),
         minimizedDisplay: jsx(() => (
             <div>
-                {name} - {format(foundationProgress.value)}% {foundationProgress.displayName}
+                {name}{" "}
+                <span class="desc">{formatWhole(foundationProgress.value)}% {foundationProgress.displayName}</span>
             </div>
-        ))
+        )),
     };
 });