Added namespace support and fixed layout (+ darkmode!)

dist/css/styles.css

@@ -0,0 +1,47 @@
+.form-check-input {
+    clear: left;
+}
+
+.form-switch.form-switch-sm {
+    margin-bottom: 0.5rem;
+    /* JUST FOR STYLING PURPOSE */
+}
+
+.form-switch.form-switch-sm .form-check-input {
+    height: 1rem;
+    width: calc(1rem + 0.75rem);
+    border-radius: 2rem;
+}
+
+.form-switch.form-switch-md {
+    margin-bottom: 1rem;
+    /* JUST FOR STYLING PURPOSE */
+}
+
+.form-switch.form-switch-md .form-check-input {
+    height: 1.5rem;
+    width: calc(2rem + 0.75rem);
+    border-radius: 3rem;
+}
+
+.form-switch.form-switch-lg {
+    margin-bottom: 1.5rem;
+    /* JUST FOR STYLING PURPOSE */
+}
+
+.form-switch.form-switch-lg .form-check-input {
+    height: 2rem;
+    width: calc(3rem + 0.75rem);
+    border-radius: 4rem;
+}
+
+.form-switch.form-switch-xl {
+    margin-bottom: 2rem;
+    /* JUST FOR STYLING PURPOSE */
+}
+
+.form-switch.form-switch-xl .form-check-input {
+    height: 2.5rem;
+    width: calc(4rem + 0.75rem);
+    border-radius: 5rem;
+}

dist/css/styles.min.css

@@ -0,0 +1 @@
+.form-check-input{clear:left;}.form-switch.form-switch-sm{margin-bottom:.5rem}.form-switch.form-switch-sm .form-check-input{height:1rem;width:calc(1rem + .75rem);border-radius:2rem;}.form-switch.form-switch-md{margin-bottom:1rem}.form-switch.form-switch-md .form-check-input{height:1.5rem;width:calc(2rem + .75rem);border-radius:3rem;}.form-switch.form-switch-lg{margin-bottom:1.5rem}.form-switch.form-switch-lg .form-check-input{height:2rem;width:calc(3rem + .75rem);border-radius:4rem;}.form-switch.form-switch-xl{margin-bottom:2rem}.form-switch.form-switch-xl .form-check-input{height:2.5rem;width:calc(4rem + .75rem);border-radius:5rem;}

dist/js/calculator.js

@@ -12,16 +12,24 @@ const itemDamages = {
  * Generate the JSON file.
  *
  * @param item The item to generate it for.
+ * @param namespace The namespace to use.
  * @param models An array of models to insert.
  * @returns {String} The JSON for the texturepack.
  */
-function buildJSON(item, models) {
+function buildJSON(item, namespace, models) {
+    if (namespace == "minecraft") {
+        namespace = "";
+    } else {
+        namespace += ":";
+    }
+
     const json = {};
 
     //Default values
     json['parent'] = 'item/handheld';
     json['textures'] = {
-        'layer0': 'item/' + item
+        'layer0': 'item/' + item,
+        'layer1': 'item/' + item + '_overlay'
     };
 
     //Insert models
@@ -33,12 +41,12 @@ function buildJSON(item, models) {
             'damaged': 0,
             'damage': 0
         },
-        'model': 'item/' + item
+        'model': namespace + 'item/' + item
     };
 
     for (let i = 0; i < models.length; i++) {
         const model = models[i];
-        const damage = (i + 1) / (itemDamages[item]-1);
+        const damage = (i + 1) / (itemDamages[item] - 1);
 
         json['overrides'][i + 1] = {
             'predicate': {

dist/js/calculator.min.js

@@ -1 +1 @@
-const itemDamages={leather_helmet:55,leather_chestplate:80,leather_leggings:75,leather_boots:65,netherite_hoe:2031};function buildJSON(e,t){const a={parent:"item/handheld"};a.textures={layer0:"item/"+e},a.overrides=[],a.overrides[0]={predicate:{damaged:0,damage:0},model:"item/"+e};for(let r=0;r<t.length;r++){const d=t[r],i=(r+1)/(itemDamages[e]-1);a.overrides[r+1]={predicate:{damaged:0,damage:i},model:d}}return a.overrides[t.length+1]={predicate:{damaged:1,damage:0},model:"item/"+e},JSON.stringify(a,null,2)}
+const itemDamages={leather_helmet:55,leather_chestplate:80,leather_leggings:75,leather_boots:65,netherite_hoe:2031};function buildJSON(e,t,a){"minecraft"==t?t="":t+=":";const r={parent:"item/handheld"};r.textures={layer0:"item/"+e,layer1:"item/"+e+"_overlay"},r.overrides=[],r.overrides[0]={predicate:{damaged:0,damage:0},model:t+"item/"+e};for(let t=0;t<a.length;t++){const d=a[t],i=(t+1)/(itemDamages[e]-1);r.overrides[t+1]={predicate:{damaged:0,damage:i},model:d}}return r.overrides[a.length+1]={predicate:{damaged:1,damage:0},model:"item/"+e},JSON.stringify(r,null,2)}

dist/js/scripts.js

@@ -1,3 +1,5 @@
+let namespace = "vp";
+
 $(document).ready(function () {
     const form = $("#calculatorForm");
     const formOptions = $("#formItems");
@@ -14,12 +16,13 @@ $(document).ready(function () {
     const minus = $("#minus");
     const plus = $("#plus");
     const input = $("input[name='quant']");
+    const nsp = $("#namespace");
 
     const $select = $('#item');
 
     // Append the items to the select
-    $.each(itemDamages, function(key, value) {
-        const itemName = capitalize(key);
+    $.each(itemDamages, function (key, value) {
+        const itemName = capitalize(key) + " (supports " + value + " models)";
         $select.append($('<option></option>').attr('value', key).text(itemName));
     });
 
@@ -60,12 +63,21 @@ $(document).ready(function () {
                 minus.prop('disabled', true);
             }
 
-            items.append("<div id=\"iteminput" + (currentVal + 1) + "\" class=\"mb-3 w-50\"><label for=\"item" + (currentVal + 1) + "\">Model for damage " + (currentVal + 1) + ":</label><input type=\"text\" class=\"form-control\" id=\"item" + (currentVal + 1) + "\" name=\"item" + (currentVal + 1) + "\" placeholder=\"cars/" + randomModel() + "\" required></div>");
+            items.append("<div id=\"iteminput" + (currentVal + 1) + "\" class=\"mb-3 w-50\"><label for=\"item" + (currentVal + 1) + "\">Model for damage " + (currentVal + 1) + ":</label><div class=\"input-group mb-3\"><span class=\"input-group-text\" id=\"namespace" + (currentVal + 1) + "\">" + namespace + ":</span><input type=\"text\" class=\"form-control\" id=\"item" + (currentVal + 1) + "\" name=\"item" + (currentVal + 1) + "\" placeholder=\"cars/" + randomModel() + "\" required></div></div>");
         } else {
             input.attr('value', '0');
         }
     });
 
+    nsp.change(function () {
+        namespace = nsp.val();
+        if (namespace == "") {
+            namespace = "minecraft";
+        }
+        nsp.val(namespace);
+        $("span[id^='namespace']").text(namespace + ":");
+    });
+
     item.change(function () {
         //If value is not empty, show other options ...
         if (this.value !== "") {
@@ -94,10 +106,10 @@ $(document).ready(function () {
         }
 
         //Convert to JSON, and set in content field (with syntax highlighting)
-        const json = buildJSON(selectedItem, models);
+        const json = buildJSON(selectedItem, namespace, models);
         output.html(syntaxHighlight(json));
 
-        //And fix the Download knop
+        //And fix the Download button
         const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(json);
         downloadButton.attr("href", dataStr);
         downloadButton.attr("download", selectedItem + ".json");

dist/js/scripts.min.js

@@ -1 +1 @@
-$(document).ready((function(){const t=$("#calculatorForm"),e=$("#formItems"),a=$("#item"),n=$("#itemcount"),i=$("#items"),r=$("#content"),o=$("#copyButton"),l=$("#downloadButton"),c=$("#minus"),s=$("#plus"),u=$("input[name='quant']"),d=$("#item");$.each(itemDamages,(function(t,e){const a=t.split("_").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join(" ");d.append($("<option></option>").attr("value",t).text(a))})),c.click((function(t){const e=parseInt(u.attr("value"));isNaN(e)?u.attr("value","0"):(e>u.attr("min")&&u.attr("value",(e-1).toString()),e-1==u.attr("min")&&$(this).attr("disabled",!0),$("#iteminput"+e).remove())})),s.click((function(t){const e=parseInt(u.attr("value"));if(isNaN(e))u.attr("value","0");else{if(e<u.attr("max")&&u.attr("value",(e+1).toString()),e==u.attr("max"))return void $(this).attr("disabled",!0);parseInt(u.attr("value"))>1?c.prop("disabled",!1):c.prop("disabled",!0),i.append('<div id="iteminput'+(e+1)+'" class="mb-3 w-50"><label for="item'+(e+1)+'">Model for damage '+(e+1)+':</label><input type="text" class="form-control" id="item'+(e+1)+'" name="item'+(e+1)+'" placeholder="cars/'+function(){const t=["red_car","blue_car","green_car","orange_car","blue_bicycle","red_bicycle","green_bicycle","orange_bicycle"];return t[Math.floor(Math.random()*t.length)]}()+'" required></div>')}})),a.change((function(){if(""!==this.value){e.show();const t=itemDamages[this.value];n.prop("max",t),s.prop("disabled",!1)}else e.hide()})),t.on("submit",(function(t){t.preventDefault();const e=a.val(),n=parseInt(u.attr("value")),i=[];for(let t=0;t<n;t++)i[t]=$("#item"+(t+1)).val();const o=buildJSON(e,i);r.html(syntaxHighlight(o));const c="data:text/json;charset=utf-8,"+encodeURIComponent(o);return l.attr("href",c),l.attr("download",e+".json"),!1})),o.click((function(t){t.preventDefault(),navigator.clipboard.writeText(r.text())}))}));
+let namespace="vp";$(document).ready((function(){const t=$("#calculatorForm"),e=$("#formItems"),a=$("#item"),n=$("#itemcount"),i=$("#items"),r=$("#content"),o=$("#copyButton"),c=$("#downloadButton"),s=$("#minus"),l=$("#plus"),p=$("input[name='quant']"),m=$("#namespace"),u=$("#item");$.each(itemDamages,(function(t,e){const a=t.split("_").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join(" ")+" (supports "+e+" models)";u.append($("<option></option>").attr("value",t).text(a))})),s.click((function(t){const e=parseInt(p.attr("value"));isNaN(e)?p.attr("value","0"):(e>p.attr("min")&&p.attr("value",(e-1).toString()),e-1==p.attr("min")&&$(this).attr("disabled",!0),$("#iteminput"+e).remove())})),l.click((function(t){const e=parseInt(p.attr("value"));if(isNaN(e))p.attr("value","0");else{if(e<p.attr("max")&&p.attr("value",(e+1).toString()),e==p.attr("max"))return void $(this).attr("disabled",!0);parseInt(p.attr("value"))>1?s.prop("disabled",!1):s.prop("disabled",!0),i.append('<div id="iteminput'+(e+1)+'" class="mb-3 w-50"><label for="item'+(e+1)+'">Model for damage '+(e+1)+':</label><div class="input-group mb-3"><span class="input-group-text" id="namespace'+(e+1)+'">'+namespace+':</span><input type="text" class="form-control" id="item'+(e+1)+'" name="item'+(e+1)+'" placeholder="cars/'+function(){const t=["red_car","blue_car","green_car","orange_car","blue_bicycle","red_bicycle","green_bicycle","orange_bicycle"];return t[Math.floor(Math.random()*t.length)]}()+'" required></div></div>')}})),m.change((function(){namespace=m.val(),""==namespace&&(namespace="minecraft"),m.val(namespace),$("span[id^='namespace']").text(namespace+":")})),a.change((function(){if(""!==this.value){e.show();const t=itemDamages[this.value];n.prop("max",t),l.prop("disabled",!1)}else e.hide()})),t.on("submit",(function(t){t.preventDefault();const e=a.val(),n=parseInt(p.attr("value")),i=[];for(let t=0;t<n;t++)i[t]=$("#item"+(t+1)).val();const o=buildJSON(e,namespace,i);r.html(syntaxHighlight(o));const s="data:text/json;charset=utf-8,"+encodeURIComponent(o);return c.attr("href",s),c.attr("download",e+".json"),!1})),o.click((function(t){t.preventDefault(),navigator.clipboard.writeText(r.text())}))}));