Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some cards in the hand won't flip #6

Open
georgiee opened this issue Dec 7, 2018 · 5 comments
Open

Some cards in the hand won't flip #6

georgiee opened this issue Dec 7, 2018 · 5 comments
Assignees
Labels
bug Something isn't working

Comments

@georgiee
Copy link
Owner

georgiee commented Dec 7, 2018

There's a bug introduced with the flip animation. It seems that the hand animation that orchestrates the the child animations (on each card) is not recognizing a changed card.

I think it's a problem here.

transition(':enter, :increment', [
       query('@flipAnimation', [
        stagger(100, animateChild())
       ], { optional: true })
])

screen shot 2018-12-07 at 14 46 59

@georgiee georgiee added the bug Something isn't working label Dec 7, 2018
@georgiee
Copy link
Owner Author

georgiee commented Dec 7, 2018

It also happens when the animation is disabled. So it's time to blame my obscure ngOnChanges in the flip card where I tried to enforce a flip animation even if the card wasn't destroyed before 🙊

ngOnChanges(changes: SimpleChanges) {
    if (changes.value && !changes.value.firstChange && this.animateFlip) {
      this.flipAnimationSubject.next('back');
      setTimeout(() => {
        this.flipAnimationSubject.next(this.flipState);
      }, 0);
    }

    if (changes.revealed) {
      this.flipAnimationSubject.next(this.flipState);
    }
  }

@georgiee
Copy link
Owner Author

georgiee commented Dec 7, 2018

Found a hand that is not working and pinned it through an injected game configuration. Here is a branch fix-hand-flip-animate-bug.
screen shot 2018-12-07 at 15 20 23

@georgiee
Copy link
Owner Author

georgiee commented Dec 7, 2018

It only happens when you drag the SKip-Bo wildcard into a pile. A pile converts the Skip-Bo card into the logical card value that would follow the current top card of the pile.

Example: If the pile is empty it would be transformed into a 1, is there a 5 a 6 would follow etc.

Together with the CDK Drag & Drop — where the real components are moved into other receiving components we have now a problem whenever we drag a Skip-Bo card into a pile. The card face gets transformed and this somehow breaks the animation flip.

That's a good starting point and a fix should be possible — either with a CDK Drag & Drop setting or by looking into the Flipcard Animation.

My assumption:
The card value transformation when we drop it into a pile triggers a card flip which is blocked by the parent animation (HandComponent) but never triggered. Somewhere between the card transformation, the building pile and the hand component animation is the problem.

(If you remove the hand animation trigger there is no visible bug) but also no animation.

@georgiee
Copy link
Owner Author

Here the minimal reproduction of the bug:
https://skipbo-bug-flip.stackblitz.io/

Source to edit: https://stackblitz.com/edit/skipbo-bug-flip

  • Drag & Drop is not the problem
  • Neither the transformation of the Skipbo Card
  • Not even the changing sorting

I can perfectly recreate the problem, it's like the animation engine wrongly identifies an item being destroyed while it's clearly not. I will tinker around with the minimal demonstration and if I can't get any other insights I will file a bug.

@georgiee
Copy link
Owner Author

I filed an issue in the angular tracker — let's see
angular/angular#27754

@georgiee georgiee self-assigned this Dec 19, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant