thepaperpilot/Planar-Pioneers
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Planar-Pioneers.git synced 2025-02-16 09:41:40 +00:00
Code Issues Releases Activity Actions

Add influences display to planes

Browse source
This commit is contained in:
thepaperpilot 2023-04-30 16:05:57 -05:00
parent d3520ed9a2
commit 5dabc5826c
2 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/data/main.css
View file

@ -8,12 +8,16 @@
width: 100%; width: 100%;
} }
.nav-segment { .nav-segment:not(:last-child) {
border-right: solid 1px var(--outline); border-right: solid 1px var(--outline);
padding-right: 10px; padding-right: 10px;
margin-right: 10px; margin-right: 10px;
} }
.nav-segment .tooltip-container {
display: inline;
}
.affected-node { .affected-node {
filter: drop-shadow(0px 0px 20px var(--accent1)); filter: drop-shadow(0px 0px 20px var(--accent1));
} }

23
src/data/planes.tsx
View file

@ -39,6 +39,7 @@ import {
import type { ResourceState, Resources, PortalState } from "./projEntry"; import type { ResourceState, Resources, PortalState } from "./projEntry";
import { getColor, getName, sfc32 } from "./utils"; import { getColor, getName, sfc32 } from "./utils";
import { useToast } from "vue-toastification"; import { useToast } from "vue-toastification";
import TooltipVue from "features/tooltips/Tooltip.vue";
const toast = useToast(); const toast = useToast();
@ -624,13 +625,33 @@ export function createPlane(
showNotif, showNotif,
display: jsx(() => ( display: jsx(() => (
<> <>
<StickyVue class="nav-container"> <StickyVue class="nav-container" style="z-index: 5">
<span class="nav-segment"> <span class="nav-segment">
<h2>{name}</h2> <h2>{name}</h2>
</span> </span>
<span class="nav-segment"> <span class="nav-segment">
<h3>{tier}-tier</h3> <h3>{tier}-tier</h3>
</span> </span>
{influences.length === 0 ? null : (
<span class="nav-segment">
<TooltipVue
display={influences
.map(influence => {
const description =
influenceTypes[influence.type].description;
if (typeof description === "function") {
return description(influence);
}
return description;
})
.join("<br/>")}
direction={Direction.Down}
style={"width: 300px"}
>
<h3>{influences.length} influences</h3>
</TooltipVue>
</span>
)}
<span class="nav-segment"> <span class="nav-segment">
<button <button
class="button" class="button"