mirror of
https://github.com/thepaperpilot/Advent-Incremental.git
synced 2024-11-24 17:31:54 +00:00
Major factory UI/X rework
This commit is contained in:
parent
e88bf020bf
commit
c88928199b
4 changed files with 199 additions and 186 deletions
|
|
@ -26,7 +26,8 @@ onMounted(() => {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 500px;
|
||||
touch-action: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import { Assets } from "@pixi/assets";
|
|||
import { Container } from "@pixi/display";
|
||||
import { Graphics } from "@pixi/graphics";
|
||||
import { Sprite } from "@pixi/sprite";
|
||||
import Spacer from "components/layout/Spacer.vue";
|
||||
import { jsx } from "features/feature";
|
||||
import { globalBus } from "game/events";
|
||||
import { createLayer } from "game/layers";
|
||||
import { Persistent, persistent, State } from "game/persistence";
|
||||
import player from "game/player";
|
||||
import Decimal, { formatWhole } from "util/bignum";
|
||||
import Decimal, { format, formatWhole } from "util/bignum";
|
||||
import { Direction } from "util/common";
|
||||
import { computed, ComputedRef, reactive, ref, watchEffect } from "vue";
|
||||
import conveyor from "./factory-components/conveyor.png";
|
||||
|
|
@ -82,7 +82,7 @@ const factory = createLayer(id, () => {
|
|||
.reduce((a, b) => a + b, 0)
|
||||
);
|
||||
const tickRate = computed(() =>
|
||||
Decimal.div(energyConsumption.value, energy.value).pow(2).min(1)
|
||||
Decimal.div(energyConsumption.value, energy.value).recip().pow(2).min(1)
|
||||
);
|
||||
|
||||
// ---------------------------------------------- Components
|
||||
|
|
@ -633,7 +633,6 @@ const factory = createLayer(id, () => {
|
|||
) *
|
||||
Math.PI) /
|
||||
2;
|
||||
console.log("!!", data, sprite);
|
||||
components.value[x + "x" + y] = {
|
||||
ticksDone: 0,
|
||||
direction: Direction.Right,
|
||||
|
|
@ -830,9 +829,6 @@ const factory = createLayer(id, () => {
|
|||
compSelected.value = name;
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
player.tabs.splice(0, Infinity, "main");
|
||||
}
|
||||
return {
|
||||
name,
|
||||
day,
|
||||
|
|
@ -842,141 +838,166 @@ const factory = createLayer(id, () => {
|
|||
style: { overflow: "hidden" },
|
||||
components,
|
||||
display: jsx(() => (
|
||||
<div class="layer-container">
|
||||
<button class="goBack" onClick={goBack}>
|
||||
❌
|
||||
</button>
|
||||
<Factory
|
||||
application={app}
|
||||
onPointermove={onFactoryPointerMove}
|
||||
onPointerdown={onFactoryPointerDown}
|
||||
onPointerenter={onFactoryMouseEnter}
|
||||
onPointerleave={onFactoryMouseLeave}
|
||||
onContextmenu={(e: MouseEvent) => e.preventDefault()}
|
||||
/>
|
||||
|
||||
{compHovered.value !== undefined ? (
|
||||
<div
|
||||
class="info-container"
|
||||
id="factory-info"
|
||||
style={{
|
||||
...(mouseCoords.x +
|
||||
(document.getElementById("factory-info")?.clientWidth ?? 0) >
|
||||
app.view.width - 30
|
||||
? { right: app.view.width - mouseCoords.x + "px" }
|
||||
: { left: mouseCoords.x + "px" }),
|
||||
...(mouseCoords.y +
|
||||
(document.getElementById("factory-info")?.clientHeight ?? 0) >
|
||||
app.view.height - 30
|
||||
? { bottom: app.view.height - mouseCoords.y + "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" ? (
|
||||
<>
|
||||
{compHovered.value.inputStock !== undefined ? (
|
||||
<>
|
||||
<br />
|
||||
<h5>Inputs:</h5>
|
||||
{Object.entries(compHovered.value.inputStock).map(x => (
|
||||
<div>
|
||||
{x[0]}: {formatWhole(x[1])}
|
||||
{FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ?? "cursor"
|
||||
].inputs?.[x[0]].amount !== undefined
|
||||
? " / " +
|
||||
formatWhole(
|
||||
FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ?? "cursor"
|
||||
].inputs?.[x[0]].amount ?? 0
|
||||
)
|
||||
: ""}
|
||||
{FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ?? "cursor"
|
||||
].inputs?.[x[0]].capacity !== undefined
|
||||
? " / " +
|
||||
formatWhole(
|
||||
FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ?? "cursor"
|
||||
].inputs?.[x[0]].capacity ?? 0
|
||||
)
|
||||
: ""}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
) : undefined}
|
||||
{compHovered.value.outputStock !== undefined ? (
|
||||
<>
|
||||
<br />
|
||||
<h5>Outputs:</h5>
|
||||
{Object.entries(compHovered.value.outputStock).map(x => (
|
||||
<div>
|
||||
{x[0]}: {formatWhole(x[1])}
|
||||
{FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ?? "cursor"
|
||||
].outputs?.[x[0]].capacity !== undefined
|
||||
? " / " +
|
||||
formatWhole(
|
||||
FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ?? "cursor"
|
||||
].outputs?.[x[0]].capacity ?? 0
|
||||
)
|
||||
: ""}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
) : undefined}
|
||||
</>
|
||||
) : undefined}
|
||||
</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)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<Factory
|
||||
application={app}
|
||||
onPointermove={onFactoryPointerMove}
|
||||
onPointerdown={onFactoryPointerDown}
|
||||
onPointerenter={onFactoryMouseEnter}
|
||||
onPointerleave={onFactoryMouseLeave}
|
||||
onContextmenu={(e: MouseEvent) => e.preventDefault()}
|
||||
/>
|
||||
<div class="comp-container">
|
||||
<div
|
||||
class={{
|
||||
"comp-info": true,
|
||||
active: isComponentHover.value
|
||||
}}
|
||||
style={{
|
||||
top:
|
||||
Math.floor(
|
||||
Math.max(
|
||||
Object.keys(FACTORY_COMPONENTS).indexOf(
|
||||
whatIsHovered.value
|
||||
),
|
||||
0
|
||||
) / 2
|
||||
) *
|
||||
70 +
|
||||
10 +
|
||||
"px"
|
||||
}}
|
||||
>
|
||||
{whatIsHovered.value === "" ? undefined : (
|
||||
<>
|
||||
<h3>{FACTORY_COMPONENTS[whatIsHovered.value].name}</h3>
|
||||
<br />
|
||||
{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 (
|
||||
<img
|
||||
src={item.imageSrc}
|
||||
class={{ selected: compSelected.value === key }}
|
||||
onMouseenter={() => onComponentMouseEnter(key)}
|
||||
onMouseleave={() => onComponentMouseLeave()}
|
||||
onClick={() => onCompClick(key)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{compHovered.value !== undefined ? (
|
||||
<div
|
||||
class="info-container"
|
||||
id="factory-info"
|
||||
style={{
|
||||
...(mouseCoords.x >= 180
|
||||
? { right: app.view.width - mouseCoords.x + "px" }
|
||||
: { left: mouseCoords.x + 150 + "px" }),
|
||||
...(mouseCoords.y +
|
||||
(document.getElementById("factory-info")?.clientHeight ?? 0) >
|
||||
app.view.height - 30
|
||||
? { bottom: app.view.height - mouseCoords.y + "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" ? (
|
||||
<>
|
||||
{compHovered.value.inputStock !== undefined ? (
|
||||
<>
|
||||
<br />
|
||||
<h5>Inputs:</h5>
|
||||
{Object.entries(compHovered.value.inputStock).map(x => (
|
||||
<div>
|
||||
{x[0]}: {formatWhole(x[1])}
|
||||
{FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ?? "cursor"
|
||||
].inputs?.[x[0]].amount !== undefined
|
||||
? " / " +
|
||||
formatWhole(
|
||||
FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ??
|
||||
"cursor"
|
||||
].inputs?.[x[0]].amount ?? 0
|
||||
)
|
||||
: ""}
|
||||
{FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ?? "cursor"
|
||||
].inputs?.[x[0]].capacity !== undefined
|
||||
? " / " +
|
||||
formatWhole(
|
||||
FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ??
|
||||
"cursor"
|
||||
].inputs?.[x[0]].capacity ?? 0
|
||||
)
|
||||
: ""}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
) : undefined}
|
||||
{compHovered.value.outputStock !== undefined ? (
|
||||
<>
|
||||
<br />
|
||||
<h5>Outputs:</h5>
|
||||
{Object.entries(compHovered.value.outputStock).map(
|
||||
x => (
|
||||
<div>
|
||||
{x[0]}: {formatWhole(x[1])}
|
||||
{FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ?? "cursor"
|
||||
].outputs?.[x[0]].capacity !== undefined
|
||||
? " / " +
|
||||
formatWhole(
|
||||
FACTORY_COMPONENTS[
|
||||
compHovered.value?.type ??
|
||||
"cursor"
|
||||
].outputs?.[x[0]].capacity ?? 0
|
||||
)
|
||||
: ""}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
) : undefined}
|
||||
</>
|
||||
) : undefined}
|
||||
</div>
|
||||
) : undefined}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Spacer />
|
||||
<div
|
||||
class={Decimal.gt(energyConsumption.value, energy.value) ? "unaffordable" : ""}
|
||||
>
|
||||
Energy Consumption: {formatWhole(energyConsumption.value)} /{" "}
|
||||
{formatWhole(energy.value)}
|
||||
<br />
|
||||
Tick Rate: {format(tickRate.value)} TPS
|
||||
</div>
|
||||
</>
|
||||
))
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,18 +1,11 @@
|
|||
|
||||
.factoryDisp {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
background: snow;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.factoryDisp canvas {
|
||||
filter: drop-shadow(1px 1px 2px #0007);
|
||||
.factory-container {
|
||||
width: 650px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
background-color: var(--raised-background);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 2px 10px rgb(0 0 0 / 50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
|
|
@ -35,17 +28,16 @@
|
|||
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
.factory-container {
|
||||
.comp-container {
|
||||
position: absolute;
|
||||
|
||||
top: calc(5% + 30px);
|
||||
bottom: 5%;
|
||||
left: 0%;
|
||||
width: 70px;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 148px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.comp-info {
|
||||
|
|
@ -65,24 +57,29 @@
|
|||
|
||||
pointer-events: none;
|
||||
transition: transform 0.3s;
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
.comp-info.active {
|
||||
transform: translateX(calc(20px + 100%));
|
||||
}
|
||||
|
||||
.comp-list {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
|
||||
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);
|
||||
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;
|
||||
margin: 10px;
|
||||
}
|
||||
.comp-list > img.selected {
|
||||
transform: translate(-5px, -5px);
|
||||
|
|
|
|||
|
|
@ -222,27 +222,21 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
},
|
||||
onOpenLayer() {
|
||||
recentlyUpdated.value = false;
|
||||
|
||||
// should not be full screen
|
||||
if (layer !== "factory") {
|
||||
// 1468 is because two tabs with minWidth of 700px plus the minimized calendar of 60px plus 2 dividers of 4px each
|
||||
if (window.matchMedia("(min-width: 1468px)").matches) {
|
||||
// Desktop, allow multiple tabs to be open
|
||||
if (player.tabs.includes(layer ?? "trees")) {
|
||||
const index = player.tabs.lastIndexOf(layer ?? "trees");
|
||||
player.tabs.splice(index, 1);
|
||||
} else {
|
||||
player.tabs.push(layer ?? "trees");
|
||||
main.minimized.value = true;
|
||||
}
|
||||
// 1468 is because two tabs with minWidth of 700px plus the minimized calendar of 60px plus 2 dividers of 4px each
|
||||
if (window.matchMedia("(min-width: 1468px)").matches) {
|
||||
// Desktop, allow multiple tabs to be open
|
||||
if (player.tabs.includes(layer ?? "trees")) {
|
||||
const index = player.tabs.lastIndexOf(layer ?? "trees");
|
||||
player.tabs.splice(index, 1);
|
||||
} else {
|
||||
// Mobile, use single tab mode
|
||||
player.tabs.splice(1, Infinity, layer ?? "trees");
|
||||
player.tabs.push(layer ?? "trees");
|
||||
main.minimized.value = true;
|
||||
}
|
||||
layers[layer ?? "trees"]!.minimized.value = false;
|
||||
} else {
|
||||
player.tabs.splice(0, Infinity, layer);
|
||||
// Mobile, use single tab mode
|
||||
player.tabs.splice(1, Infinity, layer ?? "trees");
|
||||
}
|
||||
layers[layer ?? "trees"]!.minimized.value = false;
|
||||
},
|
||||
onUnlockLayer() {
|
||||
if (layer != null) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue