Update master view, Add sortable.js example

This commit is contained in:
Dominic Zimmer 2020-04-20 11:07:15 +02:00
parent de35cfdc13
commit 96a1b49693
5 changed files with 105 additions and 68 deletions

View File

@ -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

View File

@ -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', {
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];
function draw_item(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";

View File

@ -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>

View File

@ -1,42 +1 @@
{
"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"
}
}
}
{"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": {}}}}

View File

@ -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>