make things look nicer and work on image change

src/pages/profile_page.html

@@ -91,14 +91,19 @@
     <button id="final_change_password_button">Change Password</button>
 </div>
 
-<div id="resize_photo_dialouge" class="card static_center hidden">
-    <div id="image_container">
+<div
+    id="resize_photo_dialouge"
+    class="card static_center hidden"
+    draggable="false"
+>
+    <div id="image_container" draggable="false">
         <img
             id="new_profile_image"
             alt="new-profile-image"
             class="noselect"
             draggable="false"
         />
+        <div id="image_dark_overlay" draggable="false"></div>
     </div>
     <div id="grab-area" draggable="false">
         <div id="box-scale-holder">
@@ -123,9 +128,11 @@
                 class="resize_anchor"
             ></div>
         </div>
-        <div id="resize_photo_box" draggable="false"></div>
+        <div id="resize_photo_box" draggable="false">
+            <div id="circle-display"></div>
         </div>
-    <button id="confirm_change">Confirm Change</button>
+    </div>
+    <button id="confirm_change" draggable="false">Confirm Change</button>
 </div>
 
 <img id="logo_image" alt="logo" src="/logo" />
@@ -248,10 +255,7 @@
         new_profile_image.style.setProperty("--x-offset", "0px");
         new_profile_image.style.setProperty("--y-offset", "0px");
 
-        x_dimension = max(bitmap.width, 360);
-        y_dimension = max(bitmap.height, 360);
-
-        smaller_dimension = min(x_dimension, y_dimension);
+        smaller_dimension = min(bitmap.width, bitmap.height);
         diff_to_350 = 360 / smaller_dimension;
 
         image_width = bitmap.width * diff_to_350;
@@ -260,6 +264,28 @@
         new_profile_image.style.setProperty("--x-size", image_width + "px");
         new_profile_image.style.setProperty("--y-size", image_height + "px");
 
+        image_dark_overlay.style.setProperty("--x-size", image_width + "px");
+        image_dark_overlay.style.setProperty("--y-size", image_height + "px");
+
+        image_dark_overlay.style.setProperty("--x-offset", "0px");
+        image_dark_overlay.style.setProperty("--y-offset", "0px");
+
+        bounds = calculateBoxBoundsOnImage({
+            x: 0,
+            y: 0,
+        });
+        image_dark_overlay.style.setProperty("--left-edge", bounds.left + "px");
+        image_dark_overlay.style.setProperty(
+            "--right-edge",
+            bounds.right + "px",
+        );
+
+        image_dark_overlay.style.setProperty("--top-edge", bounds.top + "px");
+        image_dark_overlay.style.setProperty(
+            "--bottom-edge",
+            bounds.bottom + "px",
+        );
+
         resize_photo_box.style.setProperty("--size", "350px");
     });
 

static/javascript/resize_photo_dialouge.js

@@ -1,4 +1,5 @@
 const resize_photo_box = document.getElementById("resize_photo_box");
+const image_dark_overlay = document.getElementById("image_dark_overlay");
 
 // Drag handling
 var startXOffset = 0,
@@ -22,14 +23,39 @@ function calculateOffsets() {
   return { x: xOffset + left + right, y: yOffset + top + bottom };
 }
 
+function calculateBoxBoundsOnImage(offsets) {
+  const x_overspill = image_width - 360;
+  const left_overspill = x_overspill / 2 - offsets.x;
+
+  const y_overspill = image_height - 360;
+  const top_overspill = y_overspill / 2 - offsets.y;
+
+  return {
+    left: left_overspill,
+    right: left_overspill + 360,
+    top: top_overspill,
+    bottom: top_overspill + 360,
+  };
+}
+
 var mouseClicked = false;
 resize_photo_box.addEventListener("mousemove", () => {
   if (!mouseClicked) return;
 
   offsets = calculateOffsets();
 
-  y_top = new_profile_image.style.setProperty("--x-offset", offsets.x + "px");
+  new_profile_image.style.setProperty("--x-offset", offsets.x + "px");
   new_profile_image.style.setProperty("--y-offset", offsets.y + "px");
+
+  image_dark_overlay.style.setProperty("--x-offset", offsets.x + "px");
+  image_dark_overlay.style.setProperty("--y-offset", offsets.y + "px");
+
+  bounds = calculateBoxBoundsOnImage(offsets);
+  image_dark_overlay.style.setProperty("--left-edge", bounds.left + "px");
+  image_dark_overlay.style.setProperty("--right-edge", bounds.right + "px");
+
+  image_dark_overlay.style.setProperty("--top-edge", bounds.top + "px");
+  image_dark_overlay.style.setProperty("--bottom-edge", bounds.bottom + "px");
 });
 
 resize_photo_box.addEventListener("mousedown", () => {

static/profile_page.css

@@ -156,6 +156,7 @@
 
 #image_container {
     position: absolute;
+    display: inline-block;
 }
 
 #darken_part {
@@ -178,6 +179,7 @@
     top: calc(350px / 2);
     width: var(--x-size);
     height: var(--y-size);
+    image-rendering: pixelated;
 }
 
 #grab-area {
@@ -251,3 +253,45 @@
     width: 360px;
     height: 360px;
 }
+
+#circle-display {
+    position: absolute;
+    width: calc(100% + 10px);
+    height: calc(100% + 10px);
+    transform: translateX(-5px) translateY(-5px);
+    transform: scale(10px);
+    background: radial-gradient(
+        circle closest-side,
+        transparent 99%,
+        rgba(0, 0, 0, 0.5) 100%
+    );
+    /*dispalt*/
+}
+
+#image_dark_overlay {
+    background-color: rgba(0, 0, 0, 0.5);
+    pointer-events: none;
+
+    z-index: 2;
+
+    transform: translateX(calc(-50% + var(--x-offset) + 5px))
+        translateY(calc(-50% + var(--y-offset) + 5px));
+    position: absolute;
+    left: calc(350px / 2);
+    top: calc(350px / 2);
+    width: var(--x-size);
+    height: var(--y-size);
+
+    clip-path: polygon(
+        0% 0%,
+        0% 100%,
+        var(--left-edge) 100%,
+        var(--left-edge) var(--top-edge),
+        var(--right-edge) var(--top-edge),
+        var(--right-edge) var(--bottom-edge),
+        var(--left-edge) var(--bottom-edge),
+        var(--left-edge) 100%,
+        100% 100%,
+        100% 0%
+    );
+}