akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-05-03 22:22:54 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Separate model and view and add loot table type dropdown

Browse Source
This commit is contained in:
Misode
2019-06-17 17:15:01 +02:00
parent 74c47e2f66
commit 9ede327edc
2 changed files with 123 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+25 -11
View File
@@ -9,6 +9,9 @@
.dropdown-item { .dropdown-item {
cursor: pointer; cursor: pointer;
} }
textarea.invalid {
border-color: red !important;
}
</style> </style>
</head> </head>
<body> <body>
@@ -19,8 +22,19 @@
<div class="container"> <div class="container">
<div class="row my-4"> <div class="row my-4">
<div class="col-12 col-md-7"> <div class="col-12 col-md-7">
<div class="btn-group pb-3"> <div class="input-group pb-3">
<button type="button" class="btn btn-success d-block float-left" onclick="addPool(this)">Add Pool</button> <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>
<div id="structure" class="mb-3"> <div id="structure" class="mb-3">
</div> </div>
@@ -31,7 +45,7 @@
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text">Indentation</span> <span class="input-group-text">Indentation</span>
</div> </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="2">2 Spaces</option>
<option value="4">4 Spaces</option> <option value="4">4 Spaces</option>
<option value="tab">Tabs</option> <option value="tab">Tabs</option>
@@ -39,7 +53,7 @@
<button type="button" class="btn ml-3 btn-secondary" onclick="copySource(this)">Copy</button> <button type="button" class="btn ml-3 btn-secondary" onclick="copySource(this)">Copy</button>
</div> </div>
</div> </div>
<textarea id="source" class="form-control"></textarea> <textarea id="source" class="form-control" onchange="updateSouce()" rows="20"></textarea>
</div> </div>
</div> </div>
</div> </div>
@@ -52,25 +66,25 @@
<button type="button" class="btn btn-outline-success mr-3 mb-2 float-left">Add Condition</button> <button type="button" class="btn btn-outline-success mr-3 mb-2 float-left">Add Condition</button>
</div> </div>
<div class="card-body"> <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"> <div class="input-group-prepend">
<span class="input-group-text">Rolls</span> <span class="input-group-text">Rolls</span>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" onclick="switchExact(this)">Exact</a> <a class="dropdown-item" onclick="switchRollsType(this, 'exact')">Exact</a>
<a class="dropdown-item" onclick="switchRange(this)">Range</a> <a class="dropdown-item" onclick="switchRollsType(this, 'range')">Range</a>
<a class="dropdown-item" onclick="switchBinomial(this)">Binomial</a> <a class="dropdown-item" onclick="switchRollsType(this, 'binomial')">Binomial</a>
</div> </div>
</div> </div>
<input type="text" class="form-control exact" onchange="updateRollsField(this)" value="1"> <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> <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)"> <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> <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)"> <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> <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)"> <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> <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)"> <input type="text" class="form-control binomial p d-none rounded-right" value="0.5" onchange="updateRollsField(this)">
</div> </div>
</div> </div>
</div> </div>
script.js
+81 -54
View File
@@ -1,8 +1,10 @@
$("#source").val(''); $("#source").val('');
$('#tableType').val("minecraft:generic");
$('#indentationSelect').val("2"); $('#indentationSelect').val("2");
let indentation = 2; let indentation = 2;
let table = { let table = {
type: "minecraft:generic",
pools: [] pools: []
}; };
addPool(); addPool();
@@ -12,75 +14,65 @@ function addPool(el) {
rolls: 1, rolls: 1,
entries: [] entries: []
}); });
let $pool = $('#poolTemplate').clone();
$pool.removeAttr('id').attr('data-index', table.pools.length - 1);
$('#structure').append($pool);
invalidated(); invalidated();
} }
function removePool(el) { function removePool(el) {
let $pool = $(el).closest('.pool'); let index = parseInt($(el).closest('.pool').attr('data-index'));
table.pools.pop($pool.attr('data-index')); if (index === 0) {
$('#structure .pool').each((i, el) => { table.pools.shift();
if ($(el).attr('data-index') > $pool.attr('data-index')) { } else {
$(el).attr('data-index', $(el).attr('data-index') - 1); table.pools.splice(index, index);
} }
});
$pool.remove();
invalidated(); 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) { function updateRollsField(el) {
let $pool = $(el).closest('.pool') let type = $(el).closest('.rolls').attr('data-type');
let $rolls = $(el).closest('.rolls'); let data = getRangeField($(el).closest('.rolls'), type);
let data = parseInt($rolls.find('.exact').val()); table.pools[$(el).closest('.pool').attr('data-index')].rolls = data;
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;
invalidated(); invalidated();
} }
function switchExact(el) { function updateTableType() {
let $rolls = $(el).closest('.rolls'); table.type = $('#tableType').val();
$rolls.attr('data-type', 'exact'); invalidated();
$rolls.find('.exact').removeClass('d-none');
$rolls.find('.range').addClass('d-none');
$rolls.find('.binomial').addClass('d-none');
updateRollsField(el);
} }
function switchRange(el) { function updateSouce() {
let $rolls = $(el).closest('.rolls'); $('#source').removeClass('invalid');
$rolls.attr('data-type', 'range'); try {
$rolls.find('.exact').addClass('d-none'); table = JSON.parse($('#source').val());
$rolls.find('.range').removeClass('d-none'); } catch {
$rolls.find('.binomial').addClass('d-none'); $('#source').addClass('invalid');
updateRollsField(el); return;
} }
invalidated();
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 updateIndentation(el) { function updateIndentation(el) {
@@ -96,3 +88,38 @@ function copySource(el) {
$('#source').get()[0].select(); $('#source').get()[0].select();
document.execCommand('copy'); 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);
}
}