The updated HTML5 playground

A version of the playground rewritten completely from scratch, includes better coding, improved design and enhanced functionality

by Entoarox

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div id="layer-loader"><noscript><div><h1>Javascript required</h1>The RPG engine requires javascript to run.</div></noscript></div>
<script>document.getElementById('layer-loader').innerHTML='<span>Initialising...</span>'</script>
<div id="layer-preload">
<button></button><button class="h"></button><button class="a"></button><button class="d"></button>
  <img src="http://dl.dropboxusercontent.com/u/14002006/ui2/cursor.gif" />
  <img src="http://dl.dropboxusercontent.com/u/14002006/ui2/cursor_down.gif" />
  <img src="http://dl.dropboxusercontent.com/u/14002006/ui2/cursor_open.gif" />
  <img src="http://dl.dropboxusercontent.com/u/14002006/ui2/cursor_fist.gif" />
</div>
<div id="layer-interface">
    <section class="outline center" id="interface-notyet"><div class="error"></div>This interface has not yet been implemented.<br />
        <button onclick="$game.interface()">Ok</button></section>
    <section data-title="Character" id="interface-character" style="height:400px;width:455px">
        <a></a>
        <fieldset id="tabset-character-equipment" class="tabpage">
            <legend style="width:100px"></legend>
            <div style="width:100px" class="tab">Equipment</div>
            <div onclick="$game.tab('character','skills')" style="width:70px;left:130px" class="tab">Skills</div>
            <div onclick="$game.tab('character','spells')" style="width:70px;left:230px" class="tab">Spells</div>
          <div style="width:90px;left:330px" class="tab disabled">Abilities</div>
        <fieldset style="width:200px;height:320px;right:0px;top:0px;" class="inventory"><legend>Inventory</legend></fieldset>
        <div class="diagram" style="top:5px;left:10px;width:200px">
            <span class="line-v" style="left:90px;top:10px;height:130px"></span>
            <span class="line-v" style="left:25px;top:120px;height:40px"></span>
            <span class="line-v"...

SCSS

/////////////////////////////////////////////
// Snippets
%outline
{
    color:#fff;
    font-family:'segoe ui semibold';
    text-shadow: 1px 1px 0px #000, 0px 1px 0px #000, -1px 1px 0px #000, -1px 0px 0px #000, -1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, 1px 0px 0px #000, 0px 0px 2px #000;
}
%handwritten
{
    font-family:'Segoe Script';
}
%arrowbuttons
{
    background:url('http://dl.dropboxusercontent.com/u/14002006/ui2/btna.png');
}
%pointer
{
    cursor:pointer;
}
%cursor
{
    cursor:default;
}
%thinframe
{
    border-width:10px;
    border-image-source:url('https://dl.dropboxusercontent.com/u/14002006/ui2/fbt.png');
    border-image-slice:14;
    border-image-repeat:round;
    border-image-outset:5px;
    border-image-#{'width'}:14px;
    background:url('https://dl.dropboxusercontent.com/u/14002006/ui2/bg2.png');
}
%wideframe
{
    border-width:15px;
    border-image-source:url('https://dl.dropboxusercontent.com/u/14002006/ui2/fbw.png');
    border-image-slice:20;
    border-image-repeat:round;
    border-image-outset:5px;
    border-image-#{'width'}:20px;
    background:url('https://dl.dropboxusercontent.com/u/14002006/ui2/bg1.png');
}
/////////////////////////////////////////////
// Data uri
%spinner
{
   ...

JavaScript

// jQuery overscroll
!function(a,b,c,d,e,f,g,h,i){"use strict";function j(){if(j.memo)return j.memo;var c=a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame||a.oRequestAnimationFrame||a.msRequestAnimationFrame||function(a){e(a,1e3/60)},d=null===b.body;d&&b.documentElement.appendChild(b.createElement("body"));var f="";!function(){var c=b.createElement("div"),d=["webkit","moz","o","ms"];b.body.appendChild(c),h.each(d,function(a,b){c.style[b+"OverflowScrolling"]="touch"}),c.style.overflowScrolling="touch";var e=a.getComputedStyle(c);e.overflowScrolling?f="overflow-scrolling":h.each(d,function(a,b){return e[b+"OverflowScrolling"]&&(f="-"+b+"-overflow-scrolling"),!f}),c.parentNode.removeChild(c)}();var g={};return function(){var c=b.createElement("div"),d=["webkit","moz"],e="https://mail.google.com/mail/images/2/";return g={grab:"url("+e+"openhand.cur), move",grabbing:"url("+e+"closedhand.cur), move"},b.body.appendChild(c),h.each(d,function(b,d){var e,f="-"+d+"-grab";c.style.cursor=f;var h=a.getComputedStyle(c);return e=h.cursor===f,e&&(g={grab:"-"+d+"-grab",grabbing:"-"+d+"-grabbing"}),!e}),c.parentNode.removeChild(c),g}(),j.memo={animate:function(b){return c.call(a,b)},overflowScrolling:f,cursor:g},d&&b.documentElement.removeChild(b.body),j.memo}function k(a,b){b.trigger("overscroll:"+a)}function l(){return(new Date).getTime()}function m(a,b,c){return b.x=a.pageX,b.y=a.pageY,b.time=l(),b.index=c,b}function n(a,b,c,d){var e,f;a&&a.added&&(a.horizontal&&(e=c*(1+b.container.width/b.container.scrollWidth),f=d+b.thumbs.horizontal.top,a.horizontal.css("margin",f+"px 0 0 "+e+"px")),a.vertical&&(e=c+b.thumbs.vertical.left,f=d*(1+b.container.height/b.container.scrollHeight),a.vertical.css("margin",f+"px 0 0 "+e+"px")))}function...