From 8743bd8549be4603cc14f2ee9a0ce7dec9c8b787 Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Tue, 16 Jun 2020 16:04:36 +0200
Subject: [PATCH] Fixed colour picker bug

When the user changed a selected colour, the stroke colour became one of the two checkerboard colours.
---
 js/_clickedColor.js |  6 ++++--
 js/_colorChanged.js | 16 +++++++++++-----
 js/_move.js         |  1 -
 js/_newPixel.js     |  4 ++--
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/js/_clickedColor.js b/js/_clickedColor.js
index 57566ce..f09ef07 100644
--- a/js/_clickedColor.js
+++ b/js/_clickedColor.js
@@ -8,9 +8,11 @@ function clickedColor (e){
         if (selectedColor) selectedColor.classList.remove('selected');
 
         //set current color
-        currentLayer.context.fillStyle = this.style.backgroundColor;
-        currentGlobalColor = this.style.backgroundColor;
+        for (let i=1; i<layers.length - 2; i++) {
+            layers[i].context.fillStyle = this.style.backgroundColor;
+        }
 
+        currentGlobalColor = this.style.backgroundColor;
         //make color selected
         e.target.parentElement.classList.add('selected');
 
diff --git a/js/_colorChanged.js b/js/_colorChanged.js
index ffab95d..5d8f390 100644
--- a/js/_colorChanged.js
+++ b/js/_colorChanged.js
@@ -23,11 +23,13 @@ on('input', 'jscolor-hex-input', function (e) {
 
 //changes all of one color to another after being changed from color picker
 function colorChanged(e) {
-    console.log('colorChanged()');
+    console.log('colorChanged() to ' + e.target.value);
     //get colors
     var newColor = hexToRgb(e.target.value);
     var oldColor = e.target.oldColor;
 
+    newColor.a = 255;
+
     //save undo state
     //saveHistoryState({type: 'colorchange', newColor: e.target.value, oldColor: rgbToHex(oldColor), canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
     new HistoryStateEditColor(e.target.value.toLowerCase(), rgbToHex(oldColor));
@@ -38,6 +40,7 @@ function colorChanged(e) {
 
     //check if selected color already matches another color 
     colors = document.getElementsByClassName('color-button');
+    console.log(colors);
     var colorCheckingStyle = 'background: #bc60c4; color: white';
     var newColorHex = e.target.value.toLowerCase();
 
@@ -50,11 +53,11 @@ function colorChanged(e) {
 
         //if generated color matches this color
         if (newColorHex == colors[i].jscolor.toString()) {
-            // console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
+            console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
 
             //if the color isnt the one that has the picker currently open
             if (!colors[i].parentElement.classList.contains('jscolor-active')) {
-                // console.log('%cColor is duplicate', colorCheckingStyle);
+                console.log('%cColor is duplicate', colorCheckingStyle);
 
                 //show the duplicate color warning
                 duplicateColorWarning.style.visibility = 'visible';
@@ -83,8 +86,11 @@ function colorChanged(e) {
 
     //if this is the current color, update the drawing color
     if (e.target.colorElement.parentElement.classList.contains('selected')) {
-        // console.log('this color is the current color');
-        context.fillStyle = currentColor;
+        for (let i=1; i<layers.length - 2; i++) {
+            layers[i].context.fillStyle = '#'+ rgbToHex(newColor.r,newColor.g,newColor.b);
+        }
+
+        currentGlobalColor = newColor;
     }
     /* this is wrong and bad
     if (settings.switchToChangedColor) {
diff --git a/js/_move.js b/js/_move.js
index 0bc1471..f371a63 100644
--- a/js/_move.js
+++ b/js/_move.js
@@ -68,7 +68,6 @@ function endSelection() {
                 Math.round(lastMovePos[1] / zoom) - imageDataToMove.height / 2);
         }
         else {
-            console.log("incollo male");
             currentLayer.context.putImageData(
                 imageDataToMove, 
                 copiedStartX, 
diff --git a/js/_newPixel.js b/js/_newPixel.js
index bb6ec12..fb67f68 100644
--- a/js/_newPixel.js
+++ b/js/_newPixel.js
@@ -17,10 +17,10 @@ function newPixel (width, height, palette) {
 	canvasSize = currentLayer.canvasSize;
 
 	// Adding the first layer and the checkerboard to the list of layers
+	layers.push(checkerBoard);
+	layers.push(currentLayer);
 	layers.push(VFXLayer);
 	layers.push(TMPLayer);
-	layers.push(currentLayer);
-	layers.push(checkerBoard);
 
 	//remove current palette
 	colors = document.getElementsByClassName('color-button');