Update master view, Add sortable.js example
This commit is contained in:
parent
de35cfdc13
commit
96a1b49693
33
model.py
33
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
|
||||
|
@ -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";
|
||||
|
@ -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>
|
||||
|
@ -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": {}}}}
|
Loading…
Reference in New Issue
Block a user