Expose difficulty etc in front-end (read only for now)

index.html

@@ -26,9 +26,10 @@
    </div>
    <div id="stats">
     <h2>Information</h2>
-    <p id="du_wrapper">Defense Units: <span id="du_used">0</span>/<span id="du_total">0</span></p>
-    <p>Difficulty: <span id="difficulty">Unknown</span></p>
-    <p>Type: <span id="type">Unknown</span></p>
+    <p id="du_wrapper"><span class="label">DUs:</span> <span id="du_used">0</span>/<span id="du_total">0</span></p>
+    <p><span class="label">Difficulty:</span> <span id="difficulty">unknown</span></p>
+    <p><span class="label">Type:</span> <span id="type">unknown</span></p>
+    <p><span class="label">Modes:</span> <span id="modes">unknown</span></p>
    </div>
    <div id="notes">
     <h2>Notes</h2>

res/js/viewer.js

@@ -317,6 +317,26 @@ $(function() {
   });
   updateDefenseUnits();
 
+  var difficulty = layout.difficulty ? layout.difficulty : "unknown";
+  $('#difficulty').text(difficulty).removeClass().addClass(difficulty);
+
+  var type = layout.type && layout.type != 'none' ? layout.type : "unknown";
+  var modes = '';
+  layout.mode && $.each(layout.mode, function() {
+   if (this == "hardcore") {
+    modes = '<abbr title="Hardcore">hc</abbr> ' + modes;
+   } else if (this == "mixed") {
+    modes = '<abbr title="Mixed mode">mm</abbr> ' + modes;
+   } else if (this == "strategy") {
+    modes = '<abbr title="Pure strategy">ps</abbr> ' + modes;
+   } else if (this == "none") {
+    modes = 'none';
+   }
+  });
+
+  $('#type').text(type);
+  $('#modes').html(modes == '' ? 'unknown' : modes);
+
   $('#du_total').text(thisLevel.du);
  }
 

res/js/viewer/viewer.js

@@ -295,6 +295,26 @@ $(function() {
   });
   updateDefenseUnits();
 
+  var difficulty = layout.difficulty ? layout.difficulty : "unknown";
+  $('#difficulty').text(difficulty).removeClass().addClass(difficulty);
+
+  var type = layout.type && layout.type != 'none' ? layout.type : "unknown";
+  var modes = '';
+  layout.mode && $.each(layout.mode, function() {
+   if (this == "hardcore") {
+    modes = '<abbr title="Hardcore">hc</abbr> ' + modes;
+   } else if (this == "mixed") {
+    modes = '<abbr title="Mixed mode">mm</abbr> ' + modes;
+   } else if (this == "strategy") {
+    modes = '<abbr title="Pure strategy">ps</abbr> ' + modes;
+   } else if (this == "none") {
+    modes = 'none';
+   }
+  });
+
+  $('#type').text(type);
+  $('#modes').html(modes == '' ? 'unknown' : modes);
+
   $('#du_total').text(thisLevel.du);
  }
 

res/style.less

@@ -239,3 +239,25 @@ body .tower.ui-draggable-dragging { z-index: 101; }
   }
  }
 }
+
+#difficulty, #modes, #type {
+ font-variant: small-caps;
+ font-size: large;
+}
+
+#stats p {
+ text-align: left;
+}
+
+.label {
+ display: inline-block;
+ text-align: right;
+ width: 80px;
+ padding-right: 5px;
+}
+
+.easy { color: #00AB00; }
+.medium { color: #008FE6; }
+.hard { color: #FF6600; }
+.insane { color: #FF0000; }
+.nightmare { color: #A000EB; }