Fixed - / + buttons, minifed files

dist/css/beautify.min.css

@@ -0,0 +1 @@
+pre{outline:1px solid #ccc;padding:5px;margin:5px}.string{color:green}.number{color:#ff8c00}.boolean{color:#00f}.null{color:#ff00ff}.key{color:red}

dist/js/beautify.min.js

@@ -0,0 +1 @@
+function syntaxHighlight(e){return"string"!=typeof e&&(e=JSON.stringify(e,void 0,4)),e=e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),e.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,function(e){let t="number";return/^"/.test(e)?t=/:$/.test(e)?"key":"string":/true|false/.test(e)?t="boolean":/null/.test(e)&&(t="null"),'<span class="'+t+'">'+e+"</span>"})}

dist/js/calculator.js

@@ -1,19 +1,8 @@
-//TODO Support more items
 const itemDamages = {
     'leather_boots': 64,
     'netherite_hoe': 2030
 };
 
-/**
- * Map an in-game Damage to an texturepack Damage.
- *
- * @param value The input value.
- * @param oldMax The old max value, from the itemDamages array.
- */
-function getMappedDamage(value, oldMax) {
-    return value / oldMax;
-}
-
 /**
  * Generate the JSON file.
  *
@@ -21,7 +10,7 @@ function getMappedDamage(value, oldMax) {
  * @param models An array of models to insert.
  * @returns {String} The JSON for the texturepack.
  */
-function toJSON(item, models) {
+function buildJSON(item, models) {
     const json = {};
 
     //Default values
@@ -44,7 +33,7 @@ function toJSON(item, models) {
 
     for (let i = 0; i < models.length; i++) {
         const model = models[i];
-        const damage = getMappedDamage(i + 1, itemDamages[item]);
+        const damage = i + 1 / itemDamages[item];
 
         json['overrides'][i + 1] = {
             'predicate': {

dist/js/calculator.min.js

@@ -0,0 +1 @@
+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 d=0;d<t.length;d++){const r=t[d],i=d+1/itemDamages[e];a.overrides[d+1]={predicate:{damaged:0,damage:i},model:r}}return a.overrides[t.length+1]={predicate:{damaged:1,damage:0},model:"item/"+e},JSON.stringify(a,null,2)}const itemDamages={leather_boots:64,netherite_hoe:2030};

dist/js/scripts.js

@@ -0,0 +1,121 @@
+$(document).ready(function () {
+    const form = $("#calculatorForm");
+    const formOptions = $("#formItems");
+
+    const item = $("#item");
+    const itemCount = $("#itemcount");
+    const items = $("#items");
+
+    const output = $("#content");
+
+    const copyButton = $("#copyButton");
+    const downloadButton = $("#downloadButton");
+
+    const minus = $("#minus");
+    const plus = $("#plus");
+    const input = $("input[name='quant']");
+
+    minus.click(function (e) {
+        const currentVal = parseInt(input.attr('value'));
+
+        if (!isNaN(currentVal)) {
+            console.log("#iteminput" + currentVal);
+
+            if (currentVal > input.attr('min')) {
+                input.attr('value', (currentVal - 1).toString());
+            }
+
+            if (currentVal - 1 == input.attr('min')) {
+                $(this).attr('disabled', true);
+            }
+
+            $("#iteminput" + currentVal).remove();
+        } else {
+            input.attr('value', '0');
+        }
+    });
+
+    plus.click(function (e) {
+        const currentVal = parseInt(input.attr('value'));
+
+        if (!isNaN(currentVal)) {
+            if (currentVal < input.attr('max')) {
+                input.attr('value', (currentVal + 1).toString());
+            }
+
+            if (currentVal == input.attr('max')) {
+                $(this).attr('disabled', true);
+                return;
+            }
+
+            if (parseInt(input.attr('value')) > 1) {
+                minus.prop('disabled', false);
+            } else {
+                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>");
+        } else {
+            input.attr('value', '0');
+        }
+    });
+
+    item.change(function () {
+        //If value is not empty, show other options ...
+        if (this.value !== "") {
+            formOptions.show();
+
+            //... and set max value of item count.
+            const max = itemDamages[this.value];
+            itemCount.prop('max', max);
+            plus.prop('disabled', false);
+        } else { //Or if empty, hide other options.
+            formOptions.hide();
+        }
+    });
+
+    form.on("submit", function (e) {
+        e.preventDefault();
+
+        //Get selected item
+        const selectedItem = item.val();
+
+        //Get amount of items
+        const fieldName = $('.btn-number').attr('data-field');
+        const input = $("input[name='" + fieldName + "']");
+        const currentVal = parseInt(input.attr('value'));
+
+        //Build models array
+        const models = [];
+        for (let i = 0; i < currentVal; i++) {
+            models[i] = $("#item" + (i + 1)).val();
+        }
+
+        //Convert to JSON, and set in content field (with syntax highlighting)
+        const json = buildJSON(selectedItem, models);
+        output.html(syntaxHighlight(json));
+
+        //And fix the Download knop
+        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(json);
+        downloadButton.attr("href", dataStr);
+        downloadButton.attr("download", selectedItem + ".json");
+
+        //Return false to not reload the page
+        return false;
+    });
+
+    copyButton.click(function (e) {
+        e.preventDefault();
+        navigator.clipboard.writeText(output.text());
+    });
+
+    /**
+     * Get a random model.
+     *
+     * @return {string} The random model.
+     */
+    function randomModel() {
+        const months = ["red_car", "blue_car", "green_car", "orange_car", "blue_bicycle", "red_bicycle", "green_bicycle", "orange_bicycle"];
+        return months[Math.floor(Math.random() * months.length)];
+    }
+});

dist/js/scripts.min.js

@@ -0,0 +1 @@
+$(document).ready(function(){function t(){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)]}const e=$("#calculatorForm"),a=$("#formItems"),n=$("#item"),r=$("#itemcount"),i=$("#items"),o=$("#content"),l=$("#copyButton"),c=$("#downloadButton"),u=$("#minus"),s=$("#plus"),d=$("input[name='quant']");u.click(function(t){const e=parseInt(d.attr("value"));isNaN(e)?d.attr("value","0"):(console.log("#iteminput"+e),e>d.attr("min")&&d.attr("value",(e-1).toString()),e-1==d.attr("min")&&$(this).attr("disabled",!0),$("#iteminput"+e).remove())}),s.click(function(e){const a=parseInt(d.attr("value"));if(isNaN(a))d.attr("value","0");else{if(a<d.attr("max")&&d.attr("value",(a+1).toString()),a==d.attr("max"))return void $(this).attr("disabled",!0);parseInt(d.attr("value"))>1?u.prop("disabled",!1):u.prop("disabled",!0),i.append('<div id="iteminput'+(a+1)+'" class="mb-3 w-50"><label for="item'+(a+1)+'">Model for damage '+(a+1)+':</label><input type="text" class="form-control" id="item'+(a+1)+'" name="item'+(a+1)+'" placeholder="cars/'+t()+'" required></div>')}}),n.change(function(){if(""!==this.value){a.show();const t=itemDamages[this.value];r.prop("max",t),s.prop("disabled",!1)}else a.hide()}),e.on("submit",function(t){t.preventDefault();const e=n.val(),a=$(".btn-number").attr("data-field"),r=$("input[name='"+a+"']"),i=parseInt(r.attr("value")),l=[];for(let t=0;t<i;t++)l[t]=$("#item"+(t+1)).val();const u=buildJSON(e,l);o.html(syntaxHighlight(u));const s="data:text/json;charset=utf-8,"+encodeURIComponent(u);return c.attr("href",s),c.attr("download",e+".json"),!1}),l.click(function(t){t.preventDefault(),navigator.clipboard.writeText(o.text())})});

index.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+
 <head>
     <title>SBDevelopment - Damage calculator</title>
 
@@ -7,187 +8,68 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css"
-          integrity="sha512-F7WyTLiiiPqvu2pGumDR15med0MDkUIo5VTVyyfECR5DZmCnDhti9q5VID02ItWjq6fvDfMaBaDl2J3WdL1uxA=="
+        integrity="sha512-F7WyTLiiiPqvu2pGumDR15med0MDkUIo5VTVyyfECR5DZmCnDhti9q5VID02ItWjq6fvDfMaBaDl2J3WdL1uxA=="
-          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
-          integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
+        integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
-          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="dist/css/beautify.css">
+    <link rel="stylesheet" href="dist/css/beautify.min.css">
 </head>
+
 <body>
-<div class="container">
+    <div class="container">
-    <div class="jumbotron mb-4">
+        <div class="jumbotron mb-4">
-        <h1 class="display-4">SBDevelopment - Damage calculator</h1>
+            <h1 class="display-4">SBDevelopment - Damage calculator</h1>
-        <p class="lead">Generate the texturepack asset files for your damaged items.</p>
+            <p class="lead">Generate the texturepack asset files for your damaged items.</p>
-        <hr class="my-4">
+            <hr class="my-4">
-        <p>You indicate which item you want to use and where the models are for each damage value. This tool then
+            <p>You indicate which item you want to use and where the models are for each damage value. This tool then
-            creates the .json file for you.</p>
+                creates the .json file for you.</p>
-    </div>
-    <form id="calculatorForm">
-        <div class="mb-3 w-50">
-            <label for="item">The item to use:</label>
-            <select class="form-control" id="item" name="item" required>
-                <option value="" selected>Select an item...</option>
-                <option value="leather_boots">Leather Boots</option>
-                <option value="netherite_hoe">Netherite Hoe</option>
-            </select>
         </div>
-        <div id="formItems" style="display: none;">
+        <form id="calculatorForm">
             <div class="mb-3 w-50">
-                <label for="itemcount">The amount of models:</label>
+                <label for="item">The item to use:</label>
-                <div class="input-group">
+                <select class="form-control" id="item" name="item" required>
-                    <button type="button" class="btn btn-outline-secondary btn-number" data-type="minus"
+                    <option value="" selected>Select an item...</option>
-                            data-field="quant[1]">
+                    <option value="leather_boots">Leather Boots</option>
-                        <span class="fas fa-minus"></span>
+                    <option value="netherite_hoe">Netherite Hoe</option>
-                    </button>
+                </select>
-                    <input type="text" id="itemcount" name="quant[1]" class="form-control input-number" value="1"
-                           min="1" max="2" readonly>
-                    <button type="button" class="btn btn-outline-secondary btn-number" data-type="plus"
-                            data-field="quant[1]">
-                        <span class="fas fa-plus"></span>
-                    </button>
-                </div>
             </div>
-            <div id="items">
+            <div id="formItems" style="display: none;">
                 <div class="mb-3 w-50">
-                    <label for="item1">Model for damage 1:</label>
+                    <label for="itemcount">The amount of models:</label>
-                    <input type="text" class="form-control" id="item1" name="item1" placeholder="cars/blue_car"
+                    <div class="input-group">
-                           required>
+                        <button type="button" class="btn btn-outline-secondary btn-number" id="minus" disabled>
+                            <span class="fas fa-minus"></span>
+                        </button>
+                        <input type="text" id="itemcount" name="quant" class="form-control input-number" value="1"
+                            min="1" max="1" readonly>
+                        <button type="button" class="btn btn-outline-secondary btn-number" id="plus" disabled>
+                            <span class="fas fa-plus"></span>
+                        </button>
+                    </div>
                 </div>
+                <div id="items">
+                    <div id="iteminput1" class="mb-3 w-50">
+                        <label for="item1">Model for damage 1:</label>
+                        <input type="text" class="form-control" id="item1" name="item1" placeholder="cars/blue_car"
+                            required>
+                    </div>
+                </div>
+                <button type="submit" class="btn btn-primary">Calculate</button>
             </div>
-            <button type="submit" class="btn btn-primary">Calculate</button>
+        </form>
-        </div>
+        <hr class="my-4">
-    </form>
+        <h6>Output JSON:</h6>
-    <hr class="my-4">
+        <pre id="content" class="mb-3 w-50">Fill in the form above to get an output.</pre>
-    <h6>Output JSON:</h6>
+        <button id="copyButton" class="btn btn-primary mb-3 mr-3">Copy</button>
-    <pre id="content" class="mb-3 w-50">Fill in the form above to get an output.</pre>
+        <a id="downloadButton" class="btn btn-secondary mb-3" href="#">Download</a>
-    <button id="copyButton" class="btn btn-primary mb-3 mr-3">Copy</button>
+    </div>
-    <a id="downloadButton" class="btn btn-secondary mb-3" href="#">Download</a>
-</div>
 </body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
-        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
+    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
-        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script type="application/javascript" src="dist/js/calculator.js"></script>
+<script type="application/javascript" src="dist/js/calculator.min.js"></script>
-<script type="application/javascript" src="dist/js/beautify.js"></script>
+<script type="application/javascript" src="dist/js/beautify.min.js"></script>
-<script>
+<script type="application/javascript" src="dist/js/scripts.min.js"></script>
-    $(document).ready(function () {
-        const form = $("#calculatorForm");
-        const formOptions = $("#formItems");
 
-        const item = $("#item");
-        const itemCount = $("#itemcount");
-        const itemCountButton = $('.btn-number');
-        const items = $("#items");
-
-        const output = $("#content");
-
-        const copyButton = $("#copyButton");
-        const downloadButton = $("#downloadButton");
-
-        itemCountButton.click(function (e) {
-            e.preventDefault();
-
-            let fieldName = $(this).attr('data-field');
-            let type = $(this).attr('data-type');
-            const input = $("input[name='" + fieldName + "']");
-            const currentVal = parseInt(input.val());
-
-            if (!isNaN(currentVal)) {
-                if (type === 'minus') {
-                    if (currentVal > input.attr('min')) {
-                        input.val(currentVal - 1).change();
-                    }
-
-                    if (input.val() == input.attr('min')) {
-                        $(this).attr('disabled', true);
-                        return;
-                    }
-
-                    $("#iteminput" + currentVal).remove();
-                } else if (type === 'plus') {
-                    if (currentVal < input.attr('max')) {
-                        input.val(currentVal + 1).change();
-                    }
-
-                    if (input.val() == input.attr('max')) {
-                        $(this).attr('disabled', true);
-                        return;
-                    }
-
-                    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>");
-                }
-            } else {
-                input.val(0);
-            }
-        });
-
-        item.change(function () {
-            if (this.value !== "") { //If value is not empty, show other options ...
-                formOptions.show();
-
-                //... and set max value of item count.
-                const max = itemDamages[this.value];
-                itemCount.prop('max', max);
-            } else { //Or if empty, hide other options.
-                formOptions.hide();
-            }
-        });
-
-        form.on("submit", function (e) {
-            e.preventDefault();
-
-            //Get selected item
-            const selectedItem = item.val();
-
-            //Get amount of items
-            const fieldName = $('.btn-number').attr('data-field');
-            const input = $("input[name='" + fieldName + "']");
-            const currentVal = parseInt(input.val());
-
-            //Build models array
-            const models = [];
-            for (let i = 0; i < currentVal; i++) {
-                models[i] = $("#item" + (i + 1)).val();
-            }
-
-            //Convert to JSON, and set in content field (with syntax highlighting)
-            const json = toJSON(selectedItem, models);
-            output.html(syntaxHighlight(json));
-
-            //And fix the Download knop
-            const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(json);
-            downloadButton.attr("href", dataStr);
-            downloadButton.attr("download", selectedItem + ".json");
-
-            //Return false to not reload the page
-            return false;
-        });
-
-        copyButton.click(function (e) {
-            e.preventDefault();
-
-            //Get the content.
-            const copyText = output.text();
-
-            //Create temporary textarea, select, copy, and remove it again.
-            const textArea = document.createElement("textarea");
-            textArea.textContent = copyText;
-            document.body.append(textArea);
-            textArea.select();
-            document.execCommand("copy");
-            textArea.remove();
-        });
-
-        /**
-         * Get a random model.
-         *
-         * @return {string} The random model.
-         */
-        function randomModel() {
-            const months = ["red_car", "blue_car", "green_car", "orange_car", "blue_bicycle", "red_bicycle", "green_bicycle", "orange_bicycle"];
-            return months[Math.floor(Math.random() * months.length)];
-        }
-    });
-</script>
 </html>