Fixed adding multiple models (+/- system).
This commit is contained in:
parent
636bcd0908
commit
176a29d569
2 changed files with 167 additions and 38 deletions
68
dist/js/bootstrap-plusmin.js
vendored
Normal file
68
dist/js/bootstrap-plusmin.js
vendored
Normal file
|
@ -0,0 +1,68 @@
|
|||
$('.btn-number').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);
|
||||
}
|
||||
} else if (type === 'plus') {
|
||||
if (currentVal < input.attr('max')) {
|
||||
input.val(currentVal + 1).change();
|
||||
}
|
||||
|
||||
if (input.val() == input.attr('max')) {
|
||||
$(this).attr('disabled', true);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
input.val(0);
|
||||
}
|
||||
});
|
||||
|
||||
$('.input-number').focusin(function () {
|
||||
$(this).data('oldValue', $(this).val());
|
||||
}).change(function () {
|
||||
minValue = parseInt($(this).attr('min'));
|
||||
maxValue = parseInt($(this).attr('max'));
|
||||
valueCurrent = parseInt($(this).val());
|
||||
|
||||
name = $(this).attr('name');
|
||||
|
||||
if (valueCurrent >= minValue) {
|
||||
$(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
|
||||
} else {
|
||||
alert('Sorry, the minimum value was reached.');
|
||||
$(this).val($(this).data('oldValue'));
|
||||
}
|
||||
|
||||
if (valueCurrent <= maxValue) {
|
||||
$(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
|
||||
} else {
|
||||
alert('Sorry, the maximum value was reached.');
|
||||
$(this).val($(this).data('oldValue'));
|
||||
}
|
||||
}).keydown(function (e) {
|
||||
// Allow: backspace, delete, tab, escape, enter and .
|
||||
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
|
||||
// Allow: Ctrl+A
|
||||
(e.keyCode === 65 && e.ctrlKey === true) ||
|
||||
// Allow: home, end, left, right
|
||||
(e.keyCode >= 35 && e.keyCode <= 39)) {
|
||||
// let it happen, don't do anything
|
||||
return;
|
||||
}
|
||||
// Ensure that it is a number and stop the keypress
|
||||
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
87
index.html
87
index.html
|
@ -10,11 +10,14 @@
|
|||
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"/>
|
||||
<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"/>
|
||||
<link rel="stylesheet" href="dist/css/beautify.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="jumbotron">
|
||||
<div class="jumbotron mb-4">
|
||||
<h1 class="display-4">Volmit Software - Damage calculator</h1>
|
||||
<p class="lead">Simply calculate the damage values for your texture pack.</p>
|
||||
<hr class="my-4">
|
||||
|
@ -22,46 +25,98 @@
|
|||
creates the .json file for you.</p>
|
||||
</div>
|
||||
<form id="calculatorForm">
|
||||
<div class="mb-3">
|
||||
<label for="item">Select the item:</label>
|
||||
<div class="mb-3 w-50">
|
||||
<label for="item">The item to use:</label>
|
||||
<select class="form-control" id="item" name="item" required>
|
||||
<option selected>Select an item...</option>
|
||||
<option value="leather_boots">Leather Boots</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="item1">Item for damage 1:</label>
|
||||
<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 class="mb-3">
|
||||
<label for="item2">Item for damage 2:</label>
|
||||
<input type="text" class="form-control" id="item2" name="item2" placeholder="cars/red_car" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Calculate</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr class="my-4">
|
||||
<h6>Output JSON:</h6>
|
||||
<pre id="content" class="mb-3">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>
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
<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>
|
||||
<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 = document.getElementById("calculatorForm");
|
||||
const output = document.getElementById("content");
|
||||
|
||||
const copybutton = document.getElementById("copyButton");
|
||||
const downloadbutton = document.getElementById("downloadButton");
|
||||
|
||||
$('#item').change(function () {
|
||||
if (this.value !== "") {
|
||||
$("#formItems").show();
|
||||
|
||||
const max = itemDamages[this.value];
|
||||
$("#itemcount").prop('max', max);
|
||||
} else {
|
||||
$("#formItems").hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('.btn-number').click(function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const fieldName = $(this).attr('data-field');
|
||||
const type = $(this).attr('data-type');
|
||||
const input = $("input[name='" + fieldName + "']");
|
||||
const currentVal = parseInt(input.val());
|
||||
|
||||
if (type === 'minus') {
|
||||
$("#iteminput" + (currentVal + 1)).remove();
|
||||
} else if (type === 'plus') {
|
||||
$("#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>");
|
||||
}
|
||||
});
|
||||
|
||||
form.addEventListener("submit", function (e) {
|
||||
if (e.preventDefault) e.preventDefault();
|
||||
|
||||
const item = document.getElementById('item').value;
|
||||
const model1 = document.getElementById('item1').value;
|
||||
const model2 = document.getElementById('item2').value;
|
||||
const models = [model1, model2];
|
||||
|
||||
const fieldName = $('.btn-number').attr('data-field');
|
||||
const input = $("input[name='" + fieldName + "']");
|
||||
const currentVal = parseInt(input.val());
|
||||
|
||||
const models = [];
|
||||
for (let i = 0; i < currentVal; i++) {
|
||||
models[i] = document.getElementById("item" + (i + 1)).value;
|
||||
}
|
||||
const json = toJSON(item, models);
|
||||
|
||||
output.innerHTML = syntaxHighlight(json);
|
||||
|
@ -82,5 +137,11 @@
|
|||
document.execCommand("copy");
|
||||
textArea.remove();
|
||||
});
|
||||
|
||||
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>
|
Reference in a new issue