Skip to content

Commit 4258243

Browse files
EndingCreditsEndingCredits
committed
Added material list and fixed loading bug
1 parent c1b2874 commit 4258243

File tree

4 files changed

+129
-52
lines changed

4 files changed

+129
-52
lines changed

‎index.html

+36-11
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,6 @@
3737
color: white;
3838
}
3939
}
40-
41-
#viewer {
42-
position:fixed;
43-
left: 0;
44-
top: 0;
45-
width: 100%;
46-
height: 100%;
47-
z-index: -1;
48-
}
4940
</style>
5041

5142
<script src="src/deepslate-helpers.js"></script>
@@ -65,6 +56,16 @@
6556
</script>
6657

6758
<style>
59+
60+
#viewer {
61+
position:fixed;
62+
left: 0;
63+
top: 0;
64+
width: 100%;
65+
height: 100%;
66+
z-index: -1;
67+
}
68+
6869
.settings-section {
6970
margin-bottom: 20px;
7071
display: grid;
@@ -108,14 +109,36 @@
108109
margin-left: 50px;
109110
}
110111

112+
#materialList {
113+
position: absolute;
114+
top: 10px;
115+
left: 50px;
116+
column-width: 200px;
117+
max-height: 80vh;
118+
}
119+
120+
#materialList .count-item {
121+
display: grid;
122+
background-color: #000;
123+
grid-template-columns: 1fr auto;
124+
gap: 0px;
125+
padding: 5px;
126+
}
127+
128+
#materialListButton {
129+
position: absolute;
130+
padding: 8px;
131+
}
132+
111133
#sliders input[type="range"] {
112134
writing-mode: vertical-lr;
113135
direction: rtl;
114136
appearance: slider-vertical;
115137
position: absolute;
116138
background-color: #000;
117139
width: 20px;
118-
height: 95%;
140+
top: 35px;
141+
height: 90%;
119142
vertical-align: bottom;
120143
}
121144

@@ -131,6 +154,8 @@
131154
<div id="viewer" width="100%"></div>
132155

133156
<div id="sliders" hidden></div>
157+
<button id="materialListButton" hidden><span class="material-icons">list</span></button>
158+
<div id="materialList" hidden></div>
134159

135160
<div id="main-content">
136161

@@ -196,7 +221,7 @@ <h5 class="header light">
196221
console.log("Setting up load listener");
197222
image.addEventListener('load', () => {
198223
console.log("Image load event triggered");
199-
//loadDeepslateResources(image);
224+
loadDeepslateResources(image);
200225
});
201226
}
202227

‎src/deepslate-helpers.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ function structureFromLitematic(litematic, y_min=0, y_max=-1) {
7575
const structure = new deepslate.Structure([width, height, depth]);
7676

7777
// Add blocks manually from the blocks loaded from the NBT
78-
var blockCount = 0
78+
var blockCount = 0;
7979
console.log("Building blocks...");
8080
for (let x=0; x < width; x++) {
8181
for (let y=y_min; y < y_max; y++) {

‎src/litematic-utils.js

+34
Original file line numberDiff line numberDiff line change
@@ -132,4 +132,38 @@ function __stripNBTTyping(nbtData) {
132132
return nbtData;
133133
}
134134
}
135+
}
136+
137+
138+
function getMaterialList(litematic) {
139+
var blockCounts = {};
140+
141+
for (const region of litematic.regions) {
142+
var blocks = region.blocks;
143+
var blockPalette = region.blockPalette;
144+
145+
width = blocks.length;
146+
height = blocks[0].length;
147+
depth = blocks[0][0].length;
148+
for (let x=0; x < width; x++) {
149+
for (let y=0; y < height; y++) {
150+
for (let z=0; z < depth; z++) {
151+
blockID = blocks[x][y][z];
152+
if (blockID > 0) {
153+
if(blockID < blockPalette.length) {
154+
blockInfo = blockPalette[blockID];
155+
blockName = blockInfo.Name;
156+
blockCounts[blockName] = (blockCounts[blockName] || 0) + 1;
157+
} else {
158+
// Something obvious so we know when things go wrong
159+
blockCounts["unknown"] = (blockCounts["unknown"] || 0) + 1;
160+
}
161+
}
162+
}
163+
}
164+
}
165+
}
166+
//console.log("Material list:", blockCounts);
167+
168+
return blockCounts;
135169
}

‎src/main.js

+58-40
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,12 @@ function loadAndProcessFile(file) {
2323
createRenderCanvas();
2424

2525
//Create sliders
26-
var max_y = structureLitematic.regions[0].blocks[0].length;
26+
const max_y = structureLitematic.regions[0].blocks[0].length;
2727
createRangeSliders(max_y);
2828

29+
const blockCounts = getMaterialList(structureLitematic);
30+
createMaterialsList(blockCounts);
31+
2932
setStructure(structureFromLitematic(structureLitematic), reset_view=true);
3033

3134
};
@@ -35,44 +38,59 @@ function loadAndProcessFile(file) {
3538

3639
}
3740

41+
function createMaterialsList(blockCounts) {
42+
const materialList = document.getElementById('materialList');
43+
44+
materialList.innerHTML = Object.entries(blockCounts)
45+
.sort(([,a], [,b]) => b - a)
46+
.map(([key, val]) => `<div class="count-item"><span>${key.replace('minecraft:', '')}</span><span>${val}</span></div>`)
47+
//.map(([key, val]) => `<tr><td>${key}</td><td>${val}</td></tr>`)
48+
.join('');
49+
materialList.style.display = 'none';
50+
51+
const materialListButton = document.getElementById('materialListButton');
52+
materialListButton.style.display = 'block';
53+
//materialListButton.onmouseover = () => materialList.style.display = 'block';
54+
//materialListButton.onmouseout = () => materialList.style.display = 'none';
55+
56+
materialListButton.onclick = () => materialList.style.display = materialList.style.display === 'none' ? 'block' : 'none';
57+
}
58+
3859
function createRangeSliders(max_y) {
39-
const slidersDiv = document.getElementById('sliders');
40-
slidersDiv.style.display = "block";
41-
42-
const minSlider = document.createElement('input');
43-
minSlider.type = 'range';
44-
minSlider.id = 'miny';
45-
minSlider.min = 0;
46-
minSlider.max = max_y;
47-
minSlider.value = 0;
48-
minSlider.step = 1;
49-
50-
console.log("max_y");
51-
console.log(max_y);
52-
53-
const maxSlider = document.createElement('input');
54-
maxSlider.type = 'range';
55-
maxSlider.id = 'maxy';
56-
maxSlider.min = 0;
57-
maxSlider.max = max_y;
58-
maxSlider.value = max_y-1;
59-
maxSlider.step = 1;
60-
61-
var y_min = 0;
62-
var y_max = max_y;
63-
64-
minSlider.addEventListener('change', function(e) {
65-
y_min = e.target.value;
66-
console.log(y_min);
67-
setStructure(structureFromLitematic(structureLitematic, y_min=y_min, y_max=y_max));
68-
});
69-
70-
maxSlider.addEventListener('change', function(e) {
71-
y_max = e.target.value;
72-
console.log(y_max);
73-
setStructure(structureFromLitematic(structureLitematic, y_min=y_min, y_max=y_max));
74-
});
75-
76-
slidersDiv.appendChild(minSlider);
77-
slidersDiv.appendChild(maxSlider);
60+
const slidersDiv = document.getElementById('sliders');
61+
slidersDiv.style.display = "block";
62+
63+
const minSlider = document.createElement('input');
64+
minSlider.type = 'range';
65+
minSlider.id = 'miny';
66+
minSlider.min = 0;
67+
minSlider.max = max_y;
68+
minSlider.value = 0;
69+
minSlider.step = 1;
70+
71+
const maxSlider = document.createElement('input');
72+
maxSlider.type = 'range';
73+
maxSlider.id = 'maxy';
74+
maxSlider.min = 0;
75+
maxSlider.max = max_y;
76+
maxSlider.value = max_y-1;
77+
maxSlider.step = 1;
78+
79+
var y_min = 0;
80+
var y_max = max_y;
81+
82+
minSlider.addEventListener('change', function(e) {
83+
y_min = e.target.value;
84+
console.log(y_min);
85+
setStructure(structureFromLitematic(structureLitematic, y_min=y_min, y_max=y_max));
86+
});
87+
88+
maxSlider.addEventListener('change', function(e) {
89+
y_max = e.target.value;
90+
console.log(y_max);
91+
setStructure(structureFromLitematic(structureLitematic, y_min=y_min, y_max=y_max));
92+
});
93+
94+
slidersDiv.appendChild(minSlider);
95+
slidersDiv.appendChild(maxSlider);
7896
}

0 commit comments

Comments
 (0)