Module Design Patterns - Incomplete-Infinity/eve-companion GitHub Wiki
This page explains the modular architecture used in the EVE Companion App. Modules are responsible for self-contained features such as mail, calendar, fleet tools, scanning, and market tracking. Each module is implemented as a dynamic window-like UI unit with its own logic, state, and UI.
- Modular, encapsulated feature units
- Windows behave like draggable/resizable panels
- Each module is independently startable, stoppable, and lazy-loaded
- Module instances can coexist (multi-window support)
src/modules/
├── Mail/
│ ├── index.js # Entry and behavior
│ ├── ui.html # Component markup
│ └── style.css # (Optional) overrides
├── Fleet/
│ ├── index.js
│ └── ui.html
...
Each module has a folder that defines:
- Its UI (via template or HTML fragment)
- Behavior (scripts, listeners)
- Optional styling
Each module exposes a constructor or init()
method. It mounts its interface inside a dynamically generated window:
import Mail from '@/modules/Mail';
const mailWindow = new Mail();
mailWindow.open();
Windows may:
- Contain internal tabs or views
- Be minimized, maximized, or closed
- Persist state across restarts (planned)
All modules use a base window component:
<template id="window">
<div class="window" data-augmented-ui="tl-clip br-clip inlay">
<div class="window-header">
<slot name="title">Module</slot>
<button class="winclose">×</button>
</div>
<div class="window-body">
<slot></slot>
</div>
</div>
</template>
This enables consistent windowing across the app.
- Modules use
Zustand
or internal state to manage their own status - Shared data (characters, fits, prices) comes from global stores or Dexie
- Modules may emit events to the UI layer (
window.dispatchEvent()
)
Module | Functionality |
---|---|
Character inbox, unread notifications | |
Calendar | Events, ops, corp scheduling |
Fleet Tools | Wing/Squad organization, doctrine matching |
Scan Helper | D-Scan filtering, bookmark alignment |
Market Watch | Price tracking, item profitability |
Industry | Blueprint tracking, production pipeline |
Modules may be instantiated multiple times (e.g., two mail windows, two fleet views). Each window maintains its own internal state and DOM context.
- Each module lives in
src/modules/
with its own folder - Built as dynamic, window-based UI units
- Uses shared base window component + internal state
- Supports modular growth and instance independence