Monster Attributes

by stot

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://local.playa.cc/css/mobile.min.css">
<div id="page" style="position:relative" class="hideMaxAttributes">
    <canvas id="canvas" width="200" height="200"></canvas>
    <div id="monster123" class="p-monstercard">
        <img class="mc-monster" src="http://www.playa.cc/pic/monster-shadow.png" style="bottom:657px" />
        <img class="mc-monster" src="http://local.playa.cc/pic/tiger_A_flarion.png" />
        <div class="me-monster-coins">Fodder<span style="float:right;color:gold">Coins 3.000</span>

        </div>
        <div class=" me-fodder">
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
        </div>
        <div class="me-monster-name">New Monstername <span class="me-rarity">&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</span>
        </div>
        <div class="p-stats p-border1" style="position:absolute;top: 525px;height: 200px;margin:0 10px">
            <div class="mc-attributes-v">
                <div class="p-textShadow-black mc-attribute" style="background-image:url(http://www.playa.cc/pic/orb-red4.png)">
                    <div class=" mc-attribute-bar" style="    background-size: 79% 100%; background-image: url(http://local.playa.cc/pic/healthbar.png);">790<span> / 999</span>

                    </div>
                </div>
                <div style="background-image:url(http://www.playa.cc/pic/orb-green4.png)" class="p-textShadow-black  mc-attribute">
                    <div class=" mc-attribute-bar p-textShadow-black" style="font-weight:bold;background-size:100% 100%;background-image: url(http://local.playa.cc/pic/healthbar-green.png);">998<span></span>

                    </div>
                </div>
               ...

CSS

.p-monstercard .mc-attribute {

    background-size: 50px;

    background-position: left top;

    background-repeat: no-repeat;

    width: 215px;

    color: white;

    float: left;

    padding: 15px 20px 10px 55px;

    text-shadow: -2px -2px 2px #000, 2px -2px 2px #000, 2px 2px 2px #000, -2px 2px 2px #000!important;

}

.mc-attribute-bar {

    border: 2px solid gray;

    border-radius: 10px;

    background-color: #181919;

    padding-right: 20px;

    text-align: right;

    background-image: url(http://www.playa.cc/pic/healthbar.png);

    height: 25px;

    background-size: 0;

    background-repeat: no-repeat;

    line-height: 15px;

    text-shadow: -2px -2px 2px #000, 2px -2px 2px #000, 2px 2px 2px #000, -2px 2px 2px #000!important;

}

.mc-attribute-bar span {

    font-size: 22px;

    text-shadow: -2px -2px 2px #000, 2px -2px 2px #000, 2px 2px 2px #000, -2px 2px 2px #000!important;

}

.hideMaxAttributes .mc-attribute-bar span {

    display:none;

}

.p-monstercard .me-fodder {

    position:absolute;

    top:315px;

    text-align:center;

    margin:0 10px;

    left:0;

    right:0;

    font-size:20px;

    justify-content: space-between;

    display: flex;

}

.me-monster-coins {

    position:absolute;

    top:275px;

    width:620px;

    padding:0 10px;

    text-align:left;

    font-size:30px;

}

.p-monster-icon {

    background-image: url(http://www.playa.cc/pic/monster-icon.png);

    width: 104px;

    height: 104px;

    background-size:104px 104px;

    background-repeat:no-repeat;

}

.me-rarity {

    color: gold;

    display:block;

}

.me-monster-name {

    font-size: 30px;

    position: absolute;

    top: 445px;

    width: 100%;

    text-align: center;

}

JavaScript

var maxWidth = window.innerWidth; // Max width for the image
var maxHeight = window.innerHeight; // Max height for the image
var cardWidth = 640;

var ratio = [maxWidth / cardWidth, maxHeight / 960];
ratio = Math.min(ratio[0], ratio[1]);

var correction = (maxWidth < cardWidth) ? (cardWidth - maxWidth) / 2 : 0;

$('#monster123').css({
    'transform': 'matrix(' + ratio + ', 0, 0, ' + ratio + ', -' + correction + ', 0)',
        '-webkit-transform': 'matrix(' + ratio + ', 0, 0, ' + ratio + ', -' + correction + ', 0)'
});


$('#page').on('click', function () {
    //$('.mc-attribute-bar span').toggle();
    $('#page').toggleClass('hideMaxAttributes');
});