diff --git a/code/modules/tgui/modules/crew_monitor.dm b/code/modules/tgui/modules/crew_monitor.dm
index 6535ae4bae3..c4d901d5f65 100644
--- a/code/modules/tgui/modules/crew_monitor.dm
+++ b/code/modules/tgui/modules/crew_monitor.dm
@@ -1,5 +1,6 @@
/datum/tgui_module/crew_monitor
name = "Crew monitor"
+ var/mapZoom = 1
/datum/tgui_module/crew_monitor/tgui_act(action, params)
if(..())
@@ -18,6 +19,10 @@
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)
@@ -51,4 +56,8 @@
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
diff --git a/nano/images/southern_cross_nanomap_z1.png b/nano/images/southern_cross_nanomap_z1.png
index 8ef30761650..b3674302003 100644
Binary files a/nano/images/southern_cross_nanomap_z1.png and b/nano/images/southern_cross_nanomap_z1.png differ
diff --git a/nano/images/southern_cross_nanomap_z10.png b/nano/images/southern_cross_nanomap_z10.png
index 1e4d563236a..b9645bb74b0 100644
Binary files a/nano/images/southern_cross_nanomap_z10.png and b/nano/images/southern_cross_nanomap_z10.png differ
diff --git a/nano/images/southern_cross_nanomap_z2.png b/nano/images/southern_cross_nanomap_z2.png
index 842168b2c75..1f4830a884e 100644
Binary files a/nano/images/southern_cross_nanomap_z2.png and b/nano/images/southern_cross_nanomap_z2.png differ
diff --git a/nano/images/southern_cross_nanomap_z3.png b/nano/images/southern_cross_nanomap_z3.png
index d25068f8756..6c9d9b5a615 100644
Binary files a/nano/images/southern_cross_nanomap_z3.png and b/nano/images/southern_cross_nanomap_z3.png differ
diff --git a/nano/images/southern_cross_nanomap_z5.png b/nano/images/southern_cross_nanomap_z5.png
index 33306227302..b89543e9de0 100644
Binary files a/nano/images/southern_cross_nanomap_z5.png and b/nano/images/southern_cross_nanomap_z5.png differ
diff --git a/nano/images/southern_cross_nanomap_z6.png b/nano/images/southern_cross_nanomap_z6.png
index 5ae03eb8f89..b8fb0ebfc10 100644
Binary files a/nano/images/southern_cross_nanomap_z6.png and b/nano/images/southern_cross_nanomap_z6.png differ
diff --git a/tgui/packages/tgui/components/NanoMap.js b/tgui/packages/tgui/components/NanoMap.js
index e58368048e7..5c16aee9218 100644
--- a/tgui/packages/tgui/components/NanoMap.js
+++ b/tgui/packages/tgui/components/NanoMap.js
@@ -1,29 +1,102 @@
import { Box, Icon, Tooltip } from '.';
+import { Component } from 'inferno';
import { useBackend } from "../backend";
-export const NanoMap = (props, context) => {
- const { config } = useBackend(context);
- const { onClick } = props;
- return (
-
-
-
- );
-};
+export class NanoMap extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ offsetX: 0,
+ offsetY: 0,
+ transform: 'none',
+ dragging: false,
+ originX: null,
+ originY: null,
+ };
+
+ this.handleDragStart = e => {
+ document.body.style['pointer-events'] = 'none';
+ this.ref = e.target;
+ this.setState({
+ dragging: false,
+ originX: e.screenX,
+ originY: e.screenY,
+ });
+ this.timer = setTimeout(() => {
+ this.setState({
+ dragging: true,
+ });
+ }, 250);
+ document.addEventListener('mousemove', this.handleDragMove);
+ document.addEventListener('mouseup', this.handleDragEnd);
+ };
+
+ this.handleDragMove = e => {
+ this.setState(prevState => {
+ const state = { ... prevState };
+ const newOffsetX = e.screenX - state.originX;
+ const newOffsetY = e.screenY - state.originY;
+ if (prevState.dragging) {
+ state.offsetX += newOffsetX;
+ state.offsetY += newOffsetY;
+ state.originX = e.screenX;
+ state.originY = e.screenY;
+ } else {
+ state.dragging = true;
+ }
+ return state;
+ });
+ };
+
+ this.handleDragEnd = e => {
+ document.body.style['pointer-events'] = 'auto';
+ clearTimeout(this.timer);
+ this.setState({
+ dragging: false,
+ originX: null,
+ originY: null,
+ });
+ document.removeEventListener('mousemove', this.handleDragMove);
+ document.removeEventListener('mouseup', this.handleDragEnd);
+ };
+ }
+
+ render() {
+ const { config } = useBackend(this.context);
+ const { offsetX, offsetY } = this.state;
+ const { children, zoom } = this.props;
+
+ const newStyle = {
+ width: 508 * zoom + 'px',
+ height: 508 * zoom + 'px',
+ "margin-top": offsetY + 'px',
+ "margin-left": offsetX + 'px',
+ "overflow": "hidden",
+ "position": "relative",
+ "padding": "0px",
+ "background-image":
+ "url("+config.map+"_nanomap_z"+config.mapZLevel+".png)",
+ "background-size": "cover",
+ };
+
+ return (
+
+
+ { children }
+
+
+ );
+ }
+}
const NanoMapMarker = props => {
const {
x,
y,
+ zoom,
icon,
tooltip,
color,
@@ -32,8 +105,8 @@ const NanoMapMarker = props => {
+ top={((255 - y) * 2 * zoom) - 8 + 'px'}
+ left={((x * 2 * zoom)) - 8 + 'px'} >
{
"mapZLevel": level,
})} />
))}
- {crew
- .filter(x =>
- (x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel)
- )
- .map(crewmember => (
-
- ))}
-
+ {data.zoomLevels.map(zoomLevel => (
+