2021-04-07 13:34:07 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2021-04-07 13:41:41 +00:00
|
|
|
<title>Volmit Software - Damage calculator</title>
|
2021-04-07 13:34:07 +00:00
|
|
|
|
|
|
|
|
<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/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css"
|
|
|
|
|
integrity="sha512-N415hCJJdJx+1UBfULt+i+ihvOn42V/kOjOpp1UTh4CZ70Hx5bDlKryWaqEKfY/8EYOu/C2MuyaluJryK1Lb5Q=="
|
|
|
|
|
crossorigin="anonymous"/>
|
2021-04-07 19:16:20 +00:00
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
|
|
|
|
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
|
|
|
|
|
crossorigin="anonymous"/>
|
2021-04-07 13:34:07 +00:00
|
|
|
<link rel="stylesheet" href="dist/css/beautify.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
2021-04-07 19:16:20 +00:00
|
|
|
<div class="jumbotron mb-4">
|
2021-04-07 13:41:41 +00:00
|
|
|
<h1 class="display-4">Volmit Software - Damage calculator</h1>
|
2021-04-07 13:34:07 +00:00
|
|
|
<p class="lead">Simply calculate the damage values for your texture pack.</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
|
|
|
|
|
creates the .json file for you.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<form id="calculatorForm">
|
2021-04-07 19:16:20 +00:00
|
|
|
<div class="mb-3 w-50">
|
|
|
|
|
<label for="item">The item to use:</label>
|
2021-04-07 13:34:07 +00:00
|
|
|
<select class="form-control" id="item" name="item" required>
|
2021-04-07 19:40:41 +00:00
|
|
|
<option value="" selected>Select an item...</option>
|
2021-04-07 13:34:07 +00:00
|
|
|
<option value="leather_boots">Leather Boots</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
2021-04-07 19:16:20 +00:00
|
|
|
<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" disabled
|
|
|
|
|
data-type="minus" data-field="quant[1]">
|
|
|
|
|
<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]">
|
|
|
|
|
<span class="fas fa-plus"></span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="items">
|
|
|
|
|
<div 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>
|
2021-04-07 13:34:07 +00:00
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
<hr class="my-4">
|
|
|
|
|
<h6>Output JSON:</h6>
|
2021-04-07 19:16:20 +00:00
|
|
|
<pre id="content" class="mb-3 w-50">Fill in the form above to get an output.</pre>
|
|
|
|
|
<button id="copyButton" class="btn btn-primary mb-3 mr-3">Copy</button>
|
|
|
|
|
<a id="downloadButton" class="btn btn-secondary mb-3" href="#">Download</a>
|
2021-04-07 13:34:07 +00:00
|
|
|
</div>
|
|
|
|
|
</body>
|
2021-04-07 19:16:20 +00:00
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
|
|
|
|
|
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
|
|
|
|
|
crossorigin="anonymous"></script>
|
|
|
|
|
<script type="application/javascript" src="dist/js/bootstrap-plusmin.js"></script>
|
2021-04-07 13:34:07 +00:00
|
|
|
<script type="application/javascript" src="dist/js/calculator.js"></script>
|
|
|
|
|
<script type="application/javascript" src="dist/js/beautify.js"></script>
|
|
|
|
|
<script>
|
2021-04-07 19:16:20 +00:00
|
|
|
$(document).ready(function () {
|
2021-04-07 19:40:41 +00:00
|
|
|
const form = $("#calculatorForm");
|
|
|
|
|
const formOptions = $("#formItems");
|
2021-04-07 13:34:07 +00:00
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
const item = $("#item");
|
|
|
|
|
const itemCount = $("#itemcount");
|
|
|
|
|
const items = $("#items");
|
2021-04-07 13:34:07 +00:00
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
const output = $("#content");
|
2021-04-07 13:34:07 +00:00
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
const copyButton = $("#copyButton");
|
|
|
|
|
const downloadButton = $("#downloadButton");
|
|
|
|
|
|
|
|
|
|
item.change(function () {
|
|
|
|
|
console.log(this.value);
|
|
|
|
|
|
|
|
|
|
if (this.value !== "") { //If value is not empty, show other options ...
|
|
|
|
|
formOptions.show();
|
|
|
|
|
|
|
|
|
|
//... and set max value of item count.
|
2021-04-07 19:16:20 +00:00
|
|
|
const max = itemDamages[this.value];
|
2021-04-07 19:40:41 +00:00
|
|
|
itemCount.prop('max', max);
|
|
|
|
|
} else { //Or if empty, hide other options.
|
|
|
|
|
formOptions.hide();
|
2021-04-07 19:16:20 +00:00
|
|
|
}
|
|
|
|
|
});
|
2021-04-07 13:34:07 +00:00
|
|
|
|
2021-04-07 19:16:20 +00:00
|
|
|
$('.btn-number').click(function (e) {
|
|
|
|
|
e.preventDefault();
|
2021-04-07 13:34:07 +00:00
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
//Get the item count and clicked type
|
2021-04-07 19:16:20 +00:00
|
|
|
const fieldName = $(this).attr('data-field');
|
|
|
|
|
const type = $(this).attr('data-type');
|
|
|
|
|
const input = $("input[name='" + fieldName + "']");
|
|
|
|
|
const currentVal = parseInt(input.val());
|
2021-04-07 13:34:07 +00:00
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
if (type === 'minus') { //If removed one, remove latest input.
|
2021-04-07 19:16:20 +00:00
|
|
|
$("#iteminput" + (currentVal + 1)).remove();
|
2021-04-07 19:40:41 +00:00
|
|
|
} else if (type === 'plus') { //If added one, append new input.
|
|
|
|
|
items.append("<div id=\"iteminput" + currentVal + "\" class=\"mb-3 w-50\"><label for=\"item" + currentVal + "\">Model for damage " + currentVal + ":</label><input type=\"text\" class=\"form-control\" id=\"item" + currentVal + "\" name=\"item" + currentVal + "\" placeholder=\"cars/" + randomModel() + "\" required></div>");
|
2021-04-07 19:16:20 +00:00
|
|
|
}
|
|
|
|
|
});
|
2021-04-07 13:34:07 +00:00
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
form.on("submit", function(e){
|
|
|
|
|
e.preventDefault();
|
2021-04-07 19:16:20 +00:00
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
//Get selected item
|
|
|
|
|
const selectedItem = item.val();
|
2021-04-07 19:16:20 +00:00
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
//Get amount of items
|
2021-04-07 19:16:20 +00:00
|
|
|
const fieldName = $('.btn-number').attr('data-field');
|
|
|
|
|
const input = $("input[name='" + fieldName + "']");
|
|
|
|
|
const currentVal = parseInt(input.val());
|
|
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
//Build models array
|
2021-04-07 19:16:20 +00:00
|
|
|
const models = [];
|
|
|
|
|
for (let i = 0; i < currentVal; i++) {
|
2021-04-07 19:40:41 +00:00
|
|
|
models[i] = $("#item" + (i + 1)).val();
|
2021-04-07 19:16:20 +00:00
|
|
|
}
|
|
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
//Convert to JSON, and set in content field (with syntax highlighting)
|
|
|
|
|
const json = toJSON(selectedItem, models);
|
|
|
|
|
output.html(syntaxHighlight(json));
|
2021-04-07 19:16:20 +00:00
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
//And fix the Download knop
|
2021-04-07 19:16:20 +00:00
|
|
|
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(json);
|
2021-04-07 19:40:41 +00:00
|
|
|
downloadButton.attr("href", dataStr);
|
|
|
|
|
downloadButton.attr("download", selectedItem + ".json");
|
2021-04-07 19:16:20 +00:00
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
//Return false to not reload the page
|
2021-04-07 19:16:20 +00:00
|
|
|
return false;
|
|
|
|
|
});
|
|
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
copyButton.click(function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
|
|
//Get the content.
|
|
|
|
|
const copyText = output.text();
|
|
|
|
|
|
|
|
|
|
//Create temporary textarea, select, copy, and remove it again.
|
2021-04-07 19:16:20 +00:00
|
|
|
const textArea = document.createElement("textarea");
|
|
|
|
|
textArea.textContent = copyText;
|
|
|
|
|
document.body.append(textArea);
|
|
|
|
|
textArea.select();
|
|
|
|
|
document.execCommand("copy");
|
|
|
|
|
textArea.remove();
|
|
|
|
|
});
|
2021-04-07 13:34:07 +00:00
|
|
|
|
2021-04-07 19:40:41 +00:00
|
|
|
/**
|
|
|
|
|
* Get a random model.
|
|
|
|
|
*
|
|
|
|
|
* @return {string} The random model.
|
|
|
|
|
*/
|
2021-04-07 19:16:20 +00:00
|
|
|
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)];
|
|
|
|
|
}
|
2021-04-07 13:34:07 +00:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
