From 37367f2d224e106e5b364fa6cb131b46af0a6c6b Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 8 Apr 2024 17:49:42 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(app-impress)=20different=20color?=
 =?UTF-8?q?=20per=20user?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We generate a color for each user.
This color is used to highlight the
user's cursor and selection.
---
 .../pads/pad/components/BlockNoteEditor.tsx   |  3 ++-
 .../impress/src/features/pads/pad/utils.ts    | 24 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/apps/impress/src/features/pads/pad/utils.ts

diff --git a/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx
index 422b346a..9ec60d23 100644
--- a/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx
@@ -6,6 +6,7 @@ import { useAuthStore } from '@/core/auth';
 
 import { PadStore, usePadStore } from '../store';
 import { Pad } from '../types';
+import { randomColor } from '../utils';
 
 interface BlockNoteEditorProps {
   pad: Pad;
@@ -32,7 +33,7 @@ export const BlockNoteEditor = ({ pad }: BlockNoteEditorProps) => {
       fragment: provider.doc.getXmlFragment('document-store'),
       user: {
         name: userData?.name || userData?.email || 'Anonymous',
-        color: '#ff0000',
+        color: randomColor(),
       },
     },
   });
diff --git a/src/frontend/apps/impress/src/features/pads/pad/utils.ts b/src/frontend/apps/impress/src/features/pads/pad/utils.ts
new file mode 100644
index 00000000..325a2304
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/pads/pad/utils.ts
@@ -0,0 +1,24 @@
+export const randomColor = () => {
+  const randomInt = (min: number, max: number) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  };
+
+  const h = randomInt(0, 360); // hue
+  const s = randomInt(42, 98); // saturation
+  const l = randomInt(70, 90); // lightness
+
+  return hslToHex(h, s, l);
+};
+
+function hslToHex(h: number, s: number, l: number) {
+  l /= 100;
+  const a = (s * Math.min(l, 1 - l)) / 100;
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}