Re: [PATCH v2 11/11] feat(page): implement chat bubble message rendering

[Muhammad Rizki <kiizuha@gnuweeb.org>]

On 24/09/2023 02.26, Ammar Faizi wrote:
> On Sat, Sep 23, 2023 at 04:15:14PM +0700, Muhammad Rizki wrote:
>> +      function hashCode(name) {
>> +        var hash = 0;
>> +        for (var i = 0; i < name.length; i++) {
>> +            var character = name.charCodeAt(i);
>> +            hash = ((hash<<5)-hash)+character;
>> +            hash = hash & hash;
> 
> This is useless. `hash & hash` is always equal to `hash`. What are you even doing?

Yeah, didn't focus on that thing, I was copy & paste from the reference.

> 
>> +        }
>> +        return Math.abs(hash);
>> +      }
>> +
>> +      function getFixedRandomColor(name) {
>> +        const textColors = [
>> +          "text-red-400",      "text-yellow-400",
>> +          "text-blue-400",     "text-sky-400",
>> +          "text-purple-400",   "text-orange-400",
>> +          "text-amber-400",    "text-lime-400",
>> +          "text-green-400",    "text-emerald-400",
>> +          "text-teal-400",     "text-cyan-400",
>> +          "text-indigo-400",   "text-violet-400",
>> +          "text-fuchsia-400",  "text-pink-400",
>> +          "text-rose-400"
>> +        ];
>> +        const borderColors = [
>> +          "border-red-400",      "border-yellow-400",
>> +          "border-blue-400",     "border-sky-400",
>> +          "border-purple-400",   "border-orange-400",
>> +          "border-amber-400",    "border-lime-400",
>> +          "border-green-400",    "border-emerald-400",
>> +          "border-teal-400",     "border-cyan-400",
>> +          "border-indigo-400",   "border-violet-400",
>> +          "border-fuchsia-400",  "border-pink-400",
>> +          "border-rose-400"
>> +        ];
>> +
>> +        const indexColor = hashCode(name) % textColors.length;
>> +        return [ textColors[indexColor], borderColors[indexColor] ];
>> +      }
> 
> Don't repeat yourself (DRY). Simplify it like:
> ```
>    function getFixedRandomColor(name) {
>        const colors = [
>            "red", "yellow", "blue", "sky", "purple", "orange",
>            "amber", "lime", "green", "emerald", "teal", "cyan",
>            "indigo", "violet", "fuchsia", "pink", "rose"
>        ];
> 
>        const c = colors[hashCode(name) % colors.length];
>        return [
>           "text-" + c + "-400",
>           "border-" + c + "-400",
>        ];
>    }
> ```
> 
>    [ Untested, may contain a mistake, but you get the idea. ]
> 

Yeah, it worked. I tought this doesn't work because tailwind doesn't 
support dynamic class names, but this is worked so I will use this.