Add session view

model.py

@@ -208,8 +208,14 @@ class Model(object):
 
         data["view"] = "session"
         data["username"] = client.name
-        data["session"] = session.to_json()
-
+        data["session"] = session.name
+        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)
 

static/renderer.js

@@ -5,16 +5,18 @@ const ws = new WebSocket(ws_url.href);
 ws.onmessage = async function(event) {
     const msg = JSON.parse(event.data);
 
-    console.log("renderer is called");
     console.log(msg);
 
     if (msg.hasOwnProperty('view')) {
         view = msg.view;
+        console.log(view)
         
         contentdiv = document.getElementById("content")
 
         response = await fetch('../static/views/' + view + '/template.html')
         contentdiv.innerHTML = await response.text();
+        console.log('../static/views/' + view + '/template.html'+":")
+        console.log(contentdiv.innerHTML)
 
         var tehscript = document.createElement('script');
         tehscript.type = 'text/javascript';

static/views/session/script.js

@@ -1,9 +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({})
                 });
-var session = msg.session;
-document.getElementById("session").innerText = session["name"];
+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

@@ -1,3 +1,13 @@
-Welcome to <b id="session"></b>, <span id="label-username"></span>
-<br><br>
-<button id="btn-leave-session">Leave Session</button>
+<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>

tehsession.json

@@ -1 +1 @@
-{"sessions": {"2b7jrklcn6eulwbw": {"id": "2b7jrklcn6eulwbw", "name": "Die coole session von Player 1", "clients": ["bkrqopf5j6q3tpta", "hmrcjnvo2ngs7265"], "owner": "bkrqopf5j6q3tpta", "inventories": {"cho2o2ntflm4mq3u": ["7htnswtslkla6rqh", "7htnswtslkla6rqh", "7htnswtslkla6rqh", "7htnswtslkla6rqh", "7htnswtslkla6rqh"], "bkrqopf5j6q3tpta": ["tuqjjll2cltlw6i6", "tuqjjll2cltlw6i6", "tuqjjll2cltlw6i6", "hr3gqfed4zelzdcz", "hr3gqfed4zelzdcz", "hr3gqfed4zelzdcz"]}}}, "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": ["hmrcjnvo2ngs7265", "bkrqopf5j6q3tpta", "cho2o2ntflm4mq3u"], "owner": "bkrqopf5j6q3tpta", "inventories": {"cho2o2ntflm4mq3u": ["hr3gqfed4zelzdcz"], "bkrqopf5j6q3tpta": ["tuqjjll2cltlw6i6"]}}}, "clients": {"bkrqopf5j6q3tpta": {"id": "bkrqopf5j6q3tpta", "name": "Player 1", "session": "2b7jrklcn6eulwbw"}, "cho2o2ntflm4mq3u": {"id": "cho2o2ntflm4mq3u", "name": "Player 2", "session": "2b7jrklcn6eulwbw"}, "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": {}}}}