Beautifying strength and vitality display on active cards.
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
BIN
gemp-lotr/gemp-lotr-web/src/main/webapp/images/strength.png
Normal file
BIN
gemp-lotr/gemp-lotr-web/src/main/webapp/images/strength.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
gemp-lotr/gemp-lotr-web/src/main/webapp/images/vitality.png
Normal file
BIN
gemp-lotr/gemp-lotr-web/src/main/webapp/images/vitality.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
@@ -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) {
|
||||
|
||||
@@ -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});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user