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

UI changes.

Browse Source
This commit is contained in:
marcins78@gmail.com
2011-10-13 08:29:00 +00:00
parent 52eba78ab6
commit abe6f708db
2 changed files with 208 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,138 +7,142 @@ var GameAnimations = Class.extend({
this.game = gameUI;
},
eventPlayed: function(element) {
var that = this;
eventPlayed: function(element, animate) {
if (animate) {
var that = this;
var participantId = element.getAttribute("participantId");
var blueprintId = element.getAttribute("blueprintId");
var participantId = element.getAttribute("participantId");
var blueprintId = element.getAttribute("blueprintId");
// Play-out game event animation only if it's not the player who initiated it
if (this.game.spectatorMode || (participantId != this.game.bottomPlayerId)) {
var card = new Card(blueprintId, "ANIMATION", "anim", participantId);
var cardDiv = createSimpleCardDiv(card.imageUrl);
// Play-out game event animation only if it's not the player who initiated it
if (this.game.spectatorMode || (participantId != this.game.bottomPlayerId)) {
var card = new Card(blueprintId, "ANIMATION", "anim", participantId);
var cardDiv = createSimpleCardDiv(card.imageUrl);
$("#main").queue(
function(next) {
cardDiv.data("card", card);
$("#main").append(cardDiv);
$("#main").queue(
function(next) {
cardDiv.data("card", card);
$("#main").append(cardDiv);
var gameWidth = $("#main").width();
var gameHeight = $("#main").height();
var gameWidth = $("#main").width();
var gameHeight = $("#main").height();
var cardHeight = (gameHeight / 2);
var cardWidth = card.getWidthForHeight(cardHeight);
var cardHeight = (gameHeight / 2);
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});
$(cardDiv).css(
{
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.playEventDuration / 8,
easing: "linear",
queue: false,
complete: next});
}).queue(
function(next) {
setTimeout(next, that.playEventDuration * (5 / 8));
}).queue(
function(next) {
$(cardDiv).animate(
{
opacity: 0},
{
duration: that.playEventDuration / 4,
easing: "easeOutQuart",
queue: false,
complete: next});
}).queue(
function(next) {
$(cardDiv).remove();
next();
});
$(cardDiv).animate(
{
left: "-=" + cardWidth / 4,
top: "-=" + (gameHeight / 8),
width: "+=" + (cardWidth / 2),
height: "+=" + (cardHeight / 2),
opacity: 1},
{
duration: that.playEventDuration / 8,
easing: "linear",
queue: false,
complete: next});
}).queue(
function(next) {
setTimeout(next, that.playEventDuration * (5 / 8));
}).queue(
function(next) {
$(cardDiv).animate(
{
opacity: 0},
{
duration: that.playEventDuration / 4,
easing: "easeOutQuart",
queue: false,
complete: next});
}).queue(
function(next) {
$(cardDiv).remove();
next();
});
}
}
},
cardAffectsCard: function(element) {
var that = this;
cardAffectsCard: function(element, animate) {
if (animate) {
var that = this;
var participantId = element.getAttribute("participantId");
var blueprintId = element.getAttribute("blueprintId");
var targetCardIds = element.getAttribute("otherCardIds").split(",");
var participantId = element.getAttribute("participantId");
var blueprintId = element.getAttribute("blueprintId");
var targetCardIds = element.getAttribute("otherCardIds").split(",");
// Play-out card affects card animation only if it's not the player who initiated it
if (this.game.spectatorMode || (participantId != this.game.bottomPlayerId)) {
$("#main").queue(
function(next) {
for (var i = 0; i < targetCardIds.length; i++) {
var targetCardId = targetCardIds[i];
// Play-out card affects card animation only if it's not the player who initiated it
if (this.game.spectatorMode || (participantId != this.game.bottomPlayerId)) {
$("#main").queue(
function(next) {
for (var i = 0; i < targetCardIds.length; i++) {
var targetCardId = targetCardIds[i];
var card = new Card(blueprintId, "ANIMATION", "anim" + i, participantId);
var cardDiv = createSimpleCardDiv(card.imageUrl);
var card = new Card(blueprintId, "ANIMATION", "anim" + i, participantId);
var cardDiv = createSimpleCardDiv(card.imageUrl);
var targetCard = $(".card:cardId(" + targetCardId + ")");
if (targetCard.length > 0) {
cardDiv.data("card", card);
$("#main").append(cardDiv);
var targetCard = $(".card:cardId(" + targetCardId + ")");
if (targetCard.length > 0) {
cardDiv.data("card", card);
$("#main").append(cardDiv);
targetCard = targetCard[0];
var targetCardWidth = $(targetCard).width();
var targetCardHeight = $(targetCard).height();
targetCard = targetCard[0];
var targetCardWidth = $(targetCard).width();
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});
$(cardDiv).animate(
{
opacity: 0,
left: "-=" + (targetCardWidth / 2),
top: "-=" + (targetCardHeight / 2),
width: "+=" + targetCardWidth,
height: "+=" + targetCardHeight},
{
duration: that.cardAffectsCardDuration,
easing: "easeInQuart",
queue: false,
complete: null});
}
setTimeout(next, that.cardAffectsCardDuration);
}
}).queue(
function(next) {
$(".card").each(
function() {
var cardData = $(this).data("card");
if (cardData.zone == "ANIMATION") {
$(this).remove();
}
$(cardDiv).css(
{
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.cardAffectsCardDuration,
easing: "easeInQuart",
queue: false,
complete: null});
}
);
next();
});
setTimeout(next, that.cardAffectsCardDuration);
}
}).queue(
function(next) {
$(".card").each(
function() {
var cardData = $(this).data("card");
if (cardData.zone == "ANIMATION") {
$(this).remove();
}
}
);
next();
});
}
}
},
putCardInPlay: function(element) {
putCardInPlay: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -171,13 +175,11 @@ var GameAnimations = Class.extend({
targetCardData.attachedCards.push(cardDiv);
}
that.game.layoutUI(false);
next();
});
},
moveCardInPlay: function(element) {
moveCardInPlay: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -203,7 +205,7 @@ var GameAnimations = Class.extend({
if (index != -1)
cardData.attachedCards.splice(index, 1);
}
);
);
var card = $(".card:cardId(" + cardId + ")");
var cardData = card.data("card");
@@ -217,13 +219,11 @@ var GameAnimations = Class.extend({
targetCardData.attachedCards.push(card);
}
that.game.layoutUI(false);
next();
});
},
removeCardFromPlay: function(element) {
removeCardFromPlay: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -248,20 +248,18 @@ var GameAnimations = Class.extend({
if (index != -1)
cardData.attachedCards.splice(index, 1);
}
);
);
}
card.remove();
}
}
that.game.layoutUI(false);
next();
});
},
gamePhaseChange: function(element) {
gamePhaseChange: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -274,7 +272,7 @@ var GameAnimations = Class.extend({
});
},
twilightPool: function(element) {
twilightPool: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -286,7 +284,7 @@ var GameAnimations = Class.extend({
});
},
turnChange: function(element) {
turnChange: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -306,7 +304,7 @@ var GameAnimations = Class.extend({
});
},
addAssignment: function(element) {
addAssignment: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -318,13 +316,11 @@ var GameAnimations = Class.extend({
that.game.assignMinion(opposingCardIds[i], cardId);
}
that.game.layoutUI(false);
next();
});
},
removeAssignment: function(element) {
removeAssignment: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -336,13 +332,11 @@ var GameAnimations = Class.extend({
that.game.unassignMinion(cardData.cardId);
});
that.game.layoutUI(false);
next();
});
},
startSkirmish: function(element) {
startSkirmish: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -367,13 +361,11 @@ var GameAnimations = Class.extend({
that.game.skirmishGroupDiv.append(that.game.shadowStrengthDiv);
$("#main").append(that.game.skirmishGroupDiv);
that.game.layoutUI(false);
next();
});
},
endSkirmish: function() {
endSkirmish: function(animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -389,13 +381,11 @@ var GameAnimations = Class.extend({
}
});
that.game.layoutUI(false);
next();
});
},
addTokens: function(element) {
addTokens: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -411,13 +401,11 @@ var GameAnimations = Class.extend({
cardData.tokens[token] = 0;
cardData.tokens[token] += count;
that.game.layoutUI(false);
next();
});
},
removeTokens: function(element) {
removeTokens: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -433,13 +421,11 @@ var GameAnimations = Class.extend({
cardData.tokens[token] = 0;
cardData.tokens[token] -= count;
that.game.layoutUI(false);
next();
});
},
playerPosition: function(element) {
playerPosition: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -454,13 +440,11 @@ var GameAnimations = Class.extend({
that.game.advPathGroup.setPositions(that.game.playerPositions);
that.game.layoutUI(false);
next();
});
},
zoneSize: function(element) {
zoneSize: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -473,15 +457,15 @@ var GameAnimations = Class.extend({
else if (zone == "DISCARD")
$("#discard" + that.game.getPlayerIndex(playerId)).text("Discard: " + count);
else if (zone == "DEAD")
$("#deadPile" + that.game.getPlayerIndex(playerId)).text("Dead pile: " + count);
else if (zone == "DECK")
$("#deck" + that.game.getPlayerIndex(playerId)).text("Deck: " + count);
$("#deadPile" + that.game.getPlayerIndex(playerId)).text("Dead pile: " + count);
else if (zone == "DECK")
$("#deck" + that.game.getPlayerIndex(playerId)).text("Deck: " + count);
next();
});
},
message: function(element) {
message: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -493,7 +477,7 @@ var GameAnimations = Class.extend({
});
},
warning: function(element) {
warning: function(element, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -505,7 +489,7 @@ var GameAnimations = Class.extend({
});
},
showSkirmishValues: function(skirmish) {
showSkirmishValues: function(skirmish, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -516,7 +500,7 @@ var GameAnimations = Class.extend({
});
},
processDecision: function(decision) {
processDecision: function(decision, animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -537,11 +521,13 @@ var GameAnimations = Class.extend({
that.game.assignMinionsDecision(decision);
}
that.game.layoutUI(false);
next();
});
},
updateGameState: function() {
updateGameState: function(animate) {
var that = this;
$("#main").queue(
function(next) {
@@ -549,6 +535,9 @@ var GameAnimations = Class.extend({
function() {
that.game.updateGameState();
}, 1000);
that.game.layoutUI(false);
next();
});
},

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

@@ -273,21 +273,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;
@@ -302,15 +302,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,
@@ -445,7 +445,7 @@ var GempLotrGameUI = Class.extend({
var that = this;
this.communication.startGameSession(
function(xml) {
that.processXml(xml);
that.processXml(xml, false);
});
},
@@ -453,7 +453,7 @@ var GempLotrGameUI = Class.extend({
var that = this;
this.communication.updateGameState(
function(xml) {
that.processXml(xml);
that.processXml(xml, true);
});
},
@@ -461,7 +461,7 @@ var GempLotrGameUI = Class.extend({
var that = this;
this.communication.gameDecisionMade(decisionId, result,
function(xml) {
that.processXml(xml);
that.processXml(xml, true);
});
},
@@ -473,14 +473,14 @@ var GempLotrGameUI = Class.extend({
});
},
processXml: function(xml) {
processXml: function(xml, animate) {
log(xml);
var root = xml.documentElement;
if (root.tagName == 'gameState' || root.tagName == 'update')
this.processGameEventsXml(root);
this.processGameEventsXml(root, animate);
},
processGameEventsXml: function(element) {
processGameEventsXml: function(element, animate) {
var gameEvents = element.getElementsByTagName("gameEvent");
// Go through all the events
@@ -488,49 +488,49 @@ var GempLotrGameUI = Class.extend({
var gameEvent = gameEvents[i];
var eventType = gameEvent.getAttribute("type");
if (eventType == "PUT_CARD_IN_PLAY") {
this.animations.putCardInPlay(gameEvent);
this.animations.putCardInPlay(gameEvent, animate);
} else if (eventType == "MOVE_CARD_IN_PLAY") {
this.animations.moveCardInPlay(gameEvent);
this.animations.moveCardInPlay(gameEvent, animate);
} else if (eventType == "PARTICIPANT") {
this.participant(gameEvent);
} else if (eventType == "REMOVE_CARD_FROM_PLAY") {
this.animations.removeCardFromPlay(gameEvent);
this.animations.removeCardFromPlay(gameEvent, animate);
} else if (eventType == "GAME_PHASE_CHANGE") {
this.animations.gamePhaseChange(gameEvent);
this.animations.gamePhaseChange(gameEvent, animate);
} else if (eventType == "TWILIGHT_POOL") {
this.animations.twilightPool(gameEvent);
this.animations.twilightPool(gameEvent, animate);
} else if (eventType == "TURN_CHANGE") {
this.animations.turnChange(gameEvent);
this.animations.turnChange(gameEvent, animate);
} else if (eventType == "ADD_ASSIGNMENT") {
this.animations.addAssignment(gameEvent);
this.animations.addAssignment(gameEvent, animate);
} else if (eventType == "REMOVE_ASSIGNMENT") {
this.animations.removeAssignment(gameEvent);
this.animations.removeAssignment(gameEvent, animate);
} else if (eventType == "START_SKIRMISH") {
this.animations.startSkirmish(gameEvent);
this.animations.startSkirmish(gameEvent, animate);
} else if (eventType == "END_SKIRMISH") {
this.animations.endSkirmish();
this.animations.endSkirmish(animate);
} else if (eventType == "ADD_TOKENS") {
this.animations.addTokens(gameEvent);
this.animations.addTokens(gameEventv);
} else if (eventType == "REMOVE_TOKENS") {
this.animations.removeTokens(gameEvent);
this.animations.removeTokens(gameEvent, animate);
} else if (eventType == "PLAYER_POSITION") {
this.animations.playerPosition(gameEvent);
this.animations.playerPosition(gameEvent, animate);
} else if (eventType == "ZONE_SIZE") {
this.animations.zoneSize(gameEvent);
this.animations.zoneSize(gameEvent, animate);
} else if (eventType == "MESSAGE") {
this.animations.message(gameEvent);
this.animations.message(gameEvent, animate);
} else if (eventType == "WARNING") {
this.animations.warning(gameEvent);
this.animations.warning(gameEvent, animate);
} else if (eventType == "CARD_AFFECTS_CARD") {
this.animations.cardAffectsCard(gameEvent);
this.animations.cardAffectsCard(gameEvent, animate);
} else if (eventType == "EVENT_PLAYED") {
this.animations.eventPlayed(gameEvent);
this.animations.eventPlayed(gameEvent, animate);
}
}
var skirmish = element.getElementsByTagName("skirmish");
if (skirmish.length > 0)
this.animations.showSkirmishValues(skirmish);
this.animations.showSkirmishValues(skirmish, animate);
if (this.allPlayerIds != null) {
var clocks = element.getElementsByTagName("clocks")[0].getElementsByTagName("clock");
@@ -553,9 +553,9 @@ var GempLotrGameUI = Class.extend({
var decisions = element.getElementsByTagName("decision");
if (decisions.length == 1) {
var decision = decisions[0];
this.animations.processDecision(decision);
this.animations.processDecision(decision, animate);
} else {
this.animations.updateGameState();
this.animations.updateGameState(animate);
}
},
@@ -693,13 +693,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: {
@@ -731,13 +731,13 @@ 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");
},
@@ -986,8 +986,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();