{"id":15557541,"url":"https://github.com/brandly/react-tetris","last_synced_at":"2025-04-09T05:13:06.401Z","repository":{"id":24088003,"uuid":"27475060","full_name":"brandly/react-tetris","owner":"brandly","description":":video_game: by popular demand","archived":false,"fork":false,"pushed_at":"2024-09-21T05:55:28.000Z","size":1810,"stargazers_count":140,"open_issues_count":6,"forks_count":69,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T04:05:30.739Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"https://brandly.github.io/react-tetris/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brandly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-12-03T07:30:48.000Z","updated_at":"2025-03-25T17:35:55.000Z","dependencies_parsed_at":"2024-06-18T18:30:32.156Z","dependency_job_id":"8b0e29a1-2eb7-4fee-8d37-72d4b187ea07","html_url":"https://github.com/brandly/react-tetris","commit_stats":{"total_commits":110,"total_committers":4,"mean_commits":27.5,"dds":"0.027272727272727226","last_synced_commit":"2bd85b827d3a9c3772d093f7fd85991094459e64"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandly%2Freact-tetris","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandly%2Freact-tetris/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandly%2Freact-tetris/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandly%2Freact-tetris/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandly","download_url":"https://codeload.github.com/brandly/react-tetris/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980843,"owners_count":21027808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest"],"created_at":"2024-10-02T15:18:20.526Z","updated_at":"2025-04-09T05:13:06.361Z","avatar_url":"https://github.com/brandly.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-tetris\n\n![Build Status](https://github.com/brandly/react-tetris/workflows/.github/workflows/test.yml/badge.svg)\n\n\u003e Embed a game of Tetris in your React app\n\n```shell\n$ npm install --save react-tetris\n```\n\n[view demo](https://brandly.github.io/react-tetris/)\n\n## usage\n\n```js\nconst React = require('react');\nconst Tetris = require('react-tetris');\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eTetris\u003c/h1\u003e\n    \u003cTetris\n      keyboardControls={{\n        // Default values shown here. These will be used if no\n        // `keyboardControls` prop is provided.\n        down: 'MOVE_DOWN',\n        left: 'MOVE_LEFT',\n        right: 'MOVE_RIGHT',\n        space: 'HARD_DROP',\n        z: 'FLIP_COUNTERCLOCKWISE',\n        x: 'FLIP_CLOCKWISE',\n        up: 'FLIP_CLOCKWISE',\n        p: 'TOGGLE_PAUSE',\n        c: 'HOLD',\n        shift: 'HOLD'\n      }}\n    \u003e\n      {({\n        HeldPiece,\n        Gameboard,\n        PieceQueue,\n        points,\n        linesCleared,\n        state,\n        controller\n      }) =\u003e (\n        \u003cdiv\u003e\n          \u003cHeldPiece /\u003e\n          \u003cdiv\u003e\n            \u003cp\u003ePoints: {points}\u003c/p\u003e\n            \u003cp\u003eLines Cleared: {linesCleared}\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cGameboard /\u003e\n          \u003cPieceQueue /\u003e\n          {state === 'LOST' \u0026\u0026 (\n            \u003cdiv\u003e\n              \u003ch2\u003eGame Over\u003c/h2\u003e\n              \u003cbutton onClick={controller.restart}\u003eNew game\u003c/button\u003e\n            \u003c/div\u003e\n          )}\n        \u003c/div\u003e\n      )}\n    \u003c/Tetris\u003e\n  \u003c/div\u003e\n);\n```\n\ninclude some styles\n\n```css\n.game-block {\n  margin: 0;\n  padding: 0;\n  width: 1.5em;\n  height: 1.5em;\n  border: 1px solid #ddd;\n}\n.piece-i {\n  background-color: #ec858b;\n}\n.piece-j {\n  background-color: #f1b598;\n}\n.piece-l {\n  background-color: #f8efae;\n}\n.piece-o {\n  background-color: #b5a677;\n}\n.piece-s {\n  background-color: #816e56;\n}\n.piece-t {\n  background-color: #b77c72;\n}\n.piece-z {\n  background-color: #e3be58;\n}\n.piece-preview {\n  background-color: #eee;\n}\n```\n\n## dev\n\n```shell\n$ npm run build\n$ npm run watch\n$ npm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandly%2Freact-tetris","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandly%2Freact-tetris","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandly%2Freact-tetris/lists"}