Add Move to storage button

src/css/ingame_hud/statistics.scss

@@ -166,5 +166,28 @@
                 }
             }
         }
+
+        .shape {
+            position: relative;
+
+            button.moveButton {
+                @include S(width, 11px);
+                @include S(height, 11px);
+                background: uiResource("icons/waypoint.png") center center / 95% no-repeat;
+                position: absolute;
+                @include S(top, 29px);
+                @include S(right, -11px);
+                opacity: 0.5;
+                cursor: pointer;
+                pointer-events: all;
+                @include IncreasedClickArea(5px);
+                transition: opacity 0.12s ease-in-out;
+                @include DarkThemeInvert;
+
+                &:hover {
+                    opacity: 0.6;
+                }
+            }
+        }
     }
 }

src/js/game/hud/parts/statistics_handle.js

@@ -5,6 +5,7 @@ import { T } from "../../../translations";
 import { enumAnalyticsDataSource } from "../../production_analytics";
 import { GameRoot } from "../../root";
 import { ShapeDefinition } from "../../shape_definition";
+import { ClickDetector } from "../../../core/click_detector";
 
 /** @enum {string} */
 export const enumDisplayMode = {
@@ -40,6 +41,8 @@ export class HUDShapeStatisticsHandle {
         this.counter = document.createElement("span");
         this.counter.classList.add("counter");
         this.element.appendChild(this.counter);
+
+        this.canvasElement = this.element;
     }
 
     /**
@@ -56,7 +59,7 @@ export class HUDShapeStatisticsHandle {
                 // Create elements
                 this.shapeCanvas = this.definition.generateAsCanvas(100);
                 this.shapeCanvas.classList.add("icon");
-                this.element.appendChild(this.shapeCanvas);
+                this.canvasElement.appendChild(this.shapeCanvas);
             }
         } else {
             // Drop elements
@@ -244,4 +247,31 @@ export class HUDShapeStatisticsStorageHandle extends HUDShapeStatisticsHandle {
     get shapeKey() {
         return this.uid.toString() + "," + this.definition.getHash();
     }
+
+    initElement() {
+        super.initElement();
+
+        this.canvasElement = document.createElement("div");
+        this.canvasElement.classList.add("shape");
+        this.element.appendChild(this.canvasElement);
+
+        // Show small move icon
+        const moveButton = document.createElement("button");
+        moveButton.classList.add("moveButton");
+        this.canvasElement.appendChild(moveButton);
+        const infoDetector = new ClickDetector(moveButton, {
+            consumeEvents: true,
+            preventDefault: true,
+            targetOnly: true,
+        });
+        infoDetector.click.add(() => {
+            const entity = this.root.entityMgr.findByUid(this.uid);
+            const position = entity.components.StaticMapEntity.origin;
+
+            this.root.camera.setDesiredCenter(position.toWorldSpace());
+            this.root.camera.setDesiredZoom(
+                Math.max(this.root.camera.zoomLevel, globalConfig.mapChunkOverviewMinZoom + 0.05)
+            );
+        });
+    }
 }