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

Make components list handle overflowing

Browse source
This commit is contained in:
thepaperpilot 2022-12-22 14:20:48 -06:00
parent fabdf60eb2
commit 55e3c07e2c
3 changed files with 62 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/data/layers/Factory.vue
View file

@ -26,7 +26,7 @@ onMounted(() => {
position: absolute;
top: 0;
bottom: 0;
left: 148px;
left: 158px;
right: 0;
touch-action: none;
}

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

@ -625,9 +625,6 @@ const factory = createLayer(id, () => {
});
const isMouseHoverShown = ref(false);
const isComponentHover = ref(false);
const whatIsHovered = ref<FactoryCompNames | "">("");
const compSelected = ref<FactoryCompNames>("cursor");
const components: Persistent<{ [key: string]: FactoryComponent }> = persistent({});
const compInternalData: Record<string, FactoryInternal> = {};
@ -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 (
<div class="comp-container">
<div
class={{
"comp-info": true,
active: isComponentHover.value
}}
style={{
top: componentIndex * 70 + 10 + "px"
}}
>
{whatIsHovered.value === "" ? undefined : (
<>
<h3>
{FACTORY_COMPONENTS[whatIsHovered.value].name + " "}
<HotkeyVue hotkey={hotkeys[whatIsHovered.value]} />
</h3>
<br />
{unref(FACTORY_COMPONENTS[whatIsHovered.value].description)}
{FACTORY_COMPONENTS[whatIsHovered.value].energyCost ?? 0 ? (
<>
<br />
Energy Consumption:{" "}
{formatWhole(
FACTORY_COMPONENTS[whatIsHovered.value].energyCost ?? 0
)}
</>
) : null}
</>
)}
</div>
<div class="comp-list">
{Object.entries(FACTORY_COMPONENTS).map(value => {
const key = value[0] as FactoryCompNames;
const item = value[1];
return (
<div>
<div class="comp">
<img
src={item.imageSrc}
class={{ selected: compSelected.value === key }}
onMouseenter={() => onComponentMouseEnter(key)}
onMouseleave={() => onComponentMouseLeave()}
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>
);
})}

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

@ -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);