Fixed palette block css

Implemented colour adding and removing,must debug

css/pixel-editor.scss

@@ -1468,13 +1468,13 @@ div#palette-block {
 
 div#palette-container {
 	display:inline-block;
-	background-color:black;
+	background-color: #232125;
 	position:absolute;
 	scrollbar-color: #332f35 #232125;
 	scroll-behavior: smooth;
 	left:300px;
 	width:300px;
-	height:280px;
+	height:320px;
 	overflow-y: scroll;
 
 	&::-webkit-scrollbar {
@@ -1518,17 +1518,22 @@ ul#palette-list {
 
 div#pb-options {
 	position:relative;
-	left:300px;
-	height:100px;
+	left:280px;
+	height:30px;
 	width:300px;
-	top:280px;
+	top:300px;
 
 	button {
+		border-radius:none;
 		position:relative;
+		float:left;
 		width:50%;
 		height:100%;
 		text-align:center;
 		cursor: pointer;
+		font-size:16px;
+		background-color:$baseicon;
+		border:none;
 	}
 
 	button:hover {

js/_dialogue.js

@@ -15,8 +15,10 @@ function showDialogue (dialogueName, trackEvent) {
     document.getElementById(dialogueName).style.display = 'block';
 
     // If I'm opening the palette window, I initialize the colour picker
-    if (dialogueName == 'palette-block')
+    if (dialogueName == 'palette-block' && documentCreated) {
         cpInit();
+        pbInit();
+    }
 
     //track google event
     if (trackEvent)
@@ -32,6 +34,10 @@ function closeDialogue () {
     var popups = popUpContainer.children;
     for (var i = 0; i < popups.length; i++) {
         popups[i].style.display = 'none';
+
+        if (popups[i].id == "palette-block") {
+            pbAddToSimplePalette();
+        }
     }
 
     dialogueOpen = false;

js/_paletteBlock.js

@@ -4,7 +4,7 @@ let rampMenu = document.getElementById("pb-ramp-options");
 let pbRampDialogue = document.getElementById("pb-ramp-dialogue");
 
 let currentSquareSize = coloursList.children[0].clientWidth;
-let blockData = {blockWidth: 500, blockHeight: 200, squareSize: 50};
+let blockData = {blockWidth: 300, blockHeight: 320, squareSize: 40};
 let isRampSelecting = false;
 let ramps = [];
 let currentSelection = {startIndex:0, endIndex:0, startCoords:[], endCoords: [], name: "", colour: "", label: null};
@@ -18,6 +18,24 @@ new Sortable(document.getElementById("palette-list"), {
 // Listening for the palette block resize
 new ResizeObserver(updateSizeData).observe(coloursList.parentElement);
 
+// Initializes the palette block
+function pbInit() {
+    let simplePalette = document.getElementById("colors-menu");
+
+    currentSquareSize = coloursList.children[0].clientWidth;
+    coloursList = document.getElementById("palette-list");
+
+    // Remove all the colours
+    for (let i=0; i<coloursList.childElementCount; i++) {
+        coloursList.children[0].remove();
+    }
+
+    // Add all the colours in the simplepalette
+    for (let i=0; i<simplePalette.childElementCount; i++) {
+        addSingleColour(cssToHex(simplePalette.children[i].children[0].style.backgroundColor));
+    }
+}
+
 /** Listens for the mouse wheel, used to change the size of the squares in the palette list
  * 
  */
@@ -145,7 +163,7 @@ function updateRampSelection(mouseEvent) {
         for (let i=startIndex; i<=endIndex; i++) {
             let currentSquare = coloursList.children[i];
             let currentCoords = getColourCoordinates(i);
-            let borderStyle = "4px solid white";
+            let borderStyle = "3px solid white";
             let bordersToSet = [];        
 
             // Deciding which borders to use to make the outline
@@ -163,7 +181,6 @@ function updateRampSelection(mouseEvent) {
                 bordersToSet.push("border-right");
             }
             if (bordersToSet != []) {
-                console.log("qui");
                 currentSquare.style["box-sizing"] = "border-box";
 
                 for (let i=0; i<bordersToSet.length; i++) {
@@ -173,20 +190,18 @@ function updateRampSelection(mouseEvent) {
         }
     }
 }
+
 /** Removes all the borders from all the squares. The borders are cleared only for the
  *  current selection, so every border that is not white is kept.
  * 
  */
 function clearBorders() {
     for (let i=0; i<coloursList.childElementCount; i++) {
-        // Resetting borders
-        if (coloursList.children[i].style["border-top"].includes("white")) {
         coloursList.children[i].style["border-top"] = "none";
         coloursList.children[i].style["border-left"] = "none";  
         coloursList.children[i].style["border-right"] = "none";
         coloursList.children[i].style["border-bottom"] = "none";
     }
-    }
 }
 
 /** Ends the current selection, opens the ramp menu 
@@ -279,3 +294,17 @@ function cssToHex(rgb) {
     }
     return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
 }
+
+function pbAddToSimplePalette() {
+    let simplePalette = document.getElementById("colors-menu");
+
+    // Removing all the colours
+    for (let i=0; i<simplePalette.childElementCount; i++) {
+        simplePalette.children[0].remove();
+    }
+
+    // Adding the new ones
+    for (let i=0; i<coloursList.childElementCount; i++) {
+        addColor(cssToHex(coloursList.children[i].style.backgroundColor));
+    }
+}

views/pixel-editor.hbs

@@ -414,25 +414,25 @@
 
                     <div id = "cp-colour-picking-modes">
                         <button class="cp-selected-mode" onclick="changePickingMode(event,'mono')">Mono</button>
-                        <button onclick="changePickingMode(event,'analog')">Anlgs</button>
+                        <button onclick="changePickingMode(event,'analog')">Nlgs</button>
                         <button onclick="changePickingMode(event,'cmpt')">Cmpt</button>
                         <button onclick="changePickingMode(event,'tri')">Tri</button>
-                        <button onclick="changePickingMode(event,'scmpt')">Scmpt</button>
+                        <button onclick="changePickingMode(event,'scmpt')">Scm</button>
                         <button onclick="changePickingMode(event,'tetra')">Tetra</button>
                     </div>
                 </div>
             </div>
 
-            <div id = "palette-container" onresize="updateSizeData()">
+            <div id = "palette-container">
                 <ul id = "palette-list">
-                    <li style = "background-color:rgb(255,0,0);width:50px;height:50px;" onmousedown="startRampSelection(event)"
+                    <li style = "background-color:rgb(255,0,0);width:40px;height:40px;" onmousedown="startRampSelection(event)"
                     onmousemove="updateRampSelection(event)" onmouseup="endRampSelection(event)"></li>
-                    <li style = "background-color:rgb(0,255,0);width:50px;height:50px;"onmousedown="startRampSelection(event)"
+                    <li style = "background-color:rgb(0,255,0);width:40px;height:40px;"onmousedown="startRampSelection(event)"
                     onmousemove="updateRampSelection(event)" onmouseup="endRampSelection(event)"></li>
                 </ul>
             </div>
 
-            <div id="pb-options" class="update">
+            <div id="pb-options">
                 <button title="Add colours to palette" onclick="pbAddColours()">Add colours</button>
                 <button title="Remove colours from palette" onclick="pbRemoveColours()">Remove colours</button>
             </div>