-
-
+
))
};
diff --git a/src/data/layers/letters.tsx b/src/data/layers/letters.tsx
index 697cdc6..6ef5826 100644
--- a/src/data/layers/letters.tsx
+++ b/src/data/layers/letters.tsx
@@ -283,9 +283,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
|
-
- {whatIsHovered.value !== "" ? (
- <>
- {FACTORY_COMPONENTS[whatIsHovered.value].name}
-
- - {FACTORY_COMPONENTS[whatIsHovered.value].description} - - ) : undefined} - |
- |
- Components-
- {Object.entries(FACTORY_COMPONENTS).map(value => {
- const key = value[0] as FactoryCompNames;
- const item = value[1];
- return (
-
- |
-
- |
-
+
+ {whatIsHovered.value === ""
+ ? undefined
+ : FACTORY_COMPONENTS[whatIsHovered.value].description}
+
+
+
+
+ {Object.entries(FACTORY_COMPONENTS).map(value => {
+ const key = value[0] as FactoryCompNames;
+ const item = value[1];
+ return (
+ 
onComponentHover(key)}
+ onMouseleave={() => onComponentHover("")}
+ onClick={() => onCompClick(key)}
+ >
+ );
+ })}
+
+
- {name} - {format(letters.value)} {letters.displayName}
-
- ))
+ {name}{" "}
+ {format(letters.value)} {letters.displayName}
+
+ )),
};
});
diff --git a/src/data/layers/metal.tsx b/src/data/layers/metal.tsx
index ecd0f82..fac37b7 100644
--- a/src/data/layers/metal.tsx
+++ b/src/data/layers/metal.tsx
@@ -721,9 +721,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
- {name} - {format(metal.value)} {metal.displayName}
-
- ))
+ {name}{" "}
+ {format(metal.value)} {metal.displayName}
+
+ )),
};
});
diff --git a/src/data/layers/oil.tsx b/src/data/layers/oil.tsx
index a3a7f0c..045ab33 100644
--- a/src/data/layers/oil.tsx
+++ b/src/data/layers/oil.tsx
@@ -1283,9 +1283,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
}),
minimizedDisplay: jsx(() => (
- {name} - {format(oil.value)} {oil.displayName}
-
- ))
+ {name}{" "}
+ {format(oil.value)} {oil.displayName}
+
+ )),
+
};
});
diff --git a/src/data/layers/paper.tsx b/src/data/layers/paper.tsx
index 162108e..7ed0696 100644
--- a/src/data/layers/paper.tsx
+++ b/src/data/layers/paper.tsx
@@ -493,9 +493,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
- {name} - {format(paper.value)} {paper.displayName}
-
- ))
+ {name}{" "}
+ {format(paper.value)} {paper.displayName}
+
+ )),
};
});
diff --git a/src/data/layers/plastic.tsx b/src/data/layers/plastic.tsx
index b201a1a..6d2ea5f 100644
--- a/src/data/layers/plastic.tsx
+++ b/src/data/layers/plastic.tsx
@@ -356,9 +356,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
- {name} - {format(plastic.value)} {plastic.displayName}
-
- ))
+ {name}{" "}
+ {format(plastic.value)} {plastic.displayName}
+
+ )),
};
});
diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css
index 7300361..6dd19c6 100644
--- a/src/data/layers/styles/factory.css
+++ b/src/data/layers/styles/factory.css
@@ -1,17 +1,40 @@
+
+.factoryDisp {
+ position: absolute;
+
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ background: snow;
+ touch-action: none;
+}
+
+.factoryDisp canvas {
+ filter: drop-shadow(1px 1px 2px #0007);
+}
.container {
- width: 100%;
- height: 100%;
+ position: absolute;
+
+ bottom: -5px;
+ height: 100px;
+ left: 10%;
+ right: 10%;
+
+ background: var(--raised-background);
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+ box-shadow: 0 2px 10px black;
+
margin: 0;
padding: 0;
}
-.factoryDisp {
- border-left: 1px solid white;
- border-bottom: 1px solid white;
- border-right: 1px solid white;
+
+.comps > div > img {
+ width: 50px;
+ height: 50px;
}
-.info {
- border-bottom: 1px solid white;
-}
-.comps {
- border-bottom: 1px solid white;
+.comps > div > img.selected {
+ transform: translateY(-5px);
+ filter: drop-shadow(0 5px 5px #0007);
}
\ No newline at end of file
diff --git a/src/data/layers/trees.tsx b/src/data/layers/trees.tsx
index 24e27c2..b8b8b3a 100644
--- a/src/data/layers/trees.tsx
+++ b/src/data/layers/trees.tsx
@@ -863,9 +863,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
- {name} - {format(logs.value)} {logs.displayName}
-
- ))
+ {name}{" "}
+ {format(logs.value)} {logs.displayName}
+
+ )),
};
});
diff --git a/src/data/layers/workshop.tsx b/src/data/layers/workshop.tsx
index c217bd7..1bb09b0 100644
--- a/src/data/layers/workshop.tsx
+++ b/src/data/layers/workshop.tsx
@@ -333,9 +333,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
)),
minimizedDisplay: jsx(() => (
- {name} - {format(foundationProgress.value)}% {foundationProgress.displayName}
+ {name}{" "}
+ {formatWhole(foundationProgress.value)}% {foundationProgress.displayName}
- ))
+ )),
};
});