+ {this.complexity > 500 && (
+
+
+ )}
+
+ );
+ }
+
+ displayLoading() {
+ return (
+
+
+
+
+ );
+ }
+
+ render() {
+ if (this.state.mapLoad) {
+ return this.displayCanvas();
+ } else {
+ // edge case where a new user joins and tries to draw on the canvas before they cached the png
+ return this.displayLoading();
+ }
+ }
+}
diff --git a/tgui/packages/tgui/interfaces/DrawnMap.js b/tgui/packages/tgui/interfaces/DrawnMap.js
new file mode 100644
index 000000000000..cd5a9539f847
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DrawnMap.js
@@ -0,0 +1,110 @@
+import { Box } from '../components';
+import { Component, createRef } from 'inferno';
+
+export class DrawnMap extends Component {
+ constructor(props) {
+ super(props);
+ this.containerRef = createRef();
+ this.flatImgSrc = this.props.flatImage;
+ this.backupImgSrc = this.props.backupImage;
+ this.state = {
+ mapLoad: true,
+ loadingBackup: true,
+ };
+ this.img = null;
+ this.svg = this.props.svgData;
+ }
+
+ componentDidMount() {
+ this.img = new Image();
+ this.img.src = this.flatImgSrc;
+ this.img.onload = () => {
+ this.setState({ mapLoad: true });
+ };
+
+ this.img.onerror = () => {
+ this.img.src = this.backupImgSrc;
+ this.setState({ mapLoad: false });
+ };
+
+ const backupImg = new Image();
+ backupImg.src = this.backupImgSrc;
+ backupImg.onload = () => {
+ this.setState({ loadingBackup: false });
+ };
+ }
+
+ parseSvgData(svgDataArray) {
+ if (!svgDataArray) return null;
+ let lines = [];
+ for (let i = 0; i < svgDataArray.length; i += 5) {
+ const x1 = svgDataArray[i];
+ const y1 = svgDataArray[i + 1];
+ const x2 = svgDataArray[i + 2];
+ const y2 = svgDataArray[i + 3];
+ const stroke = svgDataArray[i + 4];
+ lines.push({ x1, y1, x2, y2, stroke });
+ }
+ return lines;
+ }
+
+ getSize() {
+ const ratio = Math.min(
+ (self.innerWidth - 50) / 650,
+ (self.innerHeight - 150) / 600
+ );
+ return { width: 650 * ratio, height: 600 * ratio };
+ }
+
+ render() {
+ const parsedSvgData = this.parseSvgData(this.svg);
+ const size = this.getSize();
+
+ return (
+ + Please wait a few minutes before attempting to access the canvas. +
+
+ {this.state.loadingBackup && !this.state.mapLoad && (
+
+
+ )}
+ {this.img && this.state.mapLoad && (
+ 
+ )}
+ {parsedSvgData && this.state.mapLoad && (
+
+ )}
+
+ );
+ }
+}
diff --git a/tgui/packages/tgui/interfaces/OverwatchConsole.js b/tgui/packages/tgui/interfaces/OverwatchConsole.js
index 1a6f67ac7ccd..1805f231fb16 100644
--- a/tgui/packages/tgui/interfaces/OverwatchConsole.js
+++ b/tgui/packages/tgui/interfaces/OverwatchConsole.js
@@ -61,7 +61,6 @@ const SquadPanel = (props, context) => {
const { act, data } = useBackend(context);
const [category, setCategory] = useLocalState(context, 'selected', 'monitor');
- let hello = 2;
return (
<>
diff --git a/tgui/packages/tgui/interfaces/TacmapAdminPanel.js b/tgui/packages/tgui/interfaces/TacmapAdminPanel.js
new file mode 100644
index 000000000000..a5d00c688a2f
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/TacmapAdminPanel.js
@@ -0,0 +1,164 @@
+import { useBackend, useLocalState } from '../backend';
+import { Tabs, Section, Button, Stack, Flex } from '../components';
+import { DrawnMap } from './DrawnMap';
+import { Window } from '../layouts';
+
+const PAGES = [
+ {
+ title: 'USCM',
+ component: () => FactionPage,
+ color: 'blue',
+ icon: 'medal',
+ },
+ {
+ title: 'Hive',
+ component: () => FactionPage,
+ color: 'purple',
+ icon: 'star',
+ },
+];
+
+export const TacmapAdminPanel = (props, context) => {
+ const { data } = useBackend(context);
+ const {
+ uscm_map,
+ xeno_map,
+ uscm_svg,
+ xeno_svg,
+ uscm_ckeys,
+ xeno_ckeys,
+ uscm_names,
+ xeno_names,
+ uscm_times,
+ xeno_times,
+ uscm_selection,
+ xeno_selection,
+ map_fallback,
+ last_update_time,
+ } = data;
+
+ const [pageIndex, setPageIndex] = useLocalState(context, 'pageIndex', 0);
+
+ const PageComponent = PAGES[pageIndex].component();
+
+ return (
+ Loading map...
+
+ )}
+ {parsedSvgData && this.state.mapLoad && (
+
+ )}
+
+
+