Working out EliteMatrix

package-lock.json

@@ -7,11 +7,12 @@
     "": {
       "name": "ed-safari",
       "version": "0.1.0",
-      "license": "MIT",
+      "license": "GPL-3.0-only",
       "dependencies": {
         "bootstrap": "^5.3.0-alpha3",
         "chokidar": "^3.5.3",
         "electron-squirrel-startup": "^1.0.0",
+        "elite-matrix": "^1.0.0",
         "glob": "^10.2.2",
         "lodash-es": "^4.17.21",
         "reverse-line-reader": "^0.2.6",
@@ -2889,6 +2890,11 @@
       "integrity": "sha512-seOA34WMo9KB+UA78qaJoCO20RJzZGVXQ5Sh6FWu0g/hfT44nKXnej3/tCQl7FL97idFpBhisLYCTB50S0EirA==",
       "dev": true
     },
+    "node_modules/elite-matrix": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/elite-matrix/-/elite-matrix-1.0.1.tgz",
+      "integrity": "sha512-xtq7vnO/HUAJmYy58oyLxVw8tcHde+MS2XodypORX1JgKSjN2TrYSdIV9hcS55ZBY/K2/vx+TwNfGSE59W07zA=="
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",

package.json

@@ -16,7 +16,7 @@
     "name": "punkfairie",
     "email": "marleyrae1997@gmail.com"
   },
-  "license": "MIT",
+  "license": "GPL-3.0-only",
   "browserslist": [
     "last 2 Chrome versions and not dead",
     "node 18"
@@ -43,6 +43,7 @@
     "bootstrap": "^5.3.0-alpha3",
     "chokidar": "^3.5.3",
     "electron-squirrel-startup": "^1.0.0",
+    "elite-matrix": "^1.0.0",
     "glob": "^10.2.2",
     "lodash-es": "^4.17.21",
     "reverse-line-reader": "^0.2.6",

src/assets/blend.ts

@@ -1,63 +0,0 @@
-/** @module blend */
-
-// https://www.30secondsofcode.org/js/s/weighted-average/
-function weightedAverage(numbers: number[], weights: number[]): number {
-    const [sum, weightSum] = weights.reduce(
-        (previous, current, index) => {
-            previous[0] = previous[0] + numbers[index] * current;
-            previous[1] = previous[1] + current;
-            return previous;
-        },
-        [0, 0]
-    );
-
-    return sum / weightSum;
-}
-
-type colorArray = [number, number, number];
-type colorObject = {red: number, green: number, blue: number};
-type color = colorArray | colorObject;
-
-/**
- *
- * @param {(number[]|{red: number, green: number, blue: number})} color1 - As array
- *     [red, green, blue], or object {red, green, blue}.
- * @param {(number[]|{red: number, green: number, blue: number})} color2
- * @param {number[]} [weights = [1, 1]] - Weight of each color, as a percentage of 1 (e.g. 0.7).
- * @returns {(number[]|{red: number, green: number, blue: number})} If both input colors are arrays,
- *     array is returned. Otherwise object is returned.
- */
-
-// https://dev.to/bytebodger/color-mixing-with-javascript-1llh
-export function blend(color1: color, color2: color, weights: [number, number] = [1, 1]): color {
-    const one = {
-        red: Array.isArray(color1) ? color1[0] : color1.red,
-        green: Array.isArray(color1) ? color1[1] : color1.green,
-        blue: Array.isArray(color1) ? color1[2] : color1.blue,
-    }
-    const two = {
-        red: Array.isArray(color2) ? color2[0] : color2.red,
-        green: Array.isArray(color2) ? color2[1] : color2.green,
-        blue: Array.isArray(color2) ? color2[2] : color2.blue,
-    }
-
-    const result = {
-        red: weightedAverage([one.red, two.red], weights),
-        green: weightedAverage([one.green, two.green], weights),
-        blue: weightedAverage([one.blue, two.blue], weights),
-    }
-
-    if (Array.isArray(color1) && Array.isArray(color2)) {
-        return [
-            result.red,
-            result.green,
-            result.blue,
-        ];
-    } else {
-        return {
-            red: result.red,
-            green: result.green,
-            blue: result.blue,
-        }
-    }
-}

src/renderer.js

@@ -5,13 +5,13 @@ import './icons/flaticon.css';
 import './assets/ldom.min';
 
 const { app, ipcRenderer } = require('electron');
+import { EliteMatrix } from 'elite-matrix';
 
 import { Safari } from './models/Safari';
 import { Settings } from './models/Settings';
 import { UI } from './models/UI';
 import { Body } from './models/Body';
 import { EDSM } from './models/EDSM';
-import { blend } from './assets/blend';
 
 // Grab app.isPackaged from main process
 let isPackaged = false;
@@ -131,6 +131,17 @@ edsm.on('SYSTEM_APPRAISED', (system) => {
     }
 });
 
-// const color = blend([245, 168, 4], [0, 0, 0], [0.4, 0.6]);
+
-// const rgb = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+// const matrixRed = [1.2, 0.05, 0.07];
-// $('body').css('--secondary-dark', rgb);
+// const matrixGreen = [0.13, 1, 1.18];
+// const matrixBlue = [0.4, 1.29, 2];
+
+// const matrix = new EliteMatrix(matrixRed, matrixGreen, matrixBlue);
+// const hex = matrix.filterColor('#f5a804');
+// const rgb = matrix.filterColor([245, 168, 4]);
+// console.log(`rgb(${rgb})`)
+// $('body').css('--main', `rgb(${rgb})`);
+// $('body').css('--accent-dark', matrix.filterColor('#000e5f'));
+// $('body').css('--accent-light', matrix.filterColor('#17cbd4'));
+// $('body').css('--secondary-light', matrix.filterColor('#EAA529'));
+// $('body').css('--secondary-dark', matrix.filterColor('#370C03'));