Added material list and fixed loading bug

Author: EndingCredits

index.html

@@ -37,15 +37,6 @@
                color: white;
             }
          }
-
-         #viewer {
-             position:fixed;
-             left: 0;
-             top: 0;
-             width: 100%;
-             height: 100%;
-             z-index: -1;
-         }
       </style>
 
       <script src="src/deepslate-helpers.js"></script>
@@ -65,6 +56,16 @@
       </script>
 
       <style>
+
+         #viewer {
+             position:fixed;
+             left: 0;
+             top: 0;
+             width: 100%;
+             height: 100%;
+             z-index: -1;
+         }
+
          .settings-section {
             margin-bottom: 20px;
             display: grid;
@@ -108,14 +109,36 @@
             margin-left: 50px;
          }
 
+         #materialList {
+            position: absolute;
+            top: 10px;
+            left: 50px;
+            column-width: 200px;
+            max-height: 80vh;
+         }
+
+         #materialList .count-item {
+            display: grid;
+            background-color: #000;
+            grid-template-columns: 1fr auto;
+            gap: 0px;
+            padding: 5px;
+         }
+
+         #materialListButton {
+            position: absolute;
+            padding: 8px;
+         }
+
          #sliders input[type="range"] {
             writing-mode: vertical-lr;
             direction: rtl;
             appearance: slider-vertical;
             position: absolute;
             background-color: #000;
             width: 20px;
-            height: 95%;
+            top: 35px;
+            height: 90%;
             vertical-align: bottom;
          }
 
@@ -131,6 +154,8 @@
       <div id="viewer" width="100%"></div>
 
       <div id="sliders" hidden></div>
+      <button id="materialListButton" hidden><span class="material-icons">list</span></button>
+      <div id="materialList" hidden></div>
 
       <div id="main-content">
 
@@ -196,7 +221,7 @@ <h5 class="header light">
                  console.log("Setting up load listener");
                  image.addEventListener('load', () => {
                      console.log("Image load event triggered");
-                     //loadDeepslateResources(image);
+                     loadDeepslateResources(image);
                  });
               }
 

src/deepslate-helpers.js

@@ -75,7 +75,7 @@ function structureFromLitematic(litematic, y_min=0, y_max=-1) {
   const structure = new deepslate.Structure([width, height, depth]);
 
   // Add blocks manually from the blocks loaded from the NBT
-  var blockCount = 0
+  var blockCount = 0;
   console.log("Building blocks...");
   for (let x=0; x < width; x++) {
     for (let y=y_min; y < y_max; y++) {

src/litematic-utils.js

@@ -132,4 +132,38 @@ function __stripNBTTyping(nbtData) {
         return nbtData;
     }
   }
+}
+
+
+function getMaterialList(litematic) {
+  var blockCounts = {};
+
+  for (const region of litematic.regions) {
+    var blocks = region.blocks;
+    var blockPalette = region.blockPalette;
+
+    width = blocks.length;
+    height = blocks[0].length;
+    depth = blocks[0][0].length;
+    for (let x=0; x < width; x++) {
+      for (let y=0; y < height; y++) {
+        for (let z=0; z < depth; z++) {
+          blockID = blocks[x][y][z];
+          if (blockID > 0) {
+            if(blockID < blockPalette.length) {
+              blockInfo = blockPalette[blockID];
+              blockName = blockInfo.Name;
+              blockCounts[blockName] = (blockCounts[blockName] || 0) + 1;
+            } else {
+              // Something obvious so we know when things go wrong
+              blockCounts["unknown"] = (blockCounts["unknown"] || 0) + 1;
+            }
+          }
+        }
+      }
+    }
+  }
+  //console.log("Material list:", blockCounts);
+
+  return blockCounts;
 }

src/main.js

@@ -23,9 +23,12 @@ function loadAndProcessFile(file) {
       createRenderCanvas();
 
       //Create sliders
-      var max_y = structureLitematic.regions[0].blocks[0].length;
+      const max_y = structureLitematic.regions[0].blocks[0].length;
       createRangeSliders(max_y);
 
+      const blockCounts = getMaterialList(structureLitematic);
+      createMaterialsList(blockCounts);
+
       setStructure(structureFromLitematic(structureLitematic), reset_view=true);
 
    };
@@ -35,44 +38,59 @@ function loadAndProcessFile(file) {
 
 }
 
+function createMaterialsList(blockCounts) {
+   const materialList = document.getElementById('materialList');
+
+   materialList.innerHTML = Object.entries(blockCounts)
+    .sort(([,a], [,b]) => b - a)
+    .map(([key, val]) => `<div class="count-item"><span>${key.replace('minecraft:', '')}</span><span>${val}</span></div>`)
+    //.map(([key, val]) => `<tr><td>${key}</td><td>${val}</td></tr>`)
+    .join('');
+   materialList.style.display = 'none';
+
+   const materialListButton = document.getElementById('materialListButton');
+   materialListButton.style.display = 'block';
+   //materialListButton.onmouseover = () => materialList.style.display = 'block';
+   //materialListButton.onmouseout = () => materialList.style.display = 'none';
+
+   materialListButton.onclick = () => materialList.style.display = materialList.style.display === 'none' ? 'block' : 'none';
+}
+
 function createRangeSliders(max_y) {
-    const slidersDiv = document.getElementById('sliders');
-    slidersDiv.style.display = "block";
-
-    const minSlider = document.createElement('input');
-    minSlider.type = 'range';
-    minSlider.id = 'miny';
-    minSlider.min = 0;
-    minSlider.max = max_y;
-    minSlider.value = 0;
-    minSlider.step = 1;
-
-    console.log("max_y");
-    console.log(max_y);
-
-    const maxSlider = document.createElement('input');
-    maxSlider.type = 'range';
-    maxSlider.id = 'maxy';
-    maxSlider.min = 0;
-    maxSlider.max = max_y;
-    maxSlider.value = max_y-1;
-    maxSlider.step = 1;
-
-    var y_min = 0;
-    var y_max = max_y;
-
-    minSlider.addEventListener('change', function(e) {
-        y_min = e.target.value;
-        console.log(y_min);
-        setStructure(structureFromLitematic(structureLitematic, y_min=y_min, y_max=y_max));
-    });
-
-    maxSlider.addEventListener('change', function(e) {
-        y_max = e.target.value;
-        console.log(y_max);
-        setStructure(structureFromLitematic(structureLitematic, y_min=y_min, y_max=y_max));
-    });
-
-    slidersDiv.appendChild(minSlider);
-    slidersDiv.appendChild(maxSlider);
+   const slidersDiv = document.getElementById('sliders');
+   slidersDiv.style.display = "block";
+
+   const minSlider = document.createElement('input');
+   minSlider.type = 'range';
+   minSlider.id = 'miny';
+   minSlider.min = 0;
+   minSlider.max = max_y;
+   minSlider.value = 0;
+   minSlider.step = 1;
+
+   const maxSlider = document.createElement('input');
+   maxSlider.type = 'range';
+   maxSlider.id = 'maxy';
+   maxSlider.min = 0;
+   maxSlider.max = max_y;
+   maxSlider.value = max_y-1;
+   maxSlider.step = 1;
+
+   var y_min = 0;
+   var y_max = max_y;
+
+   minSlider.addEventListener('change', function(e) {
+      y_min = e.target.value;
+      console.log(y_min);
+      setStructure(structureFromLitematic(structureLitematic, y_min=y_min, y_max=y_max));
+   });
+
+   maxSlider.addEventListener('change', function(e) {
+      y_max = e.target.value;
+      console.log(y_max);
+      setStructure(structureFromLitematic(structureLitematic, y_min=y_min, y_max=y_max));
+   });
+
+   slidersDiv.appendChild(minSlider);
+   slidersDiv.appendChild(maxSlider);
 }