Create waschmarken as clone of webpnp

static/views/master/script.js

@@ -0,0 +1,135 @@
+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";

static/views/master/template.html

@@ -0,0 +1,14 @@
+Welcome to <b id="session"></b>, lobbymaster <span id="label-username"></span>
+<br><br>
+<button id="btn-leave-session">Leave Session</button>
+
+<div id="div-gen-item">
+    Name: <input id="input-gen-item-name" /> <br>
+    Description: <input id="input-gen-item-description" /> <br>
+    Image: <input id="input-gen-item-image" /> <br>
+    <button id="btn-gen-item">Create item</button>
+</div>
+<div id="items">
+</div>
+<div id="inventories">
+</div>