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.
📏 Fully responsive
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).
👉 Fully optimised for touch screens (in both landscape and portrait mode)
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.
⌨️ Keyboard navigation
The game works on desktop through keyboard navigation: by pressing arrow keys (⬅️⬆️⬇️➡️) or WASD. Pressing the spacebar pauses (or unpauses) the game.
🕵️ GDPR compliant
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.
🌚 Dark & Light mode
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.
🎚️ Game settings & Game UX
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.
🌐 Internalization (i18n)
The game is fully translatable to any language, it uses [react-intl](https://formatjs.io/docs/react-intl/) to prevent any text to be hardcoded. At the moment I provide English and Czech languages - in the future the list might extend.
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.
💋 KISS ("Keep it simple, stupid")
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.
🍭 A little bit addictive
Hopefully the game is addictive just enough. :)
You can find the demo at cibulka.codes/tetris.
This project is built as a NPM module easily includable to any React application (www.cibulka.codes, for example).
- Install the project as one of your dependencies.
npm install react-tetris-ts- Import the library to your project.
import Tetris from "react-tetris-ts";
export default function PageWithTetris() {
return <Tetris />;
}- Clone the repo
git clone https://www.github.com/cibulka/react-tetris-ts
- Install the dependencies and run
cd react-tetris-ts
npm install
npm run dev
- Open the local URL (shown in your terminal window), usually http://localhost:5173.
All configuration is optional, library works out of the box.
import Tetris from "react-tetris-ts";
export default function PageWithTetris() {
return <Tetris />;
}TetrisConfig (TS)
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;
};Coded with love by Petr Cibulka. Fully open-source. Check my website, I might be looking for a job. 😊