add try-it input & logic

lib/public/javascript/crafatar.js

@@ -1,3 +1,4 @@
+var valid_user_id = /^([0-9a-f-A-F-]{32,36}|[a-zA-Z0-9_]{1,16})$/; // uuid|username
 var xhr = new XMLHttpRequest();
 
 xhr.onload = function() {
@@ -38,6 +39,21 @@ document.addEventListener("DOMContentLoaded", function(event) {
     avatars.appendChild(avatars.children[Math.random() * i | 0]);
   }
 
+  var tryit = document.querySelector("#tryit");
+  var tryname = document.querySelector("#tryname");
+  var images = document.querySelectorAll(".tryit");
+  tryit.onsubmit = function(e) {
+    e.preventDefault();
+    tryname.value = tryname.value.trim();
+    var value = tryname.value || "853c80ef3c3749fdaa49938b674adae6";
+    if (!valid_user_id.test(value)) {
+      return;
+    }
+    for (var j = 0; j < images.length; j++) {
+      images[j].src = images[j].dataset.src.replace("$", value);
+    }
+  };
+
   xhr.open("GET", "https://status.mojang.com/check", true);
   xhr.send();
 });

lib/public/stylesheets/style.css

@@ -54,11 +54,25 @@ a.sponsor {
 }
 
 #documentation .row .col-md-2 {
-    text-align: center;
+  text-align: center;
 }
 
 #documentation .row > div {
-    padding: 15px;
+  padding: 15px;
+}
+
+#try input {
+  width: 100%;
+  background: #fff;
+  border: 1px solid #ddd;
+  padding: 0.3em;
+  line-height: 1.5em;
+  margin: 0px;
+}
+
+img.tryit {
+  -webkit-filter: drop-shadow(0px 0px 6px);
+  filter: drop-shadow(0px 0px 6px);
 }
 
 mark {
@@ -80,9 +94,6 @@ span[title] {
   text-decoration: underline dotted;
 }
 
-thead {
-  font-weight: bold;
-}
 
 .row {
   margin-right: auto;

lib/views/index.html.ejs

@@ -67,11 +67,25 @@
         </div>
       </div>
 
+      <section id="try">
+      <h2><a href="#try">Try it</a></h2>
+        <form id="tryit" action="#">
+          <div class="row">
+            <div class="col-md-11">
+              <input id="tryname" type="text" placeholder="Enter valid username or UUID">
+            </div>
+            <div class="col-md-1">
+              <input type="submit" value="Go!">
+            </div>
+          </div>
+        </form>
+      </section>
+
       <section id="avatars">
         <h2><a href="#avatars">Avatars</a></h2>
         <div class="row">
           <div class="col-md-2">
-            <img src="/avatars/853c80ef3c3749fdaa49938b674adae6?size=100" alt="jeb_'s avatar">
+            <img class="tryit" data-src="/avatars/$?size=100" src="/avatars/853c80ef3c3749fdaa49938b674adae6?size=100" alt="avatar">
           </div>
           <div class="col-md-10">
             <div class="code">
@@ -86,7 +100,7 @@
         <h2><a href="#head-renders">Head Renders</a></h2>
         <div class="row">
           <div class="col-md-2">
-            <img src="/renders/head/853c80ef3c3749fdaa49938b674adae6" alt="jeb_'s head">
+            <img class="tryit" data-src="/renders/head/$" src="/renders/head/853c80ef3c3749fdaa49938b674adae6" alt="head">
           </div>
           <div class="col-md-10">
             <div class="code">
@@ -101,7 +115,7 @@
         <h2><a href="#body-renders">Body Renders</a></h2>
         <div class="row">
           <div class="col-md-2">
-            <img src="/renders/body/853c80ef3c3749fdaa49938b674adae6" alt="jeb_'s body">
+            <img class="tryit" data-src="/renders/body/$" src="/renders/body/853c80ef3c3749fdaa49938b674adae6" alt="body">
           </div>
           <div class="col-md-10">
             <div class="code">
@@ -116,7 +130,7 @@
         <h2><a href="#skins">Skins</a></h2>
         <div class="row">
           <div class="col-md-2">
-            <img src="/skins/853c80ef3c3749fdaa49938b674adae6" alt="jeb_'s skin">
+            <img class="tryit" data-src="/skins/$" src="/skins/853c80ef3c3749fdaa49938b674adae6" alt="skin">
           </div>
           <div class="col-md-10">
             <div class="code">
@@ -131,7 +145,7 @@
         <h2><a href="#capes">Capes</a></h2>
         <div class="row">
           <div class="col-md-2">
-            <img src="/capes/069a79f444e94726a5befca90e38aaf5?default=853c80ef3c3749fdaa49938b674adae6" alt="Mojang cape">
+            <img class="tryit" data-src="/capes/$?default=853c80ef3c3749fdaa49938b674adae6" src="/capes/069a79f444e94726a5befca90e38aaf5?default=853c80ef3c3749fdaa49938b674adae6" alt="cape">
           </div>
           <div class="col-md-10">
             <div class="code">