Skip to content

Commit

Permalink
more plan ui updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@charredUtensil
charredUtensil committed Jul 17, 2024
1 parent 8591a93 commit b6c61e1
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 77 deletions.
18 changes: 9 additions & 9 deletions src/webui/components/map_preview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { createRef } from "react";
import { Cavern } from "../../../core/models/cavern";
import BaseplatePreview from "./baseplate";
import PathPreview from "./path";
import PlanPreview from "./plan";
import PearlPreview from "./pearl";
import { PearledPlan } from "../../../core/transformers/01_planning/04_pearl";
import TilesPreview from "./tiles";
Expand All @@ -11,6 +10,7 @@ import OpenCaveFlagPreview from "./open_cave_flag";
import styles from "./style.module.scss";
import HeightPreview from "./height";
import Stats from "./stats";
import PlansPreview from "./plan";

export type MapOverlay =
| "about"
Expand Down Expand Up @@ -49,20 +49,21 @@ export default function CavernPreview({
showPearls: boolean;
}) {
const holder = createRef<HTMLDivElement>();
const size = cavern.context.targetSize * 2 * 6;
const height = cavern.context.targetSize * 2 * 6;
const width = Math.max(height, cavern.context.targetSize * 6 + 600);

return (
<div ref={holder} className={styles.cavernPreview}>
<svg
className={styles.map}
style={{
top: `calc(50% - ${size / 2}px)`,
left: `calc(50% - ${size / 2}px)`,
width: size,
height: size,
top: `calc(50% - ${height / 2}px)`,
left: `calc(50% - ${width / 2}px)`,
width: width,
height: height,
transform: getTransform(cavern, mapOverlay),
}}
viewBox={`${size / -2} ${size / -2} ${size} ${size}`}
viewBox={`${width / -2} ${height / -2} ${width} ${height}`}
xmlns="http://www.w3.org/2000/svg"
>
{<TilesPreview cavern={cavern} mapOverlay={mapOverlay} />}
Expand Down Expand Up @@ -115,8 +116,7 @@ export default function CavernPreview({
cavern.openCaveFlags?.map((_, x, y) => (
<OpenCaveFlagPreview key={`${x},${y}`} x={x} y={y} />
))}
{showOutlines &&
cavern.plans?.map((pl) => <PlanPreview key={pl.id} plan={pl} />)}
{showOutlines && cavern.plans && <PlansPreview cavern={cavern} />}
{showPearls &&
cavern.plans
?.filter((pl) => "outerPearl" in pl)
Expand Down
143 changes: 91 additions & 52 deletions src/webui/components/map_preview/plan.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import React from "react";
import React, { ReactNode } from "react";
import { Plan } from "../../../core/models/plan";
import PathPreview from "./path";
import styles from "./style.module.scss";
import { Cavern } from "../../../core/models/cavern";
import { Point } from "../../../core/common/geometry";
import { filterTruthy } from "../../../core/common/utils";

const SCALE = 6;

function getGClassName(plan: Partial<Plan>) {
const r = [styles.plan];
plan.kind && r.push(styles[`${plan.kind}Kind`]);
plan.path?.kind && r.push(styles[`${plan.path.kind}PathKind`])
plan.fluid && r.push(styles[`fluid${plan.fluid.id}`]);
plan.hasErosion && r.push("hasErosion");
return r.join(" ");
Expand All @@ -20,17 +24,12 @@ function drawRadius(pearlRadius: number) {
function caveWithOneBaseplate(plan: Partial<Plan>) {
const [x, y] = plan.path!.baseplates[0].center;
return (
<>
<circle
className={styles.bg}
cx={x * SCALE}
cy={y * SCALE}
r={drawRadius(plan.pearlRadius!) * SCALE}
/>
<text className={styles.fg} x={x * SCALE} y={y * SCALE}>
{plan.architect?.name} {plan.id}
</text>
</>
<circle
className={styles.bg}
cx={x * SCALE}
cy={y * SCALE}
r={drawRadius(plan.pearlRadius!) * SCALE}
/>
);
}

Expand Down Expand Up @@ -98,12 +97,7 @@ function caveWithTwoBaseplates(plan: Partial<Plan>) {

const [x0, y0] = plan.path!.baseplates[0].center;
return (
<>
<path className={styles.bg} d={dWrapping(a, b)} />
<text className={styles.fg} x={x0 * SCALE} y={y0 * SCALE}>
{plan.architect?.name} {plan.id}
</text>
</>
<path className={styles.bg} d={dWrapping(a, b)} />
);
}

Expand All @@ -116,44 +110,89 @@ function hall(plan: Partial<Plan>) {
})
.join(" ");
return (
<>
<path
id={`plan${plan.id}`}
className={styles.bg}
d={d}
fill="none"
strokeWidth={drawRadius(plan.pearlRadius!) * 2 * SCALE}
>
<title>
{plan.architect?.name} {plan.id}
</title>
</path>
<text className={styles.fg}>
<textPath href={`#plan${plan.id}`} startOffset="50%">
{plan.architect?.name} {plan.id}
</textPath>
</text>
</>
<path
id={`plan${plan.id}`}
className={styles.bg}
d={d}
fill="none"
strokeWidth={drawRadius(plan.pearlRadius!) * 2 * SCALE}
/>
);
}

export default function PlanPreview({ plan }: { plan: Partial<Plan> }) {
if (!plan) {
export default function PlansPreview({ cavern }: { cavern: Cavern }) {
if (!cavern.plans) {
return null;
}
if (plan.pearlRadius) {
return (
<g className={getGClassName(plan)}>
{plan.kind === "cave"
? plan.path!.baseplates.length === 2
? caveWithTwoBaseplates(plan)
: caveWithOneBaseplate(plan)
: hall(plan)}
</g>
);
}
if (plan.path?.baseplates.length ?? 0 > 1) {
return <PathPreview path={plan.path!} />;

const planCoords: Point[] = [];
cavern.plans.forEach(plan => {
const bp = plan.path.baseplates;

const i = Math.floor((bp.length - 1) / 2);
const j = Math.floor((bp.length) / 2);
if (i === j) {
planCoords[plan.id] = bp[i].center;
} else {
const [ix, iy] = bp[i].center;
const [jx, jy] = bp[j].center;
planCoords[plan.id] = [(ix + jx) / 2, (iy + jy) / 2];
}
})

const right = [...cavern.plans];
right.sort((a, b) => planCoords[b.id][0] - planCoords[a.id][0]);
const left = right.splice(Math.floor(right.length / 2));
right.sort((a, b) => planCoords[a.id][1] - planCoords[b.id][1]);
left.sort((a, b) => (planCoords[a.id][1] - planCoords[b.id][1]) || (planCoords[a.id][0] - planCoords[b.id][0]));

function drawLabels(plans: NonNullable<Cavern['plans']>, sign: -1 | 1, className: string): ReactNode {
let py = -Infinity;
return plans.map((plan, i) => {
const px = SCALE * planCoords[plan.id][0];
py = Math.max(SCALE * planCoords[plan.id][1], py + 4);
const lx = (SCALE * cavern.context.targetSize / 2 + 50) * sign;
const ly = SCALE * cavern.context.targetSize * ((i + 1) / plans.length - 0.5);
const bx = lx - Math.abs(py - ly) * 0.56 * sign
const d = filterTruthy([
`M ${lx + 25 * sign} ${ly}`,
`L ${lx} ${ly}`,
(bx * sign > px * sign) && `L ${bx} ${py}`,
`L ${px} ${py}`,
]).join('');
return (<g key={plan.id} className={`${className} ${getGClassName(plan)}`}>
<path className={styles.pointer} d={d} />
<text className={styles.label} x={lx + 25 * sign} y={ly}>
{'architect' in plan
? <>{plan.architect.name}{!plan.hops.length && '*'} {plan.id}</>
: <>{plan.id}</>
}
</text>
</g>);
});
}
return null;

return (
<>
{cavern.plans.map(plan => {
if ('pearlRadius' in plan) {
return (
<g key={plan.id} className={getGClassName(plan)}>
{plan.kind === "cave"
? plan.path.baseplates.length === 2
? caveWithTwoBaseplates(plan)
: caveWithOneBaseplate(plan)
: hall(plan)}
</g>
);
}
if (plan.path.baseplates.length ?? 0 > 1) {
return <PathPreview key={plan.id} path={plan.path} />;
}
return null;
})}
{drawLabels(left, -1, styles.left)}
{drawLabels(right, 1, styles.right)}
</>
)
}
40 changes: 24 additions & 16 deletions src/webui/components/map_preview/style.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,6 @@
fill: white;
}

&.stockKind .bg {
stroke: blue;
}

&.ambiguousKind .bg {
fill: var(--pvw-bpak);
}
Expand Down Expand Up @@ -110,30 +106,42 @@
.plan {
--color-bg: #444444;
--color-fg: white;

&.caveKind .bg {
stroke: var(--color-bg);
stroke-width: 2px;
fill: none;
}
&.hallKind .bg {
stroke: var(--color-bg);
stroke-linecap: round;
opacity: 0.4;
&.hallKind {
.bg {
stroke-linecap: round;
opacity: 0.4;
}
&.spanningPathKind {
--color-fg: var(--pvw-pathspan);
}
&.auxiliaryPathKind {
--color-fg: var(--pvw-pathaux);
}
}
&.fluid6 {
--color-bg: var(--pvw-tile6);
}
&.fluid11 {
--color-bg: var(--pvw-tile11);
}
.fg {
text-anchor: middle;
&.left .label {
text-anchor: end;
}
.label {
fill: var(--color-fg);
font-family: "Silkscreen";
font-size: 8px;
stroke: black;
stroke-width: 0.2;
font-size: 12px;
}
.pointer {
fill: none;
stroke-width: 1px;
stroke: var(--color-fg);
}
.bg {
stroke: var(--color-bg);
}
}

Expand Down

0 comments on commit b6c61e1

Please sign in to comment.