mirror of
https://github.com/PolarisSS13/Polaris.git
synced 2026-08-26 14:46:52 +01:00
Final adjustments to the crew monitor, calling this good and happy.
This commit is contained in:
ShadowLarkens
@@ -1,6 +1,5 @@
|
||||
/datum/tgui_module/crew_monitor
|
||||
name = "Crew monitor"
|
||||
var/mapZoom = 1
|
||||
|
||||
/datum/tgui_module/crew_monitor/tgui_act(action, params)
|
||||
if(..())
|
||||
@@ -19,11 +18,6 @@
|
||||
if(hassensorlevel(H, SUIT_SENSOR_TRACKING))
|
||||
AI.ai_actual_track(H)
|
||||
return TRUE
|
||||
if("changeZoom")
|
||||
var/newZoom = params["newZoom"]
|
||||
mapZoom = newZoom
|
||||
return TRUE
|
||||
|
||||
|
||||
/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())
|
||||
@@ -56,8 +50,4 @@
|
||||
for(var/zlevel in map_levels)
|
||||
data["crewmembers"] += crew_repository.health_data(zlevel)
|
||||
|
||||
data["zoomLevels"] = list(1, 1.25, 1.5, 1.75, 2)
|
||||
|
||||
data["mapZoom"] = mapZoom
|
||||
|
||||
return data
|
||||
|
||||
@@ -9,7 +9,6 @@ export class NanoMap extends Component {
|
||||
this.state = {
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
transform: 'none',
|
||||
dragging: false,
|
||||
originX: null,
|
||||
originY: null,
|
||||
@@ -64,8 +63,17 @@ export class NanoMap extends Component {
|
||||
|
||||
render() {
|
||||
const { config } = useBackend(this.context);
|
||||
const { offsetX, offsetY } = this.state;
|
||||
const { children, zoom } = this.props;
|
||||
let { 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',
|
||||
@@ -106,7 +114,7 @@ const NanoMapMarker = props => {
|
||||
position="absolute"
|
||||
className="NanoMap__marker"
|
||||
top={((255 - y) * 2 * zoom) - 8 + 'px'}
|
||||
left={((x * 2 * zoom)) - 8 + 'px'} >
|
||||
left={(((x - 1) * 2 * zoom)) - 6 + 'px'} >
|
||||
<Icon
|
||||
name={icon}
|
||||
color={color}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { sortBy } from 'common/collections';
|
||||
import { useBackend } from "../backend";
|
||||
import { useBackend, useLocalState } from "../backend";
|
||||
import { Window } from "../layouts";
|
||||
import { NanoMap, Box, Table, Button } from "../components";
|
||||
import { NanoMap, NumberInput, Box, Table, Button, Flex, Tabs, Icon } from "../components";
|
||||
import { TableCell } from '../components/Table';
|
||||
|
||||
export const CrewMonitor = (props, context) => {
|
||||
@@ -9,116 +9,244 @@ export const CrewMonitor = (props, context) => {
|
||||
const crew = sortBy(
|
||||
crewmember => crewmember.name,
|
||||
)(data.crewmembers || []);
|
||||
|
||||
const [zoom, setZoom] = useLocalState(context, 'zoom', 1);
|
||||
const [reset, setReset] = useLocalState(context, 'reset', 0);
|
||||
const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
|
||||
|
||||
let body;
|
||||
|
||||
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>
|
||||
<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>
|
||||
);
|
||||
} 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>
|
||||
);
|
||||
} else {
|
||||
body = "ERROR";
|
||||
}
|
||||
|
||||
return (
|
||||
<Window resizable>
|
||||
<Window.Content>
|
||||
{data.map_levels.map(level => (
|
||||
<Button
|
||||
key={level}
|
||||
selected={~~level === ~~config.mapZLevel}
|
||||
content={level}
|
||||
onClick={() => act("tgui:setZLevel", {
|
||||
"mapZLevel": level,
|
||||
})} />
|
||||
))}
|
||||
{data.zoomLevels.map(zoomLevel => (
|
||||
<Button
|
||||
key={zoomLevel}
|
||||
selected={Number(data.mapZoom) === Number(zoomLevel)}
|
||||
content={zoomLevel}
|
||||
onClick={() => act("changeZoom", { "newZoom": zoomLevel })} />
|
||||
))}
|
||||
<NanoMap zoom={data.mapZoom}>
|
||||
{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={data.mapZoom}
|
||||
icon="circle"
|
||||
tooltip={crewmember.name}
|
||||
color={crewmember.dead ? 'red' : 'green'}
|
||||
/>
|
||||
))}
|
||||
</NanoMap>
|
||||
<Box className="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>
|
||||
<Tabs>
|
||||
<Tabs.Tab
|
||||
key="DataView"
|
||||
selected={0 === tabIndex}
|
||||
onClick={() => setTabIndex(0)}>
|
||||
<Icon name="table" /> Data View
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab
|
||||
key="MapView"
|
||||
selected={1 === tabIndex}
|
||||
onClick={() => setTabIndex(1)}>
|
||||
<Icon name="map-marked-alt" /> Map View
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
<Box m={2}>
|
||||
{body}
|
||||
</Box>
|
||||
</Window.Content>
|
||||
</Window>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,21 +1,16 @@
|
||||
$color-background: rgba(0, 0, 0, 0.33) !default;
|
||||
|
||||
.NanoMap__contentOffset {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 524px;
|
||||
right: 0;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background-color: $color-background;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.NanoMap__container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
max-width: 509px;
|
||||
min-width: 500px;
|
||||
min-height: 500px;
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user