This project is a tribute to original Tetris game. It is intended to test the capibilities of React and is not affiliated with The Tetris Company in any way. It is completely open-source and not used for any commercial purposes.

📦 Features

The game is fully responsive and allows the user to select their preferred way how to interact with it: in portrait or landscape mode.

To span 100% of the viewport, the game uses dvh units (to prevent layout shifts on change of browser's UI).

Touch screens are interacted with by swiping (to indicate the direction or to "drop" the shape) and tapping (to rotate the shape). If a user flips their device to landscape, they get to use more traditional tap-based controls as well.

The game works on desktop through keyboard navigation: by pressing arrow keys (⬅️⬆️⬇️➡️) or WASD. Pressing the spacebar pauses (or unpauses) the game.

The game does not persists any information: Neither through cookies, nor through the localStorage. For this reason it is fully GDPR compliant and there is no need to have a cookie bar.

Users can switch between dark and light mode. Personally I find the dark mode more aesthetically pleasing, so I've decided to set it as the default.

The light mode is done through CSS, so there is no color flash before the UI hydration.

Users can select both the initial level and initial rows, to set the difficulty of the game as they please.

The speed of the game gradually increases with the score, to prevent users from being bored.

If the user resumes the game from the "paused state", the countdown of 3 seconds is shown first: This is to prevent users from cheating in higher speeds.

The language is provided as the prop to the defualt export: I did not want to clutter the game's UI with the language switcher.

The game aims to be as simple as possible: Both through UI design, UX and technical sollution.

Besides React.js and i18n solution (see above), it has only 2 UI production dependencies:

• react-swipable: API for swipe gestures to provide touch display optimizations
• react-range: Headless solution for [input type=range], that is a bit easier to style than native browser solution.

Hopefully the game is addictive just enough. :)

🎮 Go play!

You can find the demo at cibulka.codes/tetris.

🔧 Install & Use

This project is built as a NPM module easily includable to any React application (www.cibulka.codes, for example).

Install as NPM module

1. Install the project as one of your dependencies.

npm install react-tetris-ts

2. Import the library to your project.

import Tetris from "react-tetris-ts";

export default function PageWithTetris() {
  return <Tetris />;
}

Launch as a standalone app

1. Clone the repo

git clone https://www.github.com/cibulka/react-tetris-ts

2. Install the dependencies and run

cd react-tetris-ts
npm install
npm run dev

3. Open the local URL (shown in your terminal window), usually http://localhost:5173.

🎨 Configuration (TypeScript)

All configuration is optional, library works out of the box.

import Tetris from "react-tetris-ts";

export default function PageWithTetris() {
  return <Tetris />;
}

type TetrisConfig = {
  /**
   * The language of the app.
   * @default en
   */
  locale?: "cs" | "en";
  /**
   * Height of the screen - any CSS unit.
   * @default 100dvh
   */
  height?: string;
  /**
   * Width of the screen - any CSS unit.
   * @default 100dvw
   */
  width?: string;
};

🧔‍♂️ Made by

Coded with love by Petr Cibulka. Fully open-source. Check my website, I might be looking for a job. 😊