[Logger] Redo styling

src/util/logger.js

@@ -1,17 +1,30 @@
+// Color utils (from GEx1)
+const fromStr = (str) => str.replace('rgb(', '').replace(')', '').split(', ');
+const toStr = ([r, g, b]) => `rgb(${r}, ${g}, ${b})`;
+
+const light = (str, val) => toStr(fromStr(str).map((x) => x * val));
+
+
+const gmColor = '88, 101, 242'; // New blurple
+const regionColor = '114, 137, 218'; // Old blurple
+
+const makeRegionStyle = (color) => `background-color: rgb(${color}); color: white; border-radius: 4px; border: 2px solid ${light(color, 0.5)}; padding: 3px 6px 3px 6px; font-weight: bold;`;
+
+
 export const debug = (_region, ...args) => {
   const regions = _region.split('.');
 
   const regionStrings = regions.map(x => `%c${x}%c`);
   const regionStyling = regions.reduce((res) => 
-    res.concat('color: white; border: 2px solid white; background-color: rgb(0, 150, 0); border-radius: 4px; padding: 3px; margin-left: 2px;', '')
+    res.concat(makeRegionStyle(regionColor), '')
   , []);
 
-  console.log(`%c   ${regionStrings.join(' ')}`,
-    'font-size: 15px; background: url(https://goosemod.com/img/logo.jpg) no-repeat; background-size: contain; padding: 2px;',
+  console.log(`%cGooseMod%c ${regionStrings.join(' ')}`,
+    makeRegionStyle(gmColor),
+    '',
 
     ...regionStyling,
     
     ...args
   );
-  // console.log(`%cGooseMod%c %c${region}`, 'border: 1px solid white; padding: 2px; background-color: black; color: white', 'background-color: none', `border: 1px solid white; padding: 2px; background-color: rgb(100, 0, 0); color: white`, ...(args));
 };