flatris

Flatris is demo app for Cosmos, built using React components.

Flatris

Take a trip down memory lane with one the classics and play some Flatris!

Flatris is a demo app for the Cosmos project, built using React components.

The purpose of this demo is to prove that data can drive a user interface, even one as complex as a game. A snapshot of the game state can be generated at any time by calling Flatris.serialize() in the browser console of the demo page. This will reveal the data structures on top of which the game is built.

For more insights check out the source code and Cosmos.

Thanks @paulgergely for the flat Tetris design!

Components

SquareBlock

Building block for Tetriminos and the grid of the Well, occupying a 1x1 square block. The only configurable property square blocks have is their color.

Tetrimino

A Tetromino is a geometric shape composed of four squares, connected orthogonally. Read more at http://en.wikipedia.org/wiki/Tetromino

WellGrid

Isolated matrix for the landed Tetriminos inside the Well.

Well

A rectangular vertical shaft, where Tetriminos fall into during a Flatris game. The Well has configurable size and speed. Tetrimino pieces can be inserted inside the well and they will fall until they hit the bottom, and eventually fill it. Whenever the pieces form a straight horizontal line it will be cleared, emptying up space and allowing more pieces to enter afterwards.

GamePanel

The game panel contains:

  • The next Tetrimono to be inserted
  • The score and lines cleared
  • Start or pause/resume controls

It is displayed on the right side of the game.

InfoPanel

Information panel for the Flatris game/Cosmos demo, shown in between game states.

FlatrisGame

The Tetris game was originally designed and programmed by Alexey Pajitnov. It was released on June 6, 1984 and has since become a world-wide phenomenon. Read more about the game at http://en.wikipedia.org/wiki/Tetris

FlatrisStatePreview

Render a Flatris instance next to its prettified, serialized state.

FlatrisStatePersistor

Persist Flatris state with local storage.

Development

npm install
node_modules/.bin/webpack

Related Repositories

flatris

flatris

Flatris is demo app for Cosmos, built using React components. ...

elm-flatris

elm-flatris

A Flatris clone in Elm language ...


Top Contributors

skidding