Created CTRLBanksStore and removed test code from main.js

app/js/ctrls/CTRLBanksStore.js

+import GlobalEvents from "/app/js/common/EventCaller.js";
+import Utils from "/app/js/common/Utils.js";
+import NESBank from "/app/js/models/NESBank.js";
+
+
+
+var Banks = {};
+var CurrentBank = "";
+
+
+
+class CTRLBanksStore{
+  constructor(){
+    var HANDLE_ChangeSurface = function(surf){
+      if (!(surf instanceof NESBank)){
+        // TODO: Unselect any current bank element.
+        CurrentBankIndex = "";
+      } else {
+        if (Banks.length <= 0 || (CurrentBank !== "" && Banks[CurrentBank].bank !== surf)){
+          console.log("WARNING: Bank object being set outside of Bank Store.");
+        }
+      }
+    }
+    GlobalEvents.listen("change_surface", HANDLE_ChangeSurface);
+  }
+
+  get length(){
+    return Object.keys(Banks).length;
+  }
+
+  get json(){
+    var data = [];
+    Object.keys(Banks).forEach((key) => {
+      if (Banks.hasOwnProperty(key)){
+        data.push({name:key, data:Banks[key].bank.base64});
+      }
+    });
+    return JSON.stringify(data);
+  }
+
+  initialize(){
+    if (this.length <= 0){
+      this.createBank("Bank");
+    }
+    return this;
+  }
+
+
+  createBank(name, bbase64){
+    if (!(name in Banks)){
+      var bank = new NESBank();
+      if (typeof(bbase64) === "string"){
+        try {
+          bank.base64 = bbase64; 
+        } catch (e) {
+          console.log("Failed to create Bank. " + e.toString());
+          bank = null;
+        }
+      }
+      if (bank !== null){
+        var el = null; // This will be the element associated with this Bank. For now, it's a place holder.
+        Banks[name] = {bank:bank, el:el};
+        //Banks.push([name, bank, el]);
+
+        if (this.length <= 1){
+          GlobalEvents.emit("change_surface", bank);
+        }
+      }
+    }
+    return this;
+  }
+
+
+  removeBank(name){
+    if (name in Banks){
+      if (name === CurrentBank){
+        var keys = Object.keys(Banks);
+        if (keys.length > 1){
+          CurrentBank = (keys[0] !== name) ? keys[0] : keys[1];
+        } else {
+          CurrentBank = "";
+        }
+      }
+      // TODO: Remove Banks[name].el from the DOM.
+      delete Banks[name];
+      if (CurrentBank !== ""){
+        // TODO: Activate new Bank.
+      }
+    }
+    return this;
+  }
+
+  renameBank(name, newname){
+    if ((name in Banks) && !(newname in Banks)){
+      Banks[newname] = Banks[name];
+      delete Banks[name];
+      // TODO: Change the name in Banks[newname].el
+    }
+    return this;
+  }
+
+  activateBank(name){
+    if (CurrentBank !== name && (name in Banks)){
+      // TODO: Switch the active element object.
+      CurrentBank = name;
+      GlobalEvents.emit("change_surface", Banks[CurrentBank].bank);
+    }
+    return this;
+  }
+
+  clear(){
+    // TODO: Loop through all keys and remove the elements from the DOM.
+    Banks = {};
+    CurrentBank = "";
+  }
+}
+
+
+const instance = new CTRLBanksStore();
+export default instance;
+
+
+

app/js/main.js

 import CTRLPalettes from "/app/js/ctrls/CTRLPalettes.js";
 import CTRLPainter from "/app/js/ctrls/CTRLPainter.js";
 import CTRLPalettesStore from "/app/js/ctrls/CTRLPalettesStore.js";
-import NESPalette from "/app/js/models/NESPalette.js";
-import NESTile from "/app/js/models/NESTile.js";
-import NESBank from "/app/js/models/NESBank.js";
+import CTRLBanksStore from "/app/js/ctrls/CTRLBanksStore.js";
 
+import NESPalette from "/app/js/models/NESPalette.js";
 
 function TitlePainter(pal){
   var elist = document.querySelectorAll(".color-NES-random");
 }
 
 function initialize(DOC){
+  // UI and View only controllers
   TitlePainter(NESPalette.SystemColor);
   EmitterElements.initialize();
   Tabs.initialize();
-  //GlobalEvents.listen("emitted-event", handle_emitted);
-
-  //var nespainter = new NESPainter(DOC.getElementById("painter"));
   
+  // Controllers explicitly interface model data to view.
   CTRLPainter.initialize();
   CTRLPalettesStore.initialize();
-
-  
-  //console.log(palette.to_asm());
-  //GlobalEvents.emit("set_app_palette", palette);
- 
-  // TODO: Drop all of this below test code... or put it in a dedicated test app.
-  var TileA = new NESTile();
-  var TileB = new NESTile();
-  TileB.setPixelIndex(0,0,2);
-  var TileC = TileB.clone().flip(1);
-  var TileD = TileB.clone().flip(3);
-  //var TileC = TileB.clone();
-  //TileC.flip(1);
-
-  for (var i=0; i < 64; i++){
-    console.log(TileC.pixels[i]);
-  }
-
-  console.log("TileA does NOT match TileB: ", TileA.isEq(TileB) == -1);
-  console.log("TileA does NOT match TileC: ", TileA.isEq(TileC) == -1);
-  console.log("TileB DOES match TileC with Flag 1: ", TileB.isEq(TileC) == 1);
-  console.log("TileB DOES match TileD with Flag 3: ", TileB.isEq(TileD) == 3);
-
-  console.log(TileC);
-  console.log(TileC.dataArray);
-  console.log(TileC.pixels[7]);
-
-  var bnk = new NESBank();
-  bnk.lp[1] = TileB;
-  bnk.lp[0] = TileC;
-  bnk.rp[16] = TileD;
-  console.log(bnk.chr);
-  console.log("Bank color at coordinates (8,0): ", bnk.getColor(8,0));
-  console.log("Bank color at coordinates (7,0): ", bnk.getColor(7,0));
-  console.log("Bank color at coordinates (135, 15): ", bnk.getColor(135,15));
-
-  bnk.access_mode = 0;
-  GlobalEvents.emit("change_surface", bnk);
+  CTRLBanksStore.initialize();  
 }
 
 
-//console.log(document.getElementByID("painter"));
 initialize(document);