implemented basic client-server communication

html/index.html

@@ -14,6 +14,7 @@
         <canvas hidden id="hidden" width="1920" height="1080" style="border:1px solid #000000;" display="block">
         </canvas>
         <script>
+        const socket = new WebSocket("ws://localhost:7865");
         var canvas = document.getElementById("board");
         var colorInput = document.getElementById("color");
         var canvasHidden = document.getElementById("hidden");
@@ -25,13 +26,38 @@
         canvasHidden.width = 1920;
         canvasHidden.height = 1080;
         var imgData = ctx2.createImageData(canvasHidden.width, canvasHidden.height)
-        imgData.data.fill(255);
+        // imgData.data.fill(255);
         
-        // All the code that is making zooms and moving around cavnas is made with big help of http://phrogz.net/tmp/canvas_zoom_to_cursor.html. Thanks alot!
-        window.onload = function() {
-            var ctx = canvas.getContext("2d");
-            trackTransforms(ctx);
-            function redraw(x ,y) {
+        function drawPixel(x, y, color) {
+                let pixelNumber;
+                if (y > 0)
+                    pixelNumber = (y) * canvas.width + x
+                if (y == 0)
+                    pixelNumber = x 
+                if (color == undefined) {
+                    let rgbColor = hexToRgb(currentColor);
+                    for (let l = 0; l < 4; l ++)
+                        for (let l = 0; l < 5; l ++){
+                            imgData.data[pixelNumber + 0] = rgbColor.r;
+                            imgData.data[pixelNumber + 1] = rgbColor.g;
+                            imgData.data[pixelNumber + 2] = rgbColor.b;
+                            imgData.data[pixelNumber + 3] = 255;
+                        }
+
+                    redraw();
+                } else {
+                    for (let l = 0; l < 4; l ++)
+                        for (let l = 0; l < 5; l ++){
+                            imgData.data[pixelNumber + 0] = color.r;
+                            imgData.data[pixelNumber + 1] = color.g;
+                            imgData.data[pixelNumber + 2] = color.b;
+                            imgData.data[pixelNumber + 3] = 255;
+                        }
+          
+                }
+            }
+
+        function redraw() {
                 ctx.save();
                 ctx.setTransform(1,0,0,1,0,0);
                 ctx.clearRect(0,0,canvas.width,canvas.height);
@@ -42,23 +68,46 @@
                 ctx.imageSmoothingEnabled = false
             }
 
-            function drawPixel(x, y) {
-                let pixelNumber;
-                if (y > 0)
-                    pixelNumber = (y) * canvas.width + x
-                if (y == 0)
-                    pixelNumber = x 
-                
-                let rgbColor = hexToRgb(currentColor);
-                for (let l = 0; l < 5; l ++){
-                    imgData.data[pixelNumber + 0] = rgbColor.r;
-                    imgData.data[pixelNumber + 1] = rgbColor.g;
-                    imgData.data[pixelNumber + 2] = rgbColor.b;
-                    imgData.data[pixelNumber + 3] = 255;
-                }
+        socket.addEventListener("open", (event) => {
+            socket.send("{\"code\":0}");
+        });
 
-                redraw();
-            }
+        socket.addEventListener("message", (event) => {
+            // console.log("Message from server ", JSON.stringify(event.data.toString()));
+            event.data.text().then(function(packet){
+                packet = JSON.parse(packet)
+                let code = packet.code
+                let content = packet.content
+                switch (code){
+                    case 0:
+                        //Ineffective way to do that, fix that later ;)
+                        let converted = Uint8ClampedArray.from(content)
+                        for (let i = 0; i < imgData.data.length; i ++)
+                            imgData.data[i] = converted[i]
+                        redraw();
+                    break;
+                    case 1:
+                        contentJson = JSON.parse(content);
+                        let color = {
+                            r: contentJson.r,
+                            g: contentJson.g,
+                            b: contentJson.b
+                        }
+                        
+                        drawPixel(contentJson.x * 4, contentJson.y * 4, color)
+                        redraw();
+                    break;
+                }
+            });
+        });
+
+        // All the code that is making zooms and moving around cavnas is made with big help of http://phrogz.net/tmp/canvas_zoom_to_cursor.html. Thanks alot!
+        window.onload = function() {
+            var ctx = canvas.getContext("2d");
+            trackTransforms(ctx);
+            
+
+            
 
             redraw();
 
@@ -110,17 +159,29 @@
                             b: imgData.data[pixelNumber + 2]
                         };
 
-                        console.log(`${rgbToHex(color.r, color.g, color.b)}`)
-                        changeColor(rgbToHex(
-                            color.r, color.g, color.b
-                        ));
+                        changeColor(rgbToHex(color.r, color.g, color.b));
                     }
                 } else if (evt.button == 0) {
-                    for (let l = 0; l < 4; l ++)
-                        drawPixel(
-                            Math.floor(ctx.transformedPoint(lastX,lastY).x) * 4, 
-                            Math.floor(ctx.transformedPoint(lastX,lastY).y) * 4
-                        );
+                    let point = {
+                            x: Math.floor(ctx.transformedPoint(lastX,lastY).x) * 4,
+                            y: Math.floor(ctx.transformedPoint(lastX,lastY).y) * 4,
+                        };
+                        let rgbColor = hexToRgb(currentColor);
+                        let pixel = JSON.stringify({
+                            "x": `${point.x/4}`,
+                            "y": `${point.y/4}`,
+                            "r": `${rgbColor.r}`,
+                            "g": `${rgbColor.g}`,
+                            "b": `${rgbColor.b}`
+                        });
+                        let packet = {
+                            "code": 1,
+                            "content": pixel
+                        }
+                        socket.send(JSON.stringify(packet));
+                        // console.log(`{\"code\":1, \"content\":${pixel}}`)
+
+                        drawPixel(point.x, point.y, undefined);
                 }
             },false);
           
@@ -143,9 +204,13 @@
             canvas.addEventListener('mousewheel',handleScroll,false);
         };
         
-        function changeColor() {
-
-            
+        function evaulatePixelNumber(x, y) {   
+            let pixelNumber;
+            if (y > 0)
+                pixelNumber = (y) * canvas.width + x
+            if (y == 0)
+                pixelNumber = x
+            return pixelNumber
         }
         function changeColor(color) {
             if (color == undefined) currentColor = colorInput.value;