# muhammadthaufiq95/elementfusion architecture

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

- Interactive diagram: https://gitdiagram.com/muhammadthaufiq95/elementfusion
- Repository: https://github.com/muhammadthaufiq95/elementfusion

## Overview

This repository is a browser-based element-fusion falling-block game. The player uses keyboard or touch controls to move and drop elements; the game resolves board gravity and fusions, tracks score and discoveries, and emits hooks that drive the HUD, visuals, and audio. Local storage preserves discoveries, best score, and mute preference. The graph follows the sampled entry point and core modules; the board implementation and some UI details were not excerpted, so their internal links are limited to relationships visible in the index or callers.

Main entry points: [`js/main.js`](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/main.js) (App orchestration), [`js/config.js`](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/config.js) (Game configuration), [`js/core/game.js`](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/core/game.js) (Game state machine), [`js/ui/renderer.js`](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/ui/renderer.js) (Canvas renderer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Game entry"]
  node_main["App orchestration<br/>[main.js]"]
  node_config["Game configuration<br/>[config.js]"]
  node_input["Keyboard and touch<br/>[input.js]"]
end

subgraph group_rules["Game rules"]
  node_game["Game state machine<br/>[game.js]"]
  node_board["Board state<br/>[board.js]"]
  node_fusion["Fusion and spawn rules<br/>[fusion.js]"]
  node_score["Scoring and records<br/>[score.js]"]
  node_elements["Element catalogue<br/>[elements.js]"]
end

subgraph group_presentation["Player presentation"]
  node_renderer["Canvas renderer<br/>[renderer.js]"]
  node_effects["Visual effects<br/>[effects.js]"]
  node_hud["HUD and screens<br/>[hud.js]"]
end

subgraph group_services["Persistence and audio"]
  node_audio["Audio manager<br/>[audio.js]"]
  node_soundfiles["Sound assets"]
  node_storage["Local storage helpers<br/>[storage.js]"]
end

node_player(("Player"))
node_localstorage[("Browser local storage")]

node_player -.->|"controls"| node_input
node_main -->|"creates"| node_game
node_main -->|"registers controls"| node_input
node_main -->|"creates and renders"| node_renderer
node_main -->|"updates effects"| node_effects
node_main -->|"updates HUD"| node_hud
node_main -->|"plays audio"| node_audio
node_main -->|"loads settings"| node_config
node_main -->|"looks up elements"| node_elements
node_input -->|"dispatches actions"| node_game
node_input -->|"reads dimensions"| node_config
node_game -->|"updates board"| node_board
node_game -->|"resolves fusions"| node_fusion
node_game -->|"updates score"| node_score
node_game -->|"saves discoveries"| node_storage
node_game -->|"reads rules"| node_config
node_score -->|"loads and saves record"| node_storage
node_score -->|"reads scoring rules"| node_config
node_fusion -->|"reads fusion limits"| node_config
node_renderer -->|"looks up elements"| node_elements
node_renderer -->|"reads layout"| node_config
node_renderer -->|"draws effects"| node_effects
node_hud -->|"draws preview"| node_renderer
node_hud -->|"looks up elements"| node_elements
node_effects -->|"reads fonts"| node_config
node_audio -->|"loads and saves mute"| node_storage
node_audio -->|"reads audio settings"| node_config
node_audio -->|"fetches audio"| node_soundfiles
node_storage -->|"reads and writes"| node_localstorage

click node_main "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/main.js"
click node_config "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/config.js"
click node_input "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/ui/input.js"
click node_game "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/core/game.js"
click node_board "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/core/board.js"
click node_fusion "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/core/fusion.js"
click node_score "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/core/score.js"
click node_elements "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/data/elements.js"
click node_renderer "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/ui/renderer.js"
click node_effects "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/ui/effects.js"
click node_hud "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/ui/hud.js"
click node_audio "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/utils/audio.js"
click node_soundfiles "https://github.com/muhammadthaufiq95/elementfusion/tree/main/assets/sounds"
click node_storage "https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/utils/storage.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_main,node_config,node_input toneBlue
class node_game,node_board,node_fusion,node_score,node_elements,node_localstorage toneAmber
class node_renderer,node_effects,node_hud toneMint
class node_audio,node_soundfiles,node_storage toneRose
class node_player toneIndigo
```

## Components

### Game entry

- [App orchestration](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/main.js): `js/main.js`
- [Game configuration](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/config.js): `js/config.js`
- [Keyboard and touch](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/ui/input.js): `js/ui/input.js`

### Game rules

- [Game state machine](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/core/game.js): `js/core/game.js`
- [Board state](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/core/board.js): `js/core/board.js`
- [Fusion and spawn rules](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/core/fusion.js): `js/core/fusion.js`
- [Scoring and records](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/core/score.js): `js/core/score.js`
- [Element catalogue](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/data/elements.js): `js/data/elements.js`

### Player presentation

- [Canvas renderer](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/ui/renderer.js): `js/ui/renderer.js`
- [Visual effects](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/ui/effects.js): `js/ui/effects.js`
- [HUD and screens](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/ui/hud.js): `js/ui/hud.js`

### Persistence and audio

- [Audio manager](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/utils/audio.js): `js/utils/audio.js`
- [Sound assets](https://github.com/muhammadthaufiq95/elementfusion/tree/main/assets/sounds): `assets/sounds`
- [Local storage helpers](https://github.com/muhammadthaufiq95/elementfusion/blob/main/js/utils/storage.js): `js/utils/storage.js`

### Other components

- **Player**
- **Browser local storage**

## Connections

- Player → Keyboard and touch: controls
- App orchestration → Game state machine: creates (evidence: `js/main.js`)
- App orchestration → Keyboard and touch: registers controls (evidence: `js/main.js`)
- App orchestration → Canvas renderer: creates and renders (evidence: `js/main.js`)
- App orchestration → Visual effects: updates effects (evidence: `js/main.js`)
- App orchestration → HUD and screens: updates HUD (evidence: `js/main.js`)
- App orchestration → Audio manager: plays audio (evidence: `js/main.js`)
- App orchestration → Game configuration: loads settings (evidence: `js/main.js`)
- App orchestration → Element catalogue: looks up elements (evidence: `js/main.js`)
- Keyboard and touch → Game state machine: dispatches actions (evidence: `js/main.js`)
- Keyboard and touch → Game configuration: reads dimensions (evidence: `js/ui/input.js`)
- Game state machine → Board state: updates board (evidence: `js/core/game.js`)
- Game state machine → Fusion and spawn rules: resolves fusions (evidence: `js/core/game.js`)
- Game state machine → Scoring and records: updates score (evidence: `js/core/game.js`)
- Game state machine → Local storage helpers: saves discoveries (evidence: `js/core/game.js`)
- Game state machine → Game configuration: reads rules (evidence: `js/core/game.js`)
- Scoring and records → Local storage helpers: loads and saves record (evidence: `js/core/score.js`)
- Scoring and records → Game configuration: reads scoring rules (evidence: `js/core/score.js`)
- Fusion and spawn rules → Game configuration: reads fusion limits (evidence: `js/core/fusion.js`)
- Canvas renderer → Element catalogue: looks up elements (evidence: `js/ui/renderer.js`)
- Canvas renderer → Game configuration: reads layout (evidence: `js/ui/renderer.js`)
- Canvas renderer → Visual effects: draws effects (evidence: `js/main.js`)
- HUD and screens → Canvas renderer: draws preview (evidence: `js/ui/hud.js`)
- HUD and screens → Element catalogue: looks up elements (evidence: `js/ui/hud.js`)
- Visual effects → Game configuration: reads fonts (evidence: `js/ui/effects.js`)
- Audio manager → Local storage helpers: loads and saves mute (evidence: `js/utils/audio.js`)
- Audio manager → Game configuration: reads audio settings (evidence: `js/utils/audio.js`)
- Audio manager → Sound assets: fetches audio (evidence: `js/utils/audio.js`)
- Local storage helpers → Browser local storage: reads and writes (evidence: `js/utils/storage.js`)