feat: add location display for NMs

Closes #1.

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;
+}

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>

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>