# evelimlima/quarto-pedagogico architecture

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

- Interactive diagram: https://gitdiagram.com/evelimlima/quarto-pedagogico
- Repository: https://github.com/evelimlima/quarto-pedagogico

## Overview

QUARTO Pedagógico Amazônico is a browser-based, two-player game that uses Amazonian cultural imagery to teach binary patterns and graph-like winning lines. Players take turns choosing a piece for the other player, placing it on a 4×4 board, and learning whether a shared attribute completes a winning line; the game also tracks wins and draws. The graph follows the documented page and sampled JavaScript modules. The tutorial page is documented, but its implementation was not sampled, so its internal links are omitted.

Main entry points: [`js/main.js`](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/main.js) (Game controller), [`js/logica/regras.js`](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/logica/regras.js) (Turn rules), [`js/logica/pecas.js`](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/logica/pecas.js) (Piece attributes), [`js/tela/tabuleiro.js`](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/tela/tabuleiro.js) (Board and reserve)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_play["Game interface"]
  node_gamepage["Game page<br/>[index.html]"]
  node_controller["Game controller<br/>[main.js]"]
  node_board["Board and reserve<br/>[tabuleiro.js]"]
  node_piecehand["Piece and bits<br/>[bits.js]"]
  node_pieceart["Piece SVG<br/>[desenho.js]"]
  node_status["Turn and results<br/>[painel.js]"]
end

subgraph group_engine["Game rules"]
  node_rules["Turn rules<br/>[regras.js]"]
  node_pieces["Piece attributes<br/>[pecas.js]"]
  node_wincheck["Winning lines<br/>[vitoria.js]"]
end

subgraph group_learning["Learning content"]
  node_tutorial["How-to-play tutorial<br/>[tutorial.html]"]
end

node_players(("Players"))

node_players -->|"play"| node_gamepage
node_players -->|"learn from"| node_tutorial
node_gamepage -->|"loads"| node_controller
node_controller -->|"updates game"| node_rules
node_controller -->|"renders board"| node_board
node_controller -->|"renders hand"| node_piecehand
node_controller -->|"renders status"| node_status
node_rules -->|"initializes pieces"| node_pieces
node_rules -->|"checks lines"| node_wincheck
node_board -->|"reads attributes"| node_pieces
node_board -->|"renders pieces"| node_pieceart
node_piecehand -->|"reads bits"| node_pieces
node_piecehand -->|"renders piece"| node_pieceart
node_status -->|"reads legend"| node_pieces
node_status -->|"reads player names"| node_rules

click node_gamepage "https://github.com/evelimlima/quarto-pedagogico/blob/main/index.html"
click node_controller "https://github.com/evelimlima/quarto-pedagogico/blob/main/js/main.js"
click node_board "https://github.com/evelimlima/quarto-pedagogico/blob/main/js/tela/tabuleiro.js"
click node_piecehand "https://github.com/evelimlima/quarto-pedagogico/blob/main/js/tela/bits.js"
click node_pieceart "https://github.com/evelimlima/quarto-pedagogico/blob/main/js/tela/desenho.js"
click node_status "https://github.com/evelimlima/quarto-pedagogico/blob/main/js/tela/painel.js"
click node_rules "https://github.com/evelimlima/quarto-pedagogico/blob/main/js/logica/regras.js"
click node_pieces "https://github.com/evelimlima/quarto-pedagogico/blob/main/js/logica/pecas.js"
click node_wincheck "https://github.com/evelimlima/quarto-pedagogico/blob/main/js/logica/vitoria.js"
click node_tutorial "https://github.com/evelimlima/quarto-pedagogico/blob/main/tutorial.html"

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_gamepage,node_controller,node_board,node_piecehand,node_pieceart,node_status toneBlue
class node_rules,node_pieces,node_wincheck toneAmber
class node_tutorial toneMint
class node_players toneIndigo
```

## Components

### Game interface

- [Game page](https://github.com/evelimlima/quarto-pedagogico/blob/main/index.html): `index.html`
- [Game controller](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/main.js): `js/main.js`
- [Board and reserve](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/tela/tabuleiro.js): `js/tela/tabuleiro.js`
- [Piece and bits](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/tela/bits.js): `js/tela/bits.js`
- [Piece SVG](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/tela/desenho.js): `js/tela/desenho.js`
- [Turn and results](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/tela/painel.js): `js/tela/painel.js`

### Game rules

- [Turn rules](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/logica/regras.js): `js/logica/regras.js`
- [Piece attributes](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/logica/pecas.js): `js/logica/pecas.js`
- [Winning lines](https://github.com/evelimlima/quarto-pedagogico/blob/main/js/logica/vitoria.js): `js/logica/vitoria.js`

### Learning content

- [How-to-play tutorial](https://github.com/evelimlima/quarto-pedagogico/blob/main/tutorial.html): `tutorial.html`

### Other components

- **Players**

## Connections

- Players → Game page: play
- Players → How-to-play tutorial: learn from
- Game page → Game controller: loads
- Game controller → Turn rules: updates game
- Game controller → Board and reserve: renders board
- Game controller → Piece and bits: renders hand
- Game controller → Turn and results: renders status
- Turn rules → Piece attributes: initializes pieces
- Turn rules → Winning lines: checks lines
- Board and reserve → Piece attributes: reads attributes
- Board and reserve → Piece SVG: renders pieces
- Piece and bits → Piece attributes: reads bits
- Piece and bits → Piece SVG: renders piece
- Turn and results → Piece attributes: reads legend
- Turn and results → Turn rules: reads player names