Fixed - / + buttons, minifed files

This commit is contained in:
Stijn Bannink 2023-01-20 19:51:33 +01:00
parent 0b16d3ae8b
commit b48938f8dd
7 changed files with 181 additions and 185 deletions

1
dist/css/beautify.min.css vendored Normal file
View file

@ -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}

1
dist/js/beautify.min.js vendored Normal file
View file

@ -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>"})}

15
dist/js/calculator.js vendored
View file

@ -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': {

1
dist/js/calculator.min.js vendored Normal file
View file

@ -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};

121
dist/js/scripts.js vendored Normal file
View file

@ -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)];
}
});

1
dist/js/scripts.min.js vendored Normal file
View file

@ -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())})});

View file

@ -1,5 +1,6 @@
<!doctype html>
<html lang="en">
<head>
<title>SBDevelopment - Damage calculator</title>
@ -12,8 +13,9 @@
<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=="
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="jumbotron mb-4">
@ -36,20 +38,18 @@
<div class="mb-3 w-50">
<label for="itemcount">The amount of models:</label>
<div class="input-group">
<button type="button" class="btn btn-outline-secondary btn-number" data-type="minus"
data-field="quant[1]">
<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[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]">
<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 class="mb-3 w-50">
<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>
@ -68,126 +68,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="application/javascript" src="dist/js/calculator.js"></script>
<script type="application/javascript" src="dist/js/beautify.js"></script>
<script>
$(document).ready(function () {
const form = $("#calculatorForm");
const formOptions = $("#formItems");
<script type="application/javascript" src="dist/js/calculator.min.js"></script>
<script type="application/javascript" src="dist/js/beautify.min.js"></script>
<script type="application/javascript" src="dist/js/scripts.min.js"></script>
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>