From d972f9c530a5dff534086b42788b793fea3b66f4 Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Mon, 6 Dec 2021 11:26:42 +0100
Subject: [PATCH] Turned the PaleteBlock into an IIFE

---
 README.md                                    |   7 +-
 js/Color.js                                  |  12 +
 js/ColorModule.js                            |   2 +-
 js/{_colorPicker.js => ColorPicker.js}       |   6 +-
 js/Dialogue.js                               |   2 +-
 js/{_featureToggles.js => FeatureToggles.js} |   0
 js/PaletteBlock.js                           | 300 ++++++++++++++++++
 js/ToolManager.js                            |   9 +-
 js/_paletteBlock.js                          | 311 -------------------
 js/{_jscolor.js => lib/jscolor.js}           |   0
 js/pixel-editor.js                           |   8 +-
 views/popups/palette.hbs                     |  12 +-
 12 files changed, 339 insertions(+), 330 deletions(-)
 rename js/{_colorPicker.js => ColorPicker.js} (99%)
 rename js/{_featureToggles.js => FeatureToggles.js} (100%)
 create mode 100644 js/PaletteBlock.js
 delete mode 100644 js/_paletteBlock.js
 rename js/{_jscolor.js => lib/jscolor.js} (100%)

diff --git a/README.md b/README.md
index 66ec0d6..a75d3d7 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,6 @@ The next version is mostly focused on adding missing essential features and port
 Suggestions / Planned features:
 
 - Documentation
-
 - Possibility to hide and resize menus (layers, palette)
 - Tiled mode
 - Load palette from LPE file
@@ -26,8 +25,8 @@ Suggestions / Planned features:
 - Possibly add collaborate function
 
 - Code refactoring
-    - Find inefficient sections (nested loops, useless / inefficient parts)
-    - Create classes ResizableTool and SelectionTool. Make them inherit from Tool, avoid creating brush resizing functions each time for each tool that can be resized
+    - Find and fix inefficient sections (nested loops, useless / inefficient parts)
+    - Refactor the ColorPicker IIFE
 
 - Mobile
     - Touch equivalent for mouse clicks
@@ -36,7 +35,7 @@ Suggestions / Planned features:
     - Fix popups
 	
 - Polish:
-    - ctrl a to select everything / selection -> all, same for deselection
+    - CTRL+A to select everything / selection -> all, same for deselection
 	- Warning windows for wrong inputs
 	- Palette option remove unused colors
 	- Move selection with arrows
diff --git a/js/Color.js b/js/Color.js
index e2ee851..71827f7 100644
--- a/js/Color.js
+++ b/js/Color.js
@@ -165,4 +165,16 @@ class Color {
     
         return {h: myH * 360, s: myS * 100, v: myV * 100};
     }
+
+    /** Converts a CSS colour eg rgb(x,y,z) to a hex string
+     * 
+     * @param {*} rgb 
+     */
+    static cssToHex(rgb) {
+        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+        function hex(x) {
+            return ("0" + parseInt(x).toString(16)).slice(-2);
+        }
+        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+    }
 }
\ No newline at end of file
diff --git a/js/ColorModule.js b/js/ColorModule.js
index e541c9c..80019a2 100644
--- a/js/ColorModule.js
+++ b/js/ColorModule.js
@@ -160,7 +160,7 @@ const ColorModule = (() => {
             const col = coloursList.children[i].style.backgroundColor;
             
             if (col.includes("rgb")) {
-                addColor(cssToHex(col));
+                addColor(Color.cssToHex(col));
             }
             else  {
                 addColor(col);
diff --git a/js/_colorPicker.js b/js/ColorPicker.js
similarity index 99%
rename from js/_colorPicker.js
rename to js/ColorPicker.js
index 79e8eab..eae3659 100644
--- a/js/_colorPicker.js
+++ b/js/ColorPicker.js
@@ -773,7 +773,11 @@ const ColorPicker = (() => {
     }
 
     return {
-        init
+        init,
+        getSelectedColours,
+        updatePickerByHex,
+        updateSlidersByHex,
+        updateMiniPickerColour
     }
 })();
 
diff --git a/js/Dialogue.js b/js/Dialogue.js
index c737261..ab687bf 100644
--- a/js/Dialogue.js
+++ b/js/Dialogue.js
@@ -44,7 +44,7 @@ const Dialogue = (() => {
         // If I'm opening the palette window, I initialize the colour picker
         if (dialogueName == 'palette-block' && Startup.documentCreated()) {
             ColorPicker.init();
-            pbInit();
+            PaletteBlock.init();
         }
 
         //track google event
diff --git a/js/_featureToggles.js b/js/FeatureToggles.js
similarity index 100%
rename from js/_featureToggles.js
rename to js/FeatureToggles.js
diff --git a/js/PaletteBlock.js b/js/PaletteBlock.js
new file mode 100644
index 0000000..edcb09d
--- /dev/null
+++ b/js/PaletteBlock.js
@@ -0,0 +1,300 @@
+const PaletteBlock = (() => {
+    // HTML elements
+    let coloursList = document.getElementById("palette-list");
+    let rampMenu = document.getElementById("pb-ramp-options");
+    let pbRampDialogue = document.getElementById("pb-ramp-dialogue");
+
+    // PaletteBlock-specific data
+    let currentSquareSize = coloursList.children[0].clientWidth;
+    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};
+
+    
+    // Making the palette list sortable
+    new Sortable(document.getElementById("palette-list"), {
+        animation: 100,
+        onEnd: updateRampSelection
+    });
+    // Listening for the palette block resize
+    new ResizeObserver(updateSizeData).observe(coloursList.parentElement);
+
+    Events.on("click", "pb-addcolours", addColours);
+    Events.on("click", "pb-removecolours", removeColours);
+    
+    /** Listens for the mouse wheel, used to change the size of the squares in the palette list
+     * 
+     */
+     coloursList.parentElement.addEventListener("wheel", function (mouseEvent) {
+        // Only resize when pressing alt, used to distinguish between scrolling through the palette and
+        // resizing it
+        if (mouseEvent.altKey) {
+            resizeSquares(mouseEvent);
+        }
+    });
+    
+    
+    // Initializes the palette block
+    function init() {
+        let simplePalette = document.getElementById("colors-menu");
+        let childCount = coloursList.childElementCount;
+
+        currentSquareSize = coloursList.children[0].clientWidth;
+        coloursList = document.getElementById("palette-list");
+
+        // Remove all the colours
+        for (let i=0; i<childCount; i++) {
+            coloursList.children[0].remove();
+        }
+
+        // Add all the colours from the simplepalette
+        for (let i=0; i<simplePalette.childElementCount-1; i++) {
+            addSingleColour(Color.cssToHex(simplePalette.children[i].children[0].style.backgroundColor));
+        }
+    }
+
+    /** Tells whether a colour is in the palette or not
+     * 
+     * @param {*} colour The colour to add
+     */ 
+    function hasColour(colour) {
+        for (let i=0; i<coloursList.childElementCount; i++) {
+            let currentCol = coloursList.children[i].style.backgroundColor;
+            let currentHex = Color.cssToHex(currentCol);
+
+            if (currentHex == colour) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /** Adds a single colour to the palette
+     * 
+     * @param {*} colour The colour to add
+     */
+    function addSingleColour(colour) {
+        if (!hasColour(colour)) {
+            let li = document.createElement("li");
+
+            li.style.width = currentSquareSize + "px";
+            li.style.height = currentSquareSize + "px";
+            li.style.backgroundColor = colour;
+            li.addEventListener("mousedown", startRampSelection.bind(this));
+            li.addEventListener("mouseup", endRampSelection.bind(this));
+            li.addEventListener("mousemove", updateRampSelection.bind(this));
+            li.addEventListener("onclick", endRampSelection.bind(this));
+
+            coloursList.appendChild(li);
+        }
+    }
+    /** Adds all the colours currently selected in the colour picker
+     * 
+     */
+    function addColours() {
+        let colours = ColorPicker.getSelectedColours();
+        
+        for (let i=0; i<colours.length; i++) {
+            addSingleColour(colours[i]);
+        }
+    }
+
+    /** Removes all the currently selected colours from the palette
+     * 
+     */
+    function removeColours() {
+        let startIndex = currentSelection.startIndex;
+        let endIndex = currentSelection.endIndex;
+
+        if (startIndex > endIndex) {
+            let tmp = startIndex;
+            startIndex = endIndex;
+            endIndex = tmp;
+        }
+
+        for (let i=startIndex; i<=endIndex; i++) {
+            coloursList.removeChild(coloursList.children[startIndex]);
+        }
+        clearBorders();
+    }
+
+    /** Starts selecting a ramp. Saves the data needed to draw the outline.
+     * 
+     * @param {*} mouseEvent 
+     */
+    function startRampSelection(mouseEvent) {
+        if (mouseEvent.which == 3) {
+            let index = getElementIndex(mouseEvent.target);
+
+            isRampSelecting = true;
+
+            currentSelection.startIndex = index;
+            currentSelection.endIndex = index;
+
+            currentSelection.startCoords = getColourCoordinates(index);
+            currentSelection.endCoords = getColourCoordinates(index);
+        }
+    }
+
+    /** Updates the outline for the current selection.
+     * 
+     * @param {*} mouseEvent 
+     */
+    function updateRampSelection(mouseEvent) {
+        if (mouseEvent != null && mouseEvent.which == 3) {
+            currentSelection.endIndex = getElementIndex(mouseEvent.target);
+        }
+        
+        if (mouseEvent == null || mouseEvent.which == 3) {
+            let startCoords = getColourCoordinates(currentSelection.startIndex);
+            let endCoords = getColourCoordinates(currentSelection.endIndex);
+
+            let startIndex = currentSelection.startIndex;
+            let endIndex = currentSelection.endIndex;
+            
+            if (currentSelection.startIndex > endIndex) {
+                let tmp = startIndex;
+                startIndex = endIndex;
+                endIndex = tmp;
+
+                tmp = startCoords;
+                startCoords = endCoords;
+                endCoords = tmp;
+            }
+
+            clearBorders();
+
+            for (let i=startIndex; i<=endIndex; i++) {
+                let currentSquare = coloursList.children[i];
+                let currentCoords = getColourCoordinates(i);
+                let borderStyle = "3px solid white";
+                let bordersToSet = [];        
+
+                // Deciding which borders to use to make the outline
+                if (i == 0 || i == startIndex) {
+                    bordersToSet.push("border-left");
+                }
+                if (currentCoords[1] == startCoords[1] || ((currentCoords[1] == startCoords[1] + 1)) && currentCoords[0] < startCoords[0]) {
+                    bordersToSet.push("border-top");
+                }
+                if (currentCoords[1] == endCoords[1] || ((currentCoords[1] == endCoords[1] - 1)) && currentCoords[0] > endCoords[0]) {
+                    bordersToSet.push("border-bottom");
+                }
+                if ((i == coloursList.childElementCount - 1) || (currentCoords[0] == Math.floor(blockData.blockWidth / blockData.squareSize) - 1) 
+                    || i == endIndex) {
+                    bordersToSet.push("border-right");
+                }
+                if (bordersToSet != []) {
+                    currentSquare.style["box-sizing"] = "border-box";
+
+                    for (let i=0; i<bordersToSet.length; i++) {
+                        currentSquare.style[bordersToSet[i]] = borderStyle;
+                    }
+                }
+            }
+        }
+    }
+
+    /** 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++) {
+            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 
+     * 
+     * @param {*} mouseEvent 
+     */
+    function endRampSelection(mouseEvent) {
+        let col;
+
+        if (currentSelection.startCoords.length == 0) {
+            currentSelection.endIndex = getElementIndex(mouseEvent.target);
+            currentSelection.startIndex = currentSelection.endIndex;
+            currentSelection.startCoords = getColourCoordinates(currentSelection.startIndex);
+        }
+
+        // I'm not selecting a ramp anymore
+        isRampSelecting = false;
+        // Setting the end coordinates
+        currentSelection.endCoords = getColourCoordinates(getElementIndex(mouseEvent.target));
+
+        // Setting the colour in the colour picker
+        col = Color.cssToHex(coloursList.children[currentSelection.startIndex].style.backgroundColor);
+        ColorPicker.updatePickerByHex(col);
+        ColorPicker.updateSlidersByHex(col);
+        ColorPicker.updateMiniPickerColour();
+
+        updateRampSelection();
+
+        currentSelection.startCoords = [];
+    }
+
+    /** Updates the current data about the size of the palette list (height, width and square size).
+     *  It also updates the outline after doing so.
+     * 
+     */
+    function updateSizeData() {
+        blockData.blockHeight = coloursList.parentElement.clientHeight;
+        blockData.blockWidth = coloursList.parentElement.clientWidth;
+        blockData.squareSize = coloursList.children[0].clientWidth;
+
+        updateRampSelection();
+    }
+
+    /** Gets the colour coordinates relative to the colour list seen as a matrix. Coordinates
+     *  start from the top left angle.
+     * 
+     * @param {*} index The index of the colour in the list seen as a linear array
+     */
+    function getColourCoordinates(index) {
+        let yIndex = Math.floor(index / Math.floor(blockData.blockWidth / blockData.squareSize));
+        let xIndex = Math.floor(index % Math.floor(blockData.blockWidth / blockData.squareSize));
+
+        return [xIndex, yIndex];
+    }
+
+    /** Returns the index of the element in the colour list
+     * 
+     * @param {*} element The element of which we need to get the index
+     */
+    function getElementIndex(element) {
+        for (let i=0; i<coloursList.childElementCount; i++) {
+            if (element == coloursList.children[i]) {
+                return i;
+            }
+        }
+    }
+
+    /** Resizes the squares depending on the scroll amount (only resizes if the user is 
+     *  also holding alt)
+     * 
+     * @param {*} mouseEvent 
+     */
+    function resizeSquares(mouseEvent) {
+        let amount = mouseEvent.deltaY > 0 ? -5 : 5;
+        currentSquareSize += amount;
+
+        for (let i=0; i<coloursList.childElementCount; i++) {
+            let currLi = coloursList.children[i];
+
+            currLi.style["box-sizing"] = "content-box";
+            currLi.style.width = currLi.clientWidth + amount + "px";
+            currLi.style.height = currLi.clientHeight + amount + "px";
+        }
+
+        updateSizeData();
+    }
+
+    return {
+        init
+    }
+})();
\ No newline at end of file
diff --git a/js/ToolManager.js b/js/ToolManager.js
index e20426b..34e80aa 100644
--- a/js/ToolManager.js
+++ b/js/ToolManager.js
@@ -30,16 +30,21 @@ const ToolManager = (() => {
     Events.onCustom("tool-shortcut", onShortcut);
 
     function onShortcut(tool) {
+        if (!Startup.documentCreated || Dialogue.isOpen())
+            return;
         switchTool(tools[tool]);
     }
 
     function onMouseWheel(mouseEvent) {
+        if (!Startup.documentCreated || Dialogue.isOpen())
+            return;
+
         let mousePos = Input.getCursorPosition(mouseEvent);
         tools["zoom"].onMouseWheel(mousePos, mouseEvent.deltaY < 0 ? 'in' : 'out');
     }
 
     function onMouseDown(mouseEvent) {
-        if (!Startup.documentCreated())
+        if (!Startup.documentCreated() || Dialogue.isOpen())
             return;
 
         let mousePos = Input.getCursorPosition(mouseEvent);
@@ -70,7 +75,7 @@ const ToolManager = (() => {
     }
 
     function onMouseMove(mouseEvent) {
-        if (!Startup.documentCreated())
+        if (!Startup.documentCreated() || Dialogue.isOpen())
             return;
         let mousePos = Input.getCursorPosition(mouseEvent);
         // Call the hover event
diff --git a/js/_paletteBlock.js b/js/_paletteBlock.js
deleted file mode 100644
index ac480ab..0000000
--- a/js/_paletteBlock.js
+++ /dev/null
@@ -1,311 +0,0 @@
-/** INIT is called when it shouldn't **/
-
-let coloursList = document.getElementById("palette-list");
-
-let rampMenu = document.getElementById("pb-ramp-options");
-let pbRampDialogue = document.getElementById("pb-ramp-dialogue");
-
-let currentSquareSize = coloursList.children[0].clientWidth;
-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};
-
-// Making the palette list sortable
-new Sortable(document.getElementById("palette-list"), {
-    animation: 100,
-    onEnd: updateRampSelection
-});
-
-// Listening for the palette block resize
-new ResizeObserver(updateSizeData).observe(coloursList.parentElement);
-
-// Initializes the palette block
-function pbInit() {
-    let simplePalette = document.getElementById("colors-menu");
-    let childCount = coloursList.childElementCount;
-
-    currentSquareSize = coloursList.children[0].clientWidth;
-    coloursList = document.getElementById("palette-list");
-
-    // Remove all the colours
-    for (let i=0; i<childCount; i++) {
-        coloursList.children[0].remove();
-    }
-
-    // Add all the colours from the simplepalette
-    for (let i=0; i<simplePalette.childElementCount-1; 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
- * 
- */
-coloursList.parentElement.addEventListener("wheel", function (mouseEvent) {
-    // Only resize when pressing alt, used to distinguish between scrolling through the palette and
-    // resizing it
-    if (mouseEvent.altKey) {
-        resizeSquares(mouseEvent);
-    }
-});
-
-/** Tells whether a colour is in the palette or not
- * 
- * @param {*} colour The colour to add
- */ 
-function hasColour(colour) {
-    for (let i=0; i<coloursList.childElementCount; i++) {
-        let currentCol = coloursList.children[i].style.backgroundColor;
-        let currentHex = cssToHex(currentCol);
-
-        if (currentHex == colour) {
-            return true;
-        }
-    }
-    return false;
-}
-
-/** Adds a single colour to the palette
- * 
- * @param {*} colour The colour to add
- */
-function addSingleColour(colour) {
-    if (!hasColour(colour)) {
-        let li = document.createElement("li");
-
-        li.style.width = currentSquareSize + "px";
-        li.style.height = currentSquareSize + "px";
-        li.style.backgroundColor = colour;
-        li.addEventListener("mousedown", startRampSelection);
-        li.addEventListener("mouseup", endRampSelection);
-        li.addEventListener("mousemove", updateRampSelection);
-        li.addEventListener("onclick", endRampSelection);
-
-        coloursList.appendChild(li);
-    }
-}
-/** Adds all the colours currently selected in the colour picker
- * 
- */
-function pbAddColours() {
-    let colours = getSelectedColours();
-    
-    for (let i=0; i<colours.length; i++) {
-        addSingleColour(colours[i]);
-    }
-}
-
-/** Removes all the currently selected colours from the palette
- * 
- */
-function pbRemoveColours() {
-    let startIndex = currentSelection.startIndex;
-    let endIndex = currentSelection.endIndex;
-
-    if (startIndex > endIndex) {
-        let tmp = startIndex;
-        startIndex = endIndex;
-        endIndex = tmp;
-    }
-
-    for (let i=startIndex; i<=endIndex; i++) {
-        coloursList.removeChild(coloursList.children[startIndex]);
-    }
-    clearBorders();
-}
-
-/** Starts selecting a ramp. Saves the data needed to draw the outline.
- * 
- * @param {*} mouseEvent 
- */
-function startRampSelection(mouseEvent) {
-    if (mouseEvent.which == 3) {
-        let index = getElementIndex(mouseEvent.target);
-
-        isRampSelecting = true;
-
-        currentSelection.startIndex = index;
-        currentSelection.endIndex = index;
-
-        currentSelection.startCoords = getColourCoordinates(index);
-        currentSelection.endCoords = getColourCoordinates(index);
-    }
-}
-
-/** Updates the outline for the current selection.
- * 
- * @param {*} mouseEvent 
- */
-function updateRampSelection(mouseEvent) {
-    if (mouseEvent != null && mouseEvent.which == 3) {
-        currentSelection.endIndex = getElementIndex(mouseEvent.target);
-    }
-    
-    if (mouseEvent == null || mouseEvent.which == 3) {
-        let startCoords = getColourCoordinates(currentSelection.startIndex);
-        let endCoords = getColourCoordinates(currentSelection.endIndex);
-
-        let startIndex = currentSelection.startIndex;
-        let endIndex = currentSelection.endIndex;
-        
-        if (currentSelection.startIndex > endIndex) {
-            let tmp = startIndex;
-            startIndex = endIndex;
-            endIndex = tmp;
-
-            tmp = startCoords;
-            startCoords = endCoords;
-            endCoords = tmp;
-        }
-
-        clearBorders();
-
-        for (let i=startIndex; i<=endIndex; i++) {
-            let currentSquare = coloursList.children[i];
-            let currentCoords = getColourCoordinates(i);
-            let borderStyle = "3px solid white";
-            let bordersToSet = [];        
-
-            // Deciding which borders to use to make the outline
-            if (i == 0 || i == startIndex) {
-                bordersToSet.push("border-left");
-            }
-            if (currentCoords[1] == startCoords[1] || ((currentCoords[1] == startCoords[1] + 1)) && currentCoords[0] < startCoords[0]) {
-                bordersToSet.push("border-top");
-            }
-            if (currentCoords[1] == endCoords[1] || ((currentCoords[1] == endCoords[1] - 1)) && currentCoords[0] > endCoords[0]) {
-                bordersToSet.push("border-bottom");
-            }
-            if ((i == coloursList.childElementCount - 1) || (currentCoords[0] == Math.floor(blockData.blockWidth / blockData.squareSize) - 1) 
-                || i == endIndex) {
-                bordersToSet.push("border-right");
-            }
-            if (bordersToSet != []) {
-                currentSquare.style["box-sizing"] = "border-box";
-
-                for (let i=0; i<bordersToSet.length; i++) {
-                    currentSquare.style[bordersToSet[i]] = borderStyle;
-                }
-            }
-        }
-    }
-}
-
-/** 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++) {
-        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 
- * 
- * @param {*} mouseEvent 
- */
-function endRampSelection(mouseEvent) {
-    let col;
-
-    if (currentSelection.startCoords.length == 0) {
-        currentSelection.endIndex = getElementIndex(mouseEvent.target);
-        currentSelection.startIndex = currentSelection.endIndex;
-        currentSelection.startCoords = getColourCoordinates(currentSelection.startIndex);
-    }
-
-    // I'm not selecting a ramp anymore
-    isRampSelecting = false;
-    // Setting the end coordinates
-    currentSelection.endCoords = getColourCoordinates(getElementIndex(mouseEvent.target));
-
-    // Setting the colour in the colour picker
-    col = cssToHex(coloursList.children[currentSelection.startIndex].style.backgroundColor);
-    updatePickerByHex(col);
-    updateSlidersByHex(col);
-    updateMiniPickerColour();
-
-    updateRampSelection();
-
-    currentSelection.startCoords = [];
-}
-
-function closeAllSubmenus() {
-    let menus = document.getElementsByClassName("pb-submenu");
-
-    for (let i=0; i<menus.length; i++) {
-        menus[i].style.display = "none";
-    }
-}
-
- /** Updates the current data about the size of the palette list (height, width and square size).
-  *  It also updates the outline after doing so.
-  * 
-  */
- function updateSizeData() {
-    blockData.blockHeight = coloursList.parentElement.clientHeight;
-    blockData.blockWidth = coloursList.parentElement.clientWidth;
-    blockData.squareSize = coloursList.children[0].clientWidth;
-
-    updateRampSelection();
- }
-
- /** Gets the colour coordinates relative to the colour list seen as a matrix. Coordinates
-  *  start from the top left angle.
-  * 
-  * @param {*} index The index of the colour in the list seen as a linear array
-  */
- function getColourCoordinates(index) {
-    let yIndex = Math.floor(index / Math.floor(blockData.blockWidth / blockData.squareSize));
-    let xIndex = Math.floor(index % Math.floor(blockData.blockWidth / blockData.squareSize));
-
-    return [xIndex, yIndex];
- }
-
- /** Returns the index of the element in the colour list
-  * 
-  * @param {*} element The element of which we need to get the index
-  */
- function getElementIndex(element) {
-    for (let i=0; i<coloursList.childElementCount; i++) {
-        if (element == coloursList.children[i]) {
-            return i;
-        }
-    }
-}
-
-/** Resizes the squares depending on the scroll amount (only resizes if the user is 
- *  also holding alt)
- * 
- * @param {*} mouseEvent 
- */
-function resizeSquares(mouseEvent) {
-    let amount = mouseEvent.deltaY > 0 ? -5 : 5;
-    currentSquareSize += amount;
-
-    for (let i=0; i<coloursList.childElementCount; i++) {
-        let currLi = coloursList.children[i];
-
-        currLi.style["box-sizing"] = "content-box";
-        currLi.style.width = currLi.clientWidth + amount + "px";
-        currLi.style.height = currLi.clientHeight + amount + "px";
-    }
-
-    updateSizeData();
-}
-
-/** Converts a CSS colour eg rgb(x,y,z) to a hex string
- * 
- * @param {*} rgb 
- */
-function cssToHex(rgb) {
-    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-    function hex(x) {
-        return ("0" + parseInt(x).toString(16)).slice(-2);
-    }
-    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
-}
\ No newline at end of file
diff --git a/js/_jscolor.js b/js/lib/jscolor.js
similarity index 100%
rename from js/_jscolor.js
rename to js/lib/jscolor.js
diff --git a/js/pixel-editor.js b/js/pixel-editor.js
index 8b1fdb5..3695712 100644
--- a/js/pixel-editor.js
+++ b/js/pixel-editor.js
@@ -1,6 +1,6 @@
 /**utilities**/
 //=include lib/cookies.js
-//=include _jscolor.js
+//=include lib/jscolor.js
 //=include data/variables.js
 //=include lib/sortable.js
 //=include Util.js
@@ -46,8 +46,8 @@
 /**functions**/
 //=include _resizeCanvas.js
 //=include _resizeSprite.js
-//=include _colorPicker.js
-//=include _paletteBlock.js
+//=include ColorPicker.js
+//=include PaletteBlock.js
 //=include SplashPage.js
 
 /**buttons**/
@@ -59,7 +59,7 @@
 //=include Input.js
 
 /**feature toggles**/
-//=include _featureToggles.js
+//=include FeatureToggles.js
 
 // Controls execution of this preset module
 PresetModule.instrumentPresetMenu();
diff --git a/views/popups/palette.hbs b/views/popups/palette.hbs
index 7f55a9e..7047454 100644
--- a/views/popups/palette.hbs
+++ b/views/popups/palette.hbs
@@ -60,15 +60,15 @@
 
 	<div id = "palette-container">
 		<ul id = "palette-list">
-			<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:40px;height:40px;"onmousedown="startRampSelection(event)"
-			onmousemove="updateRampSelection(event)" onmouseup="endRampSelection(event)"></li>
+			<li style = "background-color:rgb(255,0,0);width:40px;height:40px;" onmousedown="PaletteBlock.startRampSelection(event)"
+			onmousemove="PaletteBlock.updateRampSelection(event)" onmouseup="PaletteBlock.endRampSelection(event)"></li>
+			<li style = "background-color:rgb(0,255,0);width:40px;height:40px;"onmousedown="PaletteBlock.startRampSelection(event)"
+			onmousemove="PaletteBlock.updateRampSelection(event)" onmouseup="PaletteBlock.endRampSelection(event)"></li>
 		</ul>
 	</div>
 
 	<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>
+		<button title="Add colours to palette" id="pb-addcolours">Add colours</button>
+		<button title="Remove colours from palette" id="pb-removecolours">Remove colours</button>
 	</div>
 </div>
\ No newline at end of file