Module Design Patterns - Incomplete-Infinity/eve-companion GitHub Wiki

🧩 Module Design Patterns

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.


🎯 Design Goals

  • 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)

📦 Folder Layout

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

🪟 Module Interface

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)

🧬 Window Pattern

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.


🧠 Data Flow

  • 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())

🧩 Planned Module Types

Module Functionality
Mail 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

🧱 Multi-Instance Support

Modules may be instantiated multiple times (e.g., two mail windows, two fleet views). Each window maintains its own internal state and DOM context.


📌 Summary

  • 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

⚠️ **GitHub.com Fallback** ⚠️