Item preview upgrade. Debug info/button added. Debug link when click on item pic. Proper descfuncs with sprintf.

res/app.js

@@ -39,6 +39,27 @@
  SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  
  */
+
+function syntaxHighlight(json) {
+    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+        var cls = 'number';
+        if (/^"/.test(match)) {
+            if (/:$/.test(match)) {
+                cls = 'key';
+            } else {
+                cls = 'string';
+            }
+        } else if (/true|false/.test(match)) {
+            cls = 'boolean';
+        } else if (/null/.test(match)) {
+            cls = 'null';
+        }
+        return '<span class="' + cls + '">' + match + '</span>';
+    });
+}
+
+
 function search() {
 	$.get("/ajax/uniqueitems.php?cmd=search&search=" + searchbox.value, function (data) {
 		$('.uniqueitems-select').html(data)
@@ -167,24 +188,34 @@ $(document).ready(function () {
 	});
 
 
-
-
-
-
-
-
-
 	// cmd = getUniqueItem
 	$('.uniqueitems-select').change(function () {
 		$(".item").attr("src", "/img/items/1.png");
+		$(".item_debug_link").attr('href', "/ajax/uniqueitems.php?cmd=getUniqueItem&index=" + this.value)
 		$.get("/ajax/uniqueitems.php?cmd=getUniqueItem&index=" + this.value, function (data) {
-
+			debugData = (JSON.stringify(data, null, 4));
+			$('.debug, .debug_preview').html(syntaxHighlight(debugData));
 			props = data.props;
-			$('.item_desc').html("<p></p>");			
+			$('.item_stats div').html("<p></p>");	
+
+			
+			type = data["*type"];
+			lvlreq = data["lvl req"];
+
+
+			$('.item_stats p').append(`<li class="statindex">${data.index}</li>`);
+			$('.item_stats p').append(`<li class="stattype">${type}</li>`);
+			$('.item_stats p').append(`<li class="statlvlreq">Level Required: ${lvlreq}</li>`);
+//			$('.item_stats p').append(`<li class="index">${data.index}</li>`);
+//			$('.item_stats p').append(`<li class="index">${data.index}</li>`);
+//			$('.item_stats p').append(`<li class="index">${data.index}</li>`);
+//			$('.item_stats p').append(`<li class="index">${data.index}</li>`);
+			
+
 			$.each(props, function (i, v) {				
 
 				if(v.string){
-					$('.item_desc p').append('<li class="'+i+'">'+v.string[0]+"</li>");
+					$('.item_stats p').append('<li class="'+i+'">'+v.string[0]+"</li>");
 				}
 			});
 
@@ -197,10 +228,14 @@ $(document).ready(function () {
 					$('select[name="code[]"]').val(v);
 					$('select[name="code[]"]').prop('required', '');
 				}
-			})
+			});						
 		});
 	});
 
+	$(".btnDebug").click(function(){
+		$(".debug_preview").slideToggle();
+	});
+
 
 	// cmd = sortBy
 	$('input[name="sort"]').change(function () {

res/style.css

@@ -40,7 +40,7 @@
 
 */
 @font-face {
-    font-family: 'Exocet';
+    font-family: 'ExocetHeavy';
     src: url('/fonts/ExocetHeavy.eot');
     src: local('Exocet Heavy'), local('ExocetHeavy'),
         url('/fonts/ExocetHeavy.eot?#iefix') format('embedded-opentype'),
@@ -52,6 +52,15 @@
     font-style: normal;
     font-display: swap;
 }
+@font-face {
+    font-family: 'ExocetLight';
+    src: local('Exocet Light'), local('ExocetLight'),
+    url('/fonts/ExocetLight.ttf') format('truetype');
+
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
 @font-face {
     font-family: 'Lato';
     src: url('/fonts/Lato-Regular.ttf') format('truetype');
@@ -111,8 +120,9 @@ body {
 }
 
 h1,h2,h3,h4,h5,h6, div > p {
-	font-family: Exocet;
+	font-family: ExocetLight;
 	color: #778;
+	text-transform: uppercase;
 }
 #loading {
 	margin-top: 40px;
@@ -165,25 +175,60 @@ option {
 	margin: 15px 0;
 }
 
+.item {
+	text-align: left;
+	position:absolute;
+	right:282px;
+}
+
 .item_desc {
-	height: auto;
-	width: 640px;
+	height: 560px;
+	width: 620px;
     position: absolute;
-    left: 110px;
-    top: 23px;	
+    left: -80px;
+    top: 0px;	
 	
+/*	background: black url(/img/items/bg.png) center top no-repeat;*/
 	
-    text-align: center;
-    background: black;
-    padding: 10px;
+	background: #333;
+	
+    text-align: center;    
+    padding: 10px;	
+	text-transform: uppercase;
 
 }
 
 .item_desc p {
-	font-size: 13px;
+	font-size: 14px;
 	color: #4169E1;
+	letter-spacing: -1px;
+}
+.item_desc span {
 }
 
 ul, li, ul li {
 	list-style-type: none;
+}
+
+.debug {
+	height: 800px;
+}
+
+pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
+.string { color: green; }
+.number { color: darkorange; }
+.boolean { color: blue; }
+.null { color: magenta; }
+.key { color: red; }
+
+.statindex, .stattype{
+	color: #A59263;
+	font-weight: bold;
+	font-family: ExocetHeavy;
+	font-size: 1.2em;
+}
+
+
+.statlvlreq {
+	color: white;
 }