updated positioning math (assumed user will not change size once star…

…ted) (#35)
jeremyknight-me · Feb 2, 2022 · 442ecc1 · 442ecc1
1 parent a08ee15
commit 442ecc1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/PhotoCollageWeb/Client/Pages/Index.razor b/PhotoCollageWeb/Client/Pages/Index.razor
@@ -6,5 +6,7 @@
     <NavLink class="start-button" href="collage">
         Start Collage
     </NavLink>
+
+    <p>For best results, do not resize window once collage has started.</p>
 </div>
 
diff --git a/PhotoCollageWeb/Client/wwwroot/js/app.js b/PhotoCollageWeb/Client/wwwroot/js/app.js
@@ -9,11 +9,13 @@
         }
 
         frame.style.zIndex = `${settings.index}`;
-        const positionTop = this.getRandomIntFromZeroToMax(100);
-        const positionLeft = this.getRandomIntFromZeroToMax(100);
-        const half = settings.maximumSize / 2;
-        frame.style.left = `calc(${positionLeft}vw - ${half}px)`;
-        frame.style.top = `calc(${positionTop}vh - ${half}px)`;
+        const tenPercent = settings.maximumSize * 0.1;
+        const boundedHeight = window.innerHeight + tenPercent - settings.maximumSize;
+        const boundedWidth = window.innerWidth + tenPercent - settings.maximumSize;
+        const positionTop = this.getRandomIntegerInclusive(-tenPercent, boundedHeight);
+        const positionLeft = this.getRandomIntegerInclusive(-tenPercent, boundedWidth);
+        frame.style.left = `${positionLeft}px`;
+        frame.style.top = `${positionTop}px`;
         const rotation = this.getRandomIntFromAbsoluteValue(settings.maximumRotation);
         frame.style.transform = `rotate(${rotation}deg)`;
 
@@ -50,6 +52,9 @@
         const maximum = max + 1;
         return Math.floor(Math.random() * maximum);
     },
+    getRandomIntegerInclusive: function (min, max) {
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    },
     handleRemovePhotoAnimationEnd: function (e) {
         e.target.remove();
     }