thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2025-02-16 17:41:44 +00:00
Code Issues Releases Activity Actions

Major factory UI/X rework

Browse source
This commit is contained in:
thepaperpilot 2022-12-21 21:47:09 -06:00
parent e88bf020bf
commit c88928199b
4 changed files with 199 additions and 186 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -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,10 +838,8 @@ 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}> <div class="factory-container">
❌
</button>
<Factory <Factory
application={app} application={app}
onPointermove={onFactoryPointerMove} onPointermove={onFactoryPointerMove}
@ -854,17 +848,70 @@ const factory = createLayer(id, () => {
onPointerleave={onFactoryMouseLeave} onPointerleave={onFactoryMouseLeave}
onContextmenu={(e: MouseEvent) => e.preventDefault()} 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 ? ( {compHovered.value !== undefined ? (
<div <div
class="info-container" class="info-container"
id="factory-info" id="factory-info"
style={{ style={{
...(mouseCoords.x + ...(mouseCoords.x >= 180
(document.getElementById("factory-info")?.clientWidth ?? 0) >
app.view.width - 30
? { right: app.view.width - mouseCoords.x + "px" } ? { right: app.view.width - mouseCoords.x + "px" }
: { left: mouseCoords.x + "px" }), : { left: mouseCoords.x + 150 + "px" }),
...(mouseCoords.y + ...(mouseCoords.y +
(document.getElementById("factory-info")?.clientHeight ?? 0) > (document.getElementById("factory-info")?.clientHeight ?? 0) >
app.view.height - 30 app.view.height - 30
@ -891,7 +938,8 @@ const factory = createLayer(id, () => {
? " / " + ? " / " +
formatWhole( formatWhole(
FACTORY_COMPONENTS[ FACTORY_COMPONENTS[
compHovered.value?.type ?? "cursor" compHovered.value?.type ??
"cursor"
].inputs?.[x[0]].amount ?? 0 ].inputs?.[x[0]].amount ?? 0
) )
: ""} : ""}
@ -901,7 +949,8 @@ const factory = createLayer(id, () => {
? " / " + ? " / " +
formatWhole( formatWhole(
FACTORY_COMPONENTS[ FACTORY_COMPONENTS[
compHovered.value?.type ?? "cursor" compHovered.value?.type ??
"cursor"
].inputs?.[x[0]].capacity ?? 0 ].inputs?.[x[0]].capacity ?? 0
) )
: ""} : ""}
@ -913,7 +962,8 @@ const factory = createLayer(id, () => {
<> <>
<br /> <br />
<h5>Outputs:</h5> <h5>Outputs:</h5>
{Object.entries(compHovered.value.outputStock).map(x => ( {Object.entries(compHovered.value.outputStock).map(
x => (
<div> <div>
{x[0]}: {formatWhole(x[1])} {x[0]}: {formatWhole(x[1])}
{FACTORY_COMPONENTS[ {FACTORY_COMPONENTS[
@ -922,61 +972,32 @@ const factory = createLayer(id, () => {
? " / " + ? " / " +
formatWhole( formatWhole(
FACTORY_COMPONENTS[ FACTORY_COMPONENTS[
compHovered.value?.type ?? "cursor" compHovered.value?.type ??
"cursor"
].outputs?.[x[0]].capacity ?? 0 ].outputs?.[x[0]].capacity ?? 0
) )
: ""} : ""}
</div> </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}
</>
)} )}
</>
) : undefined}
</>
) : undefined}
</div> </div>
<div class="comp-list"> ) : undefined}
{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>
<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> </div>
</>
)) ))
}; };
}); });

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

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

6
src/data/projEntry.tsx
View file

@ -222,9 +222,6 @@ export const main = createLayer("main", function (this: BaseLayer) {
}, },
onOpenLayer() { onOpenLayer() {
recentlyUpdated.value = false; 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 // 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) { if (window.matchMedia("(min-width: 1468px)").matches) {
// Desktop, allow multiple tabs to be open // Desktop, allow multiple tabs to be open
@ -240,9 +237,6 @@ export const main = createLayer("main", function (this: BaseLayer) {
player.tabs.splice(1, Infinity, layer ?? "trees"); player.tabs.splice(1, Infinity, layer ?? "trees");
} }
layers[layer ?? "trees"]!.minimized.value = false; layers[layer ?? "trees"]!.minimized.value = false;
} else {
player.tabs.splice(0, Infinity, layer);
}
}, },
onUnlockLayer() { onUnlockLayer() {
if (layer != null) { if (layer != null) {