Recompile nanomaps, and add nanomap improvements

code/datums/repositories/crew.dm

@@ -38,9 +38,10 @@ var/global/datum/repository/crew/crew_repository = new()
 				crewmemberData["assignment"] = H.get_assignment(if_no_id="Unknown", if_no_job="No Job")
 
 				if(C.sensor_mode >= SUIT_SENSOR_BINARY)
-					crewmemberData["dead"] = H.stat > UNCONSCIOUS
+					crewmemberData["dead"] = H.stat == DEAD
 
 				if(C.sensor_mode >= SUIT_SENSOR_VITAL)
+					crewmemberData["stat"] = H.stat
 					crewmemberData["oxy"] = round(H.getOxyLoss(), 1)
 					crewmemberData["tox"] = round(H.getToxLoss(), 1)
 					crewmemberData["fire"] = round(H.getFireLoss(), 1)

code/modules/asset_cache/asset_list_items.dm

@@ -490,16 +490,14 @@
 	// It REALLY doesnt matter too much if these arent up to date
 	// They are relatively big
 	assets = list(
-		"southern_cross_nanomap_z1.png"		= 'icons/_nanomaps/southern_cross_nanomap_z1.png',
+		// VOREStation Edit: We don't need Southern Cross
-		"southern_cross_nanomap_z10.png"	= 'icons/_nanomaps/southern_cross_nanomap_z10.png',
+		// "southern_cross_nanomap_z1.png"		= 'icons/_nanomaps/southern_cross_nanomap_z1.png',
-		"southern_cross_nanomap_z2.png"		= 'icons/_nanomaps/southern_cross_nanomap_z2.png',
+		// "southern_cross_nanomap_z10.png"	= 'icons/_nanomaps/southern_cross_nanomap_z10.png',
-		"southern_cross_nanomap_z3.png"		= 'icons/_nanomaps/southern_cross_nanomap_z3.png',
+		// "southern_cross_nanomap_z2.png"		= 'icons/_nanomaps/southern_cross_nanomap_z2.png',
-		"southern_cross_nanomap_z5.png"		= 'icons/_nanomaps/southern_cross_nanomap_z5.png',
+		// "southern_cross_nanomap_z3.png"		= 'icons/_nanomaps/southern_cross_nanomap_z3.png',
-		"southern_cross_nanomap_z6.png"		= 'icons/_nanomaps/southern_cross_nanomap_z6.png',
+		// "southern_cross_nanomap_z5.png"		= 'icons/_nanomaps/southern_cross_nanomap_z5.png',
+		// "southern_cross_nanomap_z6.png"		= 'icons/_nanomaps/southern_cross_nanomap_z6.png',
 		"tether_nanomap_z1.png"				= 'icons/_nanomaps/tether_nanomap_z1.png',
-		"tether_nanomap_z10.png"			= 'icons/_nanomaps/tether_nanomap_z10.png',
-		"tether_nanomap_z13.png"			= 'icons/_nanomaps/tether_nanomap_z13.png',
-		"tether_nanomap_z14.png"			= 'icons/_nanomaps/tether_nanomap_z14.png',
 		"tether_nanomap_z2.png"				= 'icons/_nanomaps/tether_nanomap_z2.png',
 		"tether_nanomap_z3.png"				= 'icons/_nanomaps/tether_nanomap_z3.png',
 		"tether_nanomap_z4.png"				= 'icons/_nanomaps/tether_nanomap_z4.png',
@@ -508,4 +506,8 @@
 		"tether_nanomap_z7.png"				= 'icons/_nanomaps/tether_nanomap_z7.png',
 		"tether_nanomap_z8.png"				= 'icons/_nanomaps/tether_nanomap_z8.png',
 		"tether_nanomap_z9.png"				= 'icons/_nanomaps/tether_nanomap_z9.png',
+		"tether_nanomap_z10.png"			= 'icons/_nanomaps/tether_nanomap_z10.png',
+		"tether_nanomap_z13.png"			= 'icons/_nanomaps/tether_nanomap_z13.png',
+		"tether_nanomap_z14.png"			= 'icons/_nanomaps/tether_nanomap_z14.png',
+		// VOREStation Edit End
 	)

tgui/packages/tgui/components/NanoMap.js

@@ -1,38 +1,44 @@
-import { Box, Icon, Tooltip } from '.';
 import { Component } from 'inferno';
+import { Box, Button, Icon, Tooltip, LabeledList, Slider } from '.';
 import { useBackend } from "../backend";
-import { resolveAsset } from '../assets';
+
-import { logger } from '../logging';
+const pauseEvent = e => {
+  if (e.stopPropagation) { e.stopPropagation(); }
+  if (e.preventDefault) { e.preventDefault(); }
+  e.cancelBubble = true;
+  e.returnValue = false;
+  return false;
+};
 
 export class NanoMap extends Component {
   constructor(props) {
     super(props);
 
     // Auto center based on window size
+    const Xcenter = (window.innerWidth / 2) - 256;
+    const Ycenter = (window.innerHeight / 2) - 256;
+
     this.state = {
-      offsetX: 0,
+      offsetX: Xcenter,
-      offsetY: 0,
+      offsetY: Ycenter,
       transform: 'none',
       dragging: false,
       originX: null,
       originY: null,
+      zoom: 1,
     };
 
+    // Dragging
     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);
+      pauseEvent(e);
     };
 
     this.handleDragMove = e => {
@@ -41,8 +47,8 @@ export class NanoMap extends Component {
         const newOffsetX = e.screenX - state.originX;
         const newOffsetY = e.screenY - state.originY;
         if (prevState.dragging) {
-          state.offsetX += (newOffsetX / this.props.zoom);
+          state.offsetX += newOffsetX;
-          state.offsetY += (newOffsetY / this.props.zoom);
+          state.offsetY += newOffsetY;
           state.originX = e.screenX;
           state.originY = e.screenY;
         } else {
@@ -50,11 +56,10 @@ export class NanoMap extends Component {
         }
         return state;
       });
+      pauseEvent(e);
     };
 
     this.handleDragEnd = e => {
-      document.body.style['pointer-events'] = 'auto';
-      clearTimeout(this.timer);
       this.setState({
         dragging: false,
         originX: null,
@@ -62,28 +67,54 @@ export class NanoMap extends Component {
       });
       document.removeEventListener('mousemove', this.handleDragMove);
       document.removeEventListener('mouseup', this.handleDragEnd);
+      pauseEvent(e);
     };
+    
+    this.handleZoom = (_e, value) => {
+      this.setState(state => {
+        const newZoom = Math.min(Math.max(value, 1), 8);
+        let zoomDiff = (newZoom - state.zoom) * 1.5;
+        state.zoom = newZoom;
+
+        let newOffsetX = state.offsetX - 262 * zoomDiff;
+        if (newOffsetX < -500) { newOffsetX = -500; }
+        if (newOffsetX > 500) { newOffsetX = 500; }
+        
+        let newOffsetY = state.offsetY - 256 * zoomDiff;
+        if (newOffsetY < -200) { newOffsetY = -200; }
+        if (newOffsetY > 200) { newOffsetY = 200; }
+
+        state.offsetX = newOffsetX;
+        state.offsetY = newOffsetY;
+        if (props.onZoom) {
+          props.onZoom(state.zoom);
+        }
+        return state;
+      });
+    };
+
   }
 
   render() {
     const { config } = useBackend(this.context);
-    const { offsetX, offsetY } = this.state;
+    const { dragging, offsetX, offsetY, zoom = 1 } = this.state;
-    const { children, zoom, reset } = this.props;
+    const { children } = this.props;
-    
-    let matrix 
-      = `matrix(${zoom}, 0, 0, ${zoom}, ${offsetX * zoom}, ${offsetY * zoom})`;
     
+    const mapUrl = config.map + "_nanomap_z" + config.mapZLevel + ".png";
+    // (x * zoom), x Needs to be double the turf- map size. (for virgo, 140x140)
+    const mapSize = (280 * zoom) + 'px';
     const newStyle = {
-      width: '560px',
+      width: mapSize,
-      height: '560px',
+      height: mapSize,
+      "margin-top": offsetY + "px",
+      "margin-left": offsetX + "px",
       "overflow": "hidden",
       "position": "relative",
-      "padding": "0px",
+      "background-image": "url(" + mapUrl + ")",
-      "background-image":
-        "url("+config.map+"_nanomap_z"+config.mapZLevel+".png)",
       "background-size": "cover",
+      "background-repeat": "no-repeat",
       "text-align": "center",
-      "transform": matrix,
+      "cursor": dragging ? "move" : "auto",
     };
 
     return (
@@ -96,6 +127,7 @@ export class NanoMap extends Component {
             {children}
           </Box>
         </Box>
+        <NanoMapZoomer zoom={zoom} onZoom={this.handleZoom} />
       </Box>
     );
   }
@@ -105,31 +137,73 @@ const NanoMapMarker = (props, context) => {
   const {
     x,
     y,
-    zoom,
+    zoom = 1,
     icon,
     tooltip,
     color,
     onClick,
   } = props;
-  const rx = (x * 4) - 5;
-  const ry = (y * 4) - 4;
 
+  const handleOnClick = e => {
+    pauseEvent(e);
+    onClick(e);
+  };
+
+  const rx = ((x * 2 * zoom) - zoom) - 3;
+  const ry = ((y * 2 * zoom) - zoom) - 3;
   return (
-    <Box
+    <div>
-      position="absolute"
+      <Box
-      className="NanoMap__marker"
+        position="absolute"
-      lineHeight="0"
+        className="NanoMap__marker"
-      bottom={ry + 'px'}
+        lineHeight="0"
-      left={rx + 'px'}
+        bottom={ry + "px"}
-      onMouseDown={onClick} >
+        left={rx + "px"}
-      <Icon
+        onMouseDown={handleOnClick}>
-        name={icon}
+        <Icon
-        color={color}
+          name={icon}
-        fontSize="4px"
+          color={color}
-      />
+          fontSize="6px"
-      <Tooltip content={tooltip} scale={zoom} />
+        />
-    </Box>
+        <Tooltip content={tooltip} />
+      </Box>
+    </div>
   );
 };
 
 NanoMap.Marker = NanoMapMarker;
+
+const NanoMapZoomer = (props, context) => {
+  const { act, config, data } = useBackend(context);
+  return (
+    <Box className="NanoMap__zoomer">
+      <LabeledList>
+        <LabeledList.Item label="Zoom">
+          <Slider
+            minValue="1"
+            maxValue="8"
+            stepPixelSize="10"
+            format={v => v + "x"}
+            value={props.zoom}
+            onDrag={(e, v) => props.onZoom(e, v)}
+          />
+        </LabeledList.Item>
+        <LabeledList.Item label="Z-Level">
+          {data.map_levels
+            .sort((a, b) => Number(a) - Number(b))
+            .map(level => (
+              <Button
+                key={level}
+                selected={~~level === ~~config.mapZLevel}
+                content={level}
+                onClick={() => {
+                  act("setZLevel", { "mapZLevel": level });
+                }} />
+            ))}
+        </LabeledList.Item>
+      </LabeledList>
+    </Box>
+  );
+};
+
+NanoMap.Zoomer = NanoMapZoomer;

tgui/packages/tgui/interfaces/AtmosControl.js

@@ -29,7 +29,7 @@ export const AtmosControlContent = (props, context) => {
   // sortedAlarms = sortedAlarms.slice(1, 3);
 
   const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
-  const [mapZoom, setZoom] = useLocalState(context, 'mapZoom', 1);
+  const [zoom, setZoom] = useLocalState(context, 'zoom', 1);
 
   let body;
   // Alarms View
@@ -54,30 +54,8 @@ export const AtmosControlContent = (props, context) => {
     // you MUST update styles/components/Tooltip.scss
     // and change the @for scss to match.
     body = (
-      <Box textAlign="center">
+      <Box height="526px" mb="0.5rem" overflow="hidden">
-        Zoom Level:
+        <NanoMap onZoom={v => setZoom(v)}>
-        <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
-          .sort((a, b) => Number(a) - Number(b))
-          .map(level => (
-            <Button
-              key={level}
-              selected={~~level === ~~config.mapZLevel}
-              content={level}
-              onClick={() => {
-                act("setZLevel", { "mapZLevel": level });
-              }} />
-          ))}
-        <NanoMap zoom={mapZoom}>
           {sortedAlarms
             .filter(x => 
               (~~x.z === ~~config.mapZLevel)
@@ -86,7 +64,7 @@ export const AtmosControlContent = (props, context) => {
                 key={cm.ref}
                 x={cm.x}
                 y={cm.y}
-                zoom={mapZoom}
+                zoom={zoom}
                 icon="bell"
                 tooltip={cm.name}
                 color={cm.danger ? 'red' : 'green'}

tgui/packages/tgui/interfaces/CrewMonitor.js

@@ -3,9 +3,28 @@ import { flow } from 'common/fp';
 import { useBackend, useLocalState } from "../backend";
 import { Window } from "../layouts";
 import { NanoMap, Box, Table, Button, Tabs, Icon, NumberInput } from "../components";
-import { TableCell } from '../components/Table';
 import { Fragment } from 'inferno';
 
+const getStatText = cm => {
+  if (cm.dead) {
+    return "Deceased";
+  }
+  if (parseInt(cm.stat, 10) === 1) { // Unconscious
+    return "Unconscious";
+  }
+  return "Living";
+};
+
+const getStatColor = cm => {
+  if (cm.dead) {
+    return "red";
+  }
+  if (parseInt(cm.stat, 10) === 1) { // Unconscious
+    return "orange";
+  }
+  return "green";
+};
+
 export const CrewMonitor = () => {
   return (
     <Window 
@@ -30,10 +49,8 @@ export const CrewMonitorContent = (props, context) => {
     sortBy(cm => cm?.realZ),
   ])(data.crewmembers || []);
 
-  const [
+  const [zoom, setZoom] = useLocalState(context, 'zoom', 1);
-    mapZoom,
+
-    setZoom,
-  ] = useLocalState(context, 'number', 1);
   let body;
   // Data view
   if (tabIndex === 0) {
@@ -52,13 +69,13 @@ export const CrewMonitorContent = (props, context) => {
         </Table.Row>
         {crew.map(cm => (
           <Table.Row key={cm.ref}>
-            <TableCell>
+            <Table.Cell>
               {cm.name} ({cm.assignment})
-            </TableCell>
+            </Table.Cell>
-            <TableCell>
+            <Table.Cell>
               <Box inline
-                color={cm.dead ? 'red' : 'green'}>
+                color={getStatColor(cm)}>
-                {cm.dead ? 'Deceased' : 'Living'}
+                {getStatText(cm)}
               </Box>
               {cm.sensor_type >= 2 ? (
                 <Box inline>
@@ -85,8 +102,8 @@ export const CrewMonitorContent = (props, context) => {
                   {')'}
                 </Box>
               ) : null}
-            </TableCell>
+            </Table.Cell>
-            <TableCell>
+            <Table.Cell>
               {cm.sensor_type === 3 ? (
                 data.isAI ? (
                   <Button fluid
@@ -101,7 +118,7 @@ export const CrewMonitorContent = (props, context) => {
                   cm.area+" ("+cm.x+", "+cm.y+", "+cm.z+")"
                 )
               ) : "Not Available"}
-            </TableCell>
+            </Table.Cell>
           </Table.Row>
         ))}
       </Table>
@@ -110,48 +127,7 @@ export const CrewMonitorContent = (props, context) => {
     // Please note, if you ever change the zoom values,
     // you MUST update styles/components/Tooltip.scss
     // and change the @for scss to match.
-    body = (
+    body = <CrewMonitorMapView />;
-      <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
-          .sort((a, b) => Number(a) - Number(b))
-          .map(level => (
-            <Button
-              key={level}
-              selected={~~level === ~~config.mapZLevel}
-              content={level}
-              onClick={() => {
-                act("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";
   }
@@ -178,3 +154,27 @@ export const CrewMonitorContent = (props, context) => {
     </Fragment>
   );
 };
+
+const CrewMonitorMapView = (props, context) => {
+  const { act, config, data } = useBackend(context);
+  const [zoom, setZoom] = useLocalState(context, 'zoom', 1);
+  return (
+    <Box height="526px" mb="0.5rem" overflow="hidden">
+      <NanoMap onZoom={v => setZoom(v)}>
+        {data.crewmembers.filter(x => 
+          (x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel)
+        ).map(cm => (
+          <NanoMap.Marker
+            key={cm.ref}
+            x={cm.x}
+            y={cm.y}
+            zoom={zoom}
+            icon="circle"
+            tooltip={cm.name + " (" + cm.assignment + ")"}
+            color={getStatColor(cm)}
+          />
+        ))}
+      </NanoMap>
+    </Box>
+  );
+};

tgui/packages/tgui/styles/components/NanoMap.scss

@@ -1,7 +1,8 @@
+$color-background: rgba(0, 0, 0, 0.33) !default;
+
 .NanoMap__container {
-  overflow: hidden;
+  overflow: hiddden;
   width: 100%;
-  height: 100vh;
   z-index: 1;
 }
 
@@ -10,3 +11,13 @@
   padding: 0px;
   margin: 0px;
 }
+
+.NanoMap__zoomer {
+  z-index: 20;
+  background-color: $color-background;
+  position: absolute;
+  top: 30px;
+  left: 0;
+  padding: 0.5rem;
+  width: 30%;
+}