# jlg-formation/tetris-gia architecture

> Architecture diagram of the GitHub repository jlg-formation/tetris-gia, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jlg-formation/tetris-gia
- Repository: https://github.com/jlg-formation/tetris-gia

## Overview

Tetris Bisounours is a solo, keyboard-controlled browser game. The player’s input and the timed game loop are handled by the runtime controller, which updates pure game state and sends that state to canvas rendering and HUD elements. The documented gameplay spans piece movement and rotation, drops and locking, line clearing and scoring, hold and next-piece previews, and pause/restart. The excerpts show controller-to-logic and controller-to-render calls; the renderer also uses logic helpers. The HTML and stylesheet are present in the tree, but their wiring was not sampled.

Main entry points: [`src/main.js`](https://github.com/jlg-formation/tetris-gia/blob/master/src/main.js) (Game controller), [`src/render.js`](https://github.com/jlg-formation/tetris-gia/blob/master/src/render.js) (Board and previews), [`src/logic.js`](https://github.com/jlg-formation/tetris-gia/blob/master/src/logic.js) (Game state and rules)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Game runtime"]
  node_controller["Game controller<br/>[main.js]"]
  node_html["Game page<br/>[index.html]"]
  node_styles["Visual styling<br/>[styles.css]"]
end

subgraph group_gameplay["Gameplay logic"]
  node_state["Game state and rules<br/>[logic.js]"]
end

subgraph group_presentation["Canvas presentation"]
  node_canvas["Board and previews<br/>[render.js]"]
  node_effects["Clear-line effects<br/>[render.js]"]
end

node_player(("Player"))

node_player -->|"presses keys"| node_controller
node_controller -->|"updates state"| node_state
node_controller -->|"draws state"| node_canvas
node_controller -->|"updates effects"| node_effects
node_canvas -->|"reads helpers"| node_state

click node_controller "https://github.com/jlg-formation/tetris-gia/blob/master/src/main.js"
click node_html "https://github.com/jlg-formation/tetris-gia/blob/master/index.html"
click node_styles "https://github.com/jlg-formation/tetris-gia/blob/master/styles.css"
click node_state "https://github.com/jlg-formation/tetris-gia/blob/master/src/logic.js"
click node_canvas "https://github.com/jlg-formation/tetris-gia/blob/master/src/render.js"
click node_effects "https://github.com/jlg-formation/tetris-gia/blob/master/src/render.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_controller,node_html,node_styles toneBlue
class node_state toneAmber
class node_canvas,node_effects toneMint
class node_player toneIndigo
```

## Components

### Game runtime

- [Game controller](https://github.com/jlg-formation/tetris-gia/blob/master/src/main.js): `src/main.js`
- [Game page](https://github.com/jlg-formation/tetris-gia/blob/master/index.html): `index.html`
- [Visual styling](https://github.com/jlg-formation/tetris-gia/blob/master/styles.css): `styles.css`

### Gameplay logic

- [Game state and rules](https://github.com/jlg-formation/tetris-gia/blob/master/src/logic.js): `src/logic.js`

### Canvas presentation

- [Board and previews](https://github.com/jlg-formation/tetris-gia/blob/master/src/render.js): `src/render.js`
- [Clear-line effects](https://github.com/jlg-formation/tetris-gia/blob/master/src/render.js): `src/render.js`

### Other components

- **Player**

## Connections

- Player → Game controller: presses keys (evidence: `src/main.js`)
- Game controller → Game state and rules: updates state (evidence: `src/main.js`)
- Game controller → Board and previews: draws state (evidence: `src/main.js`)
- Game controller → Clear-line effects: updates effects (evidence: `src/main.js`)
- Board and previews → Game state and rules: reads helpers (evidence: `src/render.js`)