This is a Tetris game build with React, with AI competition mode integrated.
Folder structure:
src
| - app
| | - firebase - configuration file for firebase backend
| | - globals.css - global css configuration file
| | - layout.tsx - UI that shared between routes
| | - page.tsx - root page, with route '/'
|
| - components
| - MenuButton - Unify menu button style
| - Modal
| - BasicModal - The basic modal component (all the followinng components would be rendered on top of it)
| - Control - The control page that would be displayed on the modal when user click control on the main menu
| - MainMenu - The main menu page ...
| - Pause - The pause page ...
| - Setting - The setting page ...
| - Panels - Controls the behavior of all those panels
| - PlayField - The area where the main gameplay occurs
| - Timer - 'functional' component as its name suggests
| - GameBoard - Store global game states
npm install
npm run dev
npm run build