Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
bin
lib
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
rollup.app.js
rollup.lib.js

README.md

react-tetris

Build Status

Embed a game of Tetris in your React app

$ npm install --save react-tetris

view demo

usage

const React = require('react');
const Tetris = require('react-tetris');

const App = () => (
  <div>
    <h1>Tetris</h1>
    <Tetris>
      {({ HeldPiece, Gameboard, PieceQueue, points, linesCleared }) => {
        // Render it however you'd like
        return (
          <div>
            <HeldPiece />
            <div>
              <p>Points: {points}</p>
              <p>Lines Cleared: {linesCleared}</p>
            </div>
            <Gameboard />
            <PieceQueue />
          </div>
        );
      }}
    </Tetris>
  </div>
);

include some styles

.game-block {
  margin: 0;
  padding: 0;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid #ddd;
}
.piece-i {
  background-color: #ec858b;
}
.piece-j {
  background-color: #f1b598;
}
.piece-l {
  background-color: #f8efae;
}
.piece-o {
  background-color: #b5a677;
}
.piece-s {
  background-color: #816e56;
}
.piece-t {
  background-color: #b77c72;
}
.piece-z {
  background-color: #e3be58;
}
.piece-preview {
  background-color: #eee;
}

dev

$ npm run build
$ npm run watch
$ npm test