From 8ed259cc129cf8480972808ef177b484b72b002e Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Thu, 22 Dec 2022 13:40:04 -0600 Subject: [PATCH 1/4] Fix typo --- src/data/projEntry.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx index a1346d7..8e051b2 100644 --- a/src/data/projEntry.tsx +++ b/src/data/projEntry.tsx @@ -445,7 +445,7 @@ export const main = createLayer("main", function (this: BaseLayer) { shouldNotify: false, layer: "factory", symbol: factorySymbol, - story: "Alright, so those toys were using incredibly amounts of resources to make. Fortunately, you happen to have access to a group of people with an uncanny knack for making stuff without actually consuming materials - Elves! Let's turn this workshop into a proper factory, and get them producing these toys by themselves.", + story: "Alright, so those toys were using incredibly large amounts of resources to make. Fortunately, you happen to have access to a group of people with an uncanny knack for making stuff without actually consuming materials - Elves! Let's turn this workshop into a proper factory, and get them producing these toys with miraculous efficiency!", completedStory: "That was a bit different than the usual elf training you are used to. But this factory seems very versatile, so you think it's a fair trade-off for needing to set things up a bit more. Good Job!", masteredStory: "" From 6ed37ba0a7728b5b9bd426ec2e12505cb96e40c3 Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Thu, 22 Dec 2022 14:20:48 -0600 Subject: [PATCH 2/4] Make components list handle overflowing --- src/data/layers/Factory.vue | 2 +- src/data/layers/factory.tsx | 65 +++++++++--------------------- src/data/layers/styles/factory.css | 55 ++++++++++++++++++------- 3 files changed, 62 insertions(+), 60 deletions(-) diff --git a/src/data/layers/Factory.vue b/src/data/layers/Factory.vue index 6d2c2b5..a3e3be7 100644 --- a/src/data/layers/Factory.vue +++ b/src/data/layers/Factory.vue @@ -26,7 +26,7 @@ onMounted(() => { position: absolute; top: 0; bottom: 0; - left: 148px; + left: 158px; right: 0; touch-action: none; } diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index ecf1ca1..033f5d6 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -625,9 +625,6 @@ const factory = createLayer(id, () => { }); const isMouseHoverShown = ref(false); - const isComponentHover = ref(false); - const whatIsHovered = ref(""); - const compSelected = ref("cursor"); const components: Persistent<{ [key: string]: FactoryComponent }> = persistent({}); const compInternalData: Record = {}; @@ -1193,13 +1190,6 @@ const factory = createLayer(id, () => { compHovered.value = undefined; } - function onComponentMouseEnter(name: FactoryCompNames | "") { - whatIsHovered.value = name; - isComponentHover.value = true; - } - function onComponentMouseLeave() { - isComponentHover.value = false; - } function onCompClick(name: FactoryCompNames) { compSelected.value = name; } @@ -1249,56 +1239,41 @@ const factory = createLayer(id, () => { // ------------------------------------------------------------------------------- Tabs const componentsList = jsx(() => { - const componentIndex = Math.floor( - Math.max(Object.keys(FACTORY_COMPONENTS).indexOf(whatIsHovered.value), 0) / 2 - ); return (
-
- {whatIsHovered.value === "" ? undefined : ( - <> -

- {FACTORY_COMPONENTS[whatIsHovered.value].name + " "} - -

-
- {unref(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)} /> {item.extraImage == null ? null : ( )} +
+

+ {FACTORY_COMPONENTS[key].name + " "} + +

+
+ {unref(FACTORY_COMPONENTS[key].description)} + {FACTORY_COMPONENTS[key].energyCost ?? 0 ? ( + <> +
+ Energy Consumption:{" "} + {formatWhole(FACTORY_COMPONENTS[key].energyCost ?? 0)} + + ) : null} +
); })} diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css index 01fc974..3d5f4c7 100644 --- a/src/data/layers/styles/factory.css +++ b/src/data/layers/styles/factory.css @@ -99,17 +99,18 @@ top: 0; left: 0; bottom: 0; - width: 148px; + width: 158px; z-index: 1; } .comp-info { position: absolute; - right: 10px; + top: 0; + right: -10px; padding: 5px 10px; width: max-content; - max-width: 300px; + max-width: 320px; background: var(--background); border-radius: var(--border-radius); @@ -123,7 +124,10 @@ z-index: -1; } -.comp-info.active { +.comp-list > .comp:nth-child(2n - 1) .comp-info { + right: -85px; +} +.comp-list > .comp:hover .comp-info { transform: translateX(calc(20px + 100%)); } @@ -131,28 +135,51 @@ width: 100%; height: 100%; 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); + overflow-y: overlay; + overflow-x: hidden; + padding-right: 500px; + pointer-events: none; } -.comp-list::before { + +.comp-list::after { content: ""; - display: block; position: absolute; - top: 140px; - height: 2px; - left: 10px; - right: 10px; - background-color: var(--foreground); + border-right: solid 2px var(--locked); + background: var(--raised-background); + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; } -.comp-list > div { + +.comp-list > .comp { position: relative; width: 50px; height: 50px; margin: 10px; + pointer-events: all; +} + +.comp-list > div:nth-child(3)::after, +.comp-list > div:nth-child(4)::after { + content: ""; + position: absolute; + top: calc(100% + 10px); + height: 2px; + background-color: var(--foreground); + left: 0; + right: 0; +} +.comp-list > div:nth-child(3)::after { + right: -50px; +} +.comp-list > div:nth-child(4)::after { + left: -50px; } .comp-list > img.selected:not(.producedItem) { transform: translate(-5px, -5px); From a2b6099818b6af1d5c9dd6f3495687ba9fe562c5 Mon Sep 17 00:00:00 2001 From: circle-gon <97845741+circle-gon@users.noreply.github.com> Date: Thu, 22 Dec 2022 16:51:02 -0500 Subject: [PATCH 3/4] change seconds to tick --- src/data/layers/factory.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 033f5d6..0f8aedd 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -249,7 +249,7 @@ const factory = createLayer(id, () => { key: "0", name: "Conveyor", type: "conveyor", - description: "Moves items at 1 block per second.", + description: "Moves items at 1 block per tick.", energyCost: 1, tick: 1, ports: { @@ -267,7 +267,7 @@ const factory = createLayer(id, () => { key: "1", name: "Wood Machine", type: "processor", - description: "Produces 1 wood every 1 second.", + description: "Produces 1 wood per tick.", energyCost: 10, tick: 1, outputs: { @@ -282,7 +282,7 @@ const factory = createLayer(id, () => { key: "2", name: "Cloth Machine", type: "processor", - description: "Produces 1 cloth every 1 second.", + description: "Produces 1 cloth per tick.", energyCost: 10, tick: 1, outputs: { @@ -297,7 +297,7 @@ const factory = createLayer(id, () => { key: "3", name: "Dye Machine", type: "processor", - description: "Produces 1 dye every 1 second.", + description: "Produces 1 dye per tick.", energyCost: 10, tick: 1, outputs: { @@ -312,7 +312,7 @@ const factory = createLayer(id, () => { key: "4", name: "Metal Machine", type: "processor", - description: "Produces 1 metal every 1 second.", + description: "Produces 1 metal per tick.", energyCost: 10, tick: 1, outputs: { @@ -327,7 +327,7 @@ const factory = createLayer(id, () => { key: "5", name: "Plastic Machine", type: "processor", - description: "Produces 1 plastic every 1 second.", + description: "Produces 1 plastic per tick.", energyCost: 10, tick: 1, outputs: { @@ -341,7 +341,7 @@ const factory = createLayer(id, () => { key: "shift+1", name: "Sawmill", type: "processor", - description: "Turns 1 wood into 1 plank every second.", + description: "Turns 1 wood into 1 plank per tick.", energyCost: 2, tick: 1, inputs: { @@ -360,7 +360,7 @@ const factory = createLayer(id, () => { key: "shift+2", name: "Thread Spinner", type: "processor", - description: "Turns 1 cloth into 1 thread every second.", + description: "Turns 1 cloth into 1 thread per tick.", energyCost: 2, tick: 1, inputs: { @@ -384,7 +384,7 @@ const factory = createLayer(id, () => { () => `Turns 1 plastic into ${ toys.milestones.milestone5.earned.value ? "2 wheels" : "1 wheel" - } every second.` + } per tick.` ), energyCost: 2, tick: 1, @@ -404,7 +404,7 @@ const factory = createLayer(id, () => { key: "ctrl+shift+1", name: "Wooden Block Maker", type: "processor", - description: "Turns 1 plank into 1 wooden block every second.", + description: "Turns 1 plank into 1 wooden block per tick.", energyCost: 20, tick: 1, inputs: { @@ -424,7 +424,7 @@ const factory = createLayer(id, () => { key: "ctrl+shift+2", name: "Clothes Maker", type: "processor", - description: "Turns 2 threads, 3 cloth, and 1 dye into 1 clothes every second.", + description: "Turns 2 threads, 3 cloth, and 1 dye into 1 clothes per tick.", energyCost: 20, tick: 1, inputs: { @@ -450,7 +450,7 @@ const factory = createLayer(id, () => { key: "ctrl+shift+3", name: "Trucks Maker", type: "processor", - description: "Turns 2 metal and 4 wheels into 1 truck every second.", + description: "Turns 2 metal and 4 wheels into 1 truck per tick.", energyCost: 20, tick: 1, inputs: { From a4c39b32538a07d19dcb79fb3016999bf598c842 Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Thu, 22 Dec 2022 19:07:44 -0600 Subject: [PATCH 4/4] Fix hovering stuff --- src/data/layers/factory.tsx | 79 +++++++++++++++++------------- src/data/layers/styles/factory.css | 36 ++++++++------ 2 files changed, 66 insertions(+), 49 deletions(-) diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 0f8aedd..545930c 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -1238,45 +1238,54 @@ const factory = createLayer(id, () => { // ------------------------------------------------------------------------------- Tabs + const hovered = ref(false); const componentsList = jsx(() => { return ( -
+
- {Object.entries(FACTORY_COMPONENTS).map(value => { - const key = value[0] as FactoryCompNames; - const item = value[1]; - return ( -
- onCompClick(key)} - /> - {item.extraImage == null ? null : ( - - )} -
-

- {FACTORY_COMPONENTS[key].name + " "} - -

-
- {unref(FACTORY_COMPONENTS[key].description)} - {FACTORY_COMPONENTS[key].energyCost ?? 0 ? ( - <> -
- Energy Consumption:{" "} - {formatWhole(FACTORY_COMPONENTS[key].energyCost ?? 0)} - - ) : null} +
(hovered.value = true)} + onPointerleave={() => (hovered.value = false)} + > + {Object.entries(FACTORY_COMPONENTS).map(value => { + const key = value[0] as FactoryCompNames; + const item = value[1]; + return ( +
+ onCompClick(key)} + /> + {item.extraImage == null ? null : ( + + )} +
+

+ {FACTORY_COMPONENTS[key].name + " "} + +

+
+ {unref(FACTORY_COMPONENTS[key].description)} + {FACTORY_COMPONENTS[key].energyCost ?? 0 ? ( + <> +
+ Energy Consumption:{" "} + {formatWhole( + FACTORY_COMPONENTS[key].energyCost ?? 0 + )} + + ) : null} +
-
- ); - })} + ); + })} +
); diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css index 3d5f4c7..6a0b3df 100644 --- a/src/data/layers/styles/factory.css +++ b/src/data/layers/styles/factory.css @@ -57,8 +57,6 @@ border-left: 1px solid var(--foreground); } - - .factory-container { width: auto; top: 113px; @@ -68,6 +66,7 @@ position: absolute; background-color: var(--raised-background); overflow: hidden; + z-index: 1; } .info-container { @@ -100,6 +99,10 @@ left: 0; bottom: 0; width: 158px; + z-index: -1; +} + +.comp-container.hovered { z-index: 1; } @@ -124,25 +127,30 @@ z-index: -1; } -.comp-list > .comp:nth-child(2n - 1) .comp-info { +.comp-list .comp:nth-child(2n - 1) .comp-info { right: -85px; } -.comp-list > .comp:hover .comp-info { +.comp-list .comp:hover .comp-info { transform: translateX(calc(20px + 100%)); } .comp-list { width: 100%; height: 100%; + overflow-y: overlay; + overflow-x: hidden; + padding-right: 370px; + direction: rtl; +} + +.comp-list-child { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; align-content: flex-start; - overflow-y: overlay; - overflow-x: hidden; - padding-right: 500px; - pointer-events: none; + width: 148px; + direction: ltr; } .comp-list::after { @@ -157,7 +165,7 @@ z-index: -1; } -.comp-list > .comp { +.comp-list .comp { position: relative; width: 50px; height: 50px; @@ -165,8 +173,8 @@ pointer-events: all; } -.comp-list > div:nth-child(3)::after, -.comp-list > div:nth-child(4)::after { +.comp-list .comp:nth-child(3)::after, +.comp-list .comp:nth-child(4)::after { content: ""; position: absolute; top: calc(100% + 10px); @@ -175,13 +183,13 @@ left: 0; right: 0; } -.comp-list > div:nth-child(3)::after { +.comp-list .comp:nth-child(3)::after { right: -50px; } -.comp-list > div:nth-child(4)::after { +.comp-list .comp:nth-child(4)::after { left: -50px; } -.comp-list > img.selected:not(.producedItem) { +.comp-list .comp img.selected:not(.producedItem) { transform: translate(-5px, -5px); filter: drop-shadow(2px 2px 0 var(--foreground)) drop-shadow(5px 5px 5px #0007); }