Re-trigger voting animation

[zoro]

Background

No matter we show the result or not, it's better experience if we could know any player is re-voting.

Normal solutions

To restart animation, we have several approaches.

• Use setTimeout to put the next state change into next tick of event loop

this.setState({ voted: false }, () => {
  setTimeout(() => this.setState({ voted: true }), 0);
});

• Move voted out of <Card /> to destroy (voted=false) then re-build the DOM (voted=true)

{voted && <Card voted={voted} />}

• Trigger re-flow or listen on webkitAnimationEnd event. https://css-tricks.com/restart-css-animation/

Issues in poker

As for our poker, there are two kinds of cards.

• Me

We could easily pass down a prop me={true} to <Card /> for indicating it's me, and check nextProps.score !== this.props.score in componentWillReceiveProps hook to indicate if I re-vote, then invoke one of the approaches above to restart animation.

• Other players

To avoid knowing others' score before we show the result, poker server will return null for other players' score, that means we could not use nextProps.score !== this.props.score to indicate if other player re-vote. Without this if statement, other players' card will always re-animate even he/she doesn't re-vote but other actions trigger the whole state update.

---

Open this ticket here to discuss.

[James Shih]

It's really nice of you to bring this up. I actually tried some ways to address this before, and ultimately realized we need to separate the voting event from the current stateUpdate event. It's advisable to build a general user action event handling mechanic, and these events are not related to the scores, such as voted, clicked Show button, or maybe joined/left in the future.

As for the animations, I suggest making it a separate CSS class apart from .voted. We should remove the class at the end of animation.