HTML5 playground

A playground to work some html5 on my html based RPG GUI interface

by Entoarox

HTML

<script src="http://kvdk.net/x8/res/klib.js"></script>
<div id="loader"><span>Loading</span></div>
<div id="popup" style="display:none;"></div>
<div id="mainmenu">
    <h1>Roman Realms Online</h1>
    <button onclick="$('mainmenu').css('display','none')">Start game</button>
    <fieldset class="thin center" style="position:absolute;bottom:0px;left:0px;right:0px;">Created using the kvdk.net webRPG engine.</fieldset>
</div>
<nav class="breadcrumbs center" style="z-index:501;">
    <a onclick="$game.openInterface('changelog')">Changelog</a>
    <a onclick="$game.openInterface('socket')">Socket</a>
    <a onclick="$game.openInterface('crafting')">Crafting</a>
    <a onclick="$game.openInterface('quests')">Quests</a>
    <a onclick="$game.openInterface('character')">Character</a>
    <a onclick="$game.openInterface('dialogue','temp-listing')">Dialogue</a>
    <a onclick="$game.openInterface('shop')">Shop</a>
</nav>
<div class="iteminfo" style="position:absolute;top:45px;right:5px;">
     <h1 class="c-4">Shoppers Talisman</h1>
    <div class="small">Talisman</div>
    <hr />
    <div class="c-3">luck: +5%</div>
    <hr />
    <div class="c-7">Sapphire</div>
    <div class="small c-3 inset">defense: +2%</div>
    <div class="c-7">Empty socket</div>
    <hr />
    <div class="c-8">Dealfinder</div>
    <div class="small">Shop tax decreased by 5%.</div>
    <hr />
    <div class="c-9">Merchants uniform</div>
    <div class="small"><span class="pre">3 pieces</span><span class="c-3">luck: +2%</span></div>
    <div class="small spacer"><span class="pre c-6">5 pieces</span><span>luck: +2%</span></div>
    <div class="small spacer"><span class="pre c-6">7 pieces</span><span>luck: +3%</span></div>
    <div class="small spacer"><span class="pre c-6">11 pieces</span><span >luck: +3%</span></div>
    <hr />
    <div>level: 5</div>
    <div class="c-6">class: merchant</div>
    <hr />
    <div class="money" data-money="40100"></div>
    <hr />
    <div class="small">This talisman is...

SCSS

/////////////////////////////////
// Mixins
@mixin vendor-prefix($name, $value) {
    @each $vendor in ('', '-webkit-', '-moz-', '-ms-', '-o-') {
        #{$vendor}#{$name} : #{$value};
    }
}
/////////////////////////////////
// Extendables
%outline {
    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;/**/
}
%outline-reverse {
    text-shadow: 1px 1px 0px #fff, 0px 1px 0px #fff, -1px 1px 0px #fff, -1px 0px 0px #fff, -1px -1px 0px #fff, 0px -1px 0px #fff, 1px -1px 0px #fff, 1px 0px 0px #fff, 0px 0px 2px #fff;
}
%frame-thick {
    border: 9px solid;
    border-image: url(https://dl.dropboxusercontent.com/u/14002006/rpg-gui/resources/gui/ntf2.png) 9;
    background-image:url(https://dl.dropboxusercontent.com/u/14002006/rpg-gui/resources/gui/background.png);
    box-shadow:0px 0px 5px #000,0px 0px 5px #000 inset;
    padding:5px;
}

%frame-thin {
    border: 4px solid;
    border-image: url(https://dl.dropboxusercontent.com/u/14002006/rpg-gui/resources/gui/nft2.png) 4;
    box-shadow:0px 0px 5px #000,0px 0px 5px #000 inset;
    padding:5px;
}
/////////////////////////////////
// Unique styles
body
{
    overflow:hidden;
}
#popup
{
    z-index:500;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background:rgba(0,0,0,.2);
}
#loader
{
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    z-index:9999;
    background:#fff;
    display:-webkit-flex;
    -webkit-align-items:center;
    -webkit-justify-content:center;
    transition:opacity 200ms;
    -webkit-transition:opacity 200ms;
        span
        {
            text-align:center;
            @extend %outline;
            color:#fff;
        }
        span:before
        {
            margin:5px;
            width:32px;
            height:32px;
            padding:10px;
        ...

JavaScript

/*
 FUNCTIONAL CODING
*/
window.$game={
    init:function(){
        $('[id^="interface."]').each(function($el){
            $el.css('top','50%')
            .css('left','50%')
            .css('marginTop','-'+(($el.height()+20)/2)+'px')
            .css('marginLeft','-'+(($el.width()+20)/2)+'px')
            .css('display','none')
        });
        $('a.btn').bind('click',window.$game.closeInterface);
    },
    openInterface:function($target)
    {
        $('[id^="interface."]').css('display','none');
        $('interface.'+$target).css('display','block');
        $('popup').css('display','block');
        switch($target)
        {
            case 'dialogue':
                $game.renderDialogue(arguments[1]);
            break;
        }
    },
    closeInterface:function()
    {
        $('[id^="interface."]').css('display','none');
        $('popup').css('display','none');
    },
    displayTab:function($interface,$tab)
    {
        $('[id^="'+$interface+'.tab."]').css('display','none');
        $($interface+'.tab.'+$tab).css('display','block');
    },
    renderDialogue:function($dialogueID)
    {
        if($gameData.dialogue[$dialogueID])
        {
            var $data=$gameData.dialogue[$dialogueID];
            var $avatar=$gameData.avatars[$data.avatar];
            $('dialogue.avatar').attr('src',null);
            $('dialogue.avatar').attr('src',$avatar);
            $('dialogue.text').text($data.text);
            $('dialogue.name').text($data.name);
            var $response=$('dialogue.response').removeAllChildren();
            $response.append('legend').text('Response');
            var $container=$response.append('div').addClass('itemlist')
            for(var c=0;c<$data.options.length;c++)
            {
                var $option=$data.options[c];
                if($option.display && !$option.display())
                {
                    continue;
                }
                var $target=$container.append('div').text('>...