From 442ecc11bbc4d4e009f7b8b093f21c8644de5a97 Mon Sep 17 00:00:00 2001
From: Jeremy Knight <492328+jeremyknight-me@users.noreply.github.com>
Date: Tue, 1 Feb 2022 18:26:34 -0600
Subject: [PATCH] updated positioning math (assumed user will not change size
 once started) (#35)

---
 PhotoCollageWeb/Client/Pages/Index.razor |  2 ++
 PhotoCollageWeb/Client/wwwroot/js/app.js | 15 ++++++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/PhotoCollageWeb/Client/Pages/Index.razor b/PhotoCollageWeb/Client/Pages/Index.razor
index cc85d7b..986fda4 100644
--- 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
index c08dd88..9254649 100644
--- 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();
     }