Layout update
This commit is contained in:
parent
839c13ed88
commit
5cece45351
31
css/main.css
31
css/main.css
|
|
@ -8,6 +8,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#menubox {
|
#menubox {
|
||||||
|
height: 100%;
|
||||||
|
top: 0px;
|
||||||
|
left : 0px;
|
||||||
|
position: fixed;
|
||||||
|
border-left-width: 2px;
|
||||||
|
border-color: black;
|
||||||
|
border-left-style: solid;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#crafting {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left : 320px;
|
left : 320px;
|
||||||
|
|
@ -15,7 +26,18 @@
|
||||||
border-left-width: 2px;
|
border-left-width: 2px;
|
||||||
border-color: black;
|
border-color: black;
|
||||||
border-left-style: solid;
|
border-left-style: solid;
|
||||||
left: 320px;
|
}
|
||||||
|
|
||||||
|
#outputbox {
|
||||||
|
height: 100%;
|
||||||
|
top: 0px;
|
||||||
|
left : 640px;
|
||||||
|
position: fixed;
|
||||||
|
border-left-width: 2px;
|
||||||
|
border-right-width: 2px;
|
||||||
|
border-color: black;
|
||||||
|
border-left-style: solid;
|
||||||
|
border-right-style: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.splitable {
|
.splitable {
|
||||||
|
|
@ -32,3 +54,10 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#outputfull {
|
||||||
|
border-top-width: 2px;
|
||||||
|
border-color: black;
|
||||||
|
border-top-style: solid;
|
||||||
|
width: 320px;
|
||||||
|
}
|
||||||
15
index.html
15
index.html
|
|
@ -11,7 +11,7 @@
|
||||||
<body>
|
<body>
|
||||||
<script src="js/main.js"></script>
|
<script src="js/main.js"></script>
|
||||||
<div id="menubox">
|
<div id="menubox">
|
||||||
<h1 class="ui-widget" style="text-align: center;">Add Items</h1>
|
<h1 class="ui-widget" style="text-align: center;">Add Items</h1>
|
||||||
<ul id="menu">
|
<ul id="menu">
|
||||||
<li>
|
<li>
|
||||||
<div>Blocks</div>
|
<div>Blocks</div>
|
||||||
|
|
@ -50,15 +50,24 @@
|
||||||
$("ul").css("width", "250px")
|
$("ul").css("width", "250px")
|
||||||
</script>
|
</script>
|
||||||
<div id="crafting">
|
<div id="crafting">
|
||||||
|
<h1 class="ui-widget" style="text-align: center;width: 320px;">Items to Craft</h1>
|
||||||
<div id="tocraft"></div>
|
<div id="tocraft"></div>
|
||||||
<span style="display: inline-block; width: 90%;"></span> <br>
|
<span style="display: inline-block; width: 90%;"></span> <br>
|
||||||
<button id="calc">Calculate</button>
|
<button id="calc">Calculate</button>
|
||||||
<br><span style="display: inline-block; width: 90%;"></span> <br>
|
</div>
|
||||||
|
<div id="outputbox">
|
||||||
|
<h1 class="ui-widget" style="text-align: center;">Requiered Items</h1>
|
||||||
|
<br>
|
||||||
<div class="ui-widget" id="output"></div>
|
<div class="ui-widget" id="output"></div>
|
||||||
|
<br>
|
||||||
|
<div class="ui-widget" id="outputfull"><h1 class="ui-widget">=</h1><br></div>
|
||||||
<span style="display: inline-block; width: 90%;"></span> <br>
|
<span style="display: inline-block; width: 90%;"></span> <br>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<div class="ui-widget" id="bottom-left">Thanks to Pyramidalist and his community<br>© MasterGordon & Ph3nix</div>
|
<div class="ui-widget" id="bottom-left">
|
||||||
|
Thanks to Pyramidalist and his community<br>© MasterGordon &
|
||||||
|
Ph3nix
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -0,0 +1,260 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
var allItemsArray = []
|
||||||
|
var allItems = {}
|
||||||
|
var requieredCount = []
|
||||||
|
var requieredItems = []
|
||||||
|
var srequieredCount = []
|
||||||
|
var srequieredItems = []
|
||||||
|
var newid = 0
|
||||||
|
var items = ""
|
||||||
|
|
||||||
|
var itemsRequest = new XMLHttpRequest();
|
||||||
|
itemsRequest.open('GET', 'resources/items.txt')
|
||||||
|
itemsRequest.onload = function() {
|
||||||
|
var res = itemsRequest.responseText;
|
||||||
|
items = res.split("\n")
|
||||||
|
var loaded = 0
|
||||||
|
for (var i = 0; i < items.length && !(items[i] in window); i++) {
|
||||||
|
loadJSON(items[i])
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
itemsRequest.send()
|
||||||
|
|
||||||
|
function loadHTML() {
|
||||||
|
$("#menu li ul").empty()
|
||||||
|
$("#k_other").empty()
|
||||||
|
for (var i = 0; i < allItemsArray.length; i++) {
|
||||||
|
if (!('disabled' in allItemsArray[i])) {
|
||||||
|
// $("#itemtoadd").append("<option
|
||||||
|
// value=\""+allItemsArray[i].id+"\">" + allItemsArray[i].name +
|
||||||
|
// "</option>")
|
||||||
|
$("#k_" + allItemsArray[i].type).append(
|
||||||
|
"<li><div class=\"additem\" id=\"add" + allItemsArray[i].id
|
||||||
|
+ "\">" + allItemsArray[i].name + "</div></li>")
|
||||||
|
} else {
|
||||||
|
// console.log(allItemsArray[i].name+" disabled. Not loading")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#menu li ul").each(function() {
|
||||||
|
$(this).html($(this).children('li').sort(function(a, b) {
|
||||||
|
return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".additem")
|
||||||
|
.click(
|
||||||
|
function() {
|
||||||
|
var id = parseInt($(this).attr("id").substring(3, 99))
|
||||||
|
console.log(id)
|
||||||
|
var tagid = 'item_' + id
|
||||||
|
if ($('#' + tagid).length) {
|
||||||
|
console.log(id + " allready exists!")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
$("#tocraft")
|
||||||
|
.append(
|
||||||
|
'<input id="'
|
||||||
|
+ tagid
|
||||||
|
+ '" name="value"><label id="lable_'
|
||||||
|
+ tagid
|
||||||
|
+ '" style="margin-top: 3px;" class="ui-widget" for="'
|
||||||
|
+ tagid + '"> '
|
||||||
|
+ getItemFromId(id).name
|
||||||
|
+ '<br></label>')
|
||||||
|
// <span id="trash'+tagid+'" class="ui-icon
|
||||||
|
// ui-icon-trash"></span>
|
||||||
|
$("#" + tagid).spinner({
|
||||||
|
min : 0,
|
||||||
|
numberFormat : "n",
|
||||||
|
change : function(event, ui) {
|
||||||
|
if ($("#" + tagid).spinner("value") == 0) {
|
||||||
|
$("#" + tagid).spinner("destroy")
|
||||||
|
$("#" + tagid).remove()
|
||||||
|
$("#lable_" + tagid).remove()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$("#" + tagid).val(1)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadJSON(itemname) {
|
||||||
|
var itemRequest = new XMLHttpRequest();
|
||||||
|
itemRequest.open('GET', 'resources/items/' + itemname + '.txt')
|
||||||
|
console.log("Loading: " + itemname + ".txt")
|
||||||
|
itemRequest.onload = function() {
|
||||||
|
itemname = itemname.replace(/\s/g, "")
|
||||||
|
var item = JSON.parse(itemRequest.responseText)
|
||||||
|
if (!('name' in item)) {
|
||||||
|
item.name = itemname
|
||||||
|
console.warn("missing key \"name\" in " + itemname)
|
||||||
|
}
|
||||||
|
item.id = newid
|
||||||
|
allItems[itemname] = item
|
||||||
|
allItemsArray.push(item)
|
||||||
|
console.log(item)
|
||||||
|
loadHTML()
|
||||||
|
newid++
|
||||||
|
if (newid == items.length){
|
||||||
|
console.log("refresh")
|
||||||
|
$("#menu").menu("refresh");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
itemRequest.send()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getItemFromId(index) {
|
||||||
|
for (var i = 0; i < allItemsArray.length; i++) {
|
||||||
|
if (allItemsArray[i].id == index)
|
||||||
|
return allItemsArray[i]
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document)
|
||||||
|
.ready(
|
||||||
|
function() {
|
||||||
|
// SEITE HAT GELADEN
|
||||||
|
|
||||||
|
$("#additem").button()
|
||||||
|
$("#calc").button()
|
||||||
|
|
||||||
|
// BUTTONS
|
||||||
|
|
||||||
|
$("#calc")
|
||||||
|
.click(
|
||||||
|
function() {
|
||||||
|
requieredCount = []
|
||||||
|
requieredItems = []
|
||||||
|
for (var i = 0; i < newid; i++) {
|
||||||
|
var tag = "#item_" + i;
|
||||||
|
if ($(tag).length) {
|
||||||
|
var item = allItemsArray[i]
|
||||||
|
for (var n = 0; n < $(tag)
|
||||||
|
.spinner("value"); n++) {
|
||||||
|
for (var j = 0; j < item.crafting.length; j++) {
|
||||||
|
|
||||||
|
var count = 1
|
||||||
|
if (item.count)
|
||||||
|
count = 1 / item.count
|
||||||
|
|
||||||
|
if (requieredItems
|
||||||
|
.indexOf(item.crafting[j]) == -1) {
|
||||||
|
requieredCount[requieredItems.length] = 1
|
||||||
|
requieredItems[requieredItems.length] = item.crafting[j]
|
||||||
|
} else {
|
||||||
|
requieredCount[requieredItems
|
||||||
|
.indexOf(item.crafting[j])]++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (var i = 0; i < requieredCount.length; i++) {
|
||||||
|
requieredCount[i] = Math
|
||||||
|
.ceil(requieredCount[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
srequieredCount = requieredCount
|
||||||
|
srequieredItems = requieredItems
|
||||||
|
var swapped = false
|
||||||
|
// do {
|
||||||
|
// swapped = false
|
||||||
|
// for (var i = 0; i < srequieredItems.length; i++) {
|
||||||
|
// var itemid = srequieredItems[i]
|
||||||
|
// var itemcount = srequieredCount[i]
|
||||||
|
// if (allItems[itemid]) {
|
||||||
|
// var item = allItems[itemid]
|
||||||
|
// srequieredCount.splice(i, 1)
|
||||||
|
// srequieredItems.splice(i, 1)
|
||||||
|
// for (var k = 0; k < itemcount; k++) {
|
||||||
|
// for (var j = 0; j < item.crafting.length; j++) {
|
||||||
|
//
|
||||||
|
// var count = 1
|
||||||
|
// if (item.count)
|
||||||
|
// count = 1 / item.count
|
||||||
|
//
|
||||||
|
// if (srequieredItems
|
||||||
|
// .indexOf(item.crafting[j]) == -1) {
|
||||||
|
// srequieredCount[srequieredItems.length] = count
|
||||||
|
// srequieredItems[srequieredItems.length] = item.crafting[j]
|
||||||
|
// console.log("-1")
|
||||||
|
// } else {
|
||||||
|
// srequieredCount[srequieredItems
|
||||||
|
// .indexOf(item.crafting[j])] += count
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// for (var i = 0; i < srequieredCount.length; i++) {
|
||||||
|
// srequieredCount[i] = Math
|
||||||
|
// .ceil(srequieredCount[i])
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// } while (swapped)
|
||||||
|
updateoutput()
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
function updateoutput() {
|
||||||
|
$("#output").empty()
|
||||||
|
for (var i = 0; i < requieredItems.length; i++) {
|
||||||
|
if (allItems[requieredItems[i]]) {
|
||||||
|
$("#output").append(
|
||||||
|
"<span id=\"" + i
|
||||||
|
+ "\" class=\"ui-widget outputitem splitable\">"
|
||||||
|
+ requieredCount[i] + "x "
|
||||||
|
+ allItems[requieredItems[i]].name + "</span><br>")
|
||||||
|
} else {
|
||||||
|
$("#output").append(
|
||||||
|
"<span id=\"" + i
|
||||||
|
+ "\" class=\"ui-widget outputitem notsplitable\">"
|
||||||
|
+ requieredCount[i] + "x " + requieredItems[i]
|
||||||
|
+ "</span><br>")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$(".outputitem")
|
||||||
|
.click(
|
||||||
|
function() {
|
||||||
|
console.log($(this).attr('id'))
|
||||||
|
var index = parseInt($(this).attr('id'))
|
||||||
|
var itemid = requieredItems[index]
|
||||||
|
var itemcount = requieredCount[index]
|
||||||
|
if (allItems[itemid]) {
|
||||||
|
var item = allItems[itemid]
|
||||||
|
requieredCount.splice(index, 1)
|
||||||
|
requieredItems.splice(index, 1)
|
||||||
|
for (var i = 0; i < itemcount; i++) {
|
||||||
|
for (var j = 0; j < item.crafting.length; j++) {
|
||||||
|
|
||||||
|
var count = 1
|
||||||
|
if (item.count)
|
||||||
|
count = 1 / item.count
|
||||||
|
|
||||||
|
if (requieredItems
|
||||||
|
.indexOf(item.crafting[j]) == -1) {
|
||||||
|
requieredCount[requieredItems.length] = count
|
||||||
|
requieredItems[requieredItems.length] = item.crafting[j]
|
||||||
|
console.log("-1")
|
||||||
|
} else {
|
||||||
|
requieredCount[requieredItems
|
||||||
|
.indexOf(item.crafting[j])] += count
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (var i = 0; i < requieredCount.length; i++) {
|
||||||
|
requieredCount[i] = Math
|
||||||
|
.ceil(requieredCount[i])
|
||||||
|
}
|
||||||
|
$('#' + index).fadeOut(300)
|
||||||
|
setTimeout(function() {
|
||||||
|
updateoutput()
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue