From 863402fb97d10bbf9d610b043a1a8c388aedf639 Mon Sep 17 00:00:00 2001
From: jomo <github@jomo.tv>
Date: Sat, 17 Oct 2015 20:31:09 +0200
Subject: [PATCH] add try-it input & logic

---
 lib/public/javascript/crafatar.js | 16 ++++++++++++++++
 lib/public/stylesheets/style.css  | 21 ++++++++++++++++-----
 lib/views/index.html.ejs          | 24 +++++++++++++++++++-----
 3 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/lib/public/javascript/crafatar.js b/lib/public/javascript/crafatar.js
index 1af4044..cb66770 100644
--- a/lib/public/javascript/crafatar.js
+++ b/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();
 });
\ No newline at end of file
diff --git a/lib/public/stylesheets/style.css b/lib/public/stylesheets/style.css
index 93f1315..50ef6ac 100644
--- a/lib/public/stylesheets/style.css
+++ b/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;
diff --git a/lib/views/index.html.ejs b/lib/views/index.html.ejs
index ebaf130..2ee3495 100644
--- a/lib/views/index.html.ejs
+++ b/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">