chore: adds multi color pencil support

Author: vivek9patel

src/components/IDE.js

@@ -38,6 +38,7 @@ export default function IDE({ docId, modal, toggleModal, python, setpython, inpu
     const colorsRef = useRef(null);
     const [userId, setUserId] = useState(null);
     const [myvideoon, setMyvideoon] = useState(true);
+    const [pencilColor, setPencilColor] = useState('#000000');
 
 
     useEffect(() => {
@@ -338,36 +339,58 @@ export default function IDE({ docId, modal, toggleModal, python, setpython, inpu
     }, [socket])
 
 
+    useEffect(() => {
+        if (socket === null) return;
+        console.log("in");
+        socket.emit('pencil-color-change', pencilColor);
+        socket.on('pencil-color-change', (color) => {
+            console.log(color);
+            setPencilColor(color);
+        })
+    }, [pencilColor]);
+
     useEffect(() => {
 
 
         if (socket === null || colorsRef === null) return;
         const canvas = document.getElementById('whiteboard-canvas')
         const context = canvas.getContext('2d');
+        const colorPicker = document.getElementById('pencil-color-picker');
 
         const colors = document.getElementsByClassName('color');
         // console.log(colors, 'the colors');
         // console.log(test);
         const current = {
-            color: 'black',
+            color: '#000000',
             width: 5,
         };
 
         const onColorUpdate = (e) => {
             let objectColor;
             for (let i = 0; i < e.path.length; i++) {
                 if (e.path[i].dataset.color) {
-                    objectColor = e.path[i].dataset.color;
+                    if (e.path[i].dataset.color === "white") objectColor = "#ffffff"
+                    else objectColor = pencilColor;
                     break;
                 }
             }
             current.color = objectColor;
-            if (current.color === 'black') current.width = 5;
+            if (current.color !== '#ffffff') current.width = 5;
             else current.width = 25;
         };
 
+        const onPencilColorChange = (e) => {
+            setPencilColor(e.target.value);
+            current.color = e.target.value;
+            if (current.color !== '#ffffff') current.width = 5;
+            else current.width = 25;
+        }
+
         for (let i = 0; i < colors.length; i++) {
+            colors[i].removeEventListener('click', onColorUpdate);
+            colorPicker.removeEventListener('change', onPencilColorChange);
             colors[i].addEventListener('click', onColorUpdate, false);
+            colorPicker.addEventListener('change', onPencilColorChange, false);
         }
         let drawing = false;
 
@@ -392,7 +415,7 @@ export default function IDE({ docId, modal, toggleModal, python, setpython, inpu
                 y0: y0 / h,
                 x1: x1 / w,
                 y1: y1 / h,
-                color,
+                pencilColor,
                 width
             });
         };
@@ -562,6 +585,8 @@ export default function IDE({ docId, modal, toggleModal, python, setpython, inpu
                                 <div ref={colorsRef} className="colors absolute flex select-none left-10 top-10">
                                     <Icon icon={penFill} data-color="black" className="block cursor-pointer color black text-orange-standard" height="28" />
                                     <Icon icon={eraser24Filled} data-color="white" className="block cursor-pointer color white ml-4" height="30" />
+                                    {/* color picker input element */}
+                                    <input type="color" className="" id="pencil-color-picker" />
                                 </div>
                                 <div className="absolute right-10 select-none top-10">
                                     <img onClick={toggleModal} src={closeIcon} className="w-6 cursor-pointer" alt="close icon" />