Building out the Controller system for integrating the HTML with the NESPalette class.

app/js/main.js

@@ -2,6 +2,7 @@ import GlobalEvents from "/app/js/EventCaller.js";
 //import EventWindow from "/app/js/ui/EventWindow.js";
 import EmitterElements from "/app/js/ui/Emitters.js";
 import Modal from "/app/js/ui/Modal.js";
+import CTRLPalettes from "/app/js/ui/CTRLPalettes.js";
 import {NESPainter} from "/app/js/NESPainter.js";
 import {NESPalette} from "/app/js/NESPalette.js";
 
@@ -44,9 +45,9 @@ function initialize(DOC){
   nespainter.scale_up(5);
   console.log(nespainter.scale);
 
-  var nespal = new NESPalette();
-  nespal.listen("palettes_changed", on_palette_changed);
-  nespal.set_palette([
+  CTRLPalettes.palette = new NESPalette();
+  CTRLPalettes.palette.listen("palettes_changed", on_palette_changed);
+  CTRLPalettes.palette.set_palette([
     44,
     11,12,13,
     54,23,43,
@@ -57,7 +58,7 @@ function initialize(DOC){
     9,0,32,
     5,10,20
   ]);
-  console.log(nespal.to_asm());
+  console.log(CTRLPalettes.palette.to_asm());
 }
 
 

app/js/ui/CTRLPalettes.js

@@ -0,0 +1,75 @@
+import GlobalEvents from "/app/js/EventCaller.js";
+import {NESPalette} from "/app/js/NESPalette.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)
+
+
+
+var Active_Palette_Index = 0;
+var Active_Color_Index = 0;
+
+
+
+class CTRLPalettes{
+  constructor(){
+    this.__NESPalette = null;
+    this.__pi = 0; // Palette index.
+    this.__ci = 0; // Palette color index.
+
+    var self = this;
+
+    var handle_syspalette_clicked = function(event){
+      if (this.hasAttribute(ATTRIB_NESIDX)){
+        var idx = parseInt(this.getAttribute(ATTRIB_NESIDX), 16);
+        if (idx >= 0 && idx < NESPalette.SystemColors.length){
+          console.log(idx);
+          // TODO: Set a selected Tile/Sprite palette index to the color index clicked.
+        }
+      }
+    };
+    var elist = document.querySelectorAll("[" + ATTRIB_NESIDX + "]");
+    elist.forEach(function(el){
+      var idx = parseInt(el.getAttribute(ATTRIB_NESIDX), 16);
+      if (idx >= 0 && idx < NESPalette.SystemColor.length){
+        el.style["background-color"] = NESPalette.SystemColor[idx];
+        el.addEventListener("click", handle_syspalette_clicked);
+      }
+    });
+
+
+    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 elist = document.querySelectorAll("[" + ATTRIB_PALIDX + "]");
+    elist.forEach(function(el){
+      if (el.hasAttribute(ATTRIB_PALIDX) && el.hasAttribute(ATTRIB_COLIDX)){
+        el.addEventListener("click", handle_palcolor_clicked);
+      }
+    });
+  }
+
+  get palette(){
+    return this.__NESPalette;
+  }
+
+  set palette(p){
+    if (!(p instanceof NESPalette)){
+      throw new TypeError("Expected NESPalette object instance.");
+    }
+    this.__NESPalette = p;
+  }
+}
+
+
+const instance = new CTRLPalettes();
+export default instance;
+
+
+