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

Trying to add individual card strengths.

Browse Source
This commit is contained in:
marcins78@gmail.com
2011-10-26 16:17:29 +00:00
parent a9352d05a5
commit 59d3700d4b
5 changed files with 332 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,201 +2,211 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gemp-LotR</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<title>Gemp-LotR</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<style type="text/css">
body {
font-size: 12px;
}
<style type="text/css">
body {
font-size: 12px;
}
.borderOverlay {
border: solid #000000;
}
.borderOverlay {
border: solid #000000;
}
.highlightBorderOverlay {
border: solid #ffffff;
}
.highlightBorderOverlay {
border: solid #ffffff;
}
.foilOverlay {
opacity: 0.2;
}
.foilOverlay {
opacity: 0.2;
}
.cardHint {
display: inline;
color: #6f6fff;
cursor: pointer;
}
.cardHint {
display: inline;
color: #6f6fff;
cursor: pointer;
}
.selectableCard > .borderOverlay {
border-color: #00af00;
cursor: pointer;
}
.cardStrength {
border-radius: 6px;
text-align: center;
vertical-align: middle;
background-color: #ffffff;
opacity: 0.7;
color: #000000;
font-size: 200%;
}
.selectedCard > .borderOverlay {
border-color: #009f9f;
}
.selectableCard > .borderOverlay {
border-color: #00af00;
cursor: pointer;
}
.player {
color: #ffffff;
}
.selectedCard > .borderOverlay {
border-color: #009f9f;
}
.player {
color: #ffffff;
}
.player {
color: #ffffff;
}
.player.current {
background-color: #ffffff;
color: #000000;
}
.player {
color: #ffffff;
}
.playerStats {
font-size: 70%;
}
.player.current {
background-color: #ffffff;
color: #000000;
}
.playerStats .clickable {
color: #7f7fff;
text-decoration: underline;
cursor: pointer;
}
.playerStats {
font-size: 70%;
}
.phase {
color: #ffffff;
}
.playerStats .clickable {
color: #7f7fff;
text-decoration: underline;
cursor: pointer;
}
.phase.current {
background-color: #ffffff;
color: #000000;
}
.phase {
color: #ffffff;
}
.twilightPool {
float: right;
font-size: 30px;
width: 40px;
border-radius: 7px;
border: 1px solid #ffffff;
background-color: #000000;
color: #ffffff;
padding: 2px;
text-align: right;
}
.phase.current {
background-color: #ffffff;
color: #000000;
}
.skirmish {
}
.twilightPool {
float: right;
font-size: 30px;
width: 40px;
border-radius: 7px;
border: 1px solid #ffffff;
background-color: #000000;
color: #ffffff;
padding: 2px;
text-align: right;
}
.fpStrength, .shadowStrength {
border-radius: 6px;
text-align: center;
vertical-align: middle;
background-color: #ffffff;
opacity: 0.7;
color: #000000;
font-size: 300%;
}
.skirmish {
}
#chatBox {
font-size: 90%;
}
.fpStrength, .shadowStrength {
border-radius: 6px;
text-align: center;
vertical-align: middle;
background-color: #ffffff;
opacity: 0.7;
color: #000000;
font-size: 300%;
}
.chatMessage {
color: #3fafff;
}
#chatBox {
font-size: 90%;
}
.systemMessage {
color: #5f5f5f;
}
.chatMessage {
color: #3fafff;
}
.gameMessage {
font-size: 80%;
}
.systemMessage {
color: #5f5f5f;
}
.warningMessage {
color: #ff0000;
}
.gameMessage {
font-size: 80%;
}
.ui-tabs-nav li {
font-size: 70%;
}
.warningMessage {
color: #ff0000;
}
#settingsBox label {
font-size: 70%;
}
.ui-tabs-nav li {
font-size: 70%;
}
.clock {
float: right;
font-size: 100%;
}
#settingsBox label {
font-size: 70%;
}
.ui-button-text-only .ui-button-text {
font-size: 70%;
padding: .2em .5em;
}
</style>
<link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css">
<link rel="stylesheet" type="text/css" href="js/jquery/styles/jquery.spinnercontrol.css">
.clock {
float: right;
font-size: 100%;
}
<script type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery/jquery.spinnercontrol.js"></script>
<script type="text/javascript" src="js/jquery/jquery.touchSwipe.js"></script>
.ui-button-text-only .ui-button-text {
font-size: 70%;
padding: .2em .5em;
}
</style>
<link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css">
<link rel="stylesheet" type="text/css" href="js/jquery/styles/jquery.spinnercontrol.css">
<script type="text/javascript" src="js/inheritance.js"></script>
<script type="text/javascript" src="js/communication.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<script type="text/javascript" src="js/gameUi.js"></script>
<script type="text/javascript" src="js/gameAnimations.js"></script>
<script type="text/javascript" src="js/jCardGroup.js"></script>
<script type="text/javascript" src="js/jCards.js"></script>
<script type="text/javascript" src="js/logging.js"></script>
<script type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery/jquery.spinnercontrol.js"></script>
<script type="text/javascript" src="js/jquery/jquery.touchSwipe.js"></script>
<script type="text/javascript">
var ui;
var communication;
<script type="text/javascript" src="js/inheritance.js"></script>
<script type="text/javascript" src="js/communication.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<script type="text/javascript" src="js/gameUi.js"></script>
<script type="text/javascript" src="js/gameAnimations.js"></script>
<script type="text/javascript" src="js/jCardGroup.js"></script>
<script type="text/javascript" src="js/jCards.js"></script>
<script type="text/javascript" src="js/logging.js"></script>
// TODO: delete - Only for debugging
function getUrlParam(param) {
var search = window.location.search.substring(1);
if (search.indexOf('&') > -1) {
var params = search.split('&');
for (var i = 0; i < params.length; i++) {
var key_value = params[i].split('=');
if (key_value[0] == param) return key_value[1];
}
} else {
var params = search.split('=');
if (params[0] == param) return params[1];
<script type="text/javascript">
var ui;
var communication;
// TODO: delete - Only for debugging
function getUrlParam(param) {
var search = window.location.search.substring(1);
if (search.indexOf('&') > -1) {
var params = search.split('&');
for (var i = 0; i < params.length; i++) {
var key_value = params[i].split('=');
if (key_value[0] == param) return key_value[1];
}
return null;
} else {
var params = search.split('=');
if (params[0] == param) return params[1];
}
return null;
}
function getMapSize(map) {
var size = 0, key;
for (key in map)
if (map.hasOwnProperty(key)) size++;
return size;
}
function getMapSize(map) {
var size = 0, key;
for (key in map)
if (map.hasOwnProperty(key)) size++;
return size;
}
$(document).ready(
function () {
var replay = getUrlParam("replayId");
$(document).ready(
function () {
var replay = getUrlParam("replayId");
ui = new GempLotrGameUI("/gemp-lotr/server", replay != null);
ui = new GempLotrGameUI("/gemp-lotr/server", replay != null);
$(window).resize(function() {
ui.windowResized();
});
ui.layoutUI(true);
if (replay == null)
ui.startGameSession();
else
ui.startReplaySession(replay);
$(window).resize(function() {
ui.windowResized();
});
</script>
ui.layoutUI(true);
if (replay == null)
ui.startGameSession();
else
ui.startReplaySession(replay);
});
</script>
</head>
<body>

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

@@ -67,40 +67,40 @@ var GameAnimations = Class.extend({
var cardWidth = card.getWidthForHeight(cardHeight);
$(cardDiv).css(
{
position: "absolute",
left: (gameWidth / 2 - cardWidth / 4),
top: gameHeight * (3 / 8),
width: cardWidth / 2,
height: cardHeight / 2,
"z-index": 100,
opacity: 0});
{
position: "absolute",
left: (gameWidth / 2 - cardWidth / 4),
top: gameHeight * (3 / 8),
width: cardWidth / 2,
height: cardHeight / 2,
"z-index": 100,
opacity: 0});
$(cardDiv).animate(
{
left: "-=" + cardWidth / 4,
top: "-=" + (gameHeight / 8),
width: "+=" + (cardWidth / 2),
height: "+=" + (cardHeight / 2),
opacity: 1},
{
duration: that.getAnimationLength(that.playEventDuration / 8),
easing: "linear",
queue: false,
complete: next});
{
left: "-=" + cardWidth / 4,
top: "-=" + (gameHeight / 8),
width: "+=" + (cardWidth / 2),
height: "+=" + (cardHeight / 2),
opacity: 1},
{
duration: that.getAnimationLength(that.playEventDuration / 8),
easing: "linear",
queue: false,
complete: next});
}).queue(
function(next) {
setTimeout(next, that.getAnimationLength(that.playEventDuration * (5 / 8)));
}).queue(
function(next) {
$(cardDiv).animate(
{
opacity: 0},
{
duration: that.getAnimationLength(that.playEventDuration / 4),
easing: "easeOutQuart",
queue: false,
complete: next});
{
opacity: 0},
{
duration: that.getAnimationLength(that.playEventDuration / 4),
easing: "easeOutQuart",
queue: false,
complete: next});
}).queue(
function(next) {
$(cardDiv).remove();
@@ -138,26 +138,26 @@ var GameAnimations = Class.extend({
var targetCardHeight = $(targetCard).height();
$(cardDiv).css(
{
position: "absolute",
left: $(targetCard).position().left,
top: $(targetCard).position().top,
width: targetCardWidth,
height: targetCardHeight,
"z-index": 100,
opacity: 1});
{
position: "absolute",
left: $(targetCard).position().left,
top: $(targetCard).position().top,
width: targetCardWidth,
height: targetCardHeight,
"z-index": 100,
opacity: 1});
$(cardDiv).animate(
{
opacity: 0,
left: "-=" + (targetCardWidth / 2),
top: "-=" + (targetCardHeight / 2),
width: "+=" + targetCardWidth,
height: "+=" + targetCardHeight},
{
duration: that.getAnimationLength(that.cardAffectsCardDuration),
easing: "easeInQuart",
queue: false,
complete: null});
{
opacity: 0,
left: "-=" + (targetCardWidth / 2),
top: "-=" + (targetCardHeight / 2),
width: "+=" + targetCardWidth,
height: "+=" + targetCardHeight},
{
duration: that.getAnimationLength(that.cardAffectsCardDuration),
easing: "easeInQuart",
queue: false,
complete: null});
}
setTimeout(next, that.getAnimationLength(that.cardAffectsCardDuration));
@@ -171,7 +171,7 @@ var GameAnimations = Class.extend({
$(this).remove();
}
}
);
);
next();
});
}
@@ -247,29 +247,29 @@ var GameAnimations = Class.extend({
var cardWidth = card.getWidthForHeight(cardHeight);
$(cardDiv).css(
{
position: "absolute",
left: (gameWidth / 2 - cardWidth / 4),
top: gameHeight * (3 / 8),
width: cardWidth / 2,
height: cardHeight / 2,
"z-index": 100,
opacity: 0});
{
position: "absolute",
left: (gameWidth / 2 - cardWidth / 4),
top: gameHeight * (3 / 8),
width: cardWidth / 2,
height: cardHeight / 2,
"z-index": 100,
opacity: 0});
$(cardDiv).animate(
{
opacity: 1},
{
duration: that.getAnimationLength(that.putCardIntoPlayDuration / 8),
easing: "linear",
step: function(now, fx) {
layoutCardElem(cardDiv,
(gameWidth / 2 - cardWidth / 4) - now * (cardWidth / 4),
gameHeight * (3 / 8) - now * (gameHeight / 8),
cardWidth / 2 + now * (cardWidth / 2),
cardHeight / 2 + now * (cardHeight / 2), 100);
},
complete: next});
{
opacity: 1},
{
duration: that.getAnimationLength(that.putCardIntoPlayDuration / 8),
easing: "linear",
step: function(now, fx) {
layoutCardElem(cardDiv,
(gameWidth / 2 - cardWidth / 4) - now * (cardWidth / 4),
gameHeight * (3 / 8) - now * (gameHeight / 8),
cardWidth / 2 + now * (cardWidth / 2),
cardHeight / 2 + now * (cardHeight / 2), 100);
},
complete: next});
}).queue(
function(next) {
setTimeout(next, that.getAnimationLength(that.putCardIntoPlayDuration * (5 / 8)));
@@ -284,20 +284,20 @@ var GameAnimations = Class.extend({
var startHeight = cardDiv.height();
$(cardDiv).animate(
{
left: oldValues["left"]},
{
duration: that.getAnimationLength(that.putCardIntoPlayDuration / 4),
easing: "linear",
step: function(now, fx) {
var state = fx.state;
layoutCardElem(cardDiv,
startLeft + (oldValues["left"] - startLeft) * state,
startTop + (oldValues["top"] - startTop) * state,
startWidth + (oldValues["width"] - startWidth) * state,
startHeight + (oldValues["height"] - startHeight) * state, 100);
},
complete: next});
{
left: oldValues["left"]},
{
duration: that.getAnimationLength(that.putCardIntoPlayDuration / 4),
easing: "linear",
step: function(now, fx) {
var state = fx.state;
layoutCardElem(cardDiv,
startLeft + (oldValues["left"] - startLeft) * state,
startTop + (oldValues["top"] - startTop) * state,
startWidth + (oldValues["width"] - startWidth) * state,
startHeight + (oldValues["height"] - startHeight) * state, 100);
},
complete: next});
}).queue(
function(next) {
var cardDiv = $(".card:cardId(" + cardId + ")");
@@ -333,7 +333,7 @@ var GameAnimations = Class.extend({
if (index != -1)
cardData.attachedCards.splice(index, 1);
}
);
);
var card = $(".card:cardId(" + cardId + ")");
var cardData = card.data("card");
@@ -369,12 +369,12 @@ var GameAnimations = Class.extend({
function(next) {
$(".card:cardId(" + cardRemovedIds + ")")
.animate(
{
opacity: 0},
{
duration: that.getAnimationLength(that.removeCardFromPlayDuration),
easing: "easeOutQuart",
queue: false});
{
opacity: 0},
{
duration: that.getAnimationLength(that.removeCardFromPlayDuration),
easing: "easeOutQuart",
queue: false});
setTimeout(next, that.getAnimationLength(that.removeCardFromPlayDuration));
});
}
@@ -399,7 +399,7 @@ var GameAnimations = Class.extend({
if (index != -1)
cardData.attachedCards.splice(index, 1);
}
);
);
}
card.remove();
@@ -684,6 +684,17 @@ var GameAnimations = Class.extend({
}
$("#main").queue(
function(next) {
var charStrengths = element.getAttribute("charStrengths");
if (charStrengths != null) {
var charStrengthsArr = charStrengths.split(",");
for (var i = 0; i < charStrengthsArr.length; i++) {
var cardStrength = charStrengthsArr[i].split("=");
var cardDiv = $(".card:cardId(" + cardStrength[0] + ")");
cardDiv.data("card").strength = cardStrength[1];
$(".cardStrength", cardDiv).html(cardStrength[1]).css({display: ""});
}
}
var playerZones = element.getElementsByTagName("playerZones");
for (var i = 0; i < playerZones.length; i++) {
var playerZone = playerZones[i];

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

@@ -292,21 +292,21 @@ var GempLotrGameUI = Class.extend({
initializeDialogs: function() {
this.smallDialog = $("<div></div>")
.dialog({
autoOpen: false,
closeOnEscape: false,
resizable: false,
width: 400,
height: 200
});
autoOpen: false,
closeOnEscape: false,
resizable: false,
width: 400,
height: 200
});
this.cardActionDialog = $("<div></div>")
.dialog({
autoOpen: false,
closeOnEscape: false,
resizable: true,
width: 600,
height: 300
});
autoOpen: false,
closeOnEscape: false,
resizable: true,
width: 600,
height: 300
});
var that = this;
@@ -321,15 +321,15 @@ var GempLotrGameUI = Class.extend({
this.infoDialog = $("<div></div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
resizable: true,
title: "Card information",
minHeight: 80,
minWidth: 200,
width: Math.max(600, width * 0.75),
height: Math.max(300, height * 0.75)
});
autoOpen: false,
closeOnEscape: true,
resizable: true,
title: "Card information",
minHeight: 80,
minWidth: 200,
width: Math.max(600, width * 0.75),
height: Math.max(300, height * 0.75)
});
var swipeOptions = {
threshold: 20,
@@ -720,13 +720,13 @@ var GempLotrGameUI = Class.extend({
this.smallDialog
.html(text + "<br /><input id='integerDecision' type='text' value='0'>")
.dialog("option", "buttons",
{
"OK": function() {
$(this).dialog("close");
that.decisionFunction(id, $("#integerDecision").val());
}
}
);
{
"OK": function() {
$(this).dialog("close");
that.decisionFunction(id, $("#integerDecision").val());
}
}
);
$("#integerDecision").SpinnerControl({ type: 'range',
typedata: {
@@ -758,21 +758,38 @@ var GempLotrGameUI = Class.extend({
this.smallDialog
.html(html)
.dialog("option", "buttons",
{
"OK": function() {
$(this).dialog("close");
that.decisionFunction(id, $("#multipleChoiceDecision").val());
}
}
);
{
"OK": function() {
$(this).dialog("close");
that.decisionFunction(id, $("#multipleChoiceDecision").val());
}
}
);
this.smallDialog.dialog("open");
},
createCardDiv: function(card, text, foil) {
var cardDiv = createCardDiv(card.imageUrl, text, foil);
var tokenOverlay = $(".tokenOverlay", cardDiv);
var cardStrengthDiv = $("<div class='cardStrength'></div>");
tokenOverlay.append(cardStrengthDiv);
cardDiv.data("card", card);
var sizeListeners = new Array();
sizeListeners[0] = {
sizeChanged: function(width, height) {
if (cardDiv.data("card").strength != null)
cardStrengthDiv.css({position: "absolute", left: width - 30 - 2 + "px", top: height - 30 - 2 + "px", width: 30, height: 30, display: ""});
else
cardStrengthDiv.css({position: "absolute", left: width - 30 - 2 + "px", top: height - 30 - 2 + "px", width: 30, height: 30, display: "none"});
}
};
cardDiv.data("sizeListeners", sizeListeners);
var that = this;
var swipeOptions = {
threshold: 20,
@@ -1013,8 +1030,8 @@ var GempLotrGameUI = Class.extend({
$(div).find('LI.hover').removeClass('hover');
$(this).parent().addClass('hover');
}).mouseout(function() {
$(div).find('LI.hover').removeClass('hover');
});
$(div).find('LI.hover').removeClass('hover');
});
var getRidOfContextMenu = function() {
$(div).remove();
@@ -1294,21 +1311,6 @@ var GempLotrGameUI = Class.extend({
this.attachSelectionFunctions(minions);
},
moveCardToElement: function(cardId, element) {
var charDiv = $(".card:cardId(" + cardId + ")");
var charData = charDiv.data("card");
charDiv.remove();
element.append(charDiv);
charDiv.data("card", charData);
for (var j = 0; j < charData.attachedCards.length; j++) {
var attachedDiv = charData.attachedCards[j];
var attachedData = attachedDiv.data("card");
attachedDiv.remove();
element.append(attachedDiv);
attachedDiv.data("card", attachedData);
}
},
clearSelection: function() {
$(".selectableCard").removeClass("selectableCard").data("action", null);
$(".selectedCard").removeClass("selectedCard");

13
gemp-lotr/gemp-lotr-web/src/main/webapp/js/jCardGroup.js
View File

@@ -60,7 +60,7 @@ var CardGroup = Class.extend({
var tokenCount = tokens[token];
for (var i = 0; i < tokenCount; i++) {
var tokenElem = $("<img src='images/tokens/" + token.toLowerCase() + ".png' width='" + tokenSize + "' height='" + tokenSize + "'></img>").css({position: "absolute", left: tokenX + "px", top: (1 * tokenSize / 2) * (1 + i) + "px"});
var tokenElem = $("<img class='token' src='images/tokens/" + token.toLowerCase() + ".png' width='" + tokenSize + "' height='" + tokenSize + "'></img>").css({position: "absolute", left: tokenX + "px", top: (1 * tokenSize / 2) * (1 + i) + "px"});
tokenOverlay.append(tokenElem);
}
tokenIndex ++;
@@ -97,7 +97,7 @@ var AdvPathCardGroup = CardGroup.extend({
function(first, second) {
return (first.data("card").siteNumber - second.data("card").siteNumber);
}
);
);
var cardCount = cardsToLayout.length;
var totalHeight = 0;
@@ -287,8 +287,9 @@ function layoutCardElem(cardElem, x, y, width, height, index) {
cardElem.css({position: "absolute", left: x + "px", top: y + "px", width: width, height: height, zIndex: index });
var tokenOverlay = $(".tokenOverlay", cardElem);
tokenOverlay.css({position: "absolute", left: 0 + "px", top: 0 + "px", width: width, height: height})
.html("");
tokenOverlay.css({position: "absolute", left: 0 + "px", top: 0 + "px", width: width, height: height});
// Remove all existing tokens
(".token",tokenOverlay).remove();
$(".foilOverlay", cardElem).css({position: "absolute", left: 0 + "px", top: 0 + "px", width: width, height: height});
@@ -297,4 +298,8 @@ function layoutCardElem(cardElem, x, y, width, height, index) {
var borderOverlay = $(".borderOverlay", cardElem);
borderOverlay.css({position: "absolute", left: 0 + "px", top: 0 + "px", width: width - 2 * borderWidth, height: height - 2 * borderWidth, "border-width": borderWidth + "px"});
var sizeListeners = cardElem.data("sizeListeners");
if (sizeListeners != null)
for (var i = 0; i < sizeListeners.length; i++)
sizeListeners[i].sizeChanged(width, height);
}

1
gemp-lotr/gemp-lotr-web/src/main/webapp/js/jCards.js
View File

@@ -12,6 +12,7 @@ var Card = Class.extend({
owner: null,
siteNumber: null,
attachedCards: null,
strength: null,
init: function(blueprintId, zone, cardId, owner, siteNumber) {
this.blueprintId = blueprintId;