React-poker NPM

Flurry

A High Level React Library For Playing Card Animations

react-poker

getting started

install the module inside your project root

npm install react-poker --save

The Deck component takes a board prop which is the array of cards that are dealt and facing up on the community board.

Internally react motion is used to animate card deals when the board prop changes.

import Deck from "react-poker";
import "react-poker/styles.css"

const YourComponent = props =>
    <Deck
      board={["3s", "Qh", "As"]} // array of cards to render on board
      boardXoffset={375} // X axis pixel offset for dealing board
      boardYoffset={200} // Y axis pixel offset for dealing board
      size={200} // card height in pixels
    />

example

The example below includes the logic to shuffle a deck of cards. A new board prop is passed to the Deck component everytime a new card(s) is drawn from the deck or there is a new round.

import Deck from "react-poker";
import "react-poker/styles.css"

const range = (start, count) =>
  Array.apply(0, Array(count)).map((element, index) => {
    return index + start;
  });

function shuffle(array) {
  const copy = [];
  let n = array.length;
  let i;
  // While there remain elements to shuffle…
  while (n) {
    // Pick a remaining element…
    i = Math.floor(Math.random() * array.length);

    // If not already shuffled, move it to the new array.
    if (i in array) {
      copy.push(array[i]);
      delete array[i];
      n--;
    }
  }

  return copy;
}

const suits = ["d", "c", "h", "s"];
const ranks = [
  "A",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "10",
  "J",
  "Q",
  "K"
];

const getDeck = () =>
  shuffle(
    ranks
      .map(r => suits.map(s => r + s))
      .reduce((prev, curr) => prev.concat(curr))
  );

class AppContainer extends Component {
  constructor(props) {
    super(props);
    this.state = { board: [], deck: getDeck() };
    this.progressDeal = this.progressDeal.bind(this);
  }

  newRound() {
    const { deck, board } = this.state;

    const newDeck = getDeck();
    this.setState(Object.assign({}, { board: [], deck: newDeck }));
  }

  dealFlop() {
    const { deck, board } = this.state;
    const flop = range(0, 3).map(e => deck.pop());

    this.setState(Object.assign({}, { board: flop, deck }));
  }

  dealCard() {
    const { deck, board } = this.state;
    const card = deck.pop();

    this.setState(Object.assign({}, { deck, board: board.concat(card) }));
  }

  progressDeal() {
    const { deck, board } = this.state;

    if (board.length === 0) {
      this.dealFlop();
      return;
    }

    if (board.length === 5) {
      this.newRound();
    } else {
      this.dealCard();
    }
  }

  render() {
    const { board } = this.state;

    return (
      <div style={{ left: "10vw", top: "10vh", position: "absolute" }}>
        <button
          style={{ padding: "1.5em", margin: "2em" }}
          onClick={this.progressDeal}
        >
          Deal
        </button>
        <Deck
          board={["3s", "Qh", "As"]}
          boardXoffset={375} // X axis pixel offset for dealing board
          boardYoffset={200} // Y axis pixel offset for dealing board
          size={200} // card height in pixels
        />
      </div>
    );
  }
}

export default AppContainer;

TODO

Generalise library for any card game - i.e Pokemon, Magic The Gathering
Demos
- Add a Pokemon demo.
- For the poker demo add a player deal event
Make the API more declarative:
Pass functions for determining spring settings and card positioning/animation
Abstract out functions for different events i.e flop, turn river that define animations (essentially removing the "poker" related assumptions about the game.
Permit Custom Card Images Design more attractive set of custom poker cards