Update NanoUI Live Map.

* Simplified how items are positioned on the map (e.g. ((value.x - 1) * 8) is now just value.x, scaling is applied later).
* Added four zoom levels (x1.0 to x2.5, triggered by links in the template).
* Moved the "Generate NanoUI Map" into the Server tab, to prevent it being used by admins accidentally.

Conflicts:
	nano/images/nanomap.png

code/modules/nano/nanomapgen.dm

@@ -17,7 +17,7 @@
 //NOTE: Does not explicitly support non 32x32 icons or stuff with large pixel_* values, so don't blame me if it doesn't work perfectly
 
 /mob/verb/nanomapgen_DumpImage()
-	set category = "Admin"	
+	set category = "Server"	
 	set name = "Generate NanoUI Map"
 	
 	if(!src.client.holder)

nano/css/icons.css

@@ -235,6 +235,7 @@
     background-image: url(uiIcons16Green.png);
     background-position: -144px -96px;
     background-repeat: no-repeat;
+    zoom: 0.125;
 }
 .mapIcon16.dead {
     background-image: url(uiIcons16Red.png);

nano/css/layout_default.css

@@ -70,25 +70,25 @@ body {
     position: absolute;
     top: 50%;
     left: 50%;
-    margin: -1024px 0 0 -1024px;
-    width: 2048px;
-    height: 2048px;
+    margin: -512px 0 0 -512px;
+    width: 256px;
+    height: 256px;
+    overflow: hidden;
+    zoom: 4;
 }
 
 #uiMapImage {
     position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 2048px;
-    height: 2048px;
+    bottom: 2px;
+    left: -6px;
 }
 
 #uiMapContent {
     position: absolute;
-    top: 0px;
+    bottom: 0px;
     left: 0px;
-    width: 2048px;
-    height: 2048px;
+    width: 256px;
+    height: 256px;
 }
 
 #uiMapFooter {
@@ -109,6 +109,7 @@ body {
     background-color: #272727;
     padding: 8px;
     display: none;
+    z-index: 9999;
 }
 
 #uiLoadingNotice {

nano/css/shared.css

@@ -49,7 +49,7 @@ hr {
     padding: 0px 4px 4px 0px;
 }
 
-a:hover, .linkActive:hover {
+a:hover, .zoomLink:hover, .linkActive:hover {
     background: #507aac;
 }
 

nano/js/nano_base_callbacks.js

@@ -52,7 +52,7 @@ NanoBaseCallbacks = function ()
                     }
                 });
 		},
-        mapIcons: function (updateData) {
+        nanomap: function (updateData) {
             $('.mapIcon')
                 .off('mouseenter mouseleave')
                 .on('mouseenter',
@@ -67,6 +67,24 @@ NanoBaseCallbacks = function ()
                             });
                     }
                 );
+
+            $('.zoomLink')
+                .off('click')
+                .on('click', function (event) {
+                    event.preventDefault();
+                    var zoomLevel = $(this).data('zoomLevel');
+                    var uiMapObject = $('#uiMap');
+                    var uiMapWidth = uiMapObject.width() * zoomLevel;
+                    var uiMapHeight = uiMapObject.height() * zoomLevel;
+
+                    uiMapObject.css({
+                        zoom: zoomLevel,
+                        left: '50%',
+                        top: '50%',
+                        marginLeft: '-' + Math.floor(uiMapWidth / 2) + 'px',
+                        marginTop: '-' + Math.floor(uiMapHeight / 2) + 'px'
+                    });
+                });
         }
 	};
 

nano/templates/crew_monitor_map_content.tmpl

@@ -4,7 +4,7 @@ Used In File(s): \code\game\machinery\computer\crew.dm
  -->
 {{for data.crewmembers}}
     {{if value.sensor_type == 3}}
-        <div class="mapIcon mapIcon16 rank-{{:value.rank.ckey()}} {{:value.dead ? 'dead' : 'alive'}}" style="left: {{:((value.x - 1) * 8)}}px; bottom: {{:((value.y - 1) * 8)}}px;" unselectable="on">
+        <div class="mapIcon mapIcon16 rank-{{:value.rank.ckey()}} {{:value.dead ? 'dead' : 'alive'}}" style="left: {{:(value.x)}}px; bottom: {{:(value.y)}}px;" unselectable="on">
             <div class="tooltip hidden">
                 {{:value.name}} ({{:value.dead ? "<span class='bad'>Deceased</span>" : "<span class='good'>Living</span>"}}) (<span class="oxyloss">{{:value.oxy}}</span>/<span class="toxin">{{:value.tox}}</span>/<span class="burn">{{:value.fire}}</span>/<span class="brute">{{:value.brute}}</span>) ({{:value.area}}: {{:value.x}}, {{:value.y}})
             </div>

nano/templates/crew_monitor_map_header.tmpl

@@ -2,4 +2,11 @@
 Title: Crew Monitoring Console (Map header)
 Used In File(s): \code\game\machinery\computer\crew.dm
  -->
-{{:helper.link('Show Detail List', 'script', {'showMap' : 0})}}
+{{:helper.link('Show Detail List', 'script', {'showMap' : 0})}}
+<div style="float: right; width: 240px;">
+    <span style="float: left;">Zoom Level:&nbsp;</span>
+    <div unselectable="on" class="link zoomLink" data-zoom-level="4">x1.0</div>
+    <div unselectable="on" class="link zoomLink" data-zoom-level="6">x1.5</div>
+    <div unselectable="on" class="link zoomLink" data-zoom-level="8">x2.0</div>
+    <div unselectable="on" class="link zoomLink" data-zoom-level="12">x2.5</div>
+</div>

nano/templates/layout_default.tmpl

@@ -2,11 +2,18 @@
 <div id='uiMapWrapper' class="hidden" unselectable="on">
     <div id='uiMapHeader' unselectable="on">
         {{:helper.link('Hide Map', 'close', {'showMap' : 0})}}
+        <div style="float: right; width: 240px;">
+            <span style="float: left;">Zoom Level:&nbsp;</span>
+            <div unselectable="on" class="link zoomLink" data-zoom-level="4">x1.0</div>
+            <div unselectable="on" class="link zoomLink" data-zoom-level="6">x1.5</div>
+            <div unselectable="on" class="link zoomLink" data-zoom-level="8">x2.0</div>
+            <div unselectable="on" class="link zoomLink" data-zoom-level="12">x2.5</div>
+        </div>
         <!-- Add a template with the key "mapHeader" to have it rendered here -->
     </div>
     <div id='uiMapContainer' unselectable="on">
         <div id='uiMap' unselectable="on">
-            <img id="uiMapImage" src="nanomap.png" width="2048" height="2048" unselectable="on" />
+            <img id="uiMapImage" src="nanomap.png" width="256" height="256" unselectable="on" />
             <div id='uiMapContent' unselectable="on">
                 <!-- Add a template with the key "mapContent" to have it rendered here (on the map) -->
                 <!-- Having a "mapContent" template enables the map functionality -->