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

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

@ -303,7 +303,7 @@ const factory = createLayer(id, () => {
key: "0", key: "0",
name: "Conveyor", name: "Conveyor",
type: "conveyor", type: "conveyor",
description: "Moves items at 1 block per second.", description: "Moves items at 1 block per tick.",
energyCost: 1, energyCost: 1,
tick: 1, tick: 1,
ports: { ports: {
@ -1674,48 +1674,55 @@ const factory = createLayer(id, () => {
// ------------------------------------------------------------------------------- Tabs // ------------------------------------------------------------------------------- Tabs
const hovered = ref(false);
const componentsList = jsx(() => { const componentsList = jsx(() => {
return ( return (
<div class="comp-container">
<div class={{ "comp-container": true, hovered: hovered.value }}>
<div class="comp-list"> <div class="comp-list">
{Object.entries(FACTORY_COMPONENTS).map(value => { <div
const key = value[0] as FactoryCompNames; class="comp-list-child"
const item = value[1]; onPointerenter={() => (hovered.value = true)}
if (unref(item.visible) === false) { onPointerleave={() => (hovered.value = false)}
return null; >
} {Object.entries(FACTORY_COMPONENTS).map(value => {
return ( const key = value[0] as FactoryCompNames;
<div class="comp"> const item = value[1];
<img return (
src={item.imageSrc} <div class="comp">
class={{ selected: compSelected.value === key }} <img
onClick={() => onCompClick(key)} src={item.imageSrc}
/> class={{ selected: compSelected.value === key }}
{item.extraImage == null ? null : ( onClick={() => onCompClick(key)}
<img src={item.extraImage} class="producedItem" /> />
)} {item.extraImage == null ? null : (
<div <img src={item.extraImage} class="producedItem" />
class={{ )}
"comp-info": true <div
}} class={{
> "comp-info": true
<h3> }}
{FACTORY_COMPONENTS[key].name + " "} >
<HotkeyVue hotkey={hotkeys[key]} /> <h3>
</h3> {FACTORY_COMPONENTS[key].name + " "}
<br /> <HotkeyVue hotkey={hotkeys[key]} />
{unref(FACTORY_COMPONENTS[key].description)} </h3>
{FACTORY_COMPONENTS[key].energyCost ?? 0 ? ( <br />
<> {unref(FACTORY_COMPONENTS[key].description)}
<br /> {FACTORY_COMPONENTS[key].energyCost ?? 0 ? (
Energy Consumption:{" "} <>
{formatWhole(FACTORY_COMPONENTS[key].energyCost ?? 0)} <br />
</> Energy Consumption:{" "}
) : null} {formatWhole(
FACTORY_COMPONENTS[key].energyCost ?? 0
)}
</>
) : null}
</div>
</div> </div>
</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); border-left: 1px solid var(--foreground);
} }
.factory-container { .factory-container {
width: auto; width: auto;
top: 113px; top: 113px;
@ -68,6 +66,7 @@
position: absolute; position: absolute;
background-color: var(--raised-background); background-color: var(--raised-background);
overflow: hidden; overflow: hidden;
z-index: 1;
} }
.info-container { .info-container {
@ -100,6 +99,10 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 158px; width: 158px;
z-index: -1;
}
.comp-container.hovered {
z-index: 1; z-index: 1;
} }
@ -124,28 +127,30 @@
z-index: -1; z-index: -1;
} }
.comp-list > .comp:nth-child(2n - 1) .comp-info { .comp-list .comp:nth-child(2n - 1) .comp-info {
right: -85px; right: -85px;
} }
.comp-list > .comp:nth-child(2n - 1):last-child .comp-info { .comp-list .comp:hover .comp-info {
right: -47px;
}
.comp-list > .comp:hover .comp-info {
transform: translateX(calc(20px + 100%)); transform: translateX(calc(20px + 100%));
} }
.comp-list { .comp-list {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: overlay;
overflow-x: hidden;
padding-right: 370px;
direction: rtl;
}
.comp-list-child {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
align-items: flex-start; align-items: flex-start;
align-content: flex-start; align-content: flex-start;
overflow-y: overlay; width: 148px;
overflow-x: hidden; direction: ltr;
padding-right: 500px;
pointer-events: none;
} }
.comp-list::after { .comp-list::after {
@ -160,7 +165,7 @@
z-index: -1; z-index: -1;
} }
.comp-list > .comp { .comp-list .comp {
position: relative; position: relative;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -168,8 +173,8 @@
pointer-events: all; pointer-events: all;
} }
.comp-list > div:nth-child(3)::after, .comp-list .comp:nth-child(3)::after,
.comp-list > div:nth-child(4)::after { .comp-list .comp:nth-child(4)::after {
content: ""; content: "";
position: absolute; position: absolute;
top: calc(100% + 10px); top: calc(100% + 10px);
@ -178,13 +183,13 @@
left: 0; left: 0;
right: 0; right: 0;
} }
.comp-list > div:nth-child(3)::after { .comp-list .comp:nth-child(3)::after {
right: -50px; right: -50px;
} }
.comp-list > div:nth-child(4)::after { .comp-list .comp:nth-child(4)::after {
left: -50px; left: -50px;
} }
.comp-list > img.selected:not(.producedItem) { .comp-list .comp img.selected:not(.producedItem) {
transform: translate(-5px, -5px); transform: translate(-5px, -5px);
filter: drop-shadow(2px 2px 0 var(--foreground)) drop-shadow(5px 5px 5px #0007); filter: drop-shadow(2px 2px 0 var(--foreground)) drop-shadow(5px 5px 5px #0007);
} }