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