53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
type RGB = [number, number, number];
|
|
|
|
const grey: RGB = [237, 242, 246]; // grey-200
|
|
const red: RGB = [221, 103, 81]; // red-600
|
|
const yellow: RGB = [250, 200, 82]; // yellow-500
|
|
const lightGreen: RGB = [120, 222, 163]; // green-500
|
|
const darkGreen: RGB = [91, 183, 130]; // green-600
|
|
|
|
const blendColorValue = (v1: number, v2: number, weight: number): number => {
|
|
return v1 * (1 - weight) + v2 * weight;
|
|
};
|
|
|
|
const blendColors = (c1: RGB, c2: RGB, weight: number): RGB => {
|
|
const [r1, g1, b1] = c1;
|
|
const [r2, g2, b2] = c2;
|
|
return [
|
|
blendColorValue(r1, r2, weight),
|
|
blendColorValue(g1, g2, weight),
|
|
blendColorValue(b1, b2, weight),
|
|
];
|
|
};
|
|
|
|
const getRGBString = (color: RGB): string => {
|
|
const [r, g, b] = color;
|
|
return `rgb(${Math.floor(r)}, ${Math.floor(g)}, ${Math.floor(b)})`;
|
|
};
|
|
|
|
export const getBlendedColorForRating = (rating: number): string => {
|
|
const scale = Math.floor(rating);
|
|
const weight = rating % 1;
|
|
let colors: [RGB, RGB];
|
|
|
|
switch (scale) {
|
|
case 0:
|
|
return getRGBString(grey);
|
|
case 1:
|
|
colors = [red, yellow];
|
|
break;
|
|
case 2:
|
|
colors = [yellow, lightGreen];
|
|
break;
|
|
case 3:
|
|
colors = [lightGreen, darkGreen];
|
|
break;
|
|
case 4:
|
|
default:
|
|
return getRGBString(darkGreen);
|
|
}
|
|
|
|
const blendedColor = blendColors(colors[0], colors[1], weight);
|
|
return getRGBString(blendedColor);
|
|
};
|