mirror of
https://github.com/VOREStation/VOREStation.git
synced 2026-07-20 19:44:46 +01:00
Update to fix things after PolarisSS13/Polaris#7326 & update nanomap again
This commit is contained in:
ShadowLarkens
@@ -21,7 +21,7 @@
|
||||
|
||||
/datum/tgui_module/crew_monitor/tgui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = 0, datum/tgui/master_ui = null, datum/tgui_state/state = GLOB.tgui_default_state)
|
||||
var/z = get_z(tgui_host())
|
||||
var/list/map_levels = using_map.get_map_levels(z, TRUE)
|
||||
var/list/map_levels = using_map.get_map_levels(z, TRUE, om_range = DEFAULT_OVERMAP_RANGE)
|
||||
|
||||
if(!map_levels.len)
|
||||
to_chat(user, "<span class='warning'>The crew monitor doesn't seem like it'll work here.</span>")
|
||||
@@ -31,8 +31,7 @@
|
||||
|
||||
ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
|
||||
if(!ui)
|
||||
// The 557 may seem random, but its the perfectsize for margins on the nanomap
|
||||
ui = new(user, src, ui_key, "CrewMonitor", name, 1400, 557, master_ui, state)
|
||||
ui = new(user, src, ui_key, "CrewMonitor", name, 800, 600, master_ui, state)
|
||||
ui.autoupdate = TRUE
|
||||
ui.open()
|
||||
|
||||
@@ -43,7 +42,7 @@
|
||||
data["isAI"] = isAI(user)
|
||||
|
||||
var/z = get_z(tgui_host())
|
||||
var/list/map_levels = uniquelist(using_map.get_map_levels(z, TRUE))
|
||||
var/list/map_levels = uniquelist(using_map.get_map_levels(z, TRUE, om_range = DEFAULT_OVERMAP_RANGE))
|
||||
data["map_levels"] = map_levels
|
||||
|
||||
data["crewmembers"] = list()
|
||||
|
||||
@@ -6,9 +6,13 @@ export class NanoMap extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
// Auto center based on window size
|
||||
const Xcenter = (window.innerWidth / 2) - 256;
|
||||
|
||||
this.state = {
|
||||
offsetX: 0,
|
||||
offsetX: Xcenter,
|
||||
offsetY: 0,
|
||||
transform: 'none',
|
||||
dragging: false,
|
||||
originX: null,
|
||||
originY: null,
|
||||
@@ -33,7 +37,7 @@ export class NanoMap extends Component {
|
||||
|
||||
this.handleDragMove = e => {
|
||||
this.setState(prevState => {
|
||||
const state = { ... prevState };
|
||||
const state = { ...prevState };
|
||||
const newOffsetX = e.screenX - state.originX;
|
||||
const newOffsetY = e.screenY - state.originY;
|
||||
if (prevState.dragging) {
|
||||
@@ -63,21 +67,12 @@ export class NanoMap extends Component {
|
||||
|
||||
render() {
|
||||
const { config } = useBackend(this.context);
|
||||
let { offsetX, offsetY } = this.state;
|
||||
const { offsetX, offsetY } = this.state;
|
||||
const { children, zoom, reset } = this.props;
|
||||
|
||||
if (reset) {
|
||||
this.setState({
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
});
|
||||
offsetX = 0;
|
||||
offsetY = 0;
|
||||
}
|
||||
|
||||
const newStyle = {
|
||||
width: 508 * zoom + 'px',
|
||||
height: 508 * zoom + 'px',
|
||||
width: '512px',
|
||||
height: '512px',
|
||||
"margin-top": offsetY + 'px',
|
||||
"margin-left": offsetX + 'px',
|
||||
"overflow": "hidden",
|
||||
@@ -86,21 +81,27 @@ export class NanoMap extends Component {
|
||||
"background-image":
|
||||
"url("+config.map+"_nanomap_z"+config.mapZLevel+".png)",
|
||||
"background-size": "cover",
|
||||
"text-align": "center",
|
||||
"transform-origin": "center center",
|
||||
"transform": "scale(" + zoom + ")",
|
||||
};
|
||||
|
||||
return (
|
||||
<Box className="NanoMap__container">
|
||||
<Box
|
||||
style={newStyle}
|
||||
textAlign="center"
|
||||
onMouseDown={this.handleDragStart}>
|
||||
{ children }
|
||||
<Box>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const NanoMapMarker = props => {
|
||||
const NanoMapMarker = (props, context) => {
|
||||
const {
|
||||
x,
|
||||
y,
|
||||
@@ -109,19 +110,24 @@ const NanoMapMarker = props => {
|
||||
tooltip,
|
||||
color,
|
||||
} = props;
|
||||
const rx = -256 * (zoom - 1) + x * (2 * zoom) - 1.5 * zoom - 3;
|
||||
const ry = 512 * zoom - (y * 2 * zoom) + zoom - 1.5;
|
||||
return (
|
||||
<Box
|
||||
position="absolute"
|
||||
className="NanoMap__marker"
|
||||
top={((255 - y) * 2 * zoom) - 8 + 'px'}
|
||||
left={(((x - 1) * 2 * zoom)) - 6 + 'px'} >
|
||||
<Icon
|
||||
name={icon}
|
||||
color={color}
|
||||
size={0.5}
|
||||
/>
|
||||
<Tooltip content={tooltip} />
|
||||
</Box>
|
||||
<div style={"transform: scale(" + 1 / zoom + ")"}>
|
||||
<Box
|
||||
position="absolute"
|
||||
className="NanoMap__marker"
|
||||
lineHeight="0"
|
||||
top={ry + 'px'}
|
||||
left={rx + 'px'} >
|
||||
<Icon
|
||||
name={icon}
|
||||
color={color}
|
||||
fontSize="6px"
|
||||
/>
|
||||
<Tooltip content={tooltip} />
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,228 +1,133 @@
|
||||
import { sortBy } from 'common/collections';
|
||||
import { useBackend, useLocalState } from "../backend";
|
||||
import { Window } from "../layouts";
|
||||
import { NanoMap, NumberInput, Box, Table, Button, Flex, Tabs, Icon } from "../components";
|
||||
import { NanoMap, Box, Table, Button, Tabs, Icon, NumberInput } from "../components";
|
||||
import { TableCell } from '../components/Table';
|
||||
import { COLORS } from '../constants.js';
|
||||
|
||||
export const CrewMonitor = (props, context) => {
|
||||
const { act, data, config } = useBackend(context);
|
||||
const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
|
||||
const crew = sortBy(
|
||||
crewmember => crewmember.name,
|
||||
cm => cm.name,
|
||||
)(data.crewmembers || []);
|
||||
|
||||
const [zoom, setZoom] = useLocalState(context, 'zoom', 1);
|
||||
const [reset, setReset] = useLocalState(context, 'reset', 0);
|
||||
const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
|
||||
|
||||
const [
|
||||
mapZoom,
|
||||
setZoom,
|
||||
] = useLocalState(context, 'number', 1);
|
||||
let body;
|
||||
|
||||
// Data view
|
||||
if (tabIndex === 0) {
|
||||
body = (
|
||||
<Box bold m={2}>
|
||||
<Table>
|
||||
<Table.Row header>
|
||||
<Table.Cell>
|
||||
Name
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Status
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Location
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{crew
|
||||
.map(crewmember => (
|
||||
<Table.Row key={crewmember.name}>
|
||||
<TableCell>
|
||||
{crewmember.name} ({crewmember.assignment})
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Table>
|
||||
<Table.Row header>
|
||||
<Table.Cell>
|
||||
Name
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Status
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Location
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{crew.map(cm => (
|
||||
<Table.Row key={cm.name}>
|
||||
<TableCell>
|
||||
{cm.name} ({cm.assignment})
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Box inline
|
||||
color={cm.dead ? 'red' : 'green'}>
|
||||
{cm.dead ? 'Deceased' : 'Living'}
|
||||
</Box>
|
||||
{cm.sensor_type >= 2 ? (
|
||||
<Box inline>
|
||||
{'('}
|
||||
<Box inline
|
||||
color={crewmember.dead ? 'red' : 'green'}>
|
||||
{crewmember.dead ? 'Deceased' : 'Living'}
|
||||
color="red">
|
||||
{cm.brute}
|
||||
</Box>
|
||||
{crewmember.sensor_type >= 2 ? (
|
||||
<Box inline>
|
||||
{'('}
|
||||
<Box inline
|
||||
color="red">
|
||||
{crewmember.brute}
|
||||
</Box>
|
||||
{'|'}
|
||||
<Box inline
|
||||
color="orange">
|
||||
{crewmember.fire}
|
||||
</Box>
|
||||
{'|'}
|
||||
<Box inline
|
||||
color="green">
|
||||
{crewmember.tox}
|
||||
</Box>
|
||||
{'|'}
|
||||
<Box inline
|
||||
color="blue">
|
||||
{crewmember.oxy}
|
||||
</Box>
|
||||
{')'}
|
||||
</Box>
|
||||
) : null}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{crewmember.sensor_type === 3 ? (
|
||||
data.isAI ? (
|
||||
<Button fluid
|
||||
content={crewmember.area+" ("
|
||||
+crewmember.x+", "+crewmember.y+")"}
|
||||
onClick={() => act('track', {
|
||||
track: crewmember.ref,
|
||||
})} />
|
||||
) : (
|
||||
crewmember.area + " ("
|
||||
+ crewmember.x + ", "
|
||||
+ crewmember.y + ", "
|
||||
+ crewmember.z
|
||||
+ ")"
|
||||
)
|
||||
) : "Not Available"}
|
||||
</TableCell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table>
|
||||
</Box>
|
||||
{'|'}
|
||||
<Box inline
|
||||
color="orange">
|
||||
{cm.fire}
|
||||
</Box>
|
||||
{'|'}
|
||||
<Box inline
|
||||
color="green">
|
||||
{cm.tox}
|
||||
</Box>
|
||||
{'|'}
|
||||
<Box inline
|
||||
color="blue">
|
||||
{cm.oxy}
|
||||
</Box>
|
||||
{')'}
|
||||
</Box>
|
||||
) : null}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{cm.sensor_type === 3 ? (
|
||||
data.isAI ? (
|
||||
<Button fluid
|
||||
icon="location-arrow"
|
||||
content={
|
||||
cm.area+" ("+cm.x+", "+cm.y+")"
|
||||
}
|
||||
onClick={() => act('track', {
|
||||
track: cm.ref,
|
||||
})} />
|
||||
) : (
|
||||
cm.area+" ("+cm.x+", "+cm.y+", "+cm.z+")"
|
||||
)
|
||||
) : "Not Available"}
|
||||
</TableCell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table>
|
||||
);
|
||||
} else if (tabIndex === 1) {
|
||||
body = (
|
||||
<Flex justify="flex-start">
|
||||
<Flex.Item basis="38%">
|
||||
<Flex justify="space-around">
|
||||
<Flex.Item>
|
||||
Level:
|
||||
{data.map_levels.map(level => (
|
||||
<Button
|
||||
key={level}
|
||||
selected={~~level === ~~config.mapZLevel}
|
||||
content={level}
|
||||
onClick={() => {
|
||||
act("tgui:setZLevel", { "mapZLevel": level });
|
||||
setReset(1);
|
||||
setTimeout(() => setReset(0), 1);
|
||||
}} />
|
||||
))}
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
Zoom:
|
||||
<NumberInput
|
||||
animated
|
||||
width="40px"
|
||||
step={0.5}
|
||||
stepPixelSize={5}
|
||||
value={zoom}
|
||||
minValue={1}
|
||||
maxValue={8}
|
||||
onChange={(e, value) => {
|
||||
setZoom(value);
|
||||
setReset(1);
|
||||
setTimeout(() => setReset(0), 1);
|
||||
}} />
|
||||
</Flex.Item>
|
||||
</Flex>
|
||||
<NanoMap zoom={zoom} reset={reset}>
|
||||
{crew
|
||||
.filter(x =>
|
||||
(x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel)
|
||||
)
|
||||
.map(crewmember => (
|
||||
<NanoMap.Marker
|
||||
key={crewmember.ref}
|
||||
x={crewmember.x}
|
||||
y={crewmember.y}
|
||||
zoom={zoom}
|
||||
icon="circle"
|
||||
tooltip={crewmember.name}
|
||||
color={crewmember.dead ? 'red' : 'green'}
|
||||
/>
|
||||
))}
|
||||
</NanoMap>
|
||||
</Flex.Item>
|
||||
<Flex.Item basis="62%">
|
||||
<Box class="NanoMap__contentOffset">
|
||||
<Box bold m={2}>
|
||||
<Table>
|
||||
<Table.Row header>
|
||||
<Table.Cell>
|
||||
Name
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Status
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
Location
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{crew
|
||||
.filter(x => (~~x.realZ === ~~config.mapZLevel))
|
||||
.map(crewmember => (
|
||||
<Table.Row key={crewmember.name}>
|
||||
<TableCell>
|
||||
{crewmember.name} ({crewmember.assignment})
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Box inline
|
||||
color={crewmember.dead ? 'red' : 'green'}>
|
||||
{crewmember.dead ? 'Deceased' : 'Living'}
|
||||
</Box>
|
||||
{crewmember.sensor_type >= 2 ? (
|
||||
<Box inline>
|
||||
{'('}
|
||||
<Box inline
|
||||
color="red">
|
||||
{crewmember.brute}
|
||||
</Box>
|
||||
{'|'}
|
||||
<Box inline
|
||||
color="orange">
|
||||
{crewmember.fire}
|
||||
</Box>
|
||||
{'|'}
|
||||
<Box inline
|
||||
color="green">
|
||||
{crewmember.tox}
|
||||
</Box>
|
||||
{'|'}
|
||||
<Box inline
|
||||
color="blue">
|
||||
{crewmember.oxy}
|
||||
</Box>
|
||||
{')'}
|
||||
</Box>
|
||||
) : null}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{crewmember.sensor_type === 3 ? (
|
||||
data.isAI ? (
|
||||
<Button fluid
|
||||
content={crewmember.area+" ("
|
||||
+crewmember.x+", "+crewmember.y+")"}
|
||||
onClick={() => act('track', {
|
||||
track: crewmember.ref,
|
||||
})} />
|
||||
) : (
|
||||
crewmember.area + " ("
|
||||
+ crewmember.x + ", "
|
||||
+ crewmember.y + ", "
|
||||
+ crewmember.z
|
||||
+ ")"
|
||||
)
|
||||
) : "Not Available"}
|
||||
</TableCell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table>
|
||||
</Box>
|
||||
</Box>
|
||||
</Flex.Item>
|
||||
</Flex>
|
||||
<Box textAlign="center">
|
||||
Zoom Level:
|
||||
<NumberInput
|
||||
animated
|
||||
width="40px"
|
||||
step={0.5}
|
||||
stepPixelSize="5"
|
||||
value={mapZoom}
|
||||
minValue={1}
|
||||
maxValue={8}
|
||||
onChange={(e, value) => setZoom(value)} />
|
||||
Z-Level:
|
||||
{data.map_levels.map(level => (
|
||||
<Button
|
||||
key={level}
|
||||
selected={~~level === ~~config.mapZLevel}
|
||||
content={level}
|
||||
onClick={() => {
|
||||
act("tgui:setZLevel", { "mapZLevel": level });
|
||||
}} />
|
||||
))}
|
||||
<NanoMap zoom={mapZoom}>
|
||||
{crew
|
||||
.filter(x =>
|
||||
(x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel)
|
||||
).map(cm => (
|
||||
<NanoMap.Marker
|
||||
key={cm.ref}
|
||||
x={cm.x}
|
||||
y={cm.y}
|
||||
zoom={mapZoom}
|
||||
icon="circle"
|
||||
tooltip={cm.name}
|
||||
color={cm.dead ? 'red' : 'green'}
|
||||
/>
|
||||
))}
|
||||
</NanoMap>
|
||||
</Box>
|
||||
);
|
||||
} else {
|
||||
body = "ERROR";
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,17 +1,7 @@
|
||||
$color-background: rgba(0, 0, 0, 0.33) !default;
|
||||
|
||||
.NanoMap__contentOffset {
|
||||
background-color: $color-background;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.NanoMap__container {
|
||||
overflow: hidden;
|
||||
min-width: 500px;
|
||||
min-height: 500px;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user