ambidextrous/gemp-lotr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Beautifying strength and vitality display on active cards.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
gemp-lotr/gemp-lotr-web/src/main/webapp/game.html
View File

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

BIN
gemp-lotr/gemp-lotr-web/src/main/webapp/images/strength.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
gemp-lotr/gemp-lotr-web/src/main/webapp/images/vitality.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

4
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameAnimations.js
View File

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

31
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js
View File

@@ -1032,10 +1032,18 @@ var GempLotrGameUI = Class.extend({
var tokenOverlay = $(".tokenOverlay", cardDiv); 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>"); var cardStrengthDiv = $("<div class='cardStrength'></div>");
cardStrengthDiv.css({display: "none"}); cardStrengthDiv.css({display: "none"});
tokenOverlay.append(cardStrengthDiv); 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>"); var cardVitalityDiv = $("<div class='cardVitality'></div>");
cardVitalityDiv.css({display: "none"}); cardVitalityDiv.css({display: "none"});
tokenOverlay.append(cardVitalityDiv); tokenOverlay.append(cardVitalityDiv);
@@ -1057,16 +1065,27 @@ var GempLotrGameUI = Class.extend({
var size = 0.0865 * maxDimension; var size = 0.0865 * maxDimension;
var x = 0.09255 * maxDimension - size / 2; var x = 0.09 * maxDimension - size / 2;
var strengthY = 0.67203 * maxDimension - size / 2; var strengthY = 0.678 * maxDimension - size / 2;
var vitalityY = 0.79074 * maxDimension - size / 2; var vitalityY = 0.795 * maxDimension - size / 2;
var minionSiteNumberY = 0.89135 * 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"; 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}); var strBgX = 0.03800 * maxDimension;
$(".cardVitality", cardElem).css({position: "absolute", "border-radius": borderRadius, "font-size": fontPerc, left: x + "px", top: vitalityY + "px", width: size, height: size}); 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}); $(".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}); $(".cardResistance", cardElem).css({position: "absolute", "border-radius": borderRadius, "font-size": fontPerc, left: x + "px", top: minionSiteNumberY + "px", width: size, height: size});
} }