Added namespace support and fixed layout (+ darkmode!)
This commit is contained in:
parent
44624542e8
commit
3712035058
GPG key ID:
B730712F2C3A9D7A
8 changed files with 125 additions and 29 deletions
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
|
|
@ -4,4 +4,5 @@
|
|||
"MinifyAll.disableJson": true,
|
||||
"MinifyAll.disableHtml": true,
|
||||
"MinifyAll.openMinifiedDocument": false,
|
||||
"editor.formatOnSave": true,
|
||||
}
|
||||
47
dist/css/styles.css
vendored
Normal file
47
dist/css/styles.css
vendored
Normal file
|
|
@ -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;
|
||||
}
|
||||
1
dist/css/styles.min.css
vendored
Normal file
1
dist/css/styles.min.css
vendored
Normal file
|
|
@ -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;}
|
||||
14
dist/js/calculator.js
vendored
14
dist/js/calculator.js
vendored
|
|
@ -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,7 +41,7 @@ function buildJSON(item, models) {
|
|||
'damaged': 0,
|
||||
'damage': 0
|
||||
},
|
||||
'model': 'item/' + item
|
||||
'model': namespace + 'item/' + item
|
||||
};
|
||||
|
||||
for (let i = 0; i < models.length; i++) {
|
||||
|
|
|
|||
2
dist/js/calculator.min.js
vendored
2
dist/js/calculator.min.js
vendored
|
|
@ -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)}
|
||||
20
dist/js/scripts.js
vendored
20
dist/js/scripts.js
vendored
|
|
@ -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);
|
||||
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");
|
||||
|
|
|
|||
2
dist/js/scripts.min.js
vendored
2
dist/js/scripts.min.js
vendored
|
|
@ -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())}))}));
|
||||
59
index.html
59
index.html
|
|
@ -1,58 +1,85 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
|
||||
<head>
|
||||
<title>SBDevelopment - Damage calculator</title>
|
||||
<title>Model File Generator · SBDevelopment</title>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<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=="
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"
|
||||
integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg=="
|
||||
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=="
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
||||
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="dist/css/beautify.min.css">
|
||||
<link rel="stylesheet" href="dist/css/styles.min.css">
|
||||
<link rel="icon" href="https://sbdevelopment.tech/wp-content/uploads/2021/06/cropped-logo1-favicon-1-32x32.png"
|
||||
type="image/png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="jumbotron mb-4">
|
||||
<h1 class="display-4">SBDevelopment - Damage calculator</h1>
|
||||
<p class="lead">Generate the texturepack asset files for your damaged items.</p>
|
||||
<div class="jumbotron my-4">
|
||||
<img src="https://sbdevelopment.tech/wp-content/uploads/2023/09/logo2-light.png" alt="SBDevelopment logo"
|
||||
class="mb-3" style="width: 15em;">
|
||||
<h1 class="display-4">Model File Generator</h1>
|
||||
<p class="lead">Generate the resourcepack asset files for your VehiclesPlus models.</p>
|
||||
<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 class="fst-italic">You indicate which item you want to use and the path to the models models for each
|
||||
value. This tool then
|
||||
creates the .json file for you.</p>
|
||||
</div>
|
||||
<form id="calculatorForm">
|
||||
<!-- <div class="mb-3 w-50" ?>
|
||||
<label for="custommodeldata">Custom model data (1.14+):</label>
|
||||
<div class="form-check form-switch form-switch-lg">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="custommodeldata" checked>
|
||||
</div>
|
||||
<div class="form-text" id="namespace-help">1.14+ supports custom model data, which is preferred. If you
|
||||
use 1.13 or lower, the calculator works with damage values.</div>
|
||||
</div> -->
|
||||
<div class="mb-3 w-50">
|
||||
<label for="item">The item to use:</label>
|
||||
<label for="namespace">Namespace:</label>
|
||||
<input type="text" class="form-control" id="namespace" name="namespace" required value="vp">
|
||||
<div class="form-text" id="namespace-help">The example resourcepack places files in the '<b>vp</b>'
|
||||
namespace. If
|
||||
you use the 'minecraft' namespace, change it to <b>minecraft</b>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 w-50">
|
||||
<label for="item">Item:</label>
|
||||
<select class="form-control" id="item" name="item" required>
|
||||
<option value="" selected>Select an item...</option>
|
||||
</select>
|
||||
<div class="form-text" id="item-help">Select the item you want to use. If you want to support colors,
|
||||
use a Leather item.</div>
|
||||
</div>
|
||||
<div id="formItems" style="display: none;">
|
||||
<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" id="minus" disabled>
|
||||
<button type="button" class="btn btn-outline-danger 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>
|
||||
<button type="button" class="btn btn-outline-success 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>
|
||||
<label for="item1" class="form-label">Model for damage 1:</label>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="namespace1">vp:</span>
|
||||
<input type="text" class="form-control" id="item1" name="item1" placeholder="cars/blue_car"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Calculate</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -63,8 +90,8 @@
|
|||
<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=="
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
|
||||
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script type="application/javascript" src="dist/js/calculator.min.js"></script>
|
||||
<script type="application/javascript" src="dist/js/beautify.min.js"></script>
|
||||
|
|
|
|||
Reference in a new issue