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

Merge branch 'main' into day-19-factory

Browse source
This commit is contained in:
unsoftcapped3 2022-12-22 18:03:46 -08:00 committed by GitHub
commit ed22c51d24
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 68 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
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,48 +1674,55 @@ 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">
{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
src={item.imageSrc}
class={{ selected: compSelected.value === key }}
onClick={() => onCompClick(key)}
/>
{item.extraImage == null ? null : (
<img src={item.extraImage} class="producedItem" />
)}
<div
class={{
"comp-info": true
}}
>
<h3>
{FACTORY_COMPONENTS[key].name + " "}
<HotkeyVue hotkey={hotkeys[key]} />
</h3>
<br />
{unref(FACTORY_COMPONENTS[key].description)}
{FACTORY_COMPONENTS[key].energyCost ?? 0 ? (
<>
<br />
Energy Consumption:{" "}
{formatWhole(FACTORY_COMPONENTS[key].energyCost ?? 0)}
</>
) : null}
<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];
return (
<div class="comp">
<img
src={item.imageSrc}
class={{ selected: compSelected.value === key }}
onClick={() => onCompClick(key)}
/>
{item.extraImage == null ? null : (
<img src={item.extraImage} class="producedItem" />
)}
<div
class={{
"comp-info": true
}}
>
<h3>
{FACTORY_COMPONENTS[key].name + " "}
<HotkeyVue hotkey={hotkeys[key]} />
</h3>
<br />
{unref(FACTORY_COMPONENTS[key].description)}
{FACTORY_COMPONENTS[key].energyCost ?? 0 ? (
<>
<br />
Energy Consumption:{" "}
{formatWhole(
FACTORY_COMPONENTS[key].energyCost ?? 0
)}
</>
) : null}
</div>
</div>
</div>
);
})}
);
})}
</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);
}