Neverending Pile of Messages

    react-simple-tetris
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    stars license supportServer forks issues

    Logo

    React Simple Tetris

    Embed a game of Tetris in your React app!
    Get support »

    Report Bug · Request Feature · Original Repo

    📦 Installation

    • Using yarn: yarn add react-simple-tetris
    • Using npm: npm i react-simple-tetris

    📚 Demo

    demo

    🤓 Usage

    const React = require("react");
    const Tetris = require("react-simple-tetris");
    
    const App = () => (
    	<div>
    		<h1>Tetris</h1>
    		<Tetris
    			keyboardControls={{
    				// Default values shown here. These will be used if no
    				// `keyboardControls` prop is provided.
    				down: "MOVE_DOWN",
    				left: "MOVE_LEFT",
    				right: "MOVE_RIGHT",
    				space: "HARD_DROP",
    				z: "FLIP_COUNTERCLOCKWISE",
    				x: "FLIP_CLOCKWISE",
    				up: "FLIP_CLOCKWISE",
    				p: "TOGGLE_PAUSE",
    				c: "HOLD",
    				shift: "HOLD",
    			}}
    		>
    			{({
    				HeldPiece,
    				Gameboard,
    				PieceQueue,
    				points,
    				linesCleared,
    				state,
    				controller,
    			}) => (
    				<div>
    					<HeldPiece />
    					<div>
    						<p>Points: {points}</p>
    						<p>Lines Cleared: {linesCleared}</p>
    					</div>
    					<Gameboard />
    					<PieceQueue />
    					{state === "LOST" && (
    						<div>
    							<h2>Game Over</h2>
    							<button onClick={controller.restart}>
    								New game
    							</button>
    						</div>
    					)}
    				</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;
    }

    📄 License

    Copyright © 2022 Barış DEMİRCİ.

    Distributed under the GPL-3.0 License. See LICENSE for more information.

    🧦 Contributing

    Feel free to use GitHub's features.

    1. Fork the Project
    2. Create your Feature Branch (git checkout -b feature/my-feature)
    3. Run prettier and eslint (npm run format && npm run lint)
    4. Commit your Changes (git commit -m 'my awesome feature my-feature')
    5. Push to the Branch (git push origin feature/my-feature)
    6. Open a Pull Request

    🔥 Show your support

    Give a ⭐️ if this project helped you!

    📞 Contact

    Special Thanks

    Keywords

    none

    Install

    npm i react-simple-tetris

    DownloadsWeekly Downloads

    13

    Version

    0.3.1

    License

    GPL-3.0

    Unpacked Size

    126 kB

    Total Files

    47

    Last publish

    Collaborators

    • leydihavuc
    • ben_baris