mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 23:27:09 +00:00
Separate model and view and add loot table type dropdown
This commit is contained in:
Misode
66
index.html
66
index.html
@@ -9,6 +9,9 @@
|
||||
.dropdown-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
textarea.invalid {
|
||||
border-color: red !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -19,8 +22,19 @@
|
||||
<div class="container">
|
||||
<div class="row my-4">
|
||||
<div class="col-12 col-md-7">
|
||||
<div class="btn-group pb-3">
|
||||
<button type="button" class="btn btn-success d-block float-left" onclick="addPool(this)">Add Pool</button>
|
||||
<div class="input-group pb-3">
|
||||
<button type="button" class="btn btn-success d-block mr-3 float-left" onclick="addPool(this)">Add Pool</button>
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text rounded-left">Type</span>
|
||||
</div>
|
||||
<select id="tableType" class="form-control" style="max-width: 9em;" onchange="updateTableType(this)">
|
||||
<option value="minecraft:empty">Empty</option>
|
||||
<option value="minecraft:entity">Entity</option>
|
||||
<option value="minecraft:block">Block</option>
|
||||
<option value="minecraft:chest">Chest</option>
|
||||
<option value="minecraft:fishing">Fishing</option>
|
||||
<option value="minecraft:generic">Generic</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="structure" class="mb-3">
|
||||
</div>
|
||||
@@ -31,7 +45,7 @@
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">Indentation</span>
|
||||
</div>
|
||||
<select id="indentationSelect" class="form-control" style="max-width: 7em;" onchange="updateIndentation(this)">
|
||||
<select id="indentationSelect" class="form-control rounded-right" style="max-width: 7em;" onchange="updateIndentation(this)">
|
||||
<option value="2">2 Spaces</option>
|
||||
<option value="4">4 Spaces</option>
|
||||
<option value="tab">Tabs</option>
|
||||
@@ -39,7 +53,7 @@
|
||||
<button type="button" class="btn ml-3 btn-secondary" onclick="copySource(this)">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="source" class="form-control"></textarea>
|
||||
<textarea id="source" class="form-control" onchange="updateSouce()" rows="20"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,34 +66,34 @@
|
||||
<button type="button" class="btn btn-outline-success mr-3 mb-2 float-left">Add Condition</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="input-group mb-3 rolls">
|
||||
<div class="input-group mb-3 rolls" data-type="exact">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">Rolls</span>
|
||||
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" onclick="switchExact(this)">Exact</a>
|
||||
<a class="dropdown-item" onclick="switchRange(this)">Range</a>
|
||||
<a class="dropdown-item" onclick="switchBinomial(this)">Binomial</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" onclick="switchRollsType(this, 'exact')">Exact</a>
|
||||
<a class="dropdown-item" onclick="switchRollsType(this, 'range')">Range</a>
|
||||
<a class="dropdown-item" onclick="switchRollsType(this, 'binomial')">Binomial</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control exact d-none rounded-right" onchange="updateRollsField(this)" value="1">
|
||||
<span class="input-group-text rounded-0 range d-none">Min</span>
|
||||
<input type="text" class="form-control range min d-none" value="1" onchange="updateRollsField(this)">
|
||||
<span class="input-group-text rounded-0 range d-none">Max</span>
|
||||
<input type="text" class="form-control range max d-none rounded-right" value="2" onchange="updateRollsField(this)">
|
||||
<span class="input-group-text rounded-0 binomial d-none">n</span>
|
||||
<input type="text" class="form-control binomial n d-none" value="1" onchange="updateRollsField(this)">
|
||||
<span class="input-group-text rounded-0 binomial d-none">p</span>
|
||||
<input type="text" class="form-control binomial p d-none rounded-right" value="0.5" onchange="updateRollsField(this)">
|
||||
</div>
|
||||
<input type="text" class="form-control exact" onchange="updateRollsField(this)" value="1">
|
||||
<span class="input-group-text rounded-0 range d-none">Min</span>
|
||||
<input type="text" class="form-control range min d-none" value="1" onchange="updateRollsField(this)">
|
||||
<span class="input-group-text rounded-0 range d-none">Max</span>
|
||||
<input type="text" class="form-control range max d-none" value="2" onchange="updateRollsField(this)">
|
||||
<span class="input-group-text rounded-0 binomial d-none">n</span>
|
||||
<input type="text" class="form-control binomial n d-none" value="1" onchange="updateRollsField(this)">
|
||||
<span class="input-group-text rounded-0 binomial d-none">p</span>
|
||||
<input type="text" class="form-control binomial p d-none" value="2" onchange="updateRollsField(this)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
<script src="autogrow.js" charset="utf-8"></script>
|
||||
<script src="script.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
<script src="autogrow.js" charset="utf-8"></script>
|
||||
<script src="script.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
139
script.js
139
script.js
@@ -1,8 +1,10 @@
|
||||
|
||||
$("#source").val('');
|
||||
$('#tableType').val("minecraft:generic");
|
||||
$('#indentationSelect').val("2");
|
||||
let indentation = 2;
|
||||
let table = {
|
||||
type: "minecraft:generic",
|
||||
pools: []
|
||||
};
|
||||
addPool();
|
||||
@@ -12,75 +14,65 @@ function addPool(el) {
|
||||
rolls: 1,
|
||||
entries: []
|
||||
});
|
||||
let $pool = $('#poolTemplate').clone();
|
||||
$pool.removeAttr('id').attr('data-index', table.pools.length - 1);
|
||||
$('#structure').append($pool);
|
||||
invalidated();
|
||||
}
|
||||
|
||||
function removePool(el) {
|
||||
let $pool = $(el).closest('.pool');
|
||||
table.pools.pop($pool.attr('data-index'));
|
||||
$('#structure .pool').each((i, el) => {
|
||||
if ($(el).attr('data-index') > $pool.attr('data-index')) {
|
||||
$(el).attr('data-index', $(el).attr('data-index') - 1);
|
||||
}
|
||||
});
|
||||
$pool.remove();
|
||||
let index = parseInt($(el).closest('.pool').attr('data-index'));
|
||||
if (index === 0) {
|
||||
table.pools.shift();
|
||||
} else {
|
||||
table.pools.splice(index, index);
|
||||
}
|
||||
invalidated();
|
||||
}
|
||||
|
||||
function getRangeField($el, type) {
|
||||
if (type === 'exact') {
|
||||
return parseInt($el.find('.exact').val());
|
||||
} else if (type === 'range') {
|
||||
let data = {};
|
||||
let min = $el.find('.range.min').val();
|
||||
let max = $el.find('.range.max').val();
|
||||
if (min) data.min = parseInt(min);
|
||||
if (max) data.max = parseInt(max);
|
||||
return data;
|
||||
} else if (type === 'binomial') {
|
||||
let data = {type: "minecraft:binomial"};
|
||||
let n = $el.find('.binomial.n').val();
|
||||
let p = $el.find('.binomial.p').val();
|
||||
if (n) data.n = parseInt(n);
|
||||
if (p) data.p = parseFloat(p);
|
||||
return data;
|
||||
}
|
||||
}
|
||||
|
||||
function switchRollsType(el, type) {
|
||||
$(el).closest('.rolls').attr('data-type', type);
|
||||
updateRollsField(el);
|
||||
}
|
||||
|
||||
function updateRollsField(el) {
|
||||
let $pool = $(el).closest('.pool')
|
||||
let $rolls = $(el).closest('.rolls');
|
||||
let data = parseInt($rolls.find('.exact').val());
|
||||
if ($rolls.attr('data-type') === 'range') {
|
||||
data = {};
|
||||
let min = $rolls.find('.range.min').val();
|
||||
let max = $rolls.find('.range.max').val();
|
||||
if (min) data.min = parseInt(min);
|
||||
if (max) data.max = parseInt(max);
|
||||
} else if ($rolls.attr('data-type') === 'binomial') {
|
||||
data = {type: "minecraft:binomial"};
|
||||
let n = $rolls.find('.binomial.n').val();
|
||||
let p = $rolls.find('.binomial.p').val();
|
||||
if (n) data.n = parseInt(n);
|
||||
if (p) data.p = parseFloat(p);
|
||||
}
|
||||
table.pools[$pool.attr('data-index')].rolls = data;
|
||||
let type = $(el).closest('.rolls').attr('data-type');
|
||||
let data = getRangeField($(el).closest('.rolls'), type);
|
||||
table.pools[$(el).closest('.pool').attr('data-index')].rolls = data;
|
||||
invalidated();
|
||||
}
|
||||
|
||||
function switchExact(el) {
|
||||
let $rolls = $(el).closest('.rolls');
|
||||
$rolls.attr('data-type', 'exact');
|
||||
$rolls.find('.exact').removeClass('d-none');
|
||||
$rolls.find('.range').addClass('d-none');
|
||||
$rolls.find('.binomial').addClass('d-none');
|
||||
updateRollsField(el);
|
||||
function updateTableType() {
|
||||
table.type = $('#tableType').val();
|
||||
invalidated();
|
||||
}
|
||||
|
||||
function switchRange(el) {
|
||||
let $rolls = $(el).closest('.rolls');
|
||||
$rolls.attr('data-type', 'range');
|
||||
$rolls.find('.exact').addClass('d-none');
|
||||
$rolls.find('.range').removeClass('d-none');
|
||||
$rolls.find('.binomial').addClass('d-none');
|
||||
updateRollsField(el);
|
||||
}
|
||||
|
||||
function switchBinomial(el) {
|
||||
let $rolls = $(el).closest('.rolls');
|
||||
$rolls.attr('data-type', 'binomial');
|
||||
$rolls.find('.exact').addClass('d-none');
|
||||
$rolls.find('.range').addClass('d-none');
|
||||
$rolls.find('.binomial').removeClass('d-none');
|
||||
updateRollsField(el);
|
||||
}
|
||||
|
||||
function invalidated() {
|
||||
$('#source').val(JSON.stringify(table, null, indentation));
|
||||
$('#source').autogrow();
|
||||
function updateSouce() {
|
||||
$('#source').removeClass('invalid');
|
||||
try {
|
||||
table = JSON.parse($('#source').val());
|
||||
} catch {
|
||||
$('#source').addClass('invalid');
|
||||
return;
|
||||
}
|
||||
invalidated();
|
||||
}
|
||||
|
||||
function updateIndentation(el) {
|
||||
@@ -96,3 +88,38 @@ function copySource(el) {
|
||||
$('#source').get()[0].select();
|
||||
document.execCommand('copy');
|
||||
}
|
||||
|
||||
function invalidated() {
|
||||
generateStructure();
|
||||
$('#source').val(JSON.stringify(table, null, indentation));
|
||||
}
|
||||
|
||||
function generateStructure() {
|
||||
$('#structure').html('');
|
||||
|
||||
for (let i = 0; i < table.pools.length; i += 1) {
|
||||
let pool = table.pools[i];
|
||||
let $pool = $('#poolTemplate').clone();
|
||||
$pool.removeAttr('id').attr('data-index', i);
|
||||
// Rolls
|
||||
let $rolls = $pool.find('.rolls');
|
||||
if (typeof pool.rolls === 'object') {
|
||||
if (pool.rolls.type && pool.rolls.type.match(/(minecraft:)?binomial/)) {
|
||||
$rolls.attr('data-type', 'binomial');
|
||||
$rolls.find('.binomial').removeClass('d-none');
|
||||
$rolls.find('.binomial.n').val(pool.rolls.n);
|
||||
$rolls.find('.binomial.p').val(pool.rolls.p);
|
||||
} else {
|
||||
$rolls.attr('data-type', 'range');
|
||||
$rolls.find('.range').removeClass('d-none');
|
||||
$rolls.find('.range.min').val(pool.rolls.min);
|
||||
$rolls.find('.range.max').val(pool.rolls.max);
|
||||
}
|
||||
} else {
|
||||
$rolls.attr('data-type', 'exact');
|
||||
$rolls.find('.exact').removeClass('d-none');
|
||||
$rolls.find('.exact').val(pool.rolls);
|
||||
}
|
||||
$('#structure').append($pool);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user