Fix bugs

src/UI/components/minimap.tsx

@@ -21,7 +21,8 @@ const ColorBox = styled.div`
     height: 25px;
     padding: 2px;
     margin: 2px;
-    border: 1px solid black;
+    border: 2px solid black;
+    border-radius: 12px;
     text-align: center;
     font-weight: bolder;
 `;

src/UI/components/muralView.tsx

@@ -10,6 +10,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Coordinates } from "../../coordinates";
 import { TEXT_FORMATS } from "../importMural";
 import saveAs from "file-saver";
+import { Popup } from "./Popup";
 
 const Margin = styled.div`
     margin: 2px;
@@ -166,8 +167,10 @@ export class MuralView extends React.Component<Props, State> {
         const blob = new Blob([JSON.stringify(rawMural)], { type: "application/json;charset=utf-8" });
         saveAs(blob, `${rawMural.name}.${TEXT_FORMATS[0]}`);
     };
-    onDelete = () => {
-        this.s.remove(this.props.mural);
+    onDelete = async () => {
+        if (await Popup.confirm(`Are you sure you want to remove "${this.props.mural.name}"`)) {
+            this.s.remove(this.props.mural);
+        }
     };
     onEnter = () => {
         this.props.store.addPhantomOverlay(this.props.mural);

src/UI/importMural.tsx

@@ -84,13 +84,13 @@ export async function importArtWork(store: Store, cords: Coordinates, palette: P
         } else {
             const img = file.data as HTMLImageElement;
             const pixels = await imageToMural(img, palette);
-            return new Promise<Mural>((resolve, reject)=> {
+            const mural = await new Promise<Mural>((resolve, reject)=> {
                 store.setOverlayModify({
                     pixels,
                     muralObj: {
                         name: img.alt,
-                        x: cords.ux - (get2DArrWidth(pixels) / 2),
-                        y: cords.uy - (get2DArrHeight(pixels) / 2),
+                        x: Math.floor(cords.ux - (get2DArrWidth(pixels) / 2)),
+                        y: Math.floor(cords.uy - (get2DArrHeight(pixels) / 2)),
                     },
                     cb: (name, x, y, confirm) => {
                         if (confirm) {
@@ -101,6 +101,8 @@ export async function importArtWork(store: Store, cords: Coordinates, palette: P
                     }
                 });
             });
+            validateMural(mural);
+            return mural;
         }
     }
 }
@@ -394,7 +396,7 @@ function quantizeImage(canvas: HTMLCanvasElement, rgbQuant: RgbQuant, ditheringK
 
     const imageData = canvasToImageData(canvas);
 
-    const data = rgbQuant.reduce(canvas, RetrieveType.Uint8Array, ditheringKernel);
+    const data = rgbQuant.reduce(canvas, RetrieveType.Uint8Array, ditheringKernel)!;
     if (imageData.data.length !== data.length) {
         throw new Error("Got unexpected data from regQuant");
     }