From 712a549b78db984100ca17075ddaa0ef1ac613eb Mon Sep 17 00:00:00 2001
From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com>
Date: Thu, 22 Dec 2022 21:20:06 +0700
Subject: [PATCH] More UI changes
---
src/data/layers/Factory.vue | 2 +-
src/data/layers/factory.tsx | 93 ++++++++++++++----------------
src/data/layers/styles/factory.css | 61 +++++++++++++-------
src/features/bars/Bar.vue | 2 +-
4 files changed, 84 insertions(+), 74 deletions(-)
diff --git a/src/data/layers/Factory.vue b/src/data/layers/Factory.vue
index 9edbf0b..a9ef034 100644
--- a/src/data/layers/Factory.vue
+++ b/src/data/layers/Factory.vue
@@ -26,8 +26,8 @@ onMounted(() => {
position: absolute;
top: 0;
bottom: 0;
+ left: 148px;
right: 0;
- width: 100%;
touch-action: none;
}
</style>
diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx
index 4e09df4..c92db51 100644
--- a/src/data/layers/factory.tsx
+++ b/src/data/layers/factory.tsx
@@ -37,6 +37,7 @@ import Modal from "components/Modal.vue";
import { createBar, GenericBar } from "features/bars/bar";
import HotkeyVue from "components/Hotkey.vue";
import { createHotkey, GenericHotkey } from "features/hotkey";
+import Tooltip from "features/tooltips/Tooltip.vue";
const id = "factory";
@@ -131,13 +132,41 @@ const factory = createLayer(id, () => {
: Decimal.sub(1, Decimal.div(energyConsumption.value, computedEnergy.value)),
display: jsx(() => (
<>
- {formatWhole(energyConsumption.value)} / {formatWhole(computedEnergy.value)} energy
- used
- {Decimal.lt(tickRate.value, 1) ? (
- <>{" (" + format(Decimal.mul(tickRate.value, 100))}% efficiency)</>
- ) : (
- ""
- )}
+ <div>
+ {formatWhole(energyConsumption.value)} / {formatWhole(computedEnergy.value)}{" "}
+ energy used
+ {Decimal.lt(tickRate.value, 1) ? (
+ <>{" (" + format(Decimal.mul(tickRate.value, 100))}% efficiency)</>
+ ) : (
+ ""
+ )}
+ </div>
+ <div>
+ <Tooltip display="Clear Tracks" direction={Direction.Down}>
+ <button class="control-btn material-icons" onClick={setTracks}>
+ clear
+ </button>
+ </Tooltip>
+ <Tooltip display="Clear Factory" direction={Direction.Down}>
+ <button class="control-btn material-icons" onClick={clearFactory}>
+ delete
+ </button>
+ </Tooltip>
+ <Tooltip display="Go to Center" direction={Direction.Down} xoffset="-26px">
+ <button class="control-btn material-icons" onClick={moveToCenter}>
+ center_focus_weak
+ </button>
+ </Tooltip>
+ <Tooltip
+ display={(paused.value ? "Unpause" : "Pause") + " the Factory"}
+ direction={Direction.Down}
+ xoffset="-63px"
+ >
+ <button class="control-btn material-icons" onClick={togglePaused}>
+ {paused.value ? "play_arrow" : "pause"}
+ </button>
+ </Tooltip>
+ </div>
</>
))
}));
@@ -807,7 +836,7 @@ const factory = createLayer(id, () => {
} as FactoryInternalProcessor;
spriteContainer.addChild(sprite);
}
-
+
function removeFactoryComp(x: number, y: number) {
const data = compInternalData[x + "x" + y];
if (data === undefined) return;
@@ -976,7 +1005,7 @@ const factory = createLayer(id, () => {
function onCompClick(name: FactoryCompNames) {
compSelected.value = name;
}
-
+
function setTracks() {
for (const [key, comp] of Object.entries(compInternalData)) {
if (comp == null) continue;
@@ -988,7 +1017,7 @@ const factory = createLayer(id, () => {
comp.nextPackages = [];
comp.packages = [];
} else {
- const producerComp = components.value[key] as FactoryComponentProducer;
+ const producerComp = components.value[key] as FactoryComponentProcessor;
if (producerComp.outputStock !== undefined) {
for (const key in producerComp.outputStock) {
delete producerComp.outputStock[key];
@@ -1003,7 +1032,7 @@ const factory = createLayer(id, () => {
}
}
}
-
+
function clearFactory() {
for (const key of Object.keys(compInternalData)) {
const [x, y] = key.split("x").map(i => +i);
@@ -1058,45 +1087,7 @@ const factory = createLayer(id, () => {
onPointerleave={onFactoryMouseLeave}
onContextmenu={(e: MouseEvent) => e.preventDefault()}
/>
- <div class="controls-container">
- <button
- class="control-btn"
- style={{
- "border-color": "purple"
- }}
- onClick={setTracks}
- >
- Clear Tracks
- </button>
- <button
- class="control-btn"
- style={{
- "border-color": "red"
- }}
- onClick={clearFactory}
- >
- Clear Factory
- </button>
- <button
- class="control-btn"
- style={{
- "border-color": "green"
- }}
- onClick={moveToCenter}
- >
- Go to Center
- </button>
- <button
- class="control-btn"
- style={{
- "border-color": paused.value ? "green" : "red"
- }}
- onClick={togglePaused}
- >
- {paused.value ? "Unpause" : "Pause"} the Factory
- </button>
- </div>
-
+
<div class="comp-container">
<div
class={{
@@ -1173,7 +1164,7 @@ const factory = createLayer(id, () => {
?.clientWidth ?? 0) >
app.view.width - 30
? { right: app.view.width - mouseCoords.x + "px" }
- : { left: mouseCoords.x + "px" }),
+ : { left: mouseCoords.x + 148 + "px" }),
...(mouseCoords.y +
(document.getElementById("factory-info")
?.clientHeight ?? 0) >
diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css
index f25c3b8..bdc00ec 100644
--- a/src/data/layers/styles/factory.css
+++ b/src/data/layers/styles/factory.css
@@ -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;
diff --git a/src/features/bars/Bar.vue b/src/features/bars/Bar.vue
index beae69b..b703658 100644
--- a/src/features/bars/Bar.vue
+++ b/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;