# nicholoasng72606-wq/battlecatlection architecture

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

- Interactive diagram: https://gitdiagram.com/nicholoasng72606-wq/battlecatlection
- Repository: https://github.com/nicholoasng72606-wq/battlecatlection

## Overview

This is a browser-based Battle Cats collection organizer, not a game-data scraper. The main workflow is to paste a supported text list or JSON backup, parse it into collection data, then browse rarity-specific cat grids with filters and progress summaries, and copy or download a backup or image. The implementation is concentrated in script.js; the graph separates its meaningful runtime responsibilities while retaining the supplied template files and page presentation. Source excerpts are partial, so unshown internal call relationships are omitted.

Main entry points: [`script.js`](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js) (Collection data), [`index.html`](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/index.html) (Collection input), [`template/template.txt`](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/template/template.txt) (Text template), [`template/template.json`](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/template/template.json) (JSON template)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ingest["Input and parsing"]
  node_input["Collection input<br/>[index.html]"]
  node_text_parser["Text parser<br/>[script.js]"]
  node_json_parser["JSON parser<br/>[script.js]"]
  node_collection_data["Collection data<br/>[script.js]"]
  node_text_template["Text template<br/>[template.txt]"]
  node_json_template["JSON template<br/>[template.json]"]
end

subgraph group_catalog["Collection browsing"]
  node_image_rules["Cat image rules<br/>[script.js]"]
  node_filtering["Collection filters<br/>[script.js]"]
  node_cat_grid["Cat grid<br/>[script.js]"]
  node_statistics["Collection statistics<br/>[script.js]"]
  node_series_progress["Series progress<br/>[script.js]"]
end

subgraph group_storage["Persistence and export"]
  node_local_storage[("Browser storage")]
  node_autosave["Local autosave<br/>[script.js]"]
  node_json_export["JSON backup<br/>[script.js]"]
  node_image_export["PNG export<br/>[script.js]"]
end

subgraph group_interface["Web interface"]
  node_theme["Theme settings<br/>[script.js]"]
  node_page["Web page<br/>[index.html]"]
  node_styling["Responsive styling<br/>[style.css]"]
end

node_player(("Player"))
node_script["Application script<br/>[script.js]"]

node_player -->|"enters data"| node_input
node_input -->|"submits text"| node_text_parser
node_input -->|"submits JSON"| node_json_parser
node_text_parser -->|"parses into"| node_collection_data
node_json_parser -.->|"parses into"| node_collection_data
node_collection_data -->|"filters"| node_filtering
node_filtering -->|"renders"| node_cat_grid
node_collection_data -->|"summarizes"| node_statistics
node_collection_data -->|"tracks progress"| node_series_progress
node_cat_grid -.->|"selects images"| node_image_rules
node_player -->|"changes theme"| node_theme
node_theme -.->|"updates display"| node_page
node_page -.->|"uses styles"| node_styling
node_collection_data -->|"saves after parse"| node_autosave
node_autosave -->|"writes and loads"| node_local_storage
node_collection_data -->|"exports backup"| node_json_export
node_cat_grid -->|"exports visible grid"| node_image_export
node_script -->|"fetches"| node_text_template
node_script -->|"fetches"| node_json_template
node_player -->|"downloads backup"| node_json_export
node_player -->|"downloads image"| node_image_export

click node_input "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/index.html"
click node_text_parser "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_json_parser "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_collection_data "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_image_rules "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_filtering "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_cat_grid "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_statistics "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_series_progress "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_theme "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_page "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/index.html"
click node_styling "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/style.css"
click node_autosave "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_json_export "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_image_export "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js"
click node_text_template "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/template/template.txt"
click node_json_template "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/template/template.json"
click node_script "https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.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_input,node_text_parser,node_json_parser,node_collection_data,node_text_template,node_json_template toneBlue
class node_image_rules,node_filtering,node_cat_grid,node_statistics,node_series_progress toneAmber
class node_local_storage,node_autosave,node_json_export,node_image_export toneMint
class node_theme,node_page,node_styling toneRose
class node_player toneIndigo
class node_script toneTeal
```

## Components

### Input and parsing

- [Collection input](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/index.html): `index.html`
- [Text parser](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`
- [JSON parser](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`
- [Collection data](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`
- [Text template](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/template/template.txt): `template/template.txt`
- [JSON template](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/template/template.json): `template/template.json`

### Collection browsing

- [Cat image rules](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`
- [Collection filters](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`
- [Cat grid](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`
- [Collection statistics](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`
- [Series progress](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`

### Persistence and export

- **Browser storage**
- [Local autosave](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`
- [JSON backup](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`
- [PNG export](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`

### Web interface

- [Theme settings](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`
- [Web page](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/index.html): `index.html`
- [Responsive styling](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/style.css): `style.css`

### Other components

- **Player**
- [Application script](https://github.com/nicholoasng72606-wq/battlecatlection/blob/main/script.js): `script.js`

## Connections

- Player → Collection input: enters data (evidence: `README.md`)
- Collection input → Text parser: submits text (evidence: `README.md`)
- Collection input → JSON parser: submits JSON (evidence: `README.md`)
- Text parser → Collection data: parses into (evidence: `script.js`)
- JSON parser → Collection data: parses into (evidence: `script.js`)
- Collection data → Collection filters: filters (evidence: `script.js`)
- Collection filters → Cat grid: renders (evidence: `script.js`)
- Collection data → Collection statistics: summarizes (evidence: `README.md`)
- Collection data → Series progress: tracks progress (evidence: `README.md`)
- Cat grid → Cat image rules: selects images (evidence: `script.js`)
- Player → Theme settings: changes theme (evidence: `README.md`)
- Theme settings → Web page: updates display
- Web page → Responsive styling: uses styles
- Collection data → Local autosave: saves after parse (evidence: `README.md`)
- Local autosave → Browser storage: writes and loads (evidence: `README.md`)
- Collection data → JSON backup: exports backup (evidence: `README.md`)
- Cat grid → PNG export: exports visible grid (evidence: `README.md`)
- Application script → Text template: fetches (evidence: `script.js`)
- Application script → JSON template: fetches (evidence: `script.js`)
- Player → JSON backup: downloads backup (evidence: `README.md`)
- Player → PNG export: downloads image (evidence: `README.md`)