Create waschmarken as clone of webpnp

static/views/lobby/script.js

@@ -0,0 +1,143 @@
+var text = document.getElementById("msg").innerText
+msg = JSON.parse(text)
+
+if (msg.hasOwnProperty('username')) {
+        document.getElementById('label-username').innerText = msg.username;
+    }
+
+    // username management
+    document.getElementById("btn-edit-username").onclick = async function (e) {
+        document.getElementById("btn-confirm-username").style.display = "inline-block";
+        document.getElementById("btn-discard-username").style.display = "inline-block";
+        document.getElementById("btn-edit-username").style.display = "none";
+        document.getElementById("label-username").style.display = "none";
+        document.getElementById("input-set-username").style.display = "inline-block";
+        document.getElementById("input-set-username").value = document.getElementById("label-username").innerText;
+    }
+    document.getElementById("btn-discard-username").onclick = async function (e) {
+        document.getElementById("btn-confirm-username").style.display = "none";
+        document.getElementById("btn-discard-username").style.display = "none";
+        document.getElementById("btn-edit-username").style.display = "inline-block";
+        document.getElementById("label-username").style.display = "inline-block";
+        document.getElementById("input-set-username").style.display = "none";
+    }
+    document.getElementById("btn-confirm-username").onclick = async function (e) {
+        var text = document.getElementById("input-set-username").value;
+        if (Boolean(text)) {
+            let data = {"username": text};
+
+            await fetch('api/change_username', {
+                method: 'POST',
+                body: JSON.stringify(data),
+            })
+            document.getElementById("btn-confirm-username").style.display = "none";
+            document.getElementById("btn-discard-username").style.display = "none";
+            document.getElementById("btn-edit-username").style.display = "inline-block";
+            document.getElementById("label-username").style.display = "inline-block";
+            document.getElementById("input-set-username").style.display = "none";
+        } else {
+            console.log("cant be empty");
+            document.getElementById("btn-confirm-username").style.display = "none";
+            document.getElementById("btn-discard-username").style.display = "none";
+            document.getElementById("btn-edit-username").style.display = "inline-block";
+            document.getElementById("label-username").style.display = "inline-block";
+            document.getElementById("input-set-username").style.display = "none";
+        }
+    }
+
+
+
+    document.getElementById("btn-create-session").onclick = async function (e) {
+        var text = document.getElementById("input-create-session").value;
+        if (Boolean(text)) {
+            let data = {"sessionname": text};
+
+            await fetch('api/create_session', {
+                method: 'POST',
+                body: JSON.stringify(data),
+            })
+        }
+    };
+
+    if (msg.hasOwnProperty('sessions')) {
+        const sessions = document.getElementById('sessions');
+
+        while (sessions.children.length) sessions.lastChild.remove();
+
+        Object.keys(msg.sessions).forEach( session => {
+            session = msg.sessions[session];
+            var sessionid = session["id"];
+            var sessionname = session["name"];
+            var owned = session["owned"];
+
+            const tehsession = document.createElement('div');
+            const labelname = document.createElement('span');
+            labelname.innerText = sessionname;
+            
+            tehsession.appendChild(labelname);
+
+            if (owned) {
+                const inputname = document.createElement('input');
+                inputname.style.display = "none";
+                const btnedit = document.createElement('button');
+                btnedit.innerText = '🖉'
+                const btnconfirm = document.createElement('button');
+                btnconfirm.innerText = '✔'
+                btnconfirm.style.display = "none"
+                const btndiscard = document.createElement('button');
+                btndiscard.innerText = '✘'
+                btndiscard.style.display = "none"
+
+                btnedit.onclick = async function (e) {
+                    inputname.style.display = "inline-block";
+                    inputname.value = sessionname;
+                    btnedit.style.display = "none";
+                    btnconfirm.style.display = "inline-block";
+                    btndiscard.style.display = "inline-block";
+                    labelname.style.display = "none";
+                }
+                btndiscard.onclick = async function (e) {
+                    inputname.style.display = "none";
+                    btnedit.style.display = "inline-block";
+                    btnconfirm.style.display = "none";
+                    btndiscard.style.display = "none";
+                    labelname.style.display = "inline-block";
+                }
+                btnconfirm.onclick = async function (e) {
+                    text = inputname.value;
+                    if (Boolean(text)) {
+                        let data = {"sessionid": sessionid, "sessionname": text};
+                        await fetch('api/change_sessionname', {
+                            method: 'POST',
+                            body: JSON.stringify(data),
+                        });
+                        inputname.style.display = "none";
+                        btnedit.style.display = "inline-block";
+                        btnconfirm.style.display = "none";
+                        btndiscard.style.display = "none";
+                        labelname.style.display = "inline-block";
+                    } else {
+                        console.log("cant be empty");
+                    }
+                }
+
+                tehsession.appendChild(inputname);
+                tehsession.appendChild(btnedit);
+                tehsession.appendChild(btnconfirm);
+                tehsession.appendChild(btndiscard);
+            }
+
+            if ((! msg.hasOwnProperty('session')) || msg.session["id"] != sessionid) {
+                const btnjoin = document.createElement('button');
+                btnjoin.innerText = "Join";
+                btnjoin.onclick = async (e) => await fetch('api/join_session', {
+                    method: 'POST', body: JSON.stringify({"sessionid": sessionid})
+                });
+
+                tehsession.appendChild(btnjoin);
+            }
+            
+            sessions.appendChild(tehsession);
+        })
+        }
+

static/views/lobby/template.html

@@ -0,0 +1,21 @@
+<span id="greeting"></span><br>
+<div id="username-area">
+    <span id="greeting">Hello, </span>
+    <span id="label-username">_</span>
+    <input id="input-set-username" style="display: none;">
+    <button id="btn-edit-username">🖉</button>
+    <button id="btn-discard-username" style="display: none;">✘</button>
+    <button id="btn-confirm-username" style="display: none;">✔</button>
+</div>
+<br>
+
+
+<span>Available sessions</span><br>
+<div id="sessions"></div><br>
+<br>
+<br>
+
+<span>Create Session</span><br>
+<input id="input-create-session">
+<button id="btn-create-session">+</button>
+<br>

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>

static/views/session/script.js

@@ -0,0 +1,80 @@
+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
+}
+
+var text = document.getElementById("msg").innerText
+msg = JSON.parse(text)
+
+document.getElementById("btn-leave-session").onclick = async (e) => await fetch('api/leave_session', {
+                    method: 'POST', body: JSON.stringify({})
+                });
+document.getElementById("session").innerText = msg.session;
+document.getElementById('label-username').innerText = msg.username;
+//fill inventory and inventories
+inventorydiv = document.getElementById("inventory");
+inventoriesdiv = document.getElementById("inventories");
+
+while (inventorydiv.children.length) inventorydiv.lastChild.remove();
+while (inventoriesdiv.children.length) inventoriesdiv.lastChild.remove();
+
+username = msg.username;
+inventories = msg.inventories;
+
+if (username in inventories) {
+    inventory = inventories[username]
+
+    Object.keys(inventory).forEach( item => {
+
+        var item = inventory[item];
+        itemdiv = draw_item(item);
+        inventorydiv.appendChild(itemdiv);
+
+    });
+}
+    Object.keys(inventories).forEach( inventory => {
+        if (!(inventory in inventories))
+            return;
+        if (inventory == username)
+            return;
+        var wrapper = document.createElement('div')
+        var usernamespan = document.createElement('span')
+        usernamespan.innerText = inventory;
+        var inventorydiv = document.createElement('div')
+        Object.keys(inventories[inventory]).forEach( item => {
+            var item = inventories[inventory][item];
+            itemdiv = draw_item(item);
+            inventorydiv.appendChild(itemdiv);
+        });
+        //inventorydiv.appendChild(itemdiv);
+        wrapper.appendChild(usernamespan)
+        wrapper.appendChild(inventorydiv)
+        inventoriesdiv.appendChild(wrapper);
+
+    });
+

static/views/session/template.html

@@ -0,0 +1,13 @@
+<div>
+    Hello <span id="label-username"></span>
+    <br><br>
+    Welkome to <b id="session"></b>! <br>
+    <button id="btn-leave-session">Leave Session</button>
+    <br><br>
+</div>
+<h3>Your items</h3>
+<div id="inventory">
+</div>
+<h3>Other players' inventories</h3>
+<div id="inventories">
+</div>