# lissmann/pong architecture

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

- Interactive diagram: https://gitdiagram.com/lissmann/pong
- Repository: https://github.com/lissmann/pong

## Overview

Pong is a browser-based JavaScript game: players use keyboard controls to play, rallies update the score, and the first player to five wins. The app entry point creates the game; its main loop advances game state, moves and draws the ball and paddles, checks collisions, and renders the scoreboard. Keyboard and scoring events drive state changes and winner messages. The README also describes a cheap computer opponent, implemented as right-paddle movement in the game loop. Message implementation details are unsampled; its path is supported by the tree.

Main entry points: [`src/classes/events/EventHandler.js`](https://github.com/lissmann/pong/blob/main/src/classes/events/EventHandler.js) (Input and scoring), [`src/classes/Pong.js`](https://github.com/lissmann/pong/blob/main/src/classes/Pong.js) (Game loop), [`src/classes/drawables/Factory.js`](https://github.com/lissmann/pong/blob/main/src/classes/drawables/Factory.js) (Object factory), [`src/classes/drawables/Ball.js`](https://github.com/lissmann/pong/blob/main/src/classes/drawables/Ball.js) (Ball)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_game["Game runtime"]
  node_entry["App entry<br/>[main.js]"]
  node_pong["Game loop<br/>[Pong.js]"]
  node_events["Input and scoring<br/>[EventHandler.js]"]
  node_state["Game state<br/>[State.js]"]
  node_settings["Game settings<br/>[Settings.js]"]
end

subgraph group_objects["Game objects"]
  node_factory["Object factory<br/>[Factory.js]"]
  node_drawable["Drawable base<br/>[Drawable.js]"]
  node_ball["Ball<br/>[Ball.js]"]
  node_paddle["Paddles<br/>[Paddle.js]"]
  node_scoreboard["Scoreboard<br/>[Scoreboard.js]"]
  node_message["Game messages<br/>[Message.js]"]
end

subgraph group_presentation["Browser presentation"]
  node_canvas["Game canvas<br/>[index.html]"]
  node_styles["Game styling<br/>[pong.css]"]
end

node_player(("Player"))

node_player -->|"presses keys"| node_events
node_entry -->|"creates"| node_pong
node_pong -->|"creates objects"| node_factory
node_pong -->|"initializes"| node_events
node_factory -->|"reads settings"| node_settings
node_factory -->|"gets context"| node_canvas
node_factory -->|"creates"| node_ball
node_factory -->|"creates"| node_paddle
node_factory -->|"creates"| node_scoreboard
node_factory -->|"creates"| node_message
node_ball -->|"extends"| node_drawable
node_paddle -->|"extends"| node_drawable
node_scoreboard -->|"extends"| node_drawable
node_pong -->|"checks state"| node_state
node_pong -->|"draws and resets"| node_ball
node_pong -->|"draws and moves"| node_paddle
node_pong -->|"draws"| node_scoreboard
node_pong -->|"shows intro"| node_message
node_events -->|"advances state"| node_state
node_events -->|"starts rally"| node_ball
node_events -->|"controls"| node_paddle
node_events -->|"updates score"| node_scoreboard
node_events -->|"shows winner"| node_message
node_ball -->|"dispatches score"| node_events
node_events -->|"listens for score"| node_canvas
node_styles -->|"styles"| node_canvas

click node_entry "https://github.com/lissmann/pong/blob/main/src/main.js"
click node_pong "https://github.com/lissmann/pong/blob/main/src/classes/Pong.js"
click node_events "https://github.com/lissmann/pong/blob/main/src/classes/events/EventHandler.js"
click node_state "https://github.com/lissmann/pong/blob/main/src/classes/enumerations/State.js"
click node_factory "https://github.com/lissmann/pong/blob/main/src/classes/drawables/Factory.js"
click node_drawable "https://github.com/lissmann/pong/blob/main/src/classes/drawables/Drawable.js"
click node_ball "https://github.com/lissmann/pong/blob/main/src/classes/drawables/Ball.js"
click node_paddle "https://github.com/lissmann/pong/blob/main/src/classes/drawables/Paddle.js"
click node_scoreboard "https://github.com/lissmann/pong/blob/main/src/classes/drawables/Scoreboard.js"
click node_message "https://github.com/lissmann/pong/blob/main/src/classes/drawables/Message.js"
click node_settings "https://github.com/lissmann/pong/blob/main/src/classes/enumerations/Settings.js"
click node_canvas "https://github.com/lissmann/pong/blob/main/index.html"
click node_styles "https://github.com/lissmann/pong/blob/main/src/styles/pong.css"

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_entry,node_pong,node_events,node_state,node_settings toneBlue
class node_factory,node_drawable,node_ball,node_paddle,node_scoreboard,node_message toneAmber
class node_canvas,node_styles toneMint
class node_player toneIndigo
```

## Components

### Game runtime

- [App entry](https://github.com/lissmann/pong/blob/main/src/main.js): `src/main.js`
- [Game loop](https://github.com/lissmann/pong/blob/main/src/classes/Pong.js): `src/classes/Pong.js`
- [Input and scoring](https://github.com/lissmann/pong/blob/main/src/classes/events/EventHandler.js): `src/classes/events/EventHandler.js`
- [Game state](https://github.com/lissmann/pong/blob/main/src/classes/enumerations/State.js): `src/classes/enumerations/State.js`
- [Game settings](https://github.com/lissmann/pong/blob/main/src/classes/enumerations/Settings.js): `src/classes/enumerations/Settings.js`

### Game objects

- [Object factory](https://github.com/lissmann/pong/blob/main/src/classes/drawables/Factory.js): `src/classes/drawables/Factory.js`
- [Drawable base](https://github.com/lissmann/pong/blob/main/src/classes/drawables/Drawable.js): `src/classes/drawables/Drawable.js`
- [Ball](https://github.com/lissmann/pong/blob/main/src/classes/drawables/Ball.js): `src/classes/drawables/Ball.js`
- [Paddles](https://github.com/lissmann/pong/blob/main/src/classes/drawables/Paddle.js): `src/classes/drawables/Paddle.js`
- [Scoreboard](https://github.com/lissmann/pong/blob/main/src/classes/drawables/Scoreboard.js): `src/classes/drawables/Scoreboard.js`
- [Game messages](https://github.com/lissmann/pong/blob/main/src/classes/drawables/Message.js): `src/classes/drawables/Message.js`

### Browser presentation

- [Game canvas](https://github.com/lissmann/pong/blob/main/index.html): `index.html`
- [Game styling](https://github.com/lissmann/pong/blob/main/src/styles/pong.css): `src/styles/pong.css`

### Other components

- **Player**

## Connections

- Player → Input and scoring: presses keys
- App entry → Game loop: creates
- Game loop → Object factory: creates objects
- Game loop → Input and scoring: initializes
- Object factory → Game settings: reads settings
- Object factory → Game canvas: gets context
- Object factory → Ball: creates
- Object factory → Paddles: creates
- Object factory → Scoreboard: creates
- Object factory → Game messages: creates
- Ball → Drawable base: extends
- Paddles → Drawable base: extends
- Scoreboard → Drawable base: extends
- Game loop → Game state: checks state
- Game loop → Ball: draws and resets
- Game loop → Paddles: draws and moves
- Game loop → Scoreboard: draws
- Game loop → Game messages: shows intro
- Input and scoring → Game state: advances state
- Input and scoring → Ball: starts rally
- Input and scoring → Paddles: controls
- Input and scoring → Scoreboard: updates score
- Input and scoring → Game messages: shows winner
- Ball → Input and scoring: dispatches score
- Input and scoring → Game canvas: listens for score
- Game styling → Game canvas: styles