Jdrewniak has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/311712

Change subject: Bug fixes in solitaire ui
......................................................................

Bug fixes in solitaire ui

- Refactoring how cards are added & removed from piles.
  Now two functions (add/remove) instead of a moveTo(to, from) func.
- Improving how cards are moved from stack to deck.
  This used to use the same logic as cycling through the deck,
  causing upcoming cards to change order when a card was added
  back into the deck.
- improving card counter text.

Change-Id: I343582debeeef029e63624de86bae1eaa75fd084
---
M public/js/discernadeck.js
1 file changed, 56 insertions(+), 44 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/wikimedia/discovery/discernatron 
refs/changes/12/311712/1

diff --git a/public/js/discernadeck.js b/public/js/discernadeck.js
index 29cee8f..b725d35 100644
--- a/public/js/discernadeck.js
+++ b/public/js/discernadeck.js
@@ -20,9 +20,9 @@
 
                for ( var i = 0; i < this.cards.length; i++ ) {
                        var card = this.cards[i];
-                       var reverseIndex = this.cards.length - i - 1 ;
+                       var reverseIndex = this.cards.length - 1 - i;
                        TweenLite.to( card.domEl, 0.8,{x: stackXY.x, y: 
stackXY.y - (stack.DROP_GAP * (reverseIndex ) ), zIndex: stack.cards.length - 
reverseIndex, ease:Elastic.easeOut} );
-                       card.setCardXY( stackXY.x, stackXY.y + stack.gap - (( 
reverseIndex - 1) * stack.DROP_GAP ));
+                       card.setCardXY( stackXY.x, stackXY.y - (stack.DROP_GAP 
* (reverseIndex ) ) );
                }
 
        },
@@ -32,8 +32,10 @@
        },
        onTap: function ( stack ) {
                return function( ev ) {
-                       if ( stack.deck.currentCard ) {
-                               stack.deck.currentCard.moveCardToStack( 
stack.deck, stack );
+                       var card = stack.deck.currentCard;
+                       if ( card ) {
+                               card.addCardToStack( stack );
+                               card.animateTo( stack );
                        } else {
                                stack.deck.revealCard(stack.deck)();
                        }
@@ -92,10 +94,7 @@
        onPanStart: function( card ) {
                return function( ev ) {
                        card.domEl.classList.add('active');
-                       if (card.stack) {
-                               card.stack.removeCard( card );
-                               card.stack = false;
-                       }
+                       card.removeCardFromStack( card.stack );
                }
        },
        onPan: function ( card ) {
@@ -112,28 +111,39 @@
                        }
                }
        },
-       moveCardToStack: function( oldStack, newStack ){
+       removeCardFromStack: function ( stack ) {
 
-               if ( this.deck === oldStack || !oldStack) {
-                       this.deck.removeFromDeck( this );
+               if ( Deck.isPrototypeOf( stack ) ) {
+                       stack.removeFromDeck( this );
                }
 
-               if ( this.deck === newStack ) {
-                       this.deck.addCardToDeck( this );
+               if ( Stack.isPrototypeOf( stack ) ) {
+                       stack.removeCard( this );
+               }
+               this.stack = false;
+       },
+       addCardToStack: function( stack ) {
+
+               if ( this.stack ) {
+                       this.removeCardFromStack( this.stack )
                }
 
-               if ( oldStack && this.deck !== oldStack ) {
-                       this.stack.removeCard( this );
+               if ( Deck.isPrototypeOf( stack ) ) {
+                       stack.addCardToDeck( this );
                }
 
-               newStack.addCard(this);
-
-               this.stack = newStack;
-
-               var newStackXY = newStack.getStackPos();
+               if ( Stack.isPrototypeOf( stack ) ) {
+                       stack.addCard( this );
+               }
+               this.stack = stack;
+       },
+       animateTo: function( newStack ){
+               var newStackXY = ( newStack.getStackPos ) ? 
newStack.getStackPos() : {x:0, y:0};
                this.setCardXY( newStackXY.x,  newStackXY.y );
                TweenLite.to( this.domEl, 0.2,{x: newStackXY.x, y: 
newStackXY.y, zIndex:newStack.getCards().length, ease:Power4.easeOut} );
-               this.formEl.value = 
newStack.domEl.attributes.getNamedItem('data-score').value;
+       },
+       setFormVal: function( val ){
+               this.formEl.value = val;
        },
        onPanEnd: function( card ) {
 
@@ -143,23 +153,20 @@
 
                        var droppedArea = card.findDropCollision( dropAreas );
                        if ( droppedArea ) {
-                               card.moveCardToStack( card.stack, 
droppedArea.stack );
+                               card.addCardToStack( droppedArea.stack );
+                               card.animateTo( droppedArea.stack );
+                               card.setFormVal( 
droppedArea.stack.domEl.dataset.score )
                        } else {
-                               // jump back to deck
-                               if ( card.stack ) {
-                                       card.stack.removeCard();
-                                       card.stack = false;
-                               }
-                               if ( deck.currentCard !== card ) {
+
+                               if ( card !== deck.currentCard  ) {
                                        if ( deck.currentCard ) {
-                                               deck.moveCardToBottom();
+                                               deck.hideCurrentCard();
                                        }
                                        deck.currentCard = card;
                                        deck.addCardToDeck( card );
                                        card.formEl.value = "";
                                }
-                               card.setCardXY( 0, 0 );
-                               TweenLite.to( card.domEl, 0.8,{ x:"0", y:"0", 
ease:Elastic.easeOut } );
+                               card.animateTo( deck );
                                if (deck.cardsInDeck.length > 1) {
                                        deck.domEl.classList.remove( 'empty' );
                                }
@@ -235,15 +242,14 @@
        },
        initializeDeck: function() {
                var deck = this;
-               //deck.cardsInDeck = window.scoringData.results;
 
                window.scoringData.results.forEach(function( cardObj, i) {
                        deck.addCardToDeck( cardObj );
                } );
                deck.hammerDeck = new Hammer( deck.domEl );
                deck.hammerDeck.on( 'tap', deck.revealCard( deck ) );
-               //reveal the first card
 
+               //reveal the first card
                deck.revealCard(deck)();
                deck.setCardCounter();
                deck.assignExistingScores();
@@ -269,7 +275,8 @@
                                                score = inputs[i].value;
                                        var card = deck.cardsInDeck[position];
                                        card.renderCardIn( deck.flippedDomEl );
-                                       card.moveCardToStack(this, 
stacksByScore[score]);
+                                       card.addCardToStack( 
stacksByScore[score] );
+                                       card.animateTo( stacksByScore[score] );
                                        break;
                        }
                }
@@ -284,28 +291,26 @@
 
                var remainingToEighty = eightyPercent - totalScored;
 
-               if ( totalScored > eightyPercent ){
+               if ( totalScored >= eightyPercent ){
                        document.getElementById( 
'submit-score-btn').removeAttribute('disabled');
+                       
document.getElementById('remaining-card-counter').innerText = "You've scored 
enough cards to submit this query."
                } else {
                        document.getElementById( 
'submit-score-btn').setAttribute('disabled', 'disabled');
+                       
document.getElementById('remaining-card-counter').innerText = 'Score at least ' 
+ remainingToEighty + ' more cards to submit this query.'
+
                }
 
-               if ( remainingToEighty > 0 ) {
-                       
document.getElementById('remaining-card-counter').innerText = 'Score at least ' 
+ remainingToEighty + ' more cards to submit this query.'
-               }
        },
        setCardCounter: function() {
                this.counterEl.innerHTML = this.cardsInDeck.length;
        },
        findPosition: function( deck, id ) {
-               var index = -1;
-
                for (var i = 0; i < deck.cardsInDeck.length; i++) {
                        if (deck.cardsInDeck[i].id == id) {
-                               index = i;
+                               return i;
                        }
                }
-               return index;
+               throw 'unknown card';
        },
        revealCard: function( deck ) {
 
@@ -341,9 +346,10 @@
        },
        addCardToDeck: function( cardData ) {
 
-               if ( cardData.isPrototypeOf( Card )  ) {
+               if ( Card.isPrototypeOf(cardData)  ) {
                        this.cardsInDeck.push( cardData );
                        this.currentCard = cardData;
+                       cardData.stack = this;
                } else {
                        var card = Object.create(Card, {
                                cardData: {writable: true, configurable: true, 
value: cardData },
@@ -354,11 +360,17 @@
                        });
                        card.initialize();
                        this.cardsInDeck.push( card );
+                       card.stack = this;
                }
-
                this.setCardCounter();
                this.validateForm();
        },
+       hideCurrentCard: function() {
+               if ( this.currentCard.domEl.parentNode ) {
+                       this.currentCard.domEl.parentNode.removeChild( 
this.currentCard.domEl );
+               }
+               this.currentCard = false;
+       },
        moveCardToBottom: function(){
                var cards = this.cardsInDeck;
                var currentCard = cards.shift();

-- 
To view, visit https://gerrit.wikimedia.org/r/311712
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I343582debeeef029e63624de86bae1eaa75fd084
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/discovery/discernatron
Gerrit-Branch: master
Gerrit-Owner: Jdrewniak <jdrewn...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to