[#1936] Migrate random-color-gen.js to typescript (#2043)

Currently, there is still some JavaScript code which remains unmigrated.
This allows for type unsafe code to be written, potentially resulting in
unintended behavior.

Let's migrate random-color-generator.js JavaScript code to TypeScript
code to facilitate future changes to the code.

frontend/package.json

@@ -20,6 +20,7 @@
  "@fortawesome/free-solid-svg-icons": "^6.0.0",
  "@fortawesome/vue-fontawesome": "^3.0.3",
  "@types/minimatch": "^5.1.2",
+ "@types/seedrandom": "^3.0.5",
  "core-js": "^3.6.5",
  "highlight.js": "^10.5.0",
  "jszip": "^3.5.0",

frontend/src/utils/random-color-generator.js → frontend/src/utils/random-color-generator.ts

@@ -8,7 +8,7 @@ function getRandomHex() {
  return `#${Math.round(randomGenerator() * maxHexColorValue + 1).toString(16).padStart(6, '0')}`;
 }
 
-function rgb2lab(rgb) {
+function rgb2lab(rgb: number[]) {
  let r = rgb[0] / 255;
  let g = rgb[1] / 255;
  let b = rgb[2] / 255;
@@ -29,7 +29,7 @@ function rgb2lab(rgb) {
 
 // this delta E (perceptual color distance) implementation taken from @antimatter15 from
 // github: https://github.com/antimatter15/rgb-lab
-function deltaE(rgbA, rgbB) {
+function deltaE(rgbA: number[], rgbB: number[]) {
  const labA = rgb2lab(rgbA);
  const labB = rgb2lab(rgbB);
  const deltaL = labA[0] - labB[0];
@@ -49,7 +49,7 @@ function deltaE(rgbA, rgbB) {
  return distance < 0 ? 0 : Math.sqrt(distance);
 }
 
-function hasSimilarExistingColors(existingColors, newHex) {
+function hasSimilarExistingColors(existingColors: string[], newHex: string) {
  const deltaEThreshold = 11;
  // the lower limit of delta E to be similar, more info at http://zschuessler.github.io/DeltaE/learn/
  return existingColors.some((existingHex) => {
@@ -59,7 +59,7 @@ function hasSimilarExistingColors(existingColors, newHex) {
  });
 }
 
-function getNonRepeatingColor(existingColors) {
+function getNonRepeatingColor(existingColors: string[]) {
  let generatedHex = getRandomHex();
  while (hasSimilarExistingColors(existingColors, generatedHex)) {
  generatedHex = getRandomHex();