Restore minimap functionality

Author: leonhard-s

index.css

@@ -33,11 +33,11 @@ body {
 }
 
 #minimap {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    z-index: 20;
-    overflow: hidden;
+    position: relative;
+    top: var(--sidebar-margin);
+    left: var(--sidebar-margin);
+    width: calc(var(--sidebar-width) - var(--sidebar-margin) * 2);
+    height: calc(var(--sidebar-width) - var(--sidebar-margin) * 2);
 }
 
 .widget {

index.js

@@ -981,6 +981,23 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 document.addEventListener("DOMContentLoaded", function () {
     var heroMap = new HeroMap(document.getElementById("hero-map"));
+    var minimap = new Minimap(document.getElementById("minimap"));
+    document.addEventListener("ps2map_baseownershipchanged", function (event) {
+        var evt = event.detail;
+        minimap.setBaseOwnership(evt.baseId, evt.factionId);
+    }, { passive: true });
+    document.addEventListener("ps2map_continentchanged", function (event) {
+        var evt = event.detail;
+        minimap.setContinent(evt.continent);
+    }, { passive: true });
+    document.addEventListener("ps2map_viewboxchanged", function (event) {
+        var evt = event.detail;
+        minimap.setViewBox(evt.viewBox);
+    }, { passive: true });
+    document.addEventListener("ps2map_minimapjump", function (event) {
+        var evt = event.detail;
+        heroMap.jumpTo(evt.target);
+    }, { passive: true });
     Api.getContinentList().then(function (continentList) {
         heroMap.setContinent(continentList[0]);
     });

minimap.css

@@ -1,13 +1,14 @@
 .ps2map__minimap {
     background-size: 100%;
+    overflow: hidden;
 }
 
 .ps2map__minimap__hexes {
     height: 100%;
     width: 100%;
     position: absolute;
     pointer-events: none;
-    z-index: -1;
+    z-index: 1;
 }
 
 .ps2map__minimap__viewbox {
@@ -17,4 +18,5 @@
     border: 1px solid white;
     transition: all 100ms ease-out;
     pointer-events: none;
+    z-index: 2;
 }

src/index.ts

@@ -19,24 +19,24 @@ document.addEventListener("DOMContentLoaded", () => {
     //     if (event.code === "Escape") resetTool();
     // });
 
-    // const minimap = new Minimap(document.getElementById("minimap") as HTMLDivElement);
+    const minimap = new Minimap(document.getElementById("minimap") as HTMLDivElement);
 
-    // document.addEventListener("ps2map_baseownershipchanged", (event) => {
-    //     const evt = (event as CustomEvent<BaseOwnershipChangedEvent>).detail;
-    //     minimap.setBaseOwnership(evt.baseId, evt.factionId);
-    // }, { passive: true });
-    // document.addEventListener("ps2map_continentchanged", (event) => {
-    //     const evt = (event as CustomEvent<ContinentChangeEvent>).detail;
-    //     minimap.setContinent(evt.continent);
-    // }, { passive: true });
-    // document.addEventListener("ps2map_viewboxchanged", (event) => {
-    //     const evt = (event as CustomEvent<ViewBoxChangedEvent>).detail;
-    //     minimap.setViewBox(evt.viewBox);
-    // }, { passive: true });
-    // document.addEventListener("ps2map_minimapjump", (event) => {
-    //     const evt = (event as CustomEvent<MinimapJumpEvent>).detail;
-    //     heroMap.jumpTo(evt.target);
-    // }, { passive: true });
+    document.addEventListener("ps2map_baseownershipchanged", (event) => {
+        const evt = (event as CustomEvent<BaseOwnershipChangedEvent>).detail;
+        minimap.setBaseOwnership(evt.baseId, evt.factionId);
+    }, { passive: true });
+    document.addEventListener("ps2map_continentchanged", (event) => {
+        const evt = (event as CustomEvent<ContinentChangeEvent>).detail;
+        minimap.setContinent(evt.continent);
+    }, { passive: true });
+    document.addEventListener("ps2map_viewboxchanged", (event) => {
+        const evt = (event as CustomEvent<ViewBoxChangedEvent>).detail;
+        minimap.setViewBox(evt.viewBox);
+    }, { passive: true });
+    document.addEventListener("ps2map_minimapjump", (event) => {
+        const evt = (event as CustomEvent<MinimapJumpEvent>).detail;
+        heroMap.jumpTo(evt.target);
+    }, { passive: true });
 
     // const dropdown = document.getElementById("continent-selector") as HTMLSelectElement;
     // dropdown.addEventListener("change", () => {