diff --git a/code/modules/tgui/modules/crew_monitor.dm b/code/modules/tgui/modules/crew_monitor.dm index e781732edb3..4941d267b8c 100644 --- a/code/modules/tgui/modules/crew_monitor.dm +++ b/code/modules/tgui/modules/crew_monitor.dm @@ -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, "The crew monitor doesn't seem like it'll work here.") @@ -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() diff --git a/tgui/packages/tgui/components/NanoMap.js b/tgui/packages/tgui/components/NanoMap.js index a1d8500073c..02440f75446 100644 --- a/tgui/packages/tgui/components/NanoMap.js +++ b/tgui/packages/tgui/components/NanoMap.js @@ -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 ( - { children } + + {children} + ); } } -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 ( - - - - +
+ + + + +
); }; diff --git a/tgui/packages/tgui/interfaces/CrewMonitor.js b/tgui/packages/tgui/interfaces/CrewMonitor.js index 53a2e8bbd2b..ecadd51836e 100644 --- a/tgui/packages/tgui/interfaces/CrewMonitor.js +++ b/tgui/packages/tgui/interfaces/CrewMonitor.js @@ -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 = ( - - - - - Name - - - Status - - - Location - - - {crew - .map(crewmember => ( - - - {crewmember.name} ({crewmember.assignment}) - - +
+ + + Name + + + Status + + + Location + + + {crew.map(cm => ( + + + {cm.name} ({cm.assignment}) + + + + {cm.dead ? 'Deceased' : 'Living'} + + {cm.sensor_type >= 2 ? ( + + {'('} - {crewmember.dead ? 'Deceased' : 'Living'} + color="red"> + {cm.brute} - {crewmember.sensor_type >= 2 ? ( - - {'('} - - {crewmember.brute} - - {'|'} - - {crewmember.fire} - - {'|'} - - {crewmember.tox} - - {'|'} - - {crewmember.oxy} - - {')'} - - ) : null} - - - {crewmember.sensor_type === 3 ? ( - data.isAI ? ( -
- + {'|'} + + {cm.fire} + + {'|'} + + {cm.tox} + + {'|'} + + {cm.oxy} + + {')'} + + ) : null} + + + {cm.sensor_type === 3 ? ( + data.isAI ? ( +