From c88928199bf59c3eb4a579fa23f8ac8659d5288b Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Wed, 21 Dec 2022 21:47:09 -0600 Subject: [PATCH] Major factory UI/X rework --- src/data/layers/Factory.vue | 3 +- src/data/layers/factory.tsx | 299 +++++++++++++++-------------- src/data/layers/styles/factory.css | 55 +++--- src/data/projEntry.tsx | 28 ++- 4 files changed, 199 insertions(+), 186 deletions(-) diff --git a/src/data/layers/Factory.vue b/src/data/layers/Factory.vue index 368f23a..755bf5e 100644 --- a/src/data/layers/Factory.vue +++ b/src/data/layers/Factory.vue @@ -26,7 +26,8 @@ onMounted(() => { position: absolute; top: 0; bottom: 0; - left: 0; right: 0; + width: 500px; + touch-action: none; } diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 8834207..18eef99 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -3,12 +3,12 @@ import { Assets } from "@pixi/assets"; import { Container } from "@pixi/display"; import { Graphics } from "@pixi/graphics"; import { Sprite } from "@pixi/sprite"; +import Spacer from "components/layout/Spacer.vue"; import { jsx } from "features/feature"; import { globalBus } from "game/events"; import { createLayer } from "game/layers"; import { Persistent, persistent, State } from "game/persistence"; -import player from "game/player"; -import Decimal, { formatWhole } from "util/bignum"; +import Decimal, { format, formatWhole } from "util/bignum"; import { Direction } from "util/common"; import { computed, ComputedRef, reactive, ref, watchEffect } from "vue"; import conveyor from "./factory-components/conveyor.png"; @@ -82,7 +82,7 @@ const factory = createLayer(id, () => { .reduce((a, b) => a + b, 0) ); const tickRate = computed(() => - Decimal.div(energyConsumption.value, energy.value).pow(2).min(1) + Decimal.div(energyConsumption.value, energy.value).recip().pow(2).min(1) ); // ---------------------------------------------- Components @@ -633,7 +633,6 @@ const factory = createLayer(id, () => { ) * Math.PI) / 2; - console.log("!!", data, sprite); components.value[x + "x" + y] = { ticksDone: 0, direction: Direction.Right, @@ -830,9 +829,6 @@ const factory = createLayer(id, () => { compSelected.value = name; } - function goBack() { - player.tabs.splice(0, Infinity, "main"); - } return { name, day, @@ -842,141 +838,166 @@ const factory = createLayer(id, () => { style: { overflow: "hidden" }, components, display: jsx(() => ( -
- - e.preventDefault()} - /> - - {compHovered.value !== undefined ? ( -
- app.view.width - 30 - ? { right: app.view.width - mouseCoords.x + "px" } - : { left: mouseCoords.x + "px" }), - ...(mouseCoords.y + - (document.getElementById("factory-info")?.clientHeight ?? 0) > - app.view.height - 30 - ? { bottom: app.view.height - mouseCoords.y + "px" } - : { top: mouseCoords.y + "px" }) - }} - > -

{FACTORY_COMPONENTS[compHovered.value.type].name}

-
- {FACTORY_COMPONENTS[compHovered.value.type].description} -
- {compHovered.value.type !== "conveyor" ? ( - <> - {compHovered.value.inputStock !== undefined ? ( - <> -
-
Inputs:
- {Object.entries(compHovered.value.inputStock).map(x => ( -
- {x[0]}: {formatWhole(x[1])} - {FACTORY_COMPONENTS[ - compHovered.value?.type ?? "cursor" - ].inputs?.[x[0]].amount !== undefined - ? " / " + - formatWhole( - FACTORY_COMPONENTS[ - compHovered.value?.type ?? "cursor" - ].inputs?.[x[0]].amount ?? 0 - ) - : ""} - {FACTORY_COMPONENTS[ - compHovered.value?.type ?? "cursor" - ].inputs?.[x[0]].capacity !== undefined - ? " / " + - formatWhole( - FACTORY_COMPONENTS[ - compHovered.value?.type ?? "cursor" - ].inputs?.[x[0]].capacity ?? 0 - ) - : ""} -
- ))} - - ) : undefined} - {compHovered.value.outputStock !== undefined ? ( - <> -
-
Outputs:
- {Object.entries(compHovered.value.outputStock).map(x => ( -
- {x[0]}: {formatWhole(x[1])} - {FACTORY_COMPONENTS[ - compHovered.value?.type ?? "cursor" - ].outputs?.[x[0]].capacity !== undefined - ? " / " + - formatWhole( - FACTORY_COMPONENTS[ - compHovered.value?.type ?? "cursor" - ].outputs?.[x[0]].capacity ?? 0 - ) - : ""} -
- ))} - - ) : undefined} - - ) : undefined} -
- ) : undefined} - + <>
-
- {whatIsHovered.value === "" ? undefined : ( - <> -

{FACTORY_COMPONENTS[whatIsHovered.value].name}

-
- {FACTORY_COMPONENTS[whatIsHovered.value].description} - - )} -
-
- {Object.entries(FACTORY_COMPONENTS).map(value => { - const key = value[0] as FactoryCompNames; - const item = value[1]; - return ( - onComponentMouseEnter(key)} - onMouseleave={() => onComponentMouseLeave()} - onClick={() => onCompClick(key)} - /> - ); - })} + e.preventDefault()} + /> +
+
+ {whatIsHovered.value === "" ? undefined : ( + <> +

{FACTORY_COMPONENTS[whatIsHovered.value].name}

+
+ {FACTORY_COMPONENTS[whatIsHovered.value].description} + {FACTORY_COMPONENTS[whatIsHovered.value].energyCost ?? 0 ? ( + <> +
+ Energy Consumption:{" "} + {formatWhole( + FACTORY_COMPONENTS[whatIsHovered.value] + .energyCost ?? 0 + )} + + ) : null} + + )} +
+
+ {Object.entries(FACTORY_COMPONENTS).map(value => { + const key = value[0] as FactoryCompNames; + const item = value[1]; + return ( + onComponentMouseEnter(key)} + onMouseleave={() => onComponentMouseLeave()} + onClick={() => onCompClick(key)} + /> + ); + })} +
+ + {compHovered.value !== undefined ? ( +
= 180 + ? { right: app.view.width - mouseCoords.x + "px" } + : { left: mouseCoords.x + 150 + "px" }), + ...(mouseCoords.y + + (document.getElementById("factory-info")?.clientHeight ?? 0) > + app.view.height - 30 + ? { bottom: app.view.height - mouseCoords.y + "px" } + : { top: mouseCoords.y + "px" }) + }} + > +

{FACTORY_COMPONENTS[compHovered.value.type].name}

+
+ {FACTORY_COMPONENTS[compHovered.value.type].description} +
+ {compHovered.value.type !== "conveyor" ? ( + <> + {compHovered.value.inputStock !== undefined ? ( + <> +
+
Inputs:
+ {Object.entries(compHovered.value.inputStock).map(x => ( +
+ {x[0]}: {formatWhole(x[1])} + {FACTORY_COMPONENTS[ + compHovered.value?.type ?? "cursor" + ].inputs?.[x[0]].amount !== undefined + ? " / " + + formatWhole( + FACTORY_COMPONENTS[ + compHovered.value?.type ?? + "cursor" + ].inputs?.[x[0]].amount ?? 0 + ) + : ""} + {FACTORY_COMPONENTS[ + compHovered.value?.type ?? "cursor" + ].inputs?.[x[0]].capacity !== undefined + ? " / " + + formatWhole( + FACTORY_COMPONENTS[ + compHovered.value?.type ?? + "cursor" + ].inputs?.[x[0]].capacity ?? 0 + ) + : ""} +
+ ))} + + ) : undefined} + {compHovered.value.outputStock !== undefined ? ( + <> +
+
Outputs:
+ {Object.entries(compHovered.value.outputStock).map( + x => ( +
+ {x[0]}: {formatWhole(x[1])} + {FACTORY_COMPONENTS[ + compHovered.value?.type ?? "cursor" + ].outputs?.[x[0]].capacity !== undefined + ? " / " + + formatWhole( + FACTORY_COMPONENTS[ + compHovered.value?.type ?? + "cursor" + ].outputs?.[x[0]].capacity ?? 0 + ) + : ""} +
+ ) + )} + + ) : undefined} + + ) : undefined} +
+ ) : undefined}
-
+ + +
+ Energy Consumption: {formatWhole(energyConsumption.value)} /{" "} + {formatWhole(energy.value)} +
+ Tick Rate: {format(tickRate.value)} TPS +
+ )) }; }); diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css index 371e0ed..45f3a12 100644 --- a/src/data/layers/styles/factory.css +++ b/src/data/layers/styles/factory.css @@ -1,18 +1,11 @@ - -.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); +.factory-container { + width: 650px; + height: 500px; + position: relative; + background-color: var(--raised-background); + border-radius: var(--border-radius); + box-shadow: 0 2px 10px rgb(0 0 0 / 50%); + overflow: hidden; } .info-container { @@ -35,17 +28,16 @@ pointer-events: none; user-select: none; + + z-index: 2; } -.factory-container { +.comp-container { position: absolute; - - top: calc(5% + 30px); - bottom: 5%; - left: 0%; - width: 70px; - - margin: 0; - padding: 0; + top: 0; + left: 0; + bottom: 0; + width: 148px; + z-index: 1; } .comp-info { @@ -65,24 +57,29 @@ pointer-events: none; transition: transform 0.3s; + + z-index: -1; } .comp-info.active { transform: translateX(calc(20px + 100%)); } .comp-list { - position: relative; + width: 100%; height: 100%; - padding: 10px; - + display: flex; + border-right: solid 2px var(--locked); + flex-wrap: wrap; + justify-content: space-evenly; + align-items: flex-start; + align-content: flex-start; background: var(--raised-background); - border-radius: 0 var(--border-radius) var(--border-radius) 0; - box-shadow: 0 2px 10px black; } .comp-list > img { display: block; width: 50px; height: 50px; + margin: 10px; } .comp-list > img.selected { transform: translate(-5px, -5px); diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx index 750f2ba..e9690be 100644 --- a/src/data/projEntry.tsx +++ b/src/data/projEntry.tsx @@ -222,27 +222,21 @@ export const main = createLayer("main", function (this: BaseLayer) { }, onOpenLayer() { recentlyUpdated.value = false; - - // should not be full screen - if (layer !== "factory") { - // 1468 is because two tabs with minWidth of 700px plus the minimized calendar of 60px plus 2 dividers of 4px each - if (window.matchMedia("(min-width: 1468px)").matches) { - // Desktop, allow multiple tabs to be open - if (player.tabs.includes(layer ?? "trees")) { - const index = player.tabs.lastIndexOf(layer ?? "trees"); - player.tabs.splice(index, 1); - } else { - player.tabs.push(layer ?? "trees"); - main.minimized.value = true; - } + // 1468 is because two tabs with minWidth of 700px plus the minimized calendar of 60px plus 2 dividers of 4px each + if (window.matchMedia("(min-width: 1468px)").matches) { + // Desktop, allow multiple tabs to be open + if (player.tabs.includes(layer ?? "trees")) { + const index = player.tabs.lastIndexOf(layer ?? "trees"); + player.tabs.splice(index, 1); } else { - // Mobile, use single tab mode - player.tabs.splice(1, Infinity, layer ?? "trees"); + player.tabs.push(layer ?? "trees"); + main.minimized.value = true; } - layers[layer ?? "trees"]!.minimized.value = false; } else { - player.tabs.splice(0, Infinity, layer); + // Mobile, use single tab mode + player.tabs.splice(1, Infinity, layer ?? "trees"); } + layers[layer ?? "trees"]!.minimized.value = false; }, onUnlockLayer() { if (layer != null) {