thraizz · June 30, 2024 15:36 · Jun 30, 2024
diff --git a/README.md b/README.md
@@ -0,0 +1,23 @@
+# Elden Ring Interactive Map Modifier
+
+This Tampermonkey script customizes the Elden Ring Interactive Map on the Fextralife website. It moves the map element to the top of the body and applies specific styles to enhance its visibility and accessibility.
+
+## Features
+
+- Moves the map container (`div` with `id="mapA"`) to the top of the body.
+- Applies the following styles to the map container:
+  - `position: absolute;`
+  - `z-index: 10000;`
+  - `top: 0;`
+  - `left: 0;`
+  - `width: 100vw;`
+  - `height: 100vh;`
+- Ensures the map iframe (`iframe` with class `interactivemapcontainer`) has a height of `100vh`.
+
+## Installation
+
+1. Install [Tampermonkey](https://www.tampermonkey.net/) if you haven't already.
+2. Click on the Tampermonkey icon in your browser and select `Create a new script...`.
+3. Delete the default content and paste in the script from below.
+4. Save the script.
+5. Visit the [Elden Ring Interactive Map](https://eldenring.wiki.fextralife.com/Interactive+Map) to see the changes in effect.
diff --git a/fextralife_eldenring_fullscreenmap.js b/fextralife_eldenring_fullscreenmap.js
@@ -0,0 +1,38 @@
+// ==UserScript==
+// @name         Elden Ring Interactive Map Modifier
+// @namespace    http://tampermonkey.net/
+// @version      0.1
+// @description  Move and style the map on the Elden Ring Interactive Map page
+// @author       Aron Schüler
+// @match        https://eldenring.wiki.fextralife.com/Interactive+Map
+// @grant        none
+// ==/UserScript==
+
+(function() {
+    'use strict';
+
+    // Wait for the DOM to be fully loaded
+    window.addEventListener('load', function() {
+        // Get the mapA div
+        const mapDiv = document.getElementById('mapA');
+        if (mapDiv) {
+            // Move mapA to be the first element in the body
+            document.body.insertBefore(mapDiv, document.body.firstChild);
+
+            // Apply the specified styles to mapA
+            mapDiv.style.position = 'absolute';
+            mapDiv.style.zIndex = '10000';
+            mapDiv.style.top = '0';
+            mapDiv.style.left = '0';
+            mapDiv.style.width = '100vw';
+            mapDiv.style.height = '100vh';
+
+            // Get the iframe inside mapA
+            const mapIframe = mapDiv.querySelector('.interactivemapcontainer');
+            if (mapIframe) {
+                // Apply the specified styles to the iframe
+                mapIframe.style.height = '100vh';
+            }
+        }
+    }, false);
+})();