From 7a1537ddfa2bc095d39ec8b43a47b8bd32170e21 Mon Sep 17 00:00:00 2001
From: leca <leca@foxarmy.org>
Date: Mon, 31 Jul 2023 16:47:36 +0300
Subject: [PATCH] fixed and added a lot of things

---
 index.html | 243 +++++++++++++++++++++++++++++++++++------------------
 1 file changed, 162 insertions(+), 81 deletions(-)
diff --git a/index.html b/index.html
index 0bd49cf..3a9d6e0 100644
--- a/index.html
+++ b/index.html
@@ -3,22 +3,30 @@
     <head>
         <title>Pixel Battle</title>
         <meta charset="UTF-8">
-
     </head>
     <body>
+        <p>
+            <input type="color" id="color" />
+            <input type="button" id="submitColor" value="change color"  onclick="changeColor()"/>
+        </p>
         <canvas id="board" width="1920" height="1080" style="border:1px solid #000000;" display="block">
+        </canvas>
         <canvas hidden id="hidden" width="1920" height="1080" style="border:1px solid #000000;" display="block">
-
         </canvas>
         <script>
         var canvas = document.getElementById("board");
+        var colorInput = document.getElementById("color");
         var canvasHidden = document.getElementById("hidden");
         var ctx = canvas.getContext("2d");
         var ctx2 = canvasHidden.getContext("2d");
+        var currentColor = "#000000"
         canvas.width = 1920;
         canvas.height = 1080;
+        canvasHidden.width = 1920;
+        canvasHidden.height = 1080;
         var imgData = ctx2.createImageData(canvasHidden.width, canvasHidden.height)
-
+        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");
@@ -28,20 +36,30 @@
                 ctx.setTransform(1,0,0,1,0,0);
                 ctx.clearRect(0,0,canvas.width,canvas.height);
                 ctx.restore();
-                for (let i = 0; i < 1000; i += 4) {
-                    imgData.data[i+0] = 255;
-                    imgData.data[i+1] = 0;
-                    imgData.data[i+2] = 0;
-                    imgData.data[i+3] = 255;
-                }
-                ctx2.putImageData(imgData, 10, 50);
+
+                ctx2.putImageData(imgData, 0, 0);
                 ctx.drawImage(canvasHidden, 0, 0)
+                ctx.imageSmoothingEnabled = false
             }
 
-            function drawPixel(x, y, color) {
-                let pixelNumber = y * canvas.width + x // THIS IS NOT CORRECT. MUST BE FIXED
-                for (let i = 0; i < 4; i ++) 
-                    imgData.data[pixelNumber+i] = color[i]
+            function drawPixel(x, y) {
+                let pixelNumber;
+                if (y > 0)
+                    pixelNumber = (y) * canvas.width + x
+                if (y == 0)
+                    pixelNumber = x 
+                
+                // for (let l = 0; l < 5; l ++)
+                //     for (let i = 0; i < 4; i ++) 
+                //         imgData.data[pixelNumber+i] = 127
+                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;
+                }
+
                 redraw();
             }
 
@@ -50,12 +68,13 @@
             var lastX=canvas.width/2, lastY=canvas.height/2;
             var dragStart,dragged;
             canvas.addEventListener('mousedown',function(evt){
-                document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
-                lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
-                lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
-                dragStart = ctx.transformedPoint(lastX,lastY);
-                dragged = false;
-                
+                if (evt.button == 1 || 1 == evt.button&2){
+                    document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
+                    lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
+                    lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
+                    dragStart = ctx.transformedPoint(lastX,lastY);
+                    dragged = false;
+                }
             },false);
             canvas.addEventListener('mousemove',function(evt){
                 lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
@@ -68,15 +87,46 @@
                 }
             },false);
             canvas.addEventListener('mouseup',function(evt){
-                dragStart = null;
-                
-                if (!dragged) drawPixel(
-                    Math.round(ctx.transformedPoint(lastX,lastY).x), 
-                    Math.round(ctx.transformedPoint(lastX,lastY).y)
-                )
-                // if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
-            },false);
+                if (evt.button == 1 || 1 == evt.button&2){
+                    dragStart = null;
+                    if (dragged) {
+                        
+                        let point = ctx.transformedPoint(
+                            evt.clientX - canvas.offsetLeft,
+                            evt.clientY - canvas.offsetTop
+                        );
+                    } else {
+                        let point = {
+                            x: Math.floor(ctx.transformedPoint(lastX,lastY).x) * 4,
+                            y: Math.floor(ctx.transformedPoint(lastX,lastY).y) * 4,
+                        };
+                        x = point.x; y = point.y;
+                        let pixelNumber;
+                        if (y > 0)
+                            pixelNumber = (y) * canvas.width + x
+                        if (y == 0)
+                            pixelNumber = x
+                        
+                        let color = {
+                            r: imgData.data[pixelNumber + 0],
+                            g: imgData.data[pixelNumber + 1],
+                            b: imgData.data[pixelNumber + 2]
+                        };
 
+                        console.log(`${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
+                        );
+                }
+            },false);
+          
             var scaleFactor = 1.1;
             var zoom = function(clicks){
                 var pt = ctx.transformedPoint(lastX,lastY);
@@ -96,60 +146,91 @@
             canvas.addEventListener('mousewheel',handleScroll,false);
         };
         
-        function trackTransforms(ctx){
-		var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
-		var xform = svg.createSVGMatrix();
-		ctx.getTransform = function(){ return xform; };
-		
-		var savedTransforms = [];
-		var save = ctx.save;
-		ctx.save = function(){
-			savedTransforms.push(xform.translate(0,0));
-			return save.call(ctx);
-		};
-		var restore = ctx.restore;
-		ctx.restore = function(){
-			xform = savedTransforms.pop();
-			return restore.call(ctx);
-		};
+        function changeColor() {
 
-		var scale = ctx.scale;
-		ctx.scale = function(sx,sy){
-			xform = xform.scaleNonUniform(sx,sy);
-			return scale.call(ctx,sx,sy);
-		};
-		var rotate = ctx.rotate;
-		ctx.rotate = function(radians){
-			xform = xform.rotate(radians*180/Math.PI);
-			return rotate.call(ctx,radians);
-		};
-		var translate = ctx.translate;
-		ctx.translate = function(dx,dy){
-			xform = xform.translate(dx,dy);
-			return translate.call(ctx,dx,dy);
-		};
-		var transform = ctx.transform;
-		ctx.transform = function(a,b,c,d,e,f){
-			var m2 = svg.createSVGMatrix();
-			m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
-			xform = xform.multiply(m2);
-			return transform.call(ctx,a,b,c,d,e,f);
-		};
-		var setTransform = ctx.setTransform;
-		ctx.setTransform = function(a,b,c,d,e,f){
-			xform.a = a;
-			xform.b = b;
-			xform.c = c;
-			xform.d = d;
-			xform.e = e;
-			xform.f = f;
-			return setTransform.call(ctx,a,b,c,d,e,f);
-		};
-		var pt  = svg.createSVGPoint();
-		ctx.transformedPoint = function(x,y){
-			pt.x=x; pt.y=y;
-			return pt.matrixTransform(xform.inverse());
-		}
+            
+        }
+        function changeColor(color) {
+            if (color == undefined) currentColor = colorInput.value;
+            else currentColor = color
+        }
+
+
+        //Code from https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb#5624139
+        function hexToRgb(hex) {
+            // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+            var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+            hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+                return r + r + g + g + b + b;
+            });
+
+            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            return result ? {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16)
+            } : null;
+        }
+
+        const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
+            const hex = x.toString(16)
+            return hex.length === 1 ? '0' + hex : hex
+        }).join('')
+
+        function trackTransforms(ctx){
+            var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
+            var xform = svg.createSVGMatrix();
+            ctx.getTransform = function(){ return xform; };
+            
+            var savedTransforms = [];
+            var save = ctx.save;
+            ctx.save = function(){
+                savedTransforms.push(xform.translate(0,0));
+                return save.call(ctx);
+            };
+            var restore = ctx.restore;
+            ctx.restore = function(){
+                xform = savedTransforms.pop();
+                return restore.call(ctx);
+            };
+
+            var scale = ctx.scale;
+            ctx.scale = function(sx,sy){
+                xform = xform.scaleNonUniform(sx,sy);
+                return scale.call(ctx,sx,sy);
+            };
+            var rotate = ctx.rotate;
+            ctx.rotate = function(radians){
+                xform = xform.rotate(radians*180/Math.PI);
+                return rotate.call(ctx,radians);
+            };
+            var translate = ctx.translate;
+            ctx.translate = function(dx,dy){
+                xform = xform.translate(dx,dy);
+                return translate.call(ctx,dx,dy);
+            };
+            var transform = ctx.transform;
+            ctx.transform = function(a,b,c,d,e,f){
+                var m2 = svg.createSVGMatrix();
+                m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
+                xform = xform.multiply(m2);
+                return transform.call(ctx,a,b,c,d,e,f);
+            };
+            var setTransform = ctx.setTransform;
+            ctx.setTransform = function(a,b,c,d,e,f){
+                xform.a = a;
+                xform.b = b;
+                xform.c = c;
+                xform.d = d;
+                xform.e = e;
+                xform.f = f;
+                return setTransform.call(ctx,a,b,c,d,e,f);
+            };
+            var pt  = svg.createSVGPoint();
+            ctx.transformedPoint = function(x,y){
+                pt.x=x; pt.y=y;
+                return pt.matrixTransform(xform.inverse());
+            }
 	}
     </script>
     </body>
