webclient/js/GUI/Screen/Game/Animation.js

139 lines
3.6 KiB
JavaScript

import * as Card from GUI.Card;
import * as RiverCard from GUI.Card.RiverCard;
import * as TurnedCard from GUI.Card.TurnedCard;
import * as State from GUI.Screen.Game.State;
import * as Async from UnitJS.Async;
import * as Dom from UnitJS.Dom;
var queue = [];
return {
animate: animate,
catchUp: catchUp,
delay: delay,
getQueue: getQueue
};
function catchUp() {
if(queue.length > 0) {
var length = queue.length;
Async.run.apply(null, queue.concat(
Async.apply(function() {
queue = queue.slice(length);
catchUp();
})
));
}
}
function delay(animation) {
queue.push(animation);
}
function getQueue() {
return queue;
}
function animate(movement) {
return Async.bind(
Async.apply(cardMoves, movement),
function(movingCards) {
return Async.parallel.apply(null, movingCards);
}
)
}
function handleCaptures(movement, movingCards, side) {
if(movement.captures != undefined) {
var dest = State.sets[side];
movingCards.push(moveCard('river', dest, Card.make(movement.captures)));
return {card: Card.make(movement.played), dest: dest};
} else {
return {card: RiverCard.make(movement.played), dest: State.sets.river};
}
}
function handleSource(movement, movingCards, side, cardLeft) {
if(movement.source == 'Hand') {
movingCards.push(moveCard(side, cardLeft.dest, cardLeft.card));
} else {
var cardSet = {};
var name = cardLeft.card.value.name;
cardSet[name] = State.globalState.turnedCard || TurnedCard.make(name);
State.globalState.turnedCard = null;
movingCards.push(
moveCard({card: cardSet, dom: State.dom.deck}, cardLeft.dest, cardLeft.card)
);
}
}
function cardMoves(movement) {
var card;
var movingCards = [];
var side = (State.globalState.playing) ? 'you' : 'them';
var cardLeft = handleCaptures(movement, movingCards, side);
handleSource(movement, movingCards, side, cardLeft);
return movingCards;
}
function insertCard(toSet, card) {
if(toSet.dom != undefined) {
toSet.card[card.value.name] = card;
toSet.dom.appendChild(card.dom);
} else {
insertCard(toSet[card.value.family.class], card);
}
}
function getSource(fromSet, card) {
var source, origin;
if(fromSet == 'river') {
source = State.sets.river;
} else if(typeof fromSet == 'object') {
source = fromSet;
} else {
source = State.sets[fromSet].hand;
if(fromSet == 'them') {
origin = source.dom.children[source.dom.children.length - 1];
}
}
origin = origin || source.card[card.value.name].dom;
delete source.card[card.value.name];
return {dom: source.dom, origin: origin};
}
function offsetInPlaceOf(referenceCard, targetCard) {
var from = referenceCard.getBoundingClientRect();
var to = targetCard.getBoundingClientRect();
targetCard.style.left = (from.left - to.left) + 'px';
targetCard.style.top = (from.top - to.top) + 'px';
targetCard.classList.add('moving');
targetCard.style.visibility = null;
}
function resetPostion(card) {
return function() {card.dom.style.left = 0; card.dom.style.top = 0;};
}
function cleanUpMove(source, card, slot) {
return function() {
source.dom.removeChild(slot);
card.dom.classList.remove('moving');
};
}
function moveCard(fromSet, toSet, card) {
var source = getSource(fromSet, card);
var slot = Dom.make('li', {class: ['card', 'slot']});
source.dom.replaceChild(slot, source.origin);
card.dom.style.visibility = 'hidden';
insertCard(toSet, card);
offsetInPlaceOf(slot, card.dom)
return Async.sequence(
Async.wait(10),
Async.apply(resetPostion(card)),
Async.wait(1000),
Async.apply(cleanUpMove(source, card, slot))
);
}