1 files changed, 38 insertions, 15 deletions

diff --git a/js/shop.js b/js/shop.js
index 22ca85f..b6d4cee 100644
--- a/js/shop.js
+++ b/js/shop.js
@@ -1,18 +1,25 @@
 function displayShop(ret) {
-	var tmphtml = "<h4> Select an item to buy it:</h4>";
-	tmphtml += "<ul class=\"list-inline\">";
-	for(var i=0; i < ret.items.length; i++) {
-		tmphtml += "<li>";
-		tmphtml += "<button type=\"submit\" class=\"btn btn-primary\" onclick=\"buyItem('" + ret.items[i].name + "')\"><span class=\"item-icon\">" + ret.items[i].icon + "</span><br />" + ret.items[i].name + "</button>";
-		tmphtml += "</li>";
+	var tmphtml = "<h3> Select an item to buy it:</h3>";
+	for(var key in ret.items){
+		if(ret.items.hasOwnProperty(key)){
+			var category = ret.items[key];
+			tmphtml += "<h4>"+key+"</h4>";
+			tmphtml += "<ul class=\"list-inline\">";
+			for(var i=0; i < category.length; i++) {
+				tmphtml += "<li>";
+				tmphtml += "<button type=\"button\" class=\"btn btn-success\" onclick=\"buyItem('" + category[i].name + "')\"><span class=\"item-icon\">" + category[i].icon + "</span><br />" + category[i].name + "</button>";
+				tmphtml += "</li>";
+			}
+			tmphtml += "</ul>";
+		}
 	}
-	tmphtml += "</ul>"
 	document.getElementById("tab2").innerHTML = tmphtml;
 }
 
 function displayInventory(items) {
-	for(var i=0; i < items.length; i++) {
-		addItem(items[i]);
+	for(var key in items) {
+		if(items.hasOwnProperty(key))
+			addItem(items[key]);
 	}
 }
 
@@ -20,19 +27,27 @@ function buildShop() {
 	sendRequest("craftmine.php", "op=buildShop", function(ret) {
 		displayShop(ret);
 		debitAccount(ret.cost);
+		showInfo("Your shop has been successfully created");
 	});
 }
 
 function addItem(ret) {
-	var itemhtml = "<li>";
-	itemhtml += "<button type=\"button\" class=\"btn btn-primary\" onclick=\"useItem('" + ret.name + "')\"><span class=\"item-icon\">" + ret.icon + "</span><br />" + ret.name + "</button>";
-	itemhtml += "</li>";
+	var itemhtml = "";
+	var itemtag = document.querySelector("[data-name=\""+ret[0].name+"\"]");
+	if(!itemtag){ //si c'est la première itération de l'objet
+		itemhtml += "<li>";
+		itemhtml += "<button type=\"button\" class=\"btn btn-success\" onclick=\"useItem('" + ret[0].name + "')\"><span class=\"item-icon\">" + ret[0].icon + "</span><br />" + ret[0].name + "(<span data-name=\""+ ret[0].name + "\">"+ret[1]+"</span>)</button>"; 
+		itemhtml += "</li>";
+	}
+	else{ // si c'est une n-ième itération
+		itemtag.innerHTML=ret[1];
+	}
 
 	var invcontent = document.getElementById("tab3");
 
 	if(invcontent.children.length <= 1)
 	{
-		var tmphtml = "<h4>Your bag contains the following items:</h4>";
+		var tmphtml = "<h3>Your bag contains the following items:</h3>";
 		tmphtml += "<ul class=\"list-inline\">";
 		tmphtml += itemhtml;
 		tmphtml += "</ul>"
@@ -40,18 +55,26 @@ function addItem(ret) {
 	} else
 		invcontent.getElementsByTagName('ul')[0].innerHTML += itemhtml;
 
-	showInfo(ret.desc);
+	showInfo("The "+ ret[0].name + " has been successfully purchased");
 }
 
 function buyItem(name) {
 	sendRequest("craftmine.php", "op=buyItem&item="+name, function(ret) {
 		addItem(ret);
-		debitAccount(ret.cost);
+		debitAccount(ret[0].cost);
 	});
 }
 
 function useItem(name) {
 	sendRequest("craftmine.php", "op=useItem&item="+name, function(ret) {
+		if(!ret.item) return;
+		if(ret.perso) updatePerso(ret.perso);
+		var item = document.querySelector("[data-name=\""+ret.item[0].name+"\"]");
+		var nb = ret.item[1];
+		if(nb>=1)
+			item.innerHTML = nb;
+		else
+			item.parentNode.parentNode.parentNode.removeChild(item.parentNode.parentNode); // Remove <li> item from the <ul> list
 	});
 }