# spyojohun/work-only-asdfghj architecture

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

- Interactive diagram: https://gitdiagram.com/spyojohun/work-only-asdfghj
- Repository: https://github.com/spyojohun/work-only-asdfghj

## Overview

This is a static soundboard for school performances: users find a sound, trigger it from a card or keyboard shortcut, and control playback. The documented workflow loads and validates sounds.json, presents searchable and category-filtered cards, then plays the selected local audio; users can also inspect the sound list, adjust volume, stop all playback, and use the guide and mobile drawer. The README documents these capabilities, while the sampled script excerpt confirms configuration loading, filtering, playback, volume, and stop behavior; omitted source limits some wiring details.

Main entry points: [`script.js`](https://github.com/spyojohun/work-only-asdfghj/blob/main/script.js) (Soundboard logic), [`index.html`](https://github.com/spyojohun/work-only-asdfghj/blob/main/index.html) (Sound cards), [`sounds.json`](https://github.com/spyojohun/work-only-asdfghj/blob/main/sounds.json) (Sound configuration), [`sounds`](https://github.com/spyojohun/work-only-asdfghj/tree/main/sounds) (Audio files)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_page["Soundboard page<br/>[index.html]"]
  node_cards["Sound cards<br/>[index.html]"]
  node_inventory["Sounds listing<br/>[index.html]"]
  node_guide["User guide<br/>[index.html]"]
  node_drawer["Mobile navigation<br/>[index.html]"]
end

subgraph group_runtime["Soundboard runtime"]
  node_app["Soundboard logic<br/>[script.js]"]
  node_discovery["Search and filters<br/>[script.js]"]
  node_playback["Audio playback<br/>[script.js]"]
  node_controls["Volume and stop<br/>[script.js]"]
  node_shortcuts["Keyboard shortcuts<br/>[script.js]"]
end

subgraph group_content["Sound content"]
  node_config["Sound configuration<br/>[sounds.json]"]
  node_audiofiles["Audio files"]
end

node_performer(("Performer"))

node_performer -->|"opens"| node_page
node_page -->|"loads"| node_app
node_app -->|"fetches"| node_config
node_app -->|"updates"| node_discovery
node_discovery -->|"renders"| node_cards
node_performer -->|"selects"| node_cards
node_cards -->|"triggers"| node_playback
node_app -->|"creates"| node_playback
node_playback -->|"plays"| node_audiofiles
node_performer -->|"adjusts"| node_controls
node_controls -->|"updates"| node_playback
node_performer -->|"presses key"| node_shortcuts
node_shortcuts -->|"triggers"| node_playback
node_performer -->|"opens"| node_inventory
node_app -->|"renders"| node_inventory
node_performer -->|"opens"| node_guide
node_performer -->|"opens"| node_drawer

click node_page "https://github.com/spyojohun/work-only-asdfghj/blob/main/index.html"
click node_app "https://github.com/spyojohun/work-only-asdfghj/blob/main/script.js"
click node_config "https://github.com/spyojohun/work-only-asdfghj/blob/main/sounds.json"
click node_audiofiles "https://github.com/spyojohun/work-only-asdfghj/tree/main/sounds"
click node_discovery "https://github.com/spyojohun/work-only-asdfghj/blob/main/script.js"
click node_cards "https://github.com/spyojohun/work-only-asdfghj/blob/main/index.html"
click node_playback "https://github.com/spyojohun/work-only-asdfghj/blob/main/script.js"
click node_controls "https://github.com/spyojohun/work-only-asdfghj/blob/main/script.js"
click node_shortcuts "https://github.com/spyojohun/work-only-asdfghj/blob/main/script.js"
click node_inventory "https://github.com/spyojohun/work-only-asdfghj/blob/main/index.html"
click node_guide "https://github.com/spyojohun/work-only-asdfghj/blob/main/index.html"
click node_drawer "https://github.com/spyojohun/work-only-asdfghj/blob/main/index.html"

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_page,node_cards,node_inventory,node_guide,node_drawer toneBlue
class node_app,node_discovery,node_playback,node_controls,node_shortcuts toneAmber
class node_config,node_audiofiles toneMint
class node_performer toneIndigo
```

## Components

### User interface

- [Soundboard page](https://github.com/spyojohun/work-only-asdfghj/blob/main/index.html): `index.html`
- [Sound cards](https://github.com/spyojohun/work-only-asdfghj/blob/main/index.html): `index.html`
- [Sounds listing](https://github.com/spyojohun/work-only-asdfghj/blob/main/index.html): `index.html`
- [User guide](https://github.com/spyojohun/work-only-asdfghj/blob/main/index.html): `index.html`
- [Mobile navigation](https://github.com/spyojohun/work-only-asdfghj/blob/main/index.html): `index.html`

### Soundboard runtime

- [Soundboard logic](https://github.com/spyojohun/work-only-asdfghj/blob/main/script.js): `script.js`
- [Search and filters](https://github.com/spyojohun/work-only-asdfghj/blob/main/script.js): `script.js`
- [Audio playback](https://github.com/spyojohun/work-only-asdfghj/blob/main/script.js): `script.js`
- [Volume and stop](https://github.com/spyojohun/work-only-asdfghj/blob/main/script.js): `script.js`
- [Keyboard shortcuts](https://github.com/spyojohun/work-only-asdfghj/blob/main/script.js): `script.js`

### Sound content

- [Sound configuration](https://github.com/spyojohun/work-only-asdfghj/blob/main/sounds.json): `sounds.json`
- [Audio files](https://github.com/spyojohun/work-only-asdfghj/tree/main/sounds): `sounds`

### Other components

- **Performer**

## Connections

- Performer → Soundboard page: opens
- Soundboard page → Soundboard logic: loads
- Soundboard logic → Sound configuration: fetches
- Soundboard logic → Search and filters: updates
- Search and filters → Sound cards: renders
- Performer → Sound cards: selects
- Sound cards → Audio playback: triggers
- Soundboard logic → Audio playback: creates
- Audio playback → Audio files: plays
- Performer → Volume and stop: adjusts
- Volume and stop → Audio playback: updates
- Performer → Keyboard shortcuts: presses key
- Keyboard shortcuts → Audio playback: triggers
- Performer → Sounds listing: opens
- Soundboard logic → Sounds listing: renders
- Performer → User guide: opens
- Performer → Mobile navigation: opens