Attempted to Fix the Border Image Issue

interfinityOfficial · interfinityOfficial · commit 6285c6580986 · 2025-10-27T14:57:21.000-04:00
diff --git a/public/map.js b/public/map.js
@@ -189,12 +189,38 @@ function animateToOffsets(targetOffsetX, targetOffsetY, duration = 300) {
 
 // Show photo view after image loads
 function showPhotoView(photo) {
+    const photoView = document.getElementById('photo-view');
     const imgElement = document.getElementById('photo-image');
     const img = new Image();
 
     img.onload = () => {
         imgElement.src = photo.imageHighRes;
         document.body.classList.add('show-photo-view');
+        if (photo.imageX == 0) {
+            if (photo.imageY == 0) {
+                photoView.style.transform = 'translate(0%, 0%)';
+                photoView.style.top = '0%';
+                photoView.style.left = '0%';
+            } else {
+                photoView.style.transform = 'translate(0%, -50%)';
+                photoView.style.top = '50%';
+                photoView.style.left = '0%';
+            }
+        } else if (photo.imageX == MAP_COLS - 1) {
+            if (photo.imageY == MAP_ROWS - 1) {
+                photoView.style.transform = 'translate(-100%, -100%)';
+                photoView.style.top = '100%';
+                photoView.style.left = '100%';
+            } else {
+                photoView.style.transform = 'translate(-50%, -100%)';
+                photoView.style.top = '50%';
+                photoView.style.left = '100%';
+            }
+        } else {
+            photoView.style.transform = 'translate(-50%, -50%)';
+            photoView.style.top = '50%';
+            photoView.style.left = '50%';
+        }
     };
 
     img.onerror = () => {
diff --git a/views/main.ejs b/views/main.ejs
@@ -32,7 +32,7 @@
   <body>
     <canvas id="mapCanvas" width="450" height="540"></canvas>
     <div class="title">PIXEL BY PIXEL<br />NYC</div>
-    <div class="photo-view">
+    <div class="photo-view" id="photo-view">
       <img class="photo-image" id="photo-image" src="" alt="Photo" />
     </div>
     <div class="pixel-close-button" id="pixel-close-button">
