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

Fix hovering stuff

Browse source
This commit is contained in:
thepaperpilot 2022-12-22 19:07:44 -06:00
parent a2b6099818
commit a4c39b3253
2 changed files with 66 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1238,45 +1238,54 @@ 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)}
return ( onPointerleave={() => (hovered.value = false)}
<div class="comp"> >
<img {Object.entries(FACTORY_COMPONENTS).map(value => {
src={item.imageSrc} const key = value[0] as FactoryCompNames;
class={{ selected: compSelected.value === key }} const item = value[1];
onClick={() => onCompClick(key)} return (
/> <div class="comp">
{item.extraImage == null ? null : ( <img
<img src={item.extraImage} class="producedItem" /> src={item.imageSrc}
)} class={{ selected: compSelected.value === key }}
<div onClick={() => onCompClick(key)}
class={{ />
"comp-info": true {item.extraImage == null ? null : (
}} <img src={item.extraImage} class="producedItem" />
> )}
<h3> <div
{FACTORY_COMPONENTS[key].name + " "} class={{
<HotkeyVue hotkey={hotkeys[key]} /> "comp-info": true
</h3> }}
<br /> >
{unref(FACTORY_COMPONENTS[key].description)} <h3>
{FACTORY_COMPONENTS[key].energyCost ?? 0 ? ( {FACTORY_COMPONENTS[key].name + " "}
<> <HotkeyVue hotkey={hotkeys[key]} />
<br /> </h3>
Energy Consumption:{" "} <br />
{formatWhole(FACTORY_COMPONENTS[key].energyCost ?? 0)} {unref(FACTORY_COMPONENTS[key].description)}
</> {FACTORY_COMPONENTS[key].energyCost ?? 0 ? (
) : null} <>
<br />
Energy Consumption:{" "}
{formatWhole(
FACTORY_COMPONENTS[key].energyCost ?? 0
)}
</>
) : null}
</div>
</div> </div>
</div> );
); })}
})} </div>
</div> </div>
</div> </div>
); );

36
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,25 +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:hover .comp-info { .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 {
@ -157,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;
@ -165,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);
@ -175,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);
} }