Added some interface code for working with the drawing palettes. Still WIP.

app/js/ui/CTRLPalettes.js

 
 const ATTRIB_NESIDX = "nesidx";
 // The two attributes below MUST BOTH be in the element.
-const ATTRIB_PALIDX = "palidx";     // This is the palette index (0 - 3 (Tiles) 4 - 7 (Sprites))
-const ATTRIB_COLIDX = "palcolidx";  // This is the color index in the selected palette (0 - 3)
+const ATTRIB_PALIDX = "pidx";     // This is the palette index (0 - 3 (Tiles) 4 - 7 (Sprites))
+const ATTRIB_COLIDX = "cidx";  // This is the color index in the selected palette (0 - 3)
 
+const CLASS_BTN_ACTIVE = "pure-button-active";
 
 
 var Active_Palette_Index = 0;
   return "#" + InvertRGB(chex.slice(0, 2)) + InvertRGB(chex.slice(2, 4)) + InvertRGB(chex.slice(4, 6));
 }
 
+function GetPaletteIndexes(el){
+  if (el.hasAttribute(ATTRIB_PALIDX) && el.hasAttribute(ATTRIB_COLIDX)){
+    var pi = el.getAttribute(ATTRIB_PALIDX);
+    if (!isNaN(pi))
+      pi = parseInt(pi);
+    else
+      pi = -1;
+    var ci = el.getAttribute(ATTRIB_COLIDX);
+    if (!isNaN(ci))
+      ci = parseInt(ci);
+    else
+      ci = -1;
+    if (pi >= 0 && pi < 4 && ci >= 0 && ci < 4){
+      return {pi:pi, ci:ci};
+    }
+  }
+  return null;
+}
+
 
 class CTRLPalettes{
   constructor(){
     this.__NESPalette = null;
     this.__pi = 0; // Palette index.
     this.__ci = 0; // Palette color index.
+    this.__mode = 0; // 0 = Tile palette mode | 1 = Sprite palette mode.
 
     var self = this;
 
 
     var handle_palcolor_clicked = function(event){
       if (this.hasAttribute(ATTRIB_PALIDX) && this.hasAttribute(ATTRIB_COLIDX)){
-        self.__pi = this.getAttribute(ATTRIB_PALIDX);
-        self.__ci = this.getAttribute(ATTRIB_COLIDX);
-        console.log("Requesting Palette: " + self.__pi + " | Color: " + self.__ci);
+        var i = GetPaletteIndexes(this);
+        if (i !== null){
+          if (self.__pi !== i.pi || self.__ci !== i.ci){
+            // TODO: Instead of storing __pi and __ci, hold the active element.
+          }
+        }
       }
     };
     var elist = document.querySelectorAll("[" + ATTRIB_PALIDX + "]");
       throw new TypeError("Expected NESPalette object instance.");
     }
     this.__NESPalette = p;
+    var elist = document.querySelectorAll("[" + ATTRIB_PALIDX + "]");
+    elist.forEach((function(el){
+      if (el.hasAttribute(ATTRIB_COLIDX)){
+        var i = GetPaletteIndexes(el);
+        if (i !== null){
+          var c = p.get_palette_color((this.__mode * 4) + i.pi, i.ci);
+          el.style["background-color"] = c;
+          el.style.color = InvertColor(c, true);
+        }
+      }
+    }).bind(this));
   }
 }