# longmanngithub/city-bloxx-web architecture

> Architecture diagram of the GitHub repository longmanngithub/city-bloxx-web, 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/longmanngithub/city-bloxx-web
- Repository: https://github.com/longmanngithub/city-bloxx-web

## Overview

City Bloxx Web packages a J2ME game inside a virtual Nokia 5310 browser experience. The main workflow is: a player presses a virtual or keyboard-mapped key, the device controller queues a mapped event for the CheerpJ/FreeJ2ME runtime, and the game renders to the phone’s 240×320 display. The runtime also bridges graphics, MIDI, and media; the local server provides the game archive. The README documents some JVM and server connections not visible in the sampled implementation, so those edges cite the README.

Main entry points: [`freej2me-web.jar`](https://github.com/longmanngithub/city-bloxx-web/blob/main/freej2me-web.jar) (FreeJ2ME Bridge), [`src/nokia-app.js`](https://github.com/longmanngithub/city-bloxx-web/blob/main/src/nokia-app.js) (Device Controller), [`index.html`](https://github.com/longmanngithub/city-bloxx-web/blob/main/index.html) (Nokia Phone UI), [`src/eventqueue.js`](https://github.com/longmanngithub/city-bloxx-web/blob/main/src/eventqueue.js) (Event Queue)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_device["Virtual Device"]
  node_phone["Nokia Phone UI<br/>[index.html]"]
  node_keymap["Key Mapping<br/>[key.js]"]
  node_controller["Device Controller<br/>[nokia-app.js]"]
end

subgraph group_runtime["J2ME Runtime"]
  node_eventqueue["Event Queue<br/>[eventqueue.js]"]
  node_cheerpj["CheerpJ JVM"]
  node_freej2me["FreeJ2ME Bridge<br/>[freej2me-web.jar]"]
end

subgraph group_graphics["Graphics Bridge"]
  node_canvas["Canvas Graphics"]
  node_font["Canvas Fonts<br/>[libcanvasfont.js]"]
  node_gles["WebGL GLES2<br/>[libgles2.js]"]
  node_jsreference["JS References<br/>[libjsreference.js]"]
end

subgraph group_audio["Audio Media"]
  node_midibridge["MIDI Bridge<br/>[libmidibridge.js]"]
  node_midi["MIDI Synth<br/>[libmidi.js]"]
  node_mediabridge["Media Bridge<br/>[libmediabridge.js]"]
  node_media["Media Player<br/>[libmedia.js]"]
  node_transcode["Media Transcoder<br/>[transcode.js]"]
end

subgraph group_delivery["Game Delivery"]
  node_gamejar["City Bloxx MIDlet"]
  node_server["Range HTTP Server<br/>[server.js]"]
  node_gamefiles[("Game Files")]
end

node_player(("Player"))

node_player -->|"presses controls"| node_phone
node_phone -->|"routes input"| node_controller
node_controller -->|"maps keys"| node_keymap
node_controller -->|"queues events"| node_eventqueue
node_eventqueue -->|"dispatches events"| node_cheerpj
node_cheerpj -->|"runs bridge"| node_freej2me
node_cheerpj -->|"loads MIDlet"| node_gamejar
node_freej2me -->|"calls graphics natives"| node_canvas
node_freej2me -->|"calls font natives"| node_font
node_freej2me -->|"calls GLES natives"| node_gles
node_freej2me -.->|"uses JS references"| node_jsreference
node_canvas -->|"renders game"| node_phone
node_freej2me -->|"calls MIDI bridge"| node_midibridge
node_midibridge -->|"controls synthesis"| node_midi
node_freej2me -->|"calls media bridge"| node_mediabridge
node_mediabridge -->|"controls playback"| node_media
node_media -->|"transcodes media"| node_transcode
node_cheerpj -->|"requests archive ranges"| node_server
node_server -->|"serves files"| node_gamefiles

click node_phone "https://github.com/longmanngithub/city-bloxx-web/blob/main/index.html"
click node_keymap "https://github.com/longmanngithub/city-bloxx-web/blob/main/src/key.js"
click node_controller "https://github.com/longmanngithub/city-bloxx-web/blob/main/src/nokia-app.js"
click node_eventqueue "https://github.com/longmanngithub/city-bloxx-web/blob/main/src/eventqueue.js"
click node_freej2me "https://github.com/longmanngithub/city-bloxx-web/blob/main/freej2me-web.jar"
click node_gamejar "https://github.com/longmanngithub/city-bloxx-web/blob/main/game/City_Bloxx-51946.jar"
click node_canvas "https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libcanvasgraphics.js"
click node_font "https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libcanvasfont.js"
click node_gles "https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libgles2.js"
click node_jsreference "https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libjsreference.js"
click node_midibridge "https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libmidibridge.js"
click node_midi "https://github.com/longmanngithub/city-bloxx-web/blob/main/libmidi/libmidi.js"
click node_mediabridge "https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libmediabridge.js"
click node_media "https://github.com/longmanngithub/city-bloxx-web/blob/main/libmedia/libmedia.js"
click node_transcode "https://github.com/longmanngithub/city-bloxx-web/blob/main/libmedia/transcode/transcode.js"
click node_server "https://github.com/longmanngithub/city-bloxx-web/blob/main/server.js"
click node_gamefiles "https://github.com/longmanngithub/city-bloxx-web/tree/main/game"

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_phone,node_keymap,node_controller toneBlue
class node_eventqueue,node_cheerpj,node_freej2me toneAmber
class node_canvas,node_font,node_gles,node_jsreference toneMint
class node_midibridge,node_midi,node_mediabridge,node_media,node_transcode toneRose
class node_gamejar,node_server,node_gamefiles,node_player toneIndigo
```

## Components

### Virtual Device

- [Nokia Phone UI](https://github.com/longmanngithub/city-bloxx-web/blob/main/index.html): `index.html`
- [Key Mapping](https://github.com/longmanngithub/city-bloxx-web/blob/main/src/key.js): `src/key.js`
- [Device Controller](https://github.com/longmanngithub/city-bloxx-web/blob/main/src/nokia-app.js): `src/nokia-app.js`

### J2ME Runtime

- [Event Queue](https://github.com/longmanngithub/city-bloxx-web/blob/main/src/eventqueue.js): `src/eventqueue.js`
- **CheerpJ JVM**
- [FreeJ2ME Bridge](https://github.com/longmanngithub/city-bloxx-web/blob/main/freej2me-web.jar): `freej2me-web.jar`

### Graphics Bridge

- [Canvas Graphics](https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libcanvasgraphics.js): `libjs/libcanvasgraphics.js`
- [Canvas Fonts](https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libcanvasfont.js): `libjs/libcanvasfont.js`
- [WebGL GLES2](https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libgles2.js): `libjs/libgles2.js`
- [JS References](https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libjsreference.js): `libjs/libjsreference.js`

### Audio Media

- [MIDI Bridge](https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libmidibridge.js): `libjs/libmidibridge.js`
- [MIDI Synth](https://github.com/longmanngithub/city-bloxx-web/blob/main/libmidi/libmidi.js): `libmidi/libmidi.js`
- [Media Bridge](https://github.com/longmanngithub/city-bloxx-web/blob/main/libjs/libmediabridge.js): `libjs/libmediabridge.js`
- [Media Player](https://github.com/longmanngithub/city-bloxx-web/blob/main/libmedia/libmedia.js): `libmedia/libmedia.js`
- [Media Transcoder](https://github.com/longmanngithub/city-bloxx-web/blob/main/libmedia/transcode/transcode.js): `libmedia/transcode/transcode.js`

### Game Delivery

- [City Bloxx MIDlet](https://github.com/longmanngithub/city-bloxx-web/blob/main/game/City_Bloxx-51946.jar): `game/City_Bloxx-51946.jar`
- [Range HTTP Server](https://github.com/longmanngithub/city-bloxx-web/blob/main/server.js): `server.js`
- [Game Files](https://github.com/longmanngithub/city-bloxx-web/tree/main/game): `game`

### Other components

- **Player**

## Connections

- Player → Nokia Phone UI: presses controls (evidence: `README.md`)
- Nokia Phone UI → Device Controller: routes input (evidence: `README.md`)
- Device Controller → Key Mapping: maps keys (evidence: `src/nokia-app.js`)
- Device Controller → Event Queue: queues events (evidence: `src/nokia-app.js`)
- Event Queue → CheerpJ JVM: dispatches events (evidence: `README.md`)
- CheerpJ JVM → FreeJ2ME Bridge: runs bridge (evidence: `README.md`)
- CheerpJ JVM → City Bloxx MIDlet: loads MIDlet (evidence: `README.md`)
- FreeJ2ME Bridge → Canvas Graphics: calls graphics natives (evidence: `README.md`)
- FreeJ2ME Bridge → Canvas Fonts: calls font natives (evidence: `README.md`)
- FreeJ2ME Bridge → WebGL GLES2: calls GLES natives (evidence: `README.md`)
- FreeJ2ME Bridge → JS References: uses JS references
- Canvas Graphics → Nokia Phone UI: renders game (evidence: `README.md`)
- FreeJ2ME Bridge → MIDI Bridge: calls MIDI bridge (evidence: `README.md`)
- MIDI Bridge → MIDI Synth: controls synthesis (evidence: `libjs/libmidibridge.js`)
- FreeJ2ME Bridge → Media Bridge: calls media bridge (evidence: `README.md`)
- Media Bridge → Media Player: controls playback (evidence: `libjs/libmediabridge.js`)
- Media Player → Media Transcoder: transcodes media (evidence: `libmedia/libmedia.js`)
- CheerpJ JVM → Range HTTP Server: requests archive ranges (evidence: `README.md`)
- Range HTTP Server → Game Files: serves files (evidence: `README.md`)