From b43439eab072da8c8bc2517167cf2194a7033872 Mon Sep 17 00:00:00 2001 From: Dominic Zimmer Date: Tue, 21 Apr 2020 00:23:59 +0200 Subject: [PATCH] Add session view --- model.py | 10 +++- static/renderer.js | 4 +- static/views/session/script.js | 75 +++++++++++++++++++++++++++++- static/views/session/template.html | 16 +++++-- tehsession.json | 2 +- 5 files changed, 98 insertions(+), 9 deletions(-) diff --git a/model.py b/model.py index bbf02d9..bb7fd85 100644 --- a/model.py +++ b/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) diff --git a/static/renderer.js b/static/renderer.js index 40bcd6b..b07f4fa 100644 --- a/static/renderer.js +++ b/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'; diff --git a/static/views/session/script.js b/static/views/session/script.js index 3c6c1b4..41b4042 100644 --- a/static/views/session/script.js +++ b/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); + + }); + diff --git a/static/views/session/template.html b/static/views/session/template.html index a87d060..354c928 100644 --- a/static/views/session/template.html +++ b/static/views/session/template.html @@ -1,3 +1,13 @@ -Welcome to , -

- +
+ Hello +

+ Welkome to !
+ +

+
+

Your items

+
+
+

Other players' inventories

+
+
diff --git a/tehsession.json b/tehsession.json index 1cdbd32..121ff74 100644 --- a/tehsession.json +++ b/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": {}}}} \ No newline at end of file +{"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": {}}}} \ No newline at end of file