Beautifying strength and vitality display on active cards.

This commit is contained in:
marcins78@gmail.com
2011-12-05 21:14:41 +00:00
parent b0e7a793d2
commit c30cdc29da
5 changed files with 29 additions and 10 deletions

View File

@@ -90,16 +90,12 @@ body {
.cardStrength {
text-align: center;
background-color: #7a6a53;
opacity: 1;
font-weight: bolder;
color: #ffffff;
}
.cardVitality {
text-align: center;
background-color: #8a1f0d;
opacity: 1;
font-weight: bolder;
color: #ffffff;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

@@ -710,7 +710,9 @@ var GameAnimations = Class.extend({
$("#main").queue(
function(next) {
$(".cardStrength").css({display: "none"});
$(".cardStrengthBg").css({display: "none"});
$(".cardVitality").css({display: "none"});
$(".cardVitalityBg").css({display: "none"});
$(".cardSiteNumber").css({display: "none"});
$(".cardResistance").css({display: "none"});
@@ -721,7 +723,9 @@ var GameAnimations = Class.extend({
var cardStats = charStatsArr[i].split("=");
var cardDiv = $(".card:cardId(" + cardStats[0] + ")");
var cardStatArr = cardStats[1].split("|");
$(".cardStrengthBg", cardDiv).css({display: ""});
$(".cardStrength", cardDiv).html(cardStatArr[0]).css({display: ""});
$(".cardVitalityBg", cardDiv).css({display: ""});
$(".cardVitality", cardDiv).html(cardStatArr[1]).css({display: ""});
if (cardStatArr.length > 2) {
if (cardStatArr[2].indexOf("R") == 0) {

View File

@@ -1032,10 +1032,18 @@ var GempLotrGameUI = Class.extend({
var tokenOverlay = $(".tokenOverlay", cardDiv);
var cardStrengthBgDiv = $("<div class='cardStrengthBg'><img src='images/strength.png' width='100%' height='100%'></div>");
cardStrengthBgDiv.css({display: "none"});
tokenOverlay.append(cardStrengthBgDiv);
var cardStrengthDiv = $("<div class='cardStrength'></div>");
cardStrengthDiv.css({display: "none"});
tokenOverlay.append(cardStrengthDiv);
var cardVitalityBgDiv = $("<div class='cardVitalityBg'><img src='images/vitality.png' width='100%' height='100%'></div>");
cardVitalityBgDiv.css({display: "none"});
tokenOverlay.append(cardVitalityBgDiv);
var cardVitalityDiv = $("<div class='cardVitality'></div>");
cardVitalityDiv.css({display: "none"});
tokenOverlay.append(cardVitalityDiv);
@@ -1057,16 +1065,27 @@ var GempLotrGameUI = Class.extend({
var size = 0.0865 * maxDimension;
var x = 0.09255 * maxDimension - size / 2;
var strengthY = 0.67203 * maxDimension - size / 2;
var vitalityY = 0.79074 * maxDimension - size / 2;
var x = 0.09 * maxDimension - size / 2;
var strengthY = 0.678 * maxDimension - size / 2;
var vitalityY = 0.795 * maxDimension - size / 2;
var minionSiteNumberY = 0.89135 * maxDimension - size / 2;
var fontPerc = (size * 7) + "%";
var fontPerc = (size * 6) + "%";
var borderRadius = Math.ceil(size / 5) + "px";
$(".cardStrength", cardElem).css({position: "absolute", "border-radius": borderRadius, "font-size": fontPerc, left: x + "px", top: strengthY + "px", width: size, height: size});
$(".cardVitality", cardElem).css({position: "absolute", "border-radius": borderRadius, "font-size": fontPerc, left: x + "px", top: vitalityY + "px", width: size, height: size});
var strBgX = 0.03800 * maxDimension;
var strBgY = 0.60765 * maxDimension;
var strBgWidth = 0.1624 * width;
var strBgHeight = 0.1650 * height;
var vitBgX = 0.0532 * width;
var vitBgY = 0.7465 * height;
var vitalityBgSize = 0.105 * height;
$(".cardStrengthBg", cardElem).css({position: "absolute", left: strBgX + "px", top: strBgY + "px", width: strBgWidth, height: strBgHeight});
$(".cardStrength", cardElem).css({position: "absolute", "font-size": fontPerc, left: x + "px", top: strengthY + "px", width: size, height: size});
$(".cardVitalityBg", cardElem).css({position: "absolute", left: vitBgX + "px", top: vitBgY + "px", width: vitalityBgSize, height: vitalityBgSize});
$(".cardVitality", cardElem).css({position: "absolute", "font-size": fontPerc, left: x + "px", top: vitalityY + "px", width: size, height: size});
$(".cardSiteNumber", cardElem).css({position: "absolute", "border-radius": borderRadius, "font-size": fontPerc, left: x + "px", top: minionSiteNumberY + "px", width: size, height: size});
$(".cardResistance", cardElem).css({position: "absolute", "border-radius": borderRadius, "font-size": fontPerc, left: x + "px", top: minionSiteNumberY + "px", width: size, height: size});
}