# SolarApp Website Documentation

A static website describing the SolarApp game development project for Jagerlab.net.

## Contents

The website consists of five main pages:

### index.html — Home Page
High-level overview of SolarApp, the game premise, technology stack, and key features. Introduces the four main topics covered in detail pages.

### astrial-api.html — Astrial API & Physics Engine
Deep dive into Keplerian orbital mechanics, the Kepler solver algorithm, 3D coordinate transformations, and how the Astrial and Spacecraft APIs enable accurate position calculations for 10,000+ celestial bodies.

**Topics:**
- Orbital elements (a, e, i, N, w, M)
- Newton-Raphson solver for Kepler's equation
- Position calculation flow
- Spacecraft maneuver planning
- Gravitational hierarchies (Sun → Planets → Moons)

### ux-design.html — SolarApp UX Architecture
Explores the hybrid MVVM/MVP pattern used with MonoGame, SOLID principles in practice, the main view system, side-panel content resolution, and settings persistence.

**Topics:**
- MVVM in a real-time game context
- ViewModels as presentation controllers
- IMainPanelView and the factory pattern
- ISidePanelContentResolver for type-specific detail views
- SOLID principles applied (SRP, OCP, LSP, ISP, DIP)
- Testing strategy

### data-creation.html — Data Creation Pipeline
Behind-the-scenes walkthrough of how orbital data is sourced, parsed, and enriched using Python scripts and Jupyter notebooks. Covers sprite asset generation and the asset pipeline.

**Topics:**
- Data sources (MPC, JPL)
- Python parsers for fixed-width formats
- Jupyter notebooks for asset generation
- Generated JSON structure
- Asset pipeline (sprites, textures, UI elements)
- Scaling to 10,000+ bodies

### ai-development.html — AI-First Development
Explains how CLAUDE.md files and MemPalace memory enable sustainable AI-assisted development by documenting architecture, patterns, and project decisions.

**Topics:**
- CLAUDE.md documentation structure
- MemPalace persistent memory system
- Memory types (User, Feedback, Project, Reference)
- Enforcing patterns with documentation
- Decision rationale documentation
- Real-world examples from SolarApp

## Styling

The website uses a single `css/style.css` stylesheet with:
- Responsive design (mobile-friendly)
- Dark blue gradient header
- Card-based layouts
- Syntax highlighting for code blocks
- Accessible color contrast

## Running Locally

1. Open `index.html` in a web browser (file:// protocol works fine)
2. Or serve with a simple HTTP server:

```bash
# Python 3
python -m http.server 8000
# Then visit http://localhost:8000

# Node.js
npx http-server
# Then visit http://localhost:8080
```

## Deploying to Jagerlab.net

1. Copy the entire `solar-app-web/` folder to your web server
2. Update the footer links to point to the correct domain
3. Optionally rename the folder if serving at a different path

## Customization

- **Colors:** Edit the CSS custom properties in `css/style.css` (`:root` section)
- **Content:** Edit individual `.html` files
- **Header:** Update `<title>` tags and header text in each file
- **Navigation:** Add/remove links in the `<nav>` section (update all pages)

## Notes

- All code examples in the HTML pages are syntax-highlighted with monospace font
- Tables use consistent styling for consistency
- Highlight boxes (`<div class="highlight">`) draw attention to key concepts
- Card layouts group related content for readability