# salamander2/nomenv architecture

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

- Interactive diagram: https://gitdiagram.com/salamander2/nomenv
- Repository: https://github.com/salamander2/nomenv

## Overview

Inorganic Nomenclature Quizzes is a browser-based quiz for practicing inorganic compound names and formulas. The user workflow is to configure question types, receive generated ionic or covalent questions, submit or request help with answers, and review a scored summary that can be printed as a PDF. The app also provides reference and information panels. The sampled code shows data loading, question generation, answer recording, and summary rendering; some panel details are known only from the source index, so their internal links are limited to documented imports and relationships.

Main entry points: [`src/App.vue`](https://github.com/salamander2/nomenv/blob/master/src/App.vue) (App shell), [`src/components/MainPanel.vue`](https://github.com/salamander2/nomenv/blob/master/src/components/MainPanel.vue) (Quiz coordinator), [`src/components/QuestionPanel.vue`](https://github.com/salamander2/nomenv/blob/master/src/components/QuestionPanel.vue) (Answer interaction), [`src/components/QuestionSummaryPanel.vue`](https://github.com/salamander2/nomenv/blob/master/src/components/QuestionSummaryPanel.vue) (Results summary)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_quiz["Quiz flow"]
  node_app["App shell<br/>[App.vue]"]
  node_main["Quiz coordinator<br/>[MainPanel.vue]"]
  node_generator["Question generation<br/>[MainPanel.vue]"]
  node_options["Quiz options<br/>[OptionsPanel.vue]"]
  node_question["Answer interaction<br/>[QuestionPanel.vue]"]
end

subgraph group_state["Quiz state and data"]
  node_appstate["App state<br/>[appState.ts]"]
  node_questionstate["Current question<br/>[question.ts]"]
  node_questionlists["Question history<br/>[questionLists.ts]"]
  node_iondata["Ion dataset<br/>[ions.dat]"]
  node_ionlists["Ion lists<br/>[ionLists.ts]"]
  node_constants["Ion definitions<br/>[constants.ts]"]
end

subgraph group_reference["Reference panels"]
  node_about["About panel<br/>[AboutPanel.vue]"]
  node_periodic["Periodic table<br/>[PeriodicPanel.vue]"]
  node_help["Question help<br/>[HelpPanel.vue]"]
  node_usagehelp["Usage help<br/>[UsageHelpPanel.vue]"]
  node_simplepanel["Modal panel<br/>[SimplePanel.vue]"]
end

subgraph group_results["Results and output"]
  node_summary["Results summary"]
  node_pdf["PDF generator"]
end

node_user(("Quiz user"))

node_user -->|"uses"| node_app
node_app -->|"loads"| node_iondata
node_app -->|"populates"| node_ionlists
node_app -->|"marks ready"| node_appstate
node_app -->|"renders"| node_main
node_app -->|"opens"| node_about
node_app -->|"toggles"| node_periodic
node_main -->|"watches"| node_appstate
node_main -->|"renders"| node_options
node_main -->|"renders"| node_question
node_main -->|"renders"| node_summary
node_main -->|"runs"| node_generator
node_generator -->|"selects ions"| node_ionlists
node_generator -->|"sets question"| node_questionstate
node_generator -->|"checks duplicates"| node_questionlists
node_options -->|"sets options"| node_appstate
node_question -->|"reads question"| node_questionstate
node_question -->|"records answers"| node_questionlists
node_question -->|"opens help"| node_help
node_question -->|"renders modal"| node_simplepanel
node_ionlists -->|"uses ion type"| node_constants
node_summary -->|"reads results"| node_questionlists
node_summary -->|"creates PDF"| node_pdf
node_help -->|"uses modal"| node_simplepanel
node_usagehelp -->|"uses modal"| node_simplepanel

click node_app "https://github.com/salamander2/nomenv/blob/master/src/App.vue"
click node_main "https://github.com/salamander2/nomenv/blob/master/src/components/MainPanel.vue"
click node_generator "https://github.com/salamander2/nomenv/blob/master/src/components/MainPanel.vue"
click node_options "https://github.com/salamander2/nomenv/blob/master/src/components/OptionsPanel.vue"
click node_question "https://github.com/salamander2/nomenv/blob/master/src/components/QuestionPanel.vue"
click node_appstate "https://github.com/salamander2/nomenv/blob/master/src/stores/appState.ts"
click node_questionstate "https://github.com/salamander2/nomenv/blob/master/src/stores/question.ts"
click node_questionlists "https://github.com/salamander2/nomenv/blob/master/src/stores/questionLists.ts"
click node_iondata "https://github.com/salamander2/nomenv/blob/master/src/res/ions.dat"
click node_ionlists "https://github.com/salamander2/nomenv/blob/master/src/stores/ionLists.ts"
click node_constants "https://github.com/salamander2/nomenv/blob/master/src/constants.ts"
click node_summary "https://github.com/salamander2/nomenv/blob/master/src/components/QuestionSummaryPanel.vue"
click node_pdf "https://github.com/salamander2/nomenv/blob/master/src/components/QuestionSummaryPanel.vue"
click node_about "https://github.com/salamander2/nomenv/blob/master/src/components/AboutPanel.vue"
click node_periodic "https://github.com/salamander2/nomenv/blob/master/src/components/PeriodicPanel.vue"
click node_help "https://github.com/salamander2/nomenv/blob/master/src/components/HelpPanel.vue"
click node_usagehelp "https://github.com/salamander2/nomenv/blob/master/src/components/UsageHelpPanel.vue"
click node_simplepanel "https://github.com/salamander2/nomenv/blob/master/src/components/SimplePanel.vue"

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_app,node_main,node_generator,node_options,node_question,node_user toneBlue
class node_appstate,node_questionstate,node_questionlists,node_iondata,node_ionlists,node_constants toneAmber
class node_about,node_periodic,node_help,node_usagehelp,node_simplepanel toneMint
class node_summary,node_pdf toneRose
```

## Components

### Quiz flow

- [App shell](https://github.com/salamander2/nomenv/blob/master/src/App.vue): `src/App.vue`
- [Quiz coordinator](https://github.com/salamander2/nomenv/blob/master/src/components/MainPanel.vue): `src/components/MainPanel.vue`
- [Question generation](https://github.com/salamander2/nomenv/blob/master/src/components/MainPanel.vue): `src/components/MainPanel.vue`
- [Quiz options](https://github.com/salamander2/nomenv/blob/master/src/components/OptionsPanel.vue): `src/components/OptionsPanel.vue`
- [Answer interaction](https://github.com/salamander2/nomenv/blob/master/src/components/QuestionPanel.vue): `src/components/QuestionPanel.vue`

### Quiz state and data

- [App state](https://github.com/salamander2/nomenv/blob/master/src/stores/appState.ts): `src/stores/appState.ts`
- [Current question](https://github.com/salamander2/nomenv/blob/master/src/stores/question.ts): `src/stores/question.ts`
- [Question history](https://github.com/salamander2/nomenv/blob/master/src/stores/questionLists.ts): `src/stores/questionLists.ts`
- [Ion dataset](https://github.com/salamander2/nomenv/blob/master/src/res/ions.dat): `src/res/ions.dat`
- [Ion lists](https://github.com/salamander2/nomenv/blob/master/src/stores/ionLists.ts): `src/stores/ionLists.ts`
- [Ion definitions](https://github.com/salamander2/nomenv/blob/master/src/constants.ts): `src/constants.ts`

### Reference panels

- [About panel](https://github.com/salamander2/nomenv/blob/master/src/components/AboutPanel.vue): `src/components/AboutPanel.vue`
- [Periodic table](https://github.com/salamander2/nomenv/blob/master/src/components/PeriodicPanel.vue): `src/components/PeriodicPanel.vue`
- [Question help](https://github.com/salamander2/nomenv/blob/master/src/components/HelpPanel.vue): `src/components/HelpPanel.vue`
- [Usage help](https://github.com/salamander2/nomenv/blob/master/src/components/UsageHelpPanel.vue): `src/components/UsageHelpPanel.vue`
- [Modal panel](https://github.com/salamander2/nomenv/blob/master/src/components/SimplePanel.vue): `src/components/SimplePanel.vue`

### Results and output

- [Results summary](https://github.com/salamander2/nomenv/blob/master/src/components/QuestionSummaryPanel.vue): `src/components/QuestionSummaryPanel.vue`
- [PDF generator](https://github.com/salamander2/nomenv/blob/master/src/components/QuestionSummaryPanel.vue): `src/components/QuestionSummaryPanel.vue`

### Other components

- **Quiz user**

## Connections

- Quiz user → App shell: uses (evidence: `README.md`)
- App shell → Ion dataset: loads (evidence: `src/App.vue`)
- App shell → Ion lists: populates (evidence: `src/App.vue`)
- App shell → App state: marks ready (evidence: `src/App.vue`)
- App shell → Quiz coordinator: renders (evidence: `src/App.vue`)
- App shell → About panel: opens (evidence: `src/App.vue`)
- App shell → Periodic table: toggles (evidence: `src/App.vue`)
- Quiz coordinator → App state: watches (evidence: `src/components/MainPanel.vue`)
- Quiz coordinator → Quiz options: renders (evidence: `src/components/MainPanel.vue`)
- Quiz coordinator → Answer interaction: renders (evidence: `src/components/MainPanel.vue`)
- Quiz coordinator → Results summary: renders (evidence: `src/components/MainPanel.vue`)
- Quiz coordinator → Question generation: runs (evidence: `src/components/MainPanel.vue`)
- Question generation → Ion lists: selects ions (evidence: `src/components/MainPanel.vue`)
- Question generation → Current question: sets question (evidence: `src/components/MainPanel.vue`)
- Question generation → Question history: checks duplicates (evidence: `src/components/MainPanel.vue`)
- Quiz options → App state: sets options (evidence: `src/components/OptionsPanel.vue`)
- Answer interaction → Current question: reads question (evidence: `src/components/QuestionPanel.vue`)
- Answer interaction → Question history: records answers (evidence: `src/components/QuestionPanel.vue`)
- Answer interaction → Question help: opens help (evidence: `src/components/QuestionPanel.vue`)
- Answer interaction → Modal panel: renders modal (evidence: `src/components/QuestionPanel.vue`)
- Ion lists → Ion definitions: uses ion type (evidence: `src/stores/ionLists.ts`)
- Results summary → Question history: reads results (evidence: `src/components/QuestionSummaryPanel.vue`)
- Results summary → PDF generator: creates PDF (evidence: `src/components/QuestionSummaryPanel.vue`)
- Question help → Modal panel: uses modal (evidence: `src/components/HelpPanel.vue`)
- Usage help → Modal panel: uses modal (evidence: `src/components/UsageHelpPanel.vue`)