refactor: extract responsive breakpoint widths into constants (#5018)

* refactor: extract responsive breakpoint widths into constants

- Add BREAKPOINT_TABLET (768px) and BREAKPOINT_MOBILE (600px) constants
- Replace 5 hardcoded breakpoint values with named constants
- Improves code maintainability and prevents magic numbers

Affected lines: 769, 776, 787, 794, 856 in js/activity.js

* changing to a much verbose variable name

Author: zealot-zew

js/activity.js

@@ -54,6 +54,10 @@ const _THIS_IS_TURTLE_BLOCKS_ = !_THIS_IS_MUSIC_BLOCKS_;
 const _ERRORMSGTIMEOUT_ = 15000;
 const _MSGTIMEOUT_ = 60000;
 
+// Responsive breakpoint constants
+const RESPONSIVE_BREAKPOINT_TABLET = 768;
+const RESPONSIVE_BREAKPOINT_MOBILE = 600;
+
 let MYDEFINES = [
     "utils/platformstyle",
     "easeljs.min",
@@ -765,14 +769,20 @@ class Activity {
                     };
                 }
 
-                if (canvasWidth < 768 && !referenceBlock.beforeMobilePosition) {
+                if (
+                    canvasWidth < RESPONSIVE_BREAKPOINT_TABLET &&
+                    !referenceBlock.beforeMobilePosition
+                ) {
                     referenceBlock.beforeMobilePosition = {
                         x: referenceBlock.container.x,
                         y: referenceBlock.container.y
                     };
                 }
 
-                if (canvasWidth >= 768 && referenceBlock.beforeMobilePosition) {
+                if (
+                    canvasWidth >= RESPONSIVE_BREAKPOINT_TABLET &&
+                    referenceBlock.beforeMobilePosition
+                ) {
                     const dx = referenceBlock.beforeMobilePosition.x - referenceBlock.container.x;
                     const dy = referenceBlock.beforeMobilePosition.y - referenceBlock.container.y;
                     group.forEach(blockId => {
@@ -784,14 +794,20 @@ class Activity {
                     //this prevents old groups from affecting new calculations.
                 }
 
-                if (canvasWidth < 600 && !referenceBlock.before600pxPosition) {
+                if (
+                    canvasWidth < RESPONSIVE_BREAKPOINT_MOBILE &&
+                    !referenceBlock.before600pxPosition
+                ) {
                     referenceBlock.before600pxPosition = {
                         x: referenceBlock.container.x,
                         y: referenceBlock.container.y
                     };
                 }
 
-                if (canvasWidth >= 600 && referenceBlock.before600pxPosition) {
+                if (
+                    canvasWidth >= RESPONSIVE_BREAKPOINT_MOBILE &&
+                    referenceBlock.before600pxPosition
+                ) {
                     const dx = referenceBlock.before600pxPosition.x - referenceBlock.container.x;
                     const dy = referenceBlock.before600pxPosition.y - referenceBlock.container.y;
 
@@ -855,7 +871,7 @@ class Activity {
             this.blocksContainer.y = 0;
 
             const screenWidth = window.innerWidth;
-            const isNarrowScreen = screenWidth < 600;
+            const isNarrowScreen = screenWidth < RESPONSIVE_BREAKPOINT_MOBILE;
             const minColumnWidth = 400;
             const numColumns = isNarrowScreen ? 1 : Math.floor(screenWidth / minColumnWidth);