webMC dev sandbox

HTML

<div id="tooltip">Time Of Day</div>
<div class="frame" style="max-width:324px;">
    <div style="height:144px;position:relative;">
    <div style="width:36px;float:left;">
        <span class="slot"></span>
        <span class="slot"></span>
        <span class="slot"></span>
        <span class="slot"></span>
    </div>
    <span style="float:left;height:140px;width:104px;background:#000;border:2px solid;border-top-color:#373737;border-left-color:#373737;border-bottom-color:#fff;border-right-color:#fff;"></span>
    <button class="tiny" style="float:right;font-size:12px;margin-top:-4px;margin-right:-4px;">...</button>
    <button onclick="Inv.Sort();UpdateInventory()" class="tiny" style="float:right;font-size:12px;margin-top:-4px;margin-right:2px">z</button>
    <button style="position:absolute;bottom:0;right:0;">Craft</button>
    </div>
    <hr />
    <div id="inventory"></div>
    <hr />
    <div>
        <span class="slot"></span><span class="slot"></span><span class="slot"></span><span class="slot"></span><span class="slot"></span><span class="slot"></span><span class="slot"></span><span class="slot"></span><span class="slot"></span>
    </div>
</div>
<button id="hover"></button><button id="disabled"></button>

CSS

@font-face
{
    font-family:"minecraftia";
    src:url('https://dl.dropboxusercontent.com/u/14002006/Minecraftia.ttf');
}
body
{
    background:rgba(0,0,0,.8);
}
.frame
{
    font-size:0;
    line-height:0;
    position:relative;
    display:inline-block;
    border-radius:4px;
    border-style:solid;
    border-width:4px;
    border-top-color:#fff;
    border-left-color:#fff;
    border-right-color:#555;
    border-bottom-color:#555;
    padding:8px;
    background:#c6c6c6;
    min-width:36px;
    min-height:36px;
}
.frame:before
{
    content:"";
    position:absolute;
    display:block;
    top:-5px;
    left:-5px;
    right:-5px;
    bottom:-5px;
    background:#000;
    border-radius:4px;
    z-index:-1;
}
.slot
{
    display:inline-block;
    width:32px;
    height:32px;
    position:relative;
    background:#8b8b8b;
    border-width:2px;
    border-style:solid;
    border-top-color:#373737;
    border-left-color:#373737;
    border-bottom-color:#fff;
    border-right-color:#fff;
}
.slot:hover:before
{
    content:"";
    display:block;
    position:absolute;
    width:32px;
    height:32px;
    top:50%;
    left:50%;
    margin-left:-16px;
    margin-top:-16px;
    z-index:1;
    background:rgba(255,255,255,.3);
}
.slot[amount]:after
{
    content:attr(amount);
    display:block;
    color:#fff;
    text-shadow:2px 2px #333;
    position:absolute;
    left:50%;
    top:50%;
    width:34px;
    text-align:right;
    margin-left:-18px;
    font-size:16px;
    line-height:14px;
    font-family:minecraftia;
}
.slot img
{
    width:32px;
    height:32px;
    margin:0;
    padding:0;
    float:left;
}
hr
{
    border:0;
    margin:0;
    height:8px;
    padding:0;
    clear:both;
}
button
{
    display:inline-block;
    
border-image: url(https://dl.dropboxusercontent.com/u/14002006/mc/btn.png) 5 5 7 5 fill;
    border-width:5px 5px 7px 5px;
    min-width:20px;
    min-height:20px;
    font-size:16px;
    padding:2px 4px;
    margin:0;
    color:#eee;
   ...

JavaScript

// Polyfills for functionality that not all browsers might have
 // Polyfill: atob & btoa in case native versions are unavailable
if(!atob)var atob=function(a){var c,e,d,b,g,h=0,f=0,k=[];if(!a)return a;a+="";do c="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".indexOf(a.charAt(h++)),e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".indexOf(a.charAt(h++)),b="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".indexOf(a.charAt(h++)),g="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".indexOf(a.charAt(h++)),d=c<<18|e<<12|b<<6|g,c=d>>16&255,e=d>>8&255,d&=255,64==b?k[f++]=String.fromCharCode(c):64==g?k[f++]=String.fromCharCode(c,e):k[f++]=String.fromCharCode(c,e,d);while(h<a.length);b=k.join("");return decodeURIComponent(escape(b.replace(/\0+$/,"")))},btoa=function(a){var c,e,d,b,g=0,h=0,f="",f=[];if(!a)return a;a=unescape(encodeURIComponent(a));do c=a.charCodeAt(g++),e=a.charCodeAt(g++),d=a.charCodeAt(g++),b=c<<16|e<<8|d,c=b>>18&63,e=b>>12&63,d=b>>6&63,b&=63,f[h++]="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".charAt(c)+"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".charAt(e)+"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".charAt(d)+"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".charAt(b);while(g<a.length);f=f.join("");a=a.length%3;return(a?f.slice(0,a-3):f)+"===".slice(a||3)};
/*
Array.prototype.random=function()
{
	return this[Math.floor(Math.random()*this.length)];
}
var list={
	'Base.Block.Cobblestone':'1',
	'Base.Item.Stick':'2',
	'Base.Block.Planks':'3',
}
var RecipeList={};
var recipe={
	add:function(Recipe,Result,Shapeless)
	{
		var Code=recipe.make(Shapeless ? Recipe.slice().sort() : Recipe);
		RecipeList[Code]=Result;
	},
	get:function(Recipe)
	{
		var Code=recipe.make(Recipe);
		if(RecipeList[Code])
		{
			return...