refactor: move magic numbers into config

.gitignore

@@ -1,5 +1,4 @@
 .idea
-config.js
 .DS_Store
 background/endpointAnalysis.js
 sandbox/

scripts/background/messageHandler.js

@@ -60,7 +60,7 @@ function MessageHandler() {
         method: 'GET',
         headers: {'x-click-and-roll': 'true'},
         cache: false,
-        timeout: 10000
+        timeout: config.networkTimeout
       })
   };
 
@@ -93,7 +93,7 @@ function MessageHandler() {
           this.utils.saveToLocalStorage('cache-records', []);
           return [];
         }
-        return cacheRecords.length >= 100 ? this.cleanCache(cacheRecords) : cacheRecords;
+        return cacheRecords.length >= config.maxCachedPlayers ? this.cleanCache(cacheRecords) : cacheRecords;
       });
   };
 
@@ -106,7 +106,7 @@ function MessageHandler() {
 
   this.statsInCacheAndCurrent = (cacheRecords, id) => {
     const player = cacheRecords.filter(player => player.id === id)[0] || null;
-    return player !== null && (!player.active || Date.now() - player.timestamp < (3 * 60 * 60 * 1000));
+    return player !== null && (!player.active || Date.now() - player.timestamp < (config.playerUpdateInterval));
   };
 
   this.fetchNonCachedStats = (id) => {
@@ -138,7 +138,7 @@ function MessageHandler() {
     return this.utils.getFromLocalStorage('timestamp')
       .then(timestamp => {
         return new Promise(resolve => {
-          const timeout = Math.max(0, 1000 - (Date.now() - timestamp));
+          const timeout = Math.max(0, config.requestRateLimit - (Date.now() - timestamp));
           setTimeout(resolve, timeout);
         });
       });
@@ -287,14 +287,14 @@ function MessageHandler() {
 
   this.formatHeight = (height) => {
     if (height) {
-      const metricHeight = Math.round(height[0] * 30.48 + height.substring(2) * 2.54);
+      const metricHeight = Math.round(height[0] * config.cmPerFeet + height.substring(2) * config.cmPerInch);
       return `${height} (${Math.floor(metricHeight / 100)}.${(metricHeight % 100).toString().padStart(2, '0')} m)`;
     }
     return 'n/a';
   };
 
   this.formatWeight = (weight) => {
-    return weight ? `${weight} lb (${Math.round(weight * 0.45359237)} kg)` : 'n/a';
+    return weight ? `${weight} lb (${Math.round(weight * config.kgPerLb)} kg)` : 'n/a';
   };
 
   this.getPlayerImageUrl = (fullName) => {

scripts/content/clickAndRoll.js

@@ -77,7 +77,7 @@ function ClickAndRoll() {
         return this.utils.getFromLocalStorage('players');
       })
       .then(players => {
-        const playersUpdatedWithin24Hours = Date.now() - lastUpdated < (24 * 60 * 60 * 1000);
+        const playersUpdatedWithin24Hours = Date.now() - lastUpdated < (config.playersUpdateInterval);
         if (players && playersUpdatedWithin24Hours) return Promise.resolve(players);
         return this.utils.sendRuntimeMessage({message: 'fetchPlayers'})
       })
@@ -114,7 +114,7 @@ function ClickAndRoll() {
   };
 
   this.handleMouseEnter = (mouseEnterEvent) => {
-    this.hoverTimer = setTimeout(() => this.handleHover(mouseEnterEvent), 500);
+    this.hoverTimer = setTimeout(() => this.handleHover(mouseEnterEvent), config.hoverTimeout);
   };
 
   this.handleMouseLeave = () => {
@@ -228,7 +228,7 @@ function ClickAndRoll() {
     // 2 pixel left offset to accommodate box shadow of frame's inner elements
     const overlayLeft = this.activeName.isInLeftHalf
       ? rect.left + scrollX - 2
-      : rect.left + scrollX - 2 - this.getHalfViewWidth() + rect.width + Math.max(this.getHalfViewWidth() - 800, 0);
+      : rect.left + scrollX - 2 - this.getHalfViewWidth() + rect.width + Math.max(this.getHalfViewWidth() - config.maxFrameContainerWidth, 0);
 
     const overlayTop = this.activeName.isInTopHalf
       ? rect.top + scrollY + rect.height
@@ -301,9 +301,8 @@ function ClickAndRoll() {
 
   this.checkContentHeight = () => {
     const frameContent = this.getFrameDocument().getElementById('content');
-    const playerHeaderHeight = 37;
 
-    if (frameContent.scrollHeight + playerHeaderHeight < (this.getHalfViewHeight()) - 2) {
+    if (frameContent.scrollHeight + config.playerHeaderHeight < (this.getHalfViewHeight()) - 2) {
       frameContent.classList.add('short-career');
     }
   };

scripts/utils/config.js

@@ -0,0 +1,14 @@
+const config = {
+  cmPerFeet: 30.48,
+  cmPerInch: 2.54,
+  defaultOffSettings: ['reverse'],
+  hoverTimeout: 500,
+  kgPerLb: 0.45359237,
+  maxCachedPlayers: 100,
+  maxFrameContainerWidth: 825,
+  networkTimeout: 10 * 1000,
+  playerHeaderHeight: 37,
+  playerUpdateInterval: 3 * 60 * 60 * 1000,
+  playersUpdateInterval: 24 * 60 * 60 * 1000,
+  requestRateLimit: 1000
+};

view/page.css

@@ -1,6 +1,6 @@
 #click-and-roll-frame-container {
   height: calc(50vh + 2px);
-  max-width: 800px;
+  max-width: 825px;
   position: absolute;
   width: calc(50vw + 2px);
   z-index: 2147483647;