From 4000dd18712a7d779482e7d46bc6a3a49681018e Mon Sep 17 00:00:00 2001
From: insects <mail@liv.nrw>
Date: Mon, 31 Mar 2025 23:05:28 +0200
Subject: [PATCH] feat: add location display for NMs

Closes #1.
---
 app/assets/stylesheets/application.css | 33 ++++++++++++++++++++++++++
 app/views/instance/_list.html.erb      | 11 +++++++++
 app/views/instance/_map_icon.html.erb  |  3 +++
 3 files changed, 47 insertions(+)
 create mode 100644 app/views/instance/_map_icon.html.erb

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 64fb55e..d8433d8 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -391,3 +391,36 @@ a:has(button) {
     font-weight: bold;
     padding: 3px 5px;
 }
+
+.map-icon svg {
+    display: inline-block;
+    width: 20px;
+    vertical-align: middle;
+    margin-top: -3px;
+    stroke: #fff;
+    fill: none;
+    position: relative;
+    z-index: 1;
+}
+
+.map-popup {
+    display: none;
+}
+
+.map-icon:hover .map-popup {
+    display: block;
+    position: absolute;
+    color: tomato;
+    z-index: 100;
+}
+
+.map-nm-loc {
+    width: 20px;
+    height: 20px;
+    border-radius: 50px;
+    opacity: .5;
+    background-color: #005ba4;
+    display: inline-block;
+    margin-left: -10px;
+    margin-top: -10px;
+}
diff --git a/app/views/instance/_list.html.erb b/app/views/instance/_list.html.erb
index 828131a..6630721 100644
--- a/app/views/instance/_list.html.erb
+++ b/app/views/instance/_list.html.erb
@@ -12,6 +12,17 @@
       <div class="meta">
         <h3 class="nm-info">
           <span class="badge">LV<%= nm[:level].to_s.rjust(2, "0") %></span>
+          <% if nm[:x] and nm[:y] %>
+            <span class="map-icon">
+              <%= render partial: "map_icon" %>
+              <div class="map-popup">
+                <div style="position: relative; width: 200px; height: 200px;">
+                  <img src="/maps/<%= @instance.zone %>_fw.jpg" style="width: 200px; z-index: 100;" />
+                  <span class="map-nm-loc" style="position: absolute; left: <%= (nm[:x] / 42.0) * 100.0 %>%; top: <%= (nm[:y] / 42.0) * 100.0 %>%;"></span>
+                </div>
+              </div>
+            </span>
+          <% end %>
           <%= nm[:name] %>
           <% if nm[:drops] %>
             <span title="<%= nm[:drops] %>" style="font-size: 14px;">✨</span>
diff --git a/app/views/instance/_map_icon.html.erb b/app/views/instance/_map_icon.html.erb
new file mode 100644
index 0000000..b6f060a
--- /dev/null
+++ b/app/views/instance/_map_icon.html.erb
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+  <path d="M9 20L3 17V4L9 7M9 20L15 17M9 20V7M15 17L21 20V7L15 4M15 17V4M9 7L15 4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>