React-tetris-ts NPM

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.

🔧 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

Install the project as one of your dependencies.

npm install https://www.github.com/cibulka/react-tetris-ts

Import the library to your project.

import Tetris from 'react-tetris-ts';

export default function PageWithTetris() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Tetris />
    </div>
  );
}

Important note: The game is fully responsive, it will adapt (stretch) to the size of its container. For this reason the container must have set size. Use any unit comfortable for you: pixels, percentages, viewport units or else.

Launch as a standalone app

Clone the repo

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

Install the dependencies and run

cd react-tetris
npm install
npm run dev

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

📦 Features

The game is fully responsive to its container with the help of container queries. This is done so it reacts to the space you allocate for it in your layout, not size of the window.

This however means that the container needs to have a set size. Use any unit comfortable for you: pixels, percentages, viewport units or else.

The game is fully optimized for touch screens with react-swipable, the only external dependency of the project outside of React.js.

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.

The game aims to be as simple as possible: Both through UI design, UX and technical sollution. It has only 2 production dependencies: React.js and React-swipable (to help with touch screen optimization).

Hopefully just enough.

🎨 Configuration (TypeScript)

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

If you want to include your configuration, pass it as a prop during the import:

import Tetris, { TetrisAppConfig } from 'react-tetris-ts';

export default function PageWithTetris() {
  const config: AppConfig = {
    // Your configuration
  };

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Tetris />
    </div>
  );
}

type Config = {
  // Button in the menu that prompts the user to some action other than playing. It can be given either `href` (string with URL) or `onClick` (function triggered after clicking the button).
  action?: {
    href?: string;
    icon?: JSX.Element;
    onClick?: () => void;
    label: string;
  };
  // If you want to change color palette. Dark and light mode available.
  colors?: {
    main?: Partial<TetrisTheme>;
    dark?: Partial<TetrisTheme>;
    light?: Partial<TetrisTheme>;
  };
  // Text content of the app. Useful if your app is translated to multiple languages.
  i18N?: TetrisI18N;
  // CSS value of padding that should be applied around the board.
  padding = 0;
  // Dark mode preference
  theme?: 'dark' | 'mode';
};

type TetrisTheme = {
  background: string;
  board: string;
  button: string;
  button_shade: string;
  button_text: string;
  outline: string;
  text: string;
  shape_i: string;
  shape_j: string;
  shape_l: string;
  shape_o: string;
  shape_s: string;
  shape_t: string;
  shape_z: string;
};

type TetrisI18N = {
  action: string;
  menu: {
    initial: {
      level: string;
      rows: string;
    };
    colors: string;
    resume: string;
    start: string;
  };
  next: string;
  score: {
    level: string;
    levelSmall: string;
    score: string;
    scoreSmall: string;
  };
};