1 files changed, 42 insertions, 3 deletions
diff --git a/index.html b/index.html
index 00132c3..12c5dfc 100644
--- a/index.html
+++ b/index.html
@@ -14,9 +14,21 @@
         opacity: 0.33;
       }
 
+      rect#map {
+        fill: gainsboro;
+        opacity: 0;
+      }
+
       image {
         transform: scale(3.41) rotate(-0.15deg);
-        opacity: 0.33;
+        /* opacity: 0.33; */
+      }
+
+      .wall {
+        fill: none;
+        stroke: red;
+        stroke-width: 7px;
+        opacity: 0.7;
       }
     </style>
   </head>
@@ -33,11 +45,38 @@
       
       <line x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
       <line x1="-0.25in" y1="0" x2="-0.25in" y2="22in" stroke="url(#vert)" />
-      <rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" />
       <image href="map1.png" height="6.428in" width="9.971in" />
+      <rect id="map" x="0" y="0" width="34in" height="22in" />
+
+      <rect class="wall" x="3.77in" y="1.49in" width="4.3in" height="7.33in" />
+      <line class="wall" x1="5.93in" y1="1.49in" x2="5.93in" y2="4.41in" />
+      <line class="wall" x1="5.93in" y1="5.36in" x2="5.93in" y2="8.82in" />
+      <line class="wall" x1="6.98in" y1="3.59in" x2="6.98in" y2="5.36in" />
+
+      <line class="wall" x1="5.93in" y1="3.59in" x2="8.07in" y2="3.59in" />
+      <line class="wall" x1="5.93in" y1="5.36in" x2="8.07in" y2="5.36in" />
+      <line class="wall" x1="5.93in" y1="7.51in" x2="8.07in" y2="7.51in" />
+      <line class="wall" x1="3.77in" y1="4.41in" x2="5.93in" y2="4.41in" />
+      <line class="wall" x1="3.77in" y1="7.51in" x2="5.09in" y2="7.51in" />
     </svg>
 
     <script>
+      var rect = document.querySelector('rect#map');
+      var toFixed = n => Number.parseFloat(n).toFixed(2);
+
+      rect.addEventListener('mousemove', e => {
+        var rect = e.target.getBoundingClientRect();
+        // console.log(rect)
+        var x = e.clientX - rect.left; // x position within the element
+        var y = e.clientY - rect.top;  // y position within the element
+        // console.log("Left? : " + x + " ; Top? : " + y + ".");
+        // console.log(x/rect.width, y/rect.height);
+        console.log(
+          'x: ' + toFixed(x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits) + '"',
+          'y: ' + toFixed(y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits) + '"'
+        );
+      });
+
       var svgns = "http://www.w3.org/2000/svg",
           svg = document.querySelector('svg');
       
@@ -67,7 +106,7 @@
 
         circle.setAttributeNS(null, 'cx', `${cx}in`);
         circle.setAttributeNS(null, 'cy', `${cy}in`);
-        circle.setAttributeNS(null, 'r', '0.1in');
+        circle.setAttributeNS(null, 'r', '0.07in');
         svg.appendChild(circle);
       }));
     </script>