From 02edb77285b0dcce6ecdb8ec00b3887149ba9940 Mon Sep 17 00:00:00 2001 From: Tissevert Date: Sat, 18 Jan 2020 23:09:06 +0100 Subject: [PATCH] Explode too big procedures into simple short sub-functions --- js/GUI/Screen/Game/Animation.js | 138 +++++++++++++++++++------------- 1 file changed, 84 insertions(+), 54 deletions(-) diff --git a/js/GUI/Screen/Game/Animation.js b/js/GUI/Screen/Game/Animation.js index 126b281..ffdd328 100644 --- a/js/GUI/Screen/Game/Animation.js +++ b/js/GUI/Screen/Game/Animation.js @@ -14,38 +14,6 @@ return { getQueue: getQueue }; -function animate(movement) { - return Async.bind( - Async.apply(function() { - var card; - var movingCards = []; - var side = (State.state.playing) ? 'you' : 'them'; - var dest = State.sets.river; - if(movement.captures != undefined) { - card = Card.make(movement.played); - dest = State.sets[side]; - movingCards.push([State.sets.river, dest, Card.make(movement.captures)]); - } else { - card = RiverCard.make(movement.played); - } - if(movement.source == 'Hand') { - movingCards.push([State.sets[side].hand, dest, card]); - } else { - var cardSet = {}; - cardSet[card.value.name] = State.state.turnedCard || TurnedCard.make(card.value.name); - State.state.turnedCard = null; - movingCards.push([{card: cardSet, dom: State.dom.deck}, dest, card]); - } - return movingCards; - }), - function(movingCards) { - return Async.parallel.apply(null, - movingCards.map(function(args) { return moveCard.apply(null, args); }) - ); - } - ); -} - function catchUp() { if(queue.length > 0) { var length = queue.length; @@ -66,6 +34,48 @@ 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.state.turnedCard || TurnedCard.make(name); + State.state.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.state.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; @@ -75,34 +85,54 @@ function insertCard(toSet, card) { } } -function moveCard(fromSet, toSet, card) { - var from, originalCard; - var slot = Dom.make('li', {class: ['card', 'slot']}); - if (fromSet.card[card.value.name] != undefined) { - originalCard = fromSet.card[card.value.name].dom; - delete fromSet.card[card.value.name]; +function getSource(fromSet, card) { + var source, origin; + if(fromSet == 'river') { + source = State.sets.river; + } else if(typeof fromSet == 'object') { + source = fromSet; } else { - originalCard = fromSet.dom.children[fromSet.dom.children.length - 1]; + source = State.sets[fromSet].hand; + if(fromSet == 'them') { + origin = source.dom.children[source.dom.children.length - 1]; + } } - from = originalCard.getBoundingClientRect(); - fromSet.dom.replaceChild(slot, originalCard); + 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); - var to = card.dom.getBoundingClientRect(); - card.dom.style.left = (from.left - to.left) + 'px'; - card.dom.style.top = (from.top - to.top) + 'px'; - card.dom.classList.add('moving'); - card.dom.style.visibility = null; + offsetInPlaceOf(slot, card.dom) return Async.sequence( Async.wait(10), - Async.apply(function() { - card.dom.style.left = 0; - card.dom.style.top = 0; - }), + Async.apply(resetPostion(card)), Async.wait(1000), - Async.apply(function() { - fromSet.dom.removeChild(slot); - card.dom.classList.remove('moving'); - }) + Async.apply(cleanUpMove(source, card, slot)) ); }