etdhg

2026-03-11 18:54:59 +00:00 · 2026-03-11 18:54:59 +00:00 · 71a7453241
commit 71a7453241
parent eb8c82d378
2 changed files with 82 additions and 1 deletions
--- a/views/launcher-dev.ejs
+++ b/views/launcher-dev.ejs
@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+
+    <title>Map Developer</title>
+
+    <style>
+      body {
+        margin: 0;
+        background: #000;
+        display: flex;
+        justify-content: center;
+      }
+
+      .wrapper {
+        position: relative;
+      }
+
+      img {
+        display: block;
+      }
+
+      svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      polygon {
+        fill: rgba(255, 0, 0, 0.35);
+        stroke: red;
+        stroke-width: 2;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="wrapper">
+      <img src="/images/dok_bg.png" id="map" />
+
+      <svg
+        id="overlay"
+        viewBox="0 0 2037 1018"
+        width="2037"
+        height="1018"
+      ></svg>
+    </div>
+
+    <script>
+      let points = [];
+      const svg = document.getElementById("overlay");
+
+      svg.addEventListener("click", (e) => {
+        const rect = svg.getBoundingClientRect();
+
+        const x = Math.round(e.clientX - rect.left);
+        const y = Math.round(e.clientY - rect.top);
+
+        points.push(`${x},${y}`);
+
+        drawPolygon();
+
+        console.log('points="' + points.join(" ") + '"');
+      });
+
+      function drawPolygon() {
+        svg.innerHTML = `
+<polygon points="${points.join(" ")}"></polygon>
+`;
+      }
+
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          points = [];
+          svg.innerHTML = "";
+        }
+      });
+    </script>
+  </body>
+</html>
--- a/views/launcher.ejs
+++ b/views/launcher.ejs
@ -44,7 +44,7 @@
          <title>Gebäude 1</title>
          <polygon
            class="area"
-            points="420,230 520,230 540,420 480,520 400,420"
+            points="280,160 360,160 370,320 310,370 260,300"
          />
        </a>