---
sidebar_position: 2
title: "Estrutura de Atividade"
---

Esta página descreve o padrão atual de atividade de programação em `atividades/programacao`.

## Estrutura comum

Cada atividade costuma concentrar:

- Componente React de entrada.
- Configuração da atividade e fases.
- Blocos e toolbox (quando aplicável).
- Runtime da atividade (renderização e validação).
- Integração com interpretador.

```mermaid
graph TD
    A["atividades/programacao/<atividade>/"] --> B["<Atividade>.jsx
componente de entrada"]
    A --> C["game.js
runtime Phaser"]
    A --> D["blocks/
blocos customizados"]
    A --> E["config/
configurações e fases"]
    A --> F["hooks/
setup do interpretador"]
    A --> G["validation/
validadores por fase"]
    A --> H["assets/
mídias da atividade"]
```

## Fluxo de execução

```mermaid
sequenceDiagram
    participant U as Usuário
    participant E as Editor (Blockly)
    participant I as Interpretador
    participant R as Runtime (Phaser)
    participant V as Validador
    participant C as Contexto

    U->>E: Monta a lógica em blocos
    E->>I: Envia código gerado
    I->>R: Executa passo a passo
    R->>V: Dispara eventos de ação
    V->>C: Atualiza estado da fase
    C->>U: Exibe resultado (sucesso/falha)
```

## Pontos de extensão

- Blocos novos em `blocks/`.
- Regras de fase em `config/`.
- Validadores em `validation/`.
- API do interpretador em `hooks/interpreterSetup`.

Referências externas:

- Blockly custom blocks: https://developers.google.com/blockly/guides/create-custom-blocks/overview
- js-interpreter: https://github.com/NeilFraser/JS-Interpreter
