Feat: NanoMap for Camera Console (#213)

<!-- Пишите **НИЖЕ** заголовков и **ВЫШЕ** комментариев, иначе что то
может пойти не так. -->
<!-- Вы можете прочитать Contributing.MD, если хотите узнать больше. -->

Копипизднул код с парашизы и пары древних коммитов.
Работает, но какой ценой...

<!-- Вкратце опишите изменения, которые вносите. -->
<!-- Опишите **все** изменения, так как противное может сказаться на
рассмотрении этого PR'а! -->
<!-- Если вы исправляете Issue, добавьте "Fixes #1234" (где 1234 - номер
Issue) где-нибудь в описании PR'а. Это автоматически закроет Issue после
принятия PR'а. -->

Удобство, сидеть на камерах со списком - один из видов мазохизма

<!-- Опишите, почему, по вашему, следует добавить эти изменения в игру.
-->

![image](https://github.com/ss220club/Paradise-SS220/assets/69762909/52127693-1c01-496d-8f0c-35ec7046403d)

<!-- Если вы не меняли карту или спрайты, можете опустить эту секцию.
Если хотите, можете вставить видео. -->

Ну да...

<!-- Как вы тестировали свой PR, если делали это вовсе? -->

:cl:
add: Добавлена карта в консоль камер.
del: Выброшены остатки моей гордости.
/:cl:

<!-- Оба :cl:'а должны быть на месте, что-бы чейнджлог работал! Вы
можете написать свой ник справа от первого :cl:, если хотите. Иначе
будет использован ваш ник на ГитХабе. -->
<!-- Вы можете использовать несколько записей с одинаковым префиксом
(Они используются только для иконки в игре) и удалить ненужные. Помните,
что чейнджлог должен быть понятен обычным игроком. -->
<!-- Если чейнджлог не влияет на игроков(например, это рефактор), вы
можете исключить всю секцию. -->

---------

Co-authored-by: DGamerL <[email protected]>

modular_ss220/camera_nanomap/README.md

@@ -0,0 +1,7 @@
+В этом модуле, для добавления наномапы в камеры, были затронуты НЕ модульно следующие файлы:
+"NanoMap.js"
+"NanoMap.scss"
+"CameraConsole.scss"
+"ByondUI.js"
+
+К сожалению, иной путь мог создать больше проблем в будущем чем такой топорный.

modular_ss220/camera_nanomap/camera.dm

@@ -0,0 +1,4 @@
+/datum/modpack/camera_nanomap
+	name = "Карта в терминале камер"
+	desc = "В названии всё сказано"
+	author = "Aylong220, RV666"

modular_ss220/camera_nanomap/camera.dme

@@ -0,0 +1,3 @@
+#include "camera.dm"
+
+#include "code/camera.dm"

modular_ss220/camera_nanomap/code/camera.dm

@@ -0,0 +1,54 @@
+/obj/machinery/computer/security/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, datum/tgui/master_ui = null, datum/ui_state/state = GLOB.default_state)
+	// Update UI
+	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
+	// Show static if can't use the camera
+	if(!active_camera?.can_use())
+		show_camera_static()
+	if(!ui)
+		var/user_uid = user.UID()
+		var/is_living = isliving(user)
+		// Ghosts shouldn't count towards concurrent users, which produces
+		// an audible terminal_on click.
+		if(is_living)
+			watchers += user_uid
+		// Turn on the console
+		if(length(watchers) == 1 && is_living)
+			if(!silent_console)
+				playsound(src, 'sound/machines/terminal_on.ogg', 25, FALSE)
+			use_power(active_power_consumption)
+		// Register map objects
+		user.client.register_map_obj(cam_screen)
+		for(var/plane in cam_plane_masters)
+			user.client.register_map_obj(plane)
+		user.client.register_map_obj(cam_background)
+		// Open UI
+		ui = new(user, src, ui_key, "CameraConsole220", name, 1170, 755, master_ui, state)
+		ui.open()
+
+/obj/machinery/computer/security/ui_data()
+	var/list/data = list()
+	data["network"] = network
+	data["activeCamera"] = null
+	if(active_camera)
+		data["activeCamera"] = list(
+			name = active_camera.c_tag,
+			status = active_camera.status,
+		)
+	var/list/cameras = get_available_cameras()
+	data["cameras"] = list()
+	for(var/i in cameras)
+		var/obj/machinery/camera/C = cameras[i]
+		data["cameras"] += list(list(
+			name = C.c_tag,
+			x = C.x,
+			y = C.y,
+			z = C.z,
+			status = C.status
+		))
+	return data
+
+/obj/machinery/computer/security/ui_static_data()
+	var/list/data = list()
+	data["mapRef"] = map_name
+	data["stationLevel"] = level_name_to_num(MAIN_STATION)
+	return data

modular_ss220/modular_ss220.dme

@@ -38,6 +38,7 @@
 #include "agent_id_tgui/_agent_id_tgui.dme"
 #include "balance/_balance.dme"
 #include "bureaucracy/_bureaucracy.dme"
+#include "camera_nanomap/camera.dme"
 #include "cinematics/_cinematics.dme"
 #include "closet_picklocking/_closet_picklocking.dme"
 #include "crawl_speed/_crawl_speed.dme"

tgui/packages/tgui/components/ByondUi.js

@@ -56,7 +56,7 @@ window.addEventListener('beforeunload', () => {
 /**
  * Get the bounding box of the DOM element.
  */
-const getBoundingBox = (element) => {
+export const getBoundingBox = element => { // SS220 EDIT - ORIGINAL: const getBoundingBox = element => {
   const rect = element.getBoundingClientRect();
   return {
     pos: [rect.left, rect.top],

tgui/packages/tgui/components/NanoMap.js

@@ -1,8 +1,9 @@
 import { Component } from 'inferno';
-import { Box, Icon, Tooltip } from '.';
+import { Box, Icon, Tooltip, Button } from '.';
 import { useBackend } from '../backend';
 import { LabeledList } from './LabeledList';
 import { Slider } from './Slider';
+import { getBoundingBox } from "./ByondUi";
 
 const pauseEvent = (e) => {
   if (e.stopPropagation) {
@@ -25,8 +26,8 @@ export class NanoMap extends Component {
     const Ycenter = window.innerHeight / 2 - 256;
 
     this.state = {
-      offsetX: 128,
-      offsetY: 48,
+      offsetX: Xcenter,
+      offsetY: Ycenter,
       transform: 'none',
       dragging: false,
       originX: null,
@@ -79,10 +80,22 @@ export class NanoMap extends Component {
     this.handleZoom = (_e, value) => {
       this.setState((state) => {
         const newZoom = Math.min(Math.max(value, 1), 8);
-        let zoomDiff = (newZoom - state.zoom) * 1.5;
+        const zoomDiff = newZoom / state.zoom;
+        if (zoomDiff === 1) {
+          return;
+        }
+
         state.zoom = newZoom;
-        state.offsetX = state.offsetX - 262 * zoomDiff;
-        state.offsetY = state.offsetY - 256 * zoomDiff;
+
+        const container = document.getElementsByClassName('NanoMap__container');
+        if (container.length) {
+          const bounds = getBoundingBox(container[0]);
+          const currentCenterX = bounds.size[0] / 2 - state.offsetX;
+          const currentCenterY = bounds.size[1] / 2 - state.offsetY;
+          state.offsetX += currentCenterX - (currentCenterX * zoomDiff);
+          state.offsetY += currentCenterY - (currentCenterY * zoomDiff);
+        }
+
         if (props.onZoom) {
           props.onZoom(state.zoom);
         }
@@ -127,8 +140,17 @@ export class NanoMap extends Component {
   }
 }
 
-const NanoMapMarker = (props, context) => {
-  const { x, y, zoom = 1, icon, tooltip, color } = props;
+const NanoMapMarker = props => {
+  const {
+    x,
+    y,
+    zoom = 1,
+    icon,
+    tooltip,
+    color,
+    onClick,
+    size = 6,
+  } = props;
   const rx = x * 2 * zoom - zoom - 3;
   const ry = y * 2 * zoom - zoom - 3;
   return (
@@ -137,19 +159,70 @@ const NanoMapMarker = (props, context) => {
         position="absolute"
         className="NanoMap__marker"
         lineHeight="0"
-        bottom={ry + 'px'}
-        left={rx + 'px'}
-      >
-        <Icon name={icon} color={color} fontSize="6px" />
+        bottom={ry + "px"}
+        left={rx + "px"}
+        onClick={onClick}>
+        <Icon
+          name={icon}
+          color={color}
+          fontSize={size + "px"}
+        />
         <Tooltip content={tooltip} />
       </Box>
     </div>
   );
 };
 
+let ActiveButton;
+class NanoButton extends Component {
+  constructor(props) {
+    super(props);
+    const { act } = useBackend(this.props.context);
+    this.state = {
+      color: this.props.color,
+    };
+    this.handleClick = e => {
+      if (ActiveButton !== undefined) {
+        ActiveButton.setState({
+          color: "blue",
+        });
+      }
+      act('switch_camera', {
+        name: this.props.name,
+      });
+      ActiveButton = this;
+      this.setState({
+        color: "green",
+      });
+    };
+  }
+  render() {
+    let rx = ((this.props.x * 2 * this.props.zoom) - this.props.zoom) - 3;
+    let ry = ((this.props.y * 2 * this.props.zoom) - this.props.zoom) - 3;
+
+    return (
+      <Button
+        key={this.props.key}
+        // icon={this.props.icon}
+        onClick={this.handleClick}
+        position="absolute"
+        className="NanoMap__button"
+        lineHeight="0"
+
+        color={this.props.status ? this.state.color : "red"}
+        bottom={ry + "px"}
+        left={rx + "px"}>
+
+        <Tooltip content={this.props.tooltip} />
+      </Button>
+    );
+  }
+}
+NanoMap.NanoButton = NanoButton;
 NanoMap.Marker = NanoMapMarker;
 
-const NanoMapZoomer = (props, context) => {
+
+const NanoMapZoomer = props => {
   return (
     <Box className="NanoMap__zoomer">
       <LabeledList>