thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2024-11-24 09:21:48 +00:00
Code Issues Releases Activity Actions

Merge branch 'day-19-factory' of https://github.com/thepaperpilot/Advent-Incremental into day-19-factory

Browse source
This commit is contained in:
unsoftcapped3 2022-12-23 02:05:00 +00:00
commit 2d2e521034
2 changed files with 68 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/data/layers/factory.tsx
View file

@ -303,7 +303,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: {
@ -1674,16 +1674,20 @@ const factory = createLayer(id, () => {
// ------------------------------------------------------------------------------- Tabs
const hovered = ref(false);
const componentsList = jsx(() => {
return (
<div class="comp-container">
<div class={{ "comp-container": true, hovered: hovered.value }}>
<div class="comp-list">
<div
class="comp-list-child"
onPointerenter={() => (hovered.value = true)}
onPointerleave={() => (hovered.value = false)}
>
{Object.entries(FACTORY_COMPONENTS).map(value => {
const key = value[0] as FactoryCompNames;
const item = value[1];
if (unref(item.visible) === false) {
return null;
}
return (
<div class="comp">
<img
@ -1709,7 +1713,9 @@ const factory = createLayer(id, () => {
<>
<br />
Energy Consumption:{" "}
{formatWhole(FACTORY_COMPONENTS[key].energyCost ?? 0)}
{formatWhole(
FACTORY_COMPONENTS[key].energyCost ?? 0
)}
</>
) : null}
</div>
@ -1718,6 +1724,7 @@ const factory = createLayer(id, () => {
})}
</div>
</div>
</div>
);
});

39
src/data/layers/styles/factory.css
View file

@ -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,28 +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:nth-child(2n - 1):last-child .comp-info {
right: -47px;
}
.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 {
@ -160,7 +165,7 @@
z-index: -1;
}
.comp-list > .comp {
.comp-list .comp {
position: relative;
width: 50px;
height: 50px;
@ -168,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);
@ -178,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);
}