More UI changes

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>

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) >

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;

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;