AvailableBuildings.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */

!function( $ ) {
    if ( !$( '.can-template-body' ).length ) return;
 
    var _b_img = 'https://images.wikia.nocookie.net/clashofclans/images/1/12/AvailableBuildingsBackground.png',
        _i = 1;
 
    $( '.can-template-body' ).each( function() {
        var tml = $( this );

        $( this ).find( 'img' ).on( 'load', function() {
            buildCanvas( tml );
        });
    });

    function buildCanvas( t ) {
        var _img = $( t ).find( 'img' ).attr( 'src' ),
            _l = $( t ).find( 'a' ).attr( 'href' ),
            _t = $( t ).attr( 'data-text' ),
            _id = 'canvas_tml_' + _i;
 
        $( t ).append( '<canvas id="' + _id + '" style="display: inline;"></canvas>' );
 
        var _can = document.getElementById( _id ),
            _ctx = _can.getContext( '2d' );
 
        var _img1 = new Image(),
            _img2 = new Image();
 
        _img1.addEventListener( 'load', function() {
            _img2.addEventListener( 'load', function() {
                _can.width = _can.height = 90;
 
                _ctx.globalAlpha = 1.0;
                _ctx.drawImage( _img1, 0, 0, 90, 90 );
                _ctx.drawImage( _img2, 0, 0, 90, 90 );
 
                _ctx.font = "12px 'Clash'";
                _ctx.lineWidth = 3;
                _ctx.strokeStyle = "black";
                _ctx.fillStyle = "white";
                _ctx.strokeText( _t, 7, 17 );
                _ctx.fillText( _t, 7, 17 );
            });
            _img2.src = _img;
        });
        _img1.src = _b_img;
 
        // If link (_l) is not image:
        if ( !/(.+)\/\/(vignette|img|images)/.test( _l ) ) {
            _can.style.cursor = 'pointer';

            _can.addEventListener( 'click', function() {
                window.location = _l;
            });
        }
 
        $( t ).find( 'a' ).remove();

        _i = _i + 1;
    }
}( jQuery );