From 7af8d725cb18a2067eb7d15bc6934807d367eacf Mon Sep 17 00:00:00 2001
From: doom <ghostrecon5123@gmail.com>
Date: Mon, 9 Oct 2023 16:56:07 -0700
Subject: [PATCH] bug fix

---
 code/controllers/subsystem/minimap.dm         |  7 +++--
 tgui/packages/tgui/interfaces/CanvasLayer.js  | 29 +++++++++++++++++--
 tgui/packages/tgui/interfaces/TacticalMap.tsx | 20 +++++++++----
 3 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/code/controllers/subsystem/minimap.dm b/code/controllers/subsystem/minimap.dm
index 5d9f12d09fb8..045e121af74d 100644
--- a/code/controllers/subsystem/minimap.dm
+++ b/code/controllers/subsystem/minimap.dm
@@ -754,8 +754,11 @@ SUBSYSTEM_DEF(minimaps)
 			. = TRUE
 
 		if ("selectColor")
-			toolbar_color_selection = params["color"]
-			toolbar_updated_selection = toolbar_color_selection
+
+			var/newColor = params["color"]
+			if(newColor)
+				toolbar_color_selection = newColor
+				toolbar_updated_selection = newColor
 			action_queue_change += 1
 			. = TRUE
 
diff --git a/tgui/packages/tgui/interfaces/CanvasLayer.js b/tgui/packages/tgui/interfaces/CanvasLayer.js
index 939f93c9de14..2e9d1bffae88 100644
--- a/tgui/packages/tgui/interfaces/CanvasLayer.js
+++ b/tgui/packages/tgui/interfaces/CanvasLayer.js
@@ -10,6 +10,7 @@ export class CanvasLayer extends Component {
     // using this.state prevents unpredictable behavior
     this.state = {
       selection: this.props.selection,
+      mapLoad: true,
     };
 
     // needs to be of type png of jpg
@@ -37,6 +38,14 @@ export class CanvasLayer extends Component {
 
     this.img.src = this.imageSrc;
 
+    this.img.onload = () => {
+      this.setState({ mapLoad: true });
+    };
+
+    this.img.onerror = () => {
+      this.setState({ mapLoad: false });
+    };
+
     this.drawCanvas();
 
     this.canvasRef.current.addEventListener('mousedown', this.handleMouseDown);
@@ -45,6 +54,8 @@ export class CanvasLayer extends Component {
   }
 
   componentWillUnmount() {
+    // otherwise we get a runtime
+    if (!this.state.mapLoad) return;
     this.canvasRef.current.removeEventListener(
       'mousedown',
       this.handleMouseDown
@@ -136,6 +147,8 @@ export class CanvasLayer extends Component {
         return;
       }
 
+      const prevColor = line[0][4];
+
       this.ctx.clearRect(
         0,
         0,
@@ -161,7 +174,8 @@ export class CanvasLayer extends Component {
         });
       });
 
-      this.setState({ selection: this.props.prevColor });
+      this.setState({ selection: prevColor });
+      this.props.onUndo(prevColor);
       return;
     }
 
@@ -208,6 +222,17 @@ export class CanvasLayer extends Component {
   }
 
   render() {
-    return <canvas ref={this.canvasRef} width={650} height={590} />;
+    // edge case where a new user joins and tries to draw on the canvas before they cached the png
+    return (
+      <div>
+        {this.state.mapLoad ? (
+          <canvas ref={this.canvasRef} width={650} height={590} />
+        ) : (
+          <h2>
+            Please wait a few minutes before attempting to access the canvas
+          </h2>
+        )}
+      </div>
+    );
   }
 }
diff --git a/tgui/packages/tgui/interfaces/TacticalMap.tsx b/tgui/packages/tgui/interfaces/TacticalMap.tsx
index f9212a2e49c1..2f9c5490a484 100644
--- a/tgui/packages/tgui/interfaces/TacticalMap.tsx
+++ b/tgui/packages/tgui/interfaces/TacticalMap.tsx
@@ -67,12 +67,12 @@ const colorOptions = [
 
 const colors: Record<string, string> = {
   'black': '#000000',
-  'red': '#FC0000',
-  'orange': '#F59A07',
-  'blue': '#0561F5',
-  'purple': '#C002FA',
+  'red': '#fc0000',
+  'orange': '#f59a07',
+  'blue': '#0561f5',
+  'purple': '#c002fa',
   'green': '#02c245',
-  'brown': '#5C351E',
+  'brown': '#5c351e',
 };
 
 export const TacticalMap = (props, context) => {
@@ -175,6 +175,11 @@ const DrawMapPanel = (props, context) => {
       return dataSelection;
     }
   };
+  const findColorValue = (oldValue: string) => {
+    return (Object.keys(colors) as Array<string>).find(
+      (key) => colors[key] === (oldValue as string)
+    );
+  };
 
   return (
     <>
@@ -237,6 +242,7 @@ const DrawMapPanel = (props, context) => {
               selected={data.toolbarColorSelection}
               color={data.toolbarColorSelection}
               onSelected={(value) => act('selectColor', { color: value })}
+              displayText={data.toolbarColorSelection}
             />
           </Stack.Item>
         </Stack>
@@ -264,8 +270,10 @@ const DrawMapPanel = (props, context) => {
           selection={handleColorSelection(data.toolbarUpdatedSelection)}
           actionQueueChange={data.actionQueueChange}
           imageSrc={data.newCanvasFlatImage}
-          prevColor={handleColorSelection(data.toolbarColorSelection)}
           onImageExport={handleTacMapExport}
+          onUndo={(value) =>
+            act('selectColor', { color: findColorValue(value) })
+          }
         />
       </Section>
     </>