# ardhian-ahmad/benteng-pecahan architecture

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

- Interactive diagram: https://gitdiagram.com/ardhian-ahmad/benteng-pecahan
- Repository: https://github.com/ardhian-ahmad/benteng-pecahan

## Overview

Benteng Pecahan is a browser-based educational tower-defense game for learning fractions, decimals, and percentages. Players answer quiz questions while defending against enemy waves with placeable and upgradeable towers; the game tracks the team score and submits it to an online leaderboard. The source excerpt shows the game engine and entity behavior, while the README documents the gallery and cloud leaderboard. Some UI wiring and leaderboard details are only partially sampled, so the graph omits uncertain internal links.

Main entry points: [`app.js`](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js) (Game Engine), [`index.html`](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/index.html) (Game UI), [`towers.js`](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/towers.js) (Tower Configuration), [`enemies.js`](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/enemies.js) (Enemy Configuration)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Game Interface"]
  node_ui["Game UI<br/>[index.html]"]
  node_styles["Responsive Styling<br/>[style.css]"]
end

subgraph group_runtime["Game Runtime"]
  node_engine["Game Engine<br/>[app.js]"]
  node_quiz["Quiz Flow<br/>[app.js]"]
  node_waves["Wave Progression<br/>[app.js]"]
  node_defense["Tower Defense<br/>[app.js]"]
  node_entities["Combat Entities<br/>[app.js]"]
  node_render["Canvas Rendering<br/>[app.js]"]
  node_audio["Synth Audio<br/>[app.js]"]
  node_gallery["Dynamic Gallery<br/>[app.js]"]
  node_score["Score &amp; Results<br/>[app.js]"]
end

subgraph group_content["Game Data"]
  node_questions["Quiz Banks<br/>[questions.js]"]
  node_towerdata["Tower Configuration<br/>[towers.js]"]
  node_enemydata["Enemy Configuration<br/>[enemies.js]"]
end

subgraph group_services["External Service"]
  node_sheets[("Google Sheets")]
end

node_player(("Player / Team"))

node_player -->|"uses"| node_ui
node_ui -->|"provides controls"| node_engine
node_engine -->|"runs"| node_quiz
node_quiz -->|"reads questions"| node_questions
node_engine -->|"runs"| node_waves
node_waves -->|"reads enemy stats"| node_enemydata
node_engine -->|"handles placement"| node_defense
node_defense -->|"reads tower stats"| node_towerdata
node_defense -->|"creates combatants"| node_entities
node_waves -->|"spawns enemies"| node_entities
node_entities -->|"updates score"| node_score
node_engine -->|"draws game"| node_render
node_engine -->|"plays effects"| node_audio
node_engine -->|"builds gallery"| node_gallery
node_gallery -->|"reads tower stats"| node_towerdata
node_gallery -->|"reads enemy stats"| node_enemydata
node_score -->|"shows results"| node_ui
node_ui -->|"styled by"| node_styles
node_score -.->|"submits and retrieves scores"| node_sheets
node_sheets -.->|"returns leaderboard"| node_score

click node_ui "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/index.html"
click node_styles "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/style.css"
click node_engine "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js"
click node_quiz "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js"
click node_waves "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js"
click node_defense "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js"
click node_entities "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js"
click node_render "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js"
click node_audio "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js"
click node_gallery "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js"
click node_score "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js"
click node_questions "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/questions.js"
click node_towerdata "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/towers.js"
click node_enemydata "https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/enemies.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_ui,node_styles toneBlue
class node_engine,node_quiz,node_waves,node_defense,node_entities,node_render,node_audio,node_gallery,node_score toneAmber
class node_questions,node_towerdata,node_enemydata toneMint
class node_sheets toneRose
class node_player toneIndigo
```

## Components

### Game Interface

- [Game UI](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/index.html): `index.html`
- [Responsive Styling](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/style.css): `style.css`

### Game Runtime

- [Game Engine](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js): `app.js`
- [Quiz Flow](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js): `app.js`
- [Wave Progression](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js): `app.js`
- [Tower Defense](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js): `app.js`
- [Combat Entities](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js): `app.js`
- [Canvas Rendering](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js): `app.js`
- [Synth Audio](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js): `app.js`
- [Dynamic Gallery](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js): `app.js`
- [Score & Results](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/app.js): `app.js`

### Game Data

- [Quiz Banks](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/questions.js): `questions.js`
- [Tower Configuration](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/towers.js): `towers.js`
- [Enemy Configuration](https://github.com/ardhian-ahmad/benteng-pecahan/blob/main/enemies.js): `enemies.js`

### External Service

- **Google Sheets**

### Other components

- **Player / Team**

## Connections

- Player / Team → Game UI: uses
- Game UI → Game Engine: provides controls
- Game Engine → Quiz Flow: runs
- Quiz Flow → Quiz Banks: reads questions
- Game Engine → Wave Progression: runs
- Wave Progression → Enemy Configuration: reads enemy stats
- Game Engine → Tower Defense: handles placement
- Tower Defense → Tower Configuration: reads tower stats
- Tower Defense → Combat Entities: creates combatants
- Wave Progression → Combat Entities: spawns enemies
- Combat Entities → Score & Results: updates score
- Game Engine → Canvas Rendering: draws game
- Game Engine → Synth Audio: plays effects
- Game Engine → Dynamic Gallery: builds gallery
- Dynamic Gallery → Tower Configuration: reads tower stats
- Dynamic Gallery → Enemy Configuration: reads enemy stats
- Score & Results → Game UI: shows results
- Game UI → Responsive Styling: styled by
- Score & Results → Google Sheets: submits and retrieves scores
- Google Sheets → Score & Results: returns leaderboard