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

Some factory redesigning

Browse source
This commit is contained in:
ducdat0507 2022-12-21 13:40:54 +07:00
parent 33df73165b
commit b7d337f19b
2 changed files with 136 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -200,7 +200,10 @@ const factory = createLayer(id, () => {
y: 0
});
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> = {};
@ -610,15 +613,20 @@ const factory = createLayer(id, () => {
isMouseHoverShown.value = false;
}
function goBack() {
player.tabs.splice(0, Infinity, "main");
}
function onComponentHover(name: FactoryCompNames | "") {
function onComponentMouseEnter(name: FactoryCompNames | "") {
whatIsHovered.value = name;
isComponentHover.value = true;
}
function onComponentMouseLeave() {
isComponentHover.value = false;
}
function onCompClick(name: FactoryCompNames) {
compSelected.value = name;
}
function goBack() {
player.tabs.splice(0, Infinity, "main");
}
return {
name,
day,
@ -640,54 +648,77 @@ const factory = createLayer(id, () => {
onPointerleave={onFactoryMouseLeave}
onContextmenu={(e: MouseEvent) => e.preventDefault()}
/>
<div class="info-container">
{compHovered.value !== undefined ? (
<>
<b>{FACTORY_COMPONENTS[compHovered.value.type].name}</b>
<br />
{FACTORY_COMPONENTS[compHovered.value.type].description}
<br />
{compHovered.value.type !== "conveyor" ? (
<>
Stock:{" "}
{Object.entries({
...compHovered.value.productionStock,
...compHovered.value.consumptionStock
}).map(i => {
return `${i[0]}: ${i[1]}/${
FACTORY_COMPONENTS[compHovered.value?.type ?? "cursor"]
.consumptionStock[i[0]] ??
FACTORY_COMPONENTS[compHovered.value?.type ?? "cursor"]
.productionStock[i[0]]
}`;
})}
</>
) : undefined}
</>
) : undefined}
</div>
<div class="factory-container">
<div style="line-height: 2.5em; min-height: 2.5em">
{whatIsHovered.value === ""
? undefined
: FACTORY_COMPONENTS[whatIsHovered.value].description}
{compHovered.value !== undefined ? (
<div
class="info-container"
style={{
left: mouseCoords.x + "px",
top: mouseCoords.y + "px"
}}
>
<h3>{FACTORY_COMPONENTS[compHovered.value.type].name}</h3>
<br />
{FACTORY_COMPONENTS[compHovered.value.type].description}
<br />
{compHovered.value.type !== "conveyor" ? (
<>
Stock:{" "}
{Object.entries({
...compHovered.value.productionStock,
...compHovered.value.consumptionStock
}).map(i => {
return `${i[0]}: ${i[1]}/${
FACTORY_COMPONENTS[compHovered.value?.type ?? "cursor"]
.consumptionStock[i[0]] ??
FACTORY_COMPONENTS[compHovered.value?.type ?? "cursor"]
.productionStock[i[0]]
}`;
})}
</>
) : undefined}
</div>
<div class="comps">
<div>
{Object.entries(FACTORY_COMPONENTS).map(value => {
const key = value[0] as FactoryCompNames;
const item = value[1];
return (
<img
src={item.imageSrc}
class={{ selected: compSelected.value === key }}
onMouseenter={() => onComponentHover(key)}
onMouseleave={() => onComponentHover("")}
onClick={() => onCompClick(key)}
></img>
);
})}
</div>
) : undefined}
<div class="factory-container">
<div
class={{
"comp-info": true,
active: isComponentHover.value
}}
style={{
top:
Math.max(
Object.keys(FACTORY_COMPONENTS).indexOf(whatIsHovered.value),
0
) *
50 +
10 +
"px"
}}
>
{whatIsHovered.value === "" ? undefined : (
<>
<h3>{FACTORY_COMPONENTS[whatIsHovered.value].name}</h3>
<br />
{FACTORY_COMPONENTS[whatIsHovered.value].description}
</>
)}
</div>
<div class="comp-list">
{Object.entries(FACTORY_COMPONENTS).map(value => {
const key = value[0] as FactoryCompNames;
const item = value[1];
return (
<img
src={item.imageSrc}
class={{ selected: compSelected.value === key }}
onMouseenter={() => onComponentMouseEnter(key)}
onMouseleave={() => onComponentMouseLeave()}
onClick={() => onCompClick(key)}
></img>
);
})}
</div>
</div>
</div>

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

@ -17,38 +17,70 @@
.info-container {
position: absolute;
height: 100px;
top: 0;
left: 10%;
right: 10%;
transition: height ease 1s;
background: var(--raised-background);
border-radius: 0 0 var(--border-radius) var(--border-radius);
box-shadow: 0 2px 10px black;
margin: 0;
padding: 0;
max-width: 300px;
margin: 20px 0 0 10px;
padding: 5px 10px;
background: var(--background);
border-radius: var(--border-radius);
box-shadow: 0 1px 5px black;
text-align: left;
font-size: smaller;
pointer-events: none;
transition: height .3s;
}
.factory-container {
position: absolute;
bottom: -5px;
height: 100px;
left: 10%;
right: 10%;
background: var(--raised-background);
border-radius: var(--border-radius) var(--border-radius) 0 0;
box-shadow: 0 2px 10px black;
top: calc(5% + 30px);
bottom: 5%;
left: 0%;
width: 70px;
margin: 0;
padding: 0;
}
.comps > div > img {
.comp-info {
position: absolute;
right: 10px;
padding: 5px 10px;
width: max-content;
max-width: 300px;
background: var(--background);
border-radius: var(--border-radius);
box-shadow: 0 1px 5px #0007;
text-align: left;
font-size: smaller;
pointer-events: none;
transition: transform 0.3s;
}
.comp-info.active {
transform: translateX(calc(20px + 100%));
}
.comp-list {
position: relative;
height: 100%;
padding: 10px;
background: var(--raised-background);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
box-shadow: 0 2px 10px black;
}
.comp-list > img {
display: block;
width: 50px;
height: 50px;
}
.comps > div > img.selected {
transform: translateY(-5px);
filter: drop-shadow(0 5px 5px #0007);
.comp-list > img.selected {
transform: translate(-5px, -5px);
filter: drop-shadow(2px 2px 0 var(--foreground)) drop-shadow(5px 5px 5px #0007);
}