Skip to content

Commit 8df145b

Browse files
gd-codesgd-codes
committed
Version 4.3 - Bug fixes and improvements
See past 3 commits (build with structures - fixes #5, JS overhaul, this - fixes #6)
1 parent bca595d commit 8df145b

File tree

2 files changed

+67
-16
lines changed

2 files changed

+67
-16
lines changed

‎scripts/dynamicHtml.js‎

Lines changed: 66 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ the commands</a> are), 2 halves per map. <br/>Coordinates in each zone are speci
181181
<path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z"/></svg></a></li>`];
182182

183183
try {
184-
var image = PictureData[uid]['finalImage']; //$("#imageForm_"+uid).data('finalimage');
184+
var image = PictureData[uid]['finalImage'];
185185
//let fname = $("#fnNameInput_"+uid).val();
186186
var pal = $("#materialOptsDisplay_"+uid).data("selected").split(" ");
187187
} catch (err) {
@@ -201,15 +201,21 @@ the commands</a> are), 2 halves per map. <br/>Coordinates in each zone are speci
201201
if (ymax > 1) {
202202
yMap = findYMap(image, ymax, PictureData[uid]['shadeMap']); // Defined in `functionwriter.js`
203203
}
204+
205+
// Begin creating the data for each zone
204206
// `table` has a matcing coloured cell for every pixel in the image
205207
// `countlist` is a table of the total occurrences
206208
// Repeat these for each of the zones & append to html as seperate pages
207-
for (var i=0; i<zone_origins.length; i++) {
208-
let counts = new Array(materialnames.length).fill(0);
209+
var counts = new Array(zone_origins.length).fill(0);
210+
counts[0] = new Array(materialnames.length).fill(0);
211+
// counts[0] has total block counts across all zones, 1..N contain zone-wise counts
212+
for (let i=0; i<zone_origins.length; i++) { // begin outer for loop ------------------------
213+
counts[i+1] = new Array(materialnames.length).fill(0);
209214
let table = [`<table class="table table-responsive">`],
210-
countlist = [`<table class="table table-hover table-sm"><caption class="text-dark">Palette Usage - Zone ${i+1}`,
211-
`</caption><thead class="thead-light"><tr class="py-3"><th scope="col" class="pl-3">Material</th>`,
212-
`<th scope="col">Count</th></tr></thead><tbody>`];
215+
countlist = [`<table class="table table-hover table-sm" id="countlistTable_${i}_${uid}">`,
216+
`<caption class="text-dark">Palette Usage - Zone ${i+1}</caption><thead class="thead-light"><tr class="py-3">`,
217+
`<th scope="col" class="pl-3">Material</th><th scope="col">Count</th><th scope="col" class="d-none">Count</th>`,
218+
`<th scope="col" class="d-none">Count (Total)</th><th scope="col" class="d-none">Count (Total)</th></tr></thead><tbody>`];
213219
let pix, pixnorm, code, y;
214220
x0 = zone_origins[i][0]; z0 = zone_origins[i][1];
215221
for (let z=0; z<128; z++) {
@@ -222,16 +228,13 @@ the commands</a> are), 2 halves per map. <br/>Coordinates in each zone are speci
222228
table.push(`<td tabindex="0" style="background-color: rgb(${pixnorm[0]},${pixnorm[1]},${pixnorm[2]});" `+
223229
`data-trigger="focus" data-content="Position : &lt;b&gt;~${x} ~${y} ~${z}&lt;/b&gt;" data-html="true" ` +
224230
`data-placement="top" title="${materialnames[code]}"></td>`);
225-
counts[code] += 1;
231+
counts[i+1][code] += 1;
232+
counts[0][code] += 1;
226233
}
227234
table.push("</tr>");
228235
}
229236
table.push("</table>");
230237

231-
for (let ct of pal) {
232-
let indexn = colourtokens.indexOf(ct);
233-
countlist.push(`<tr><td class="pl-4">${materialnames[indexn]}</td><td>${counts[indexn]}</td></tr>`);
234-
}
235238
countlist.push(`</tbody></table>`);
236239

237240
htm = [`<div class="collapse" id="guidePage_${i+1}_map_${uid}" data-parent="#survGuide_${uid}">`,
@@ -240,14 +243,22 @@ the commands</a> are), 2 halves per map. <br/>Coordinates in each zone are speci
240243
`<p>Click on any of the squares in the table to view a popup with its block type and coordinates.`,
241244
`<br/>You can also use the <code>Tab</code> key to navigate row-by-row.</p>`+
242245
((ymax <= 1) ? `` : `<p>For 3D map art, the shading of lighter/darker blocks is not shown here to make it easier to distinguish between different blocks. Refer to the converted image preview for the actual colours.</p>`),
243-
`</div>`].concat(
244-
countlist, [`</div><div class="col-md-8 guide-tableareas" id="survGuideTableArea_${i+1}_${uid}">`],
245-
table, [`</div></div></div>`]);
246+
`</div><div class="px-2 py-2"><input type="checkbox" class="mx-2" id="guideTotalBlockCount_${i}_${uid}"/>`,
247+
`<label for="guideTotalBlockCount_${i}_${uid}">View total count for all zones</label><br/>`,
248+
`<input type="checkbox" class="mx-2" id="guideStackViewCount_${i}_${uid}"/><label for="guideStackViewCount_${i}_${uid}">Display values in stacks of 64</label></div>`
249+
].concat(
250+
countlist,
251+
[`</div><div class="col-md-8 guide-tableareas" id="survGuideTableArea_${i+1}_${uid}">`],
252+
table,
253+
[`</div></div></div>`]);
254+
246255
navlist.push(`<li class="page-item"><a class="page-link" data-toggle="collapse" ` +
247256
`href="#guidePage_${i+1}_map_${uid}">${i+1}</a></li>`);
248257
divlist.push(htm.join(""));
249-
}
258+
// end outer for loop ------------------------
259+
}
250260

261+
// Add the html string to DOM
251262
$("#guideTab_"+uid).html([`<nav aria-label="Pagination" id="guidePageBar_${uid}">`,
252263
`<ul class="pagination justify-content-center">`,
253264
navlist.join(""),
@@ -257,6 +268,21 @@ the commands</a> are), 2 halves per map. <br/>Coordinates in each zone are speci
257268
$(`#guidePageBar_${uid} li.page-item`).click(function() {
258269
switchActiveGuidePage(this);
259270
});
271+
272+
// Populate values in the counts table
273+
for (let i=0; i<zone_origins.length; i++) {
274+
var tdata = "";
275+
for (let ct of pal) {
276+
let indexn = colourtokens.indexOf(ct);
277+
tdata += `<tr><td class="pl-4">${materialnames[indexn]}</td><td class="text-right pr-3">${counts[i+1][indexn]}</td>
278+
<td class="d-none text-right pr-3">${Math.floor(counts[i+1][indexn] / 64)}s + ${counts[i+1][indexn] % 64}</td>
279+
<td class="d-none text-right pr-3">${counts[0][indexn]}</td>
280+
<td class="d-none text-right pr-3">${Math.floor(counts[0][indexn] / 64)}s + ${counts[0][indexn] % 64}</td>
281+
</tr>`;
282+
}
283+
$(`#countlistTable_${i}_${uid} > tbody`).html(tdata);
284+
}
285+
260286
// Keeping 16,000+ popovers at once = horrible performance. Hence create and destroy active one each time while focused
261287
$(`.guide-tableareas td`).focus(function() {
262288
$(this).data('toggle', 'popover');
@@ -266,11 +292,36 @@ the commands</a> are), 2 halves per map. <br/>Coordinates in each zone are speci
266292
$(this).popover('dispose');
267293
$(this).removeData('toggle');
268294
});
295+
// Bind count control checkboxes
296+
for (let i=0; i<zone_origins.length; i++) {
297+
$(`#guideTotalBlockCount_${i}_${uid}`).click( function() {
298+
toggleCountListView(uid, zone_origins.length, $(this).prop('checked'), $(`#guideStackViewCount_${i}_${uid}`).prop('checked'))
299+
});
300+
$(`#guideStackViewCount_${i}_${uid}`).click( function() {
301+
toggleCountListView(uid, zone_origins.length, $(`#guideTotalBlockCount_${i}_${uid}`).prop('checked'), $(this).prop('checked'))
302+
});
303+
}
269304
// Make page 1 visible & active
270305
$(`#guidePageBar_${uid} li.page-item`).eq(1).click();
271306
$(`#guidePage_1_map_${uid}`).addClass("show");
272307
}
273308

309+
310+
function toggleCountListView(uid, l, total, stacks) {
311+
// Show the correct column in countlist table
312+
for (let i=0; i<l; i++) {
313+
$(`#guideTotalBlockCount_${i}_${uid}`).prop('checked', total)
314+
$(`#guideStackViewCount_${i}_${uid}`).prop('checked', stacks)
315+
$(`#countlistTable_${i}_${uid} tr > *:nth-child(2)`).addClass('d-none');
316+
$(`#countlistTable_${i}_${uid} tr > *:nth-child(3)`).addClass('d-none');
317+
$(`#countlistTable_${i}_${uid} tr > *:nth-child(4)`).addClass('d-none');
318+
$(`#countlistTable_${i}_${uid} tr > *:nth-child(5)`).addClass('d-none');
319+
var n = (total) ? ((stacks) ? 5 : 4) : ((stacks) ? 3 : 2);
320+
$(`#countlistTable_${i}_${uid} tr > *:nth-child(${n})`).removeClass('d-none');
321+
}
322+
}
323+
324+
274325
function switchActiveGuidePage(pagelink) {
275326
// Pagination active status does not change automatically
276327
let off = $(pagelink).hasClass("active");

‎sw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ https://gd-codes.github.io/mc-pixelart-maker/
44
Cached site should require only ~ 3 MB space
55
*/
66

7-
const CURRENT_CACHE_VERSION = 'mapart-cache-4.3.1';
7+
const CURRENT_CACHE_VERSION = 'mapart-cache-4.3.2';
88

99
const CACHE_URLS_LOCAL = [
1010
/* Important : `/` doesn't automatically fetch `/index.html` locally, explicitly cache it

0 commit comments

Comments
 (0)