Add session view

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>