Enhancements to the Nametable Tools and associated UI.

app/js/ctrls/CTRLNametableTools.js

@@ -4,6 +4,8 @@ import Renderer from "/app/js/ui/Renderer.js";
 import NESNameTable from "/app/js/models/NESNameTable.js";
 import CTRLBanksStore from "/app/js/ctrls/CTRLBanksStore.js";
 
+const TILE_SELECT_CLS = "canvas-item-selected";
+
 var ELCtrl = null;
 var SURF = null;
 var TileIndex = -1;
@@ -58,16 +60,21 @@ function UpdateBankTileList(){
     } else {
       var elsel = ELCtrl.querySelector(".nametable-tile-select");
       if (elsel){
+        el.classList.remove("hidden");
         let tiles = SURF.bank.rp;
         for (let i=0; i < tiles.length; i++){
-          let cnv = elsel.querySelector('canvas[value="' + i + '"]');
+          let cnv = elsel.querySelector('canvas[value="' + i + '"]'); 
           if (cnv){
+            var psize = Math.floor(cnv.parentNode.clientWidth * 0.9);
+            if (cnv.clientWidth !== psize){
+              cnv.width = psize;
+              cnv.height = psize;
+            }
             let ctx = cnv.getContext("2d");
             let tsurf = new Renderer.NESTileSurface(tiles[i], SURF.palette, 0);
             Renderer.renderToFit(tsurf, ctx);
           }
-        }
-        el.classList.remove("hidden");
+        } 
       }
     }
   }
@@ -81,9 +88,9 @@ function OpenControls(){
       SURF.bank = null;
       curbankname = "NULL_BANK";
     }
-    UpdateBankList(curbankname);
-    UpdateBankTileList();
     ELCtrl.classList.remove("hidden");
+    UpdateBankList(curbankname);
+    UpdateBankTileList(); 
   }
 }
 
@@ -101,12 +108,25 @@ function HANDLE_PaintNametable(x, y){
   }
 }
 
+function ResetSelectedTile(){
+  var eltilesel = ELCtrl.querySelector(".nametable-tile-select");
+  if (eltilesel){
+    var op = eltilesel.querySelector('canvas[selected="True"]');
+    if (op){
+      op.classList.remove(TILE_SELECT_CLS);
+      op.removeAttribute("selected");
+    }
+  }
+  TileIndex = -1;
+}
+
 function HANDLE_SurfChange(surf){ 
   if (surf instanceof NESNameTable){
     if (SURF !== null)
         SURF.unlisten("paint_nametable", HANDLE_PaintNametable);
     SURF = surf;
     SURF.listen("paint_nametable", HANDLE_PaintNametable);
+    ResetSelectedTile();
     OpenControls();
   } else {
     if (SURF !== null)
@@ -137,19 +157,29 @@ class CTRLNametableTools{
     if (!eltilesel)
       throw new Error("Failed to find element class 'nametable-tile-select' within toolbar.");
 
+
+    var HANDLE_TileSelect = function(){
+      var oop = eltilesel.querySelector('canvas[selected="True"]');
+      if (oop){
+        oop.classList.remove(TILE_SELECT_CLS);
+        oop.removeAttribute("selected");
+      }
+      this.setAttribute("selected", "True");
+      this.classList.add(TILE_SELECT_CLS);
+      TileIndex = parseInt(this.getAttribute("value"));
+    };
     var op0 = eltilesel.querySelector('canvas[value="0"]');
     if (!op0)
       throw new Error("Failed to find initial canvas element within 'nametable-tile-select'.");
 
+    op0.addEventListener("click", HANDLE_TileSelect);
     for (let i=1; i < 256; i++){
       let op = eltilesel.querySelector('canvas[value="' + i + '"]');
       if (!op){
         op = op0.cloneNode(true);
         op.setAttribute("value", i);
         eltilesel.appendChild(op);
-        op.addEventListener("click", function(){
-          TileIndex = parseInt(this.getAttribute("value"));
-        });
+        op.addEventListener("click", HANDLE_TileSelect);
       }
     }
 

sass/core.scss

@@ -33,6 +33,10 @@ body{
   display: flex;
 }
 
+canvas.canvas-item-selected{
+  border: 3px solid #FF0000;
+}
+
 // Used to hide the ENTIRE page until the system has finished readying
 // everything.
 .cover {

views/toolbar_nametable.html

@@ -12,7 +12,7 @@
     <div class="pure-control-group simple-padding-top nametable-tile hidden">
         Bank Tile:
         <div class="list-container nametable-tile-select">
-            <canvas width="8" height="8" value="0"></canvas>
+          <canvas width="8" height="8" value="0"></canvas>
         </div>
     </div> 
   </form>