refactor: function randomColor returns array (#691)

* refactor: function randomColor and function getContrastingPair

Instead of returning string which will be subjected to number extract via regex we just return array of three numbers.
We use string interpolation inside function getContrastingPair when string is needed.

Change from while loop to for loop in function getContrastingPair.
This function has a potential to enter an infinite loop if it consistently fails to find a pair of colors with sufficient
contrast. This could freeze the user's browser. I'd suggest refactoring it to use a for loop with a maximum
number of attempts and a fallback to a default high-contrast pair. This makes the code more robust and also
simplifies the logic by removing the need for the valid flag. (gemini cost assist)

* Update frontend/assets/scripts/script.js

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

---------

Co-authored-by: John Bampton <[email protected]>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: 3 people

frontend/assets/scripts/script.js

@@ -63,15 +63,15 @@ function getCurrentYear() {
 }
 
 /**
- * Generates a random RGB color string.
- * Example output: "rgb(123, 45, 200)".
- * @returns {string} Randomly generated RGB color.
+ * Generates random RGB color components as an array of numbers.
+ * Example output: [123, 45, 200].
+ * @returns {[number, number, number]} Randomly generated RGB color.
  */
 function randomColor() {
 	const red = Math.floor(Math.random() * 256);
 	const green = Math.floor(Math.random() * 256);
 	const blue = Math.floor(Math.random() * 256);
-	return `rgb(${red}, ${green}, ${blue})`;
+	return [red, green, blue];
 }
 
 /**
@@ -110,27 +110,25 @@ function resetThemeOverrides() {
  * @returns {[string, string]} A pair of contrasting RGB colors.
  */
 function getContrastingPair() {
-	let color1 = randomColor();
-	let color2 = randomColor();
-	let contrast = 0;
-	let valid = false;
-
-	while (!valid) {
-		const [r1, g1, b1] = color1.match(/\d+/g).map(Number);
-		const [r2, g2, b2] = color2.match(/\d+/g).map(Number);
+	const MAX_ATTEMPTS = 100;
+	for (let i = 0; i < MAX_ATTEMPTS; i++) {
+		const [r1, g1, b1] = randomColor();
+		const [r2, g2, b2] = randomColor();
+
 		const lum1 = luminance(r1, g1, b1);
 		const lum2 = luminance(r2, g2, b2);
 
-		contrast = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+		const contrast = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+
 		if (contrast > 4.5) {
-			valid = true;
-		} else {
-			color1 = randomColor();
-			color2 = randomColor();
+			const color1 = `rgb(${r1}, ${g1}, ${b1})`;
+			const color2 = `rgb(${r2}, ${g2}, ${b2})`;
+			return [color1, color2];
 		}
 	}
 
-	return [color1, color2];
+	// Fallback to a default high-contrast pair if no suitable pair is found.
+	return ['rgb(255, 255, 255)', 'rgb(0, 0, 0)'];
 }
 
 /**