136 lines
4.1 KiB
JavaScript
136 lines
4.1 KiB
JavaScript
var text = document.getElementById("msg").innerText
|
|
msg = JSON.parse(text)
|
|
|
|
function onDrag (evt) {
|
|
var item = evt.item; // dragged HTMLElement
|
|
fromplayer = evt.from.getAttribute("inventory")
|
|
toplayer = evt.to.getAttribute("inventory")
|
|
itemid = item.getAttribute("itemid")
|
|
toslot = evt.newIndex
|
|
fromslot = evt.oldIndex
|
|
data = {
|
|
"fromplayer": fromplayer,
|
|
"toplayer": toplayer,
|
|
"itemid": itemid,
|
|
"fromslot": fromslot,
|
|
"toslot": toslot,
|
|
}
|
|
fetch('api/move_item', {
|
|
method: 'POST',
|
|
body: JSON.stringify(data),
|
|
});
|
|
}
|
|
function draw_item(item) {
|
|
const itemdiv = document.createElement('itemdiv');
|
|
var name = item["name"]
|
|
var description = item["description"]
|
|
var image = item["image"] || "../static/empty.jpg"
|
|
|
|
namespan = document.createElement('b');
|
|
namespan.innerText = name;
|
|
namespan.style.display = "block"
|
|
namespan.style.textAlign = "center"
|
|
|
|
descriptionspan = document.createElement('span');
|
|
descriptionspan.innerText = description;
|
|
descriptionspan.style.display = "block"
|
|
descriptionspan.style.width = "8rem";
|
|
|
|
imageimg = document.createElement('img');
|
|
imageimg.src = image;
|
|
imageimg.style.width = "8rem";
|
|
imageimg.style.display = "block"
|
|
|
|
itemdiv.appendChild(namespan);
|
|
itemdiv.appendChild(imageimg);
|
|
itemdiv.appendChild(descriptionspan);
|
|
itemdiv.style.display = "inline-block"
|
|
itemdiv.style.background = "lightcoral"
|
|
itemdiv.setAttribute("itemid", item["id"]);
|
|
return itemdiv
|
|
}
|
|
|
|
document.getElementById("btn-leave-session").onclick = async (e) => await fetch('api/leave_session', {
|
|
method: 'POST', body: JSON.stringify({})
|
|
});
|
|
var session = msg.session;
|
|
document.getElementById("session").innerText = session["name"];
|
|
document.getElementById('label-username').innerText = msg.username;
|
|
|
|
document.getElementById("btn-gen-item").onclick = async (e) => {
|
|
name = document.getElementById("input-gen-item-name").value;
|
|
description = document.getElementById("input-gen-item-description").value;
|
|
image = document.getElementById("input-gen-item-image").value;
|
|
if (Boolean(name)) {
|
|
await fetch('api/create_item', { method: 'POST', body: JSON.stringify(
|
|
{'name': name, 'description': description, 'image': image}
|
|
)});
|
|
}
|
|
};
|
|
var wrapper = document.getElementById("items");
|
|
var items = msg.items;
|
|
var itemsdiv = document.createElement('div');
|
|
var itemsheading = document.createElement('h3');
|
|
itemsheading.innerText = "All Items";
|
|
wrapper.style.background = "lightblue";
|
|
wrapper.style.display = "table";
|
|
|
|
while (wrapper.children.length) wrapper.lastChild.remove();
|
|
|
|
Object.keys(items).forEach( item => {
|
|
|
|
var item = items[item];
|
|
itemdiv = draw_item(item);
|
|
itemsdiv.appendChild(itemdiv);
|
|
|
|
});
|
|
Sortable.create(itemsdiv,
|
|
{
|
|
"group": "items",
|
|
"sort": "false",
|
|
"draggable": "itemdiv",
|
|
"onEnd": onDrag,
|
|
|
|
});
|
|
itemsdiv.setAttribute("inventory", "master");
|
|
wrapper.appendChild(itemsheading);
|
|
wrapper.appendChild(itemsdiv);
|
|
|
|
|
|
var inventories = document.getElementById("inventories");
|
|
while (inventories.children.length) inventories.lastChild.remove();
|
|
|
|
Object.keys(msg.inventories).forEach( name => {
|
|
inventory = msg.inventories[name];
|
|
inventorydiv = document.createElement('div');
|
|
inventorydiv.style.display = "block";
|
|
titlespan = document.createElement('h4');
|
|
titlespan.innerText = name;
|
|
titlespan.style.textAlign = "center";
|
|
inventorydiv.appendChild(titlespan);
|
|
|
|
Object.keys(inventory).forEach( item => {
|
|
item = inventory[item];
|
|
var thediv = draw_item(item);
|
|
//thediv.style.display = "block";
|
|
inventorydiv.appendChild(thediv);
|
|
inventorydiv.style.display = "inline-block";
|
|
});
|
|
|
|
inventorydiv.style.background = "lightgreen";
|
|
|
|
Sortable.create(inventorydiv,
|
|
{
|
|
"group": "items",
|
|
"sort": "false",
|
|
"draggable": "itemdiv",
|
|
"onEnd": onDrag,
|
|
});
|
|
inventorydiv.setAttribute("inventory", name);
|
|
|
|
inventories.appendChild(inventorydiv);
|
|
|
|
});
|
|
|
|
inventories.style.display = "inline-block";
|