Blend function.

src/assets/blend.ts

@@ -0,0 +1,63 @@
+/** @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/assets/index.css

@@ -14,8 +14,9 @@
     --accent-dark: #0026FF;
     --accent-light: #17EFF9;
 
-    --secondary-text: #EAA529;
-    --secondary-bg: #370C03;
+    --secondary-light: #EAA529;
+    --secondary-dark: #370C03;
+    /* --secondary-bg: color-mix(in srbg, black, var(--main)); */
 
     --grey-text: #9f9f9f;
     --grey-bg: #333333;
@@ -50,16 +51,16 @@ body {
     background: var(--grey-bg);
 }
 .uncharted {
-    color: var(--secondary-text);
-    background: var(--secondary-bg);
+    color: var(--secondary-light);
+    background: var(--secondary-dark);
 }
 
 .hyperspace {
     color: var(--accent-dark);
 }
 .statusInfo {
-    color: var(--secondary-text);
-    background: var(--secondary-bg);
+    color: var(--secondary-light);
+    background: var(--secondary-dark);
 }
 .inactive {
     color: var(--background);
@@ -85,10 +86,10 @@ div.highlighted b.inactive {
     color: var(--main);
 }
 div.uncharted b.active {
-    color: var(--secondary-text);
+    color: var(--secondary-light);
 }
 div.uncharted b.inactive {
-    color: var(--secondary-bg);
+    color: var(--secondary-dark);
 }
 div.charted b.active {
     color: var(--grey-text);
@@ -98,7 +99,7 @@ div.charted b.inactive {
 }
 
 .highlighted {
-    color: var(--secondary-bg);
+    color: var(--secondary-dark);
     background: var(--main);
 }
 

src/models/UI.js

@@ -159,7 +159,7 @@ export class UI {
         const row = $('<div>').addClass('row ms-1 me-1');
         row.attr('id', system.SystemAddress);
         // This is probably still the default 'true' value, but check in case the fetch() was quick.
-        const chartedStyle = system.charted ? 'charted' : 'uncharted';
+        const chartedStyle = system.charted ? 'uncharted' : 'uncharted';
 
         // name
         const name = $('<div>').addClass(`col system ${chartedStyle}`);