Prior

Install

• Node.js LTS (Windows x64) — https://nodejs.org/en/download

npm install

Build

• Typecheck, bundle with electron-vite, then pack an unpacked Windows app (no NSIS/portable step — faster):

npm run build

• Output: release\win-unpacked\Tetris.exe.

Run

npm run dev

Game Rule

• Field: 10 columns × 20 visible rows (2 hidden spawn rows at the top).
• Pieces: Seven tetrominoes (I, O, T, S, Z, J, L); next piece comes from a shuffled 7-bag (each kind once per bag, then a new bag).
• Moves: Left / right / soft drop / hard drop; rotate with wall-kick tries if the rotation would overlap blocks or the wall.
• Lock: When a piece can no longer fall, it locks; full rows clear, score and line count update, level may increase and gravity speeds up.
• Game over: If a new piece cannot spawn without colliding, the run ends (game over).

Victory

There is no story ending: victory is the run itself — survive as long as you can, clear more lines, raise your score and level, and beat your previous best.

Function

┌─────────────────────────────────────────────────────────────────┐
│ MAIN (Electron)                                                 │
│ • BrowserWindow, preload path, dev URL vs prod index.html       │
└───────────────────────────────┬─────────────────────────────────┘
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│ RENDERER                                                        │
│ • Canvas 2D draw board / ghost / active / HUD                   │
│ • KeyboardInput → TetrisGame.tryMove / lock / pause / restart   │
└───────────────────────────────┬─────────────────────────────────┘
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│ TETRIS CORE (TypeScript)                                        │
│ • Grid, bag RNG, gravity tick, line clear, score, game phases   │
└─────────────────────────────────────────────────────────────────┘

History

┌─────────────────────────────────────────────────────────────────┐                                                                                              
│                                                                 |
|  • Created 1984 by Alexey Pajitnov                              │
│   (Dorodnitsyn Computing Centre, Soviet Academy, Moscow)        │
│                                                                 │
│ • 1980s    Russian PC puzzle (Elektronika 60, etc.)             │
│                                                                 │
│ • 1990s    Global arcade / NES / Game Boy                       │
│                                                                 │
│ • 2000s    Guideline rules, online clones                       │
│                                                                 │
│ • 2010s    HTML5 / Canvas / TypeScript games                    │
│                                                                 │
│ • 2020s    Electron packaging for Windows `.exe`                │
└─────────────────────────────────────────────────────────────────┘

Structure

├── electron-builder.yml       # electron-builder: win nsis + portable → release\      (Config)
├── electron.vite.config.ts    # electron-vite main/preload/renderer entries           (Config)
├── package.json               # scripts, dependencies, main entry `out/main/index.js` (Config)
├── tsconfig.json              # solution references                                   (Config)
├── tsconfig.node.json         # main + preload + electron.vite TypeScript             (Config)
├── tsconfig.web.json          # renderer TypeScript                                   (Config)
├── .gitignore                 # ignores node_modules, out, release                    (Config)
├── README.md                  # install, diagrams, tree                               (Config)
└── src
    ├── main
    │   └── index.ts           # Electron BrowserWindow, load renderer                 (Backend)
    ├── preload
    │   └── index.ts           # contextBridge exposes electron-toolkit API            (Backend)
    └── renderer
        ├── index.html         # canvas + HUD markup                                   (Frontend)
        └── src
            ├── env.d.ts       # window.electron typing                                (Frontend) (Types)
            ├── renderer.ts    # rAF loop, input, draw                                 (Frontend)
            ├── style.css      # layout + theme                                        (Frontend) (Static / Styles)
            └── tetris
                ├── constants.ts   # grid sizes, DAS, colors, bag order                (Frontend) (Game)
                ├── game.ts        # TetrisGame rules + scoring                        (Frontend) (Game)
                ├── input.ts       # KeyboardInput + DAS                               (Frontend) (Game)
                ├── pieces.ts      # tetromino shapes per rotation                     (Frontend) (Game)
                └── types.ts       # PieceKind, phases, ActivePiece                    (Frontend) (Game)