Update master view, Add sortable.js example

model.py

@@ -136,6 +136,12 @@ class Model(object):
         data["username"] = client.name
         data["session"] = session.to_json()
         data["items"] = self.to_json()["items"]
+        data["inventories"] = {}
+        for _client in session.inventories:
+            _client = self.clients[_client]
+            inventory = session.get_items(_client.id)
+            inventory = list(map(lambda itemid: self.to_json()["items"][itemid], inventory))
+            data["inventories"][_client.name] = inventory
 
         for socket in self.sockets[clientid]:
             await socket.send_json(data)
@@ -200,20 +206,39 @@ class Session:
             self.name = model["name"]
             self.clients = model["clients"]
             self.owner = model["owner"]
+            if "inventories" in model:
+                self.inventories = model["inventories"]
+            else:
+                self.inventories = {}
         elif owner and name:
             self.id = generate_random_id()
             self.clients = []
             self.owner = owner
             self.name = name
+            self.inventories = {}
         else:
             raise Exception("Illegal session constructor")
 
+    def get_items(self, playerid):
+        print(f"get_items(self, {playerid}) called")
+        print(f"{self.inventories=}")
+        if playerid in self.inventories:
+            return self.inventories[playerid]
+        else:
+            return []
+
+    def give_item(self, playerid, itemid):
+        if not playerid in self.inventories:
+            self.inventories[playerid] = []
+        self.inventories[playerid].append(itemid)
+
     def to_json(self):
         model = {
             "id": self.id,
             "name": self.name,
             "clients": self.clients,
             "owner": self.owner,
+            "inventories": self.inventories
         }
         return model
 
@@ -241,17 +266,22 @@ class Client:
 
 class Item:
 
-    def __init__(self, model = None, name = None, description = "", image = ""):
+    def __init__(self, model = None, name = None, description = "", image = "", tags = {}):
         if model:
             self.id = model["id"]
             self.name = model["name"]
             self.description = model["description"]
             self.image = model["image"]
+            if "tags" in model:
+                self.tags = model["tags"]
+            else:
+                self.tags = {}
         elif name:
             self.id = generate_random_id()
             self.name = name
             self.description = description
             self.image = image
+            self.tags = tags
         else:
             raise Exception("Illegal Item Constructor")
 
@@ -261,5 +291,6 @@ class Item:
             "name": self.name,
             "description": self.description,
             "image": self.image,
+            "tags": self.tags,
         }
         return model

static/views/master/script.js

@@ -1,30 +1,7 @@
 var text = document.getElementById("msg").innerText
 msg = JSON.parse(text)
 
-document.getElementById("btn-leave-session").onclick = async (e) => await fetch('api/leave_session', {
+function draw_item(item) {
-                    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 itemsdiv = document.getElementById("items");
-var items = msg.items;
-
-while (itemsdiv.children.length) itemsdiv.lastChild.remove();
-
-Object.keys(items).forEach( item => {
-    var item = items[item];
     const itemdiv = document.createElement('div');
     var name = item["name"]
     var description = item["description"]
@@ -49,7 +26,74 @@ Object.keys(items).forEach( item => {
     itemdiv.appendChild(imageimg);
     itemdiv.appendChild(descriptionspan);
     itemdiv.style.display = "inline-block"
+    itemdiv.style.background = "lightcoral"
+    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"});
+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";
+    });
+    Sortable.create(inventorydiv, {"group": "items"});
+
+    inventorydiv.style.background = "lightgreen";
+
+    inventories.appendChild(inventorydiv);
+    
+});
+
+inventories.style.display = "inline-block";

static/views/master/template.html

@@ -10,3 +10,5 @@ Welcome to <b id="session"></b>, lobbymaster <span id="label-username"></span>
 </div>
 <div id="items">
 </div>
+<div id="inventories">
+</div>

tehsession.json

@@ -1,42 +1 @@
-{
+{"sessions": {"2b7jrklcn6eulwbw": {"id": "2b7jrklcn6eulwbw", "name": "Die coole session von Player 1", "clients": ["bkrqopf5j6q3tpta", "hmrcjnvo2ngs7265"], "owner": "bkrqopf5j6q3tpta", "inventories": {"cho2o2ntflm4mq3u": ["hr3gqfed4zelzdcz", "hr3gqfed4zelzdcz"], "bkrqopf5j6q3tpta": ["7htnswtslkla6rqh", "tuqjjll2cltlw6i6"]}}}, "clients": {"bkrqopf5j6q3tpta": {"id": "bkrqopf5j6q3tpta", "name": "Player 1", "session": "2b7jrklcn6eulwbw"}, "cho2o2ntflm4mq3u": {"id": "cho2o2ntflm4mq3u", "name": "uiae", "session": ""}, "hmrcjnvo2ngs7265": {"id": "hmrcjnvo2ngs7265", "name": "Joe", "session": "2b7jrklcn6eulwbw"}}, "items": {"hr3gqfed4zelzdcz": {"id": "hr3gqfed4zelzdcz", "name": "Revive", "description": "Revives a KO pokemon and brings it to 50% health", "image": "https://1.bp.blogspot.com/-Hz8sIf0g7cY/VsyVIWiLsnI/AAAAAAAAnII/DjW20xLr0R4/s1600/max_revive_by_peetzaahhh2010-d8oki1o.png", "tags": {}}, "7htnswtslkla6rqh": {"id": "7htnswtslkla6rqh", "name": "Potion", "description": "Heals your Pokey-Man by 20 hp", "image": "https://cdn.bulbagarden.net/upload/thumb/4/45/PotionBaseSet94.jpg/200px-PotionBaseSet94.jpg", "tags": {}}, "tuqjjll2cltlw6i6": {"id": "tuqjjll2cltlw6i6", "name": "Revive\u2122", "description": "When mom tells you that there is Max-Revive at home", "image": "https://www.pokewiki.de/images/5/58/Vitalkraut_Traumwelt.png", "tags": {}}}}
-    "sessions": {
-        "2b7jrklcn6eulwbw": {
-            "id": "2b7jrklcn6eulwbw",
-            "name": "Die coole session von Player 1",
-            "clients": [],
-            "owner": "bkrqopf5j6q3tpta"
-        }
-    },
-    "clients": {
-        "bkrqopf5j6q3tpta": {
-            "id": "bkrqopf5j6q3tpta",
-            "name": "Player 1",
-            "session": ""
-        },
-        "cho2o2ntflm4mq3u": {
-            "id": "cho2o2ntflm4mq3u",
-            "name": "uiae",
-            "session": ""
-        }
-    },
-    "items": {
-        "hr3gqfed4zelzdcz": {
-            "id": "hr3gqfed4zelzdcz",
-            "name": "Revive",
-            "description": "Revives a KO pokemon and brings it to 50% health",
-            "image": "https://1.bp.blogspot.com/-Hz8sIf0g7cY/VsyVIWiLsnI/AAAAAAAAnII/DjW20xLr0R4/s1600/max_revive_by_peetzaahhh2010-d8oki1o.png"
-        },
-        "7htnswtslkla6rqh": {
-            "id": "7htnswtslkla6rqh",
-            "name": "Potion",
-            "description": "Heals your Pokey-Man by 20 hp",
-            "image": "https://cdn.bulbagarden.net/upload/thumb/4/45/PotionBaseSet94.jpg/200px-PotionBaseSet94.jpg"
-        },
-        "tuqjjll2cltlw6i6": {
-            "id": "tuqjjll2cltlw6i6",
-            "name": "Revive\u2122",
-            "description": "When mom tells you that there is Max-Revive at home",
-            "image": "https://www.pokewiki.de/images/5/58/Vitalkraut_Traumwelt.png"
-        }
-    }
-}

ui.html

@@ -3,10 +3,11 @@
 
     <head>
         <title>leafblade Minecraft Server</title>
+        <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
         <meta charset="UTF-8"/>
         <style>
 div {
-    border: 1px solid;
+/*    border: 1px solid; */
     margin: 5px;
 }
         </style>