circle is ratio-sensitive now!

quickdraw-game.html

@@ -37,6 +37,7 @@
 
         <script>
 
+            const gameBorderWidth = 1;
             const targetWidth = 20;
             const targetHeight = 20;
 
@@ -44,8 +45,8 @@
             let pageHeight = window.innerHeight;
 
             const frameElement = document.getElementById("frame");
-            let frameHeight = frameElement.offsetHeight - targetHeight;
-            let frameWidth = frameElement.offsetWidth - targetWidth;
+            let frameHeight = frameElement.offsetHeight;
+            let frameWidth = frameElement.offsetWidth;
             
             let target;
 
@@ -53,21 +54,29 @@
             window.addEventListener("resize", (e) => {
                 this.pageWidth = window.innerWidth;
                 this.pageHeight = window.innerHeight;
-                this.frameHeight = frameElement.offsetHeight;
-                this.frameWidth = frameElement.offsetWidth;
+                this.frameHeight = frameElement.offsetHeight - targetHeight;
+                this.frameWidth = frameElement.offsetWidth - targetWidth;
                 console.log('page: ' + this.pageWidth + ' x ' + this.pageHeight);
                 console.log('frame: ' + this.frameWidth + ' x ' + this.frameHeight);
             });
 
             let k, r, x, y;
             let radians;
+
+            let ratio = frameHeight / frameWidth;
+
+            let xFrameAdjustment = ((pageWidth - frameWidth) * 2) - (targetWidth / 2);
+            let yFrameAdjustment = (frameHeight / 2) - (targetWidth / 2);
+
+            generateTarget(xFrameAdjustment, yFrameAdjustment)
+
             for (let i = 0; i < 360; i++) {
-              r = frameWidth / 2;
+              r = (frameWidth / 2) - (targetWidth / 2);
 
               radians = degreesToRadians(i);
 
-              x = r * Math.cos(i);
-              y = r * Math.sin(i);
+              x = ((r * 1 * Math.cos(radians)) + xFrameAdjustment);
+              y = ((r * ratio * Math.sin(radians)) + yFrameAdjustment);
               console.log(x + ', ' + y);
 
               generateTarget(x, y);
@@ -78,8 +87,6 @@
             console.log('frame: ' + frameWidth + ' x ' + frameHeight);
 
 
-            
-
             function degreesToRadians(degrees) {
               return degrees * (Math.PI / 180)
             }