[#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();