GhostDraft Project Context

This skill provides comprehensive context for developing the GhostDraft League of Legends companion suite, which includes a desktop overlay app, companion website, and match data pipeline.

What This Skill Does

When working on GhostDraft, this skill helps you:

Project Architecture

GhostDraft consists of three main components:

1. **Desktop App (Wails)**: Real-time overlay connecting to League Client via LCU API

- Backend: Go with Wails v2

- Frontend: Vanilla JavaScript + CSS (Hextech theme)

- Data: Riot LCU API, Local SQLite, Data Dragon, Turso

2. **Website (Next.js)**: Companion site for champion stats and builds

- Framework: Next.js 15 with App Router

- Styling: Tailwind CSS + Hextech theme

- Database: Turso (cloud SQLite)

- See `website/CLAUDE.md` for details

3. **Data Analyzer**: Match history collection and aggregation

- See `data-analyzer/CLAUDE.md` for details

Key Development Guidelines

Working with Stats Data

**Stats Provider** (`internal/data/stats_queries.go`):

**Cache Strategy**:

Adding New Features

**To add a new event**:

1. Create emit in `app.go`: `runtime.EventsEmit(a.ctx, "event:name", data)`

2. Add listener in `main.js`: `EventsOn('event:name', handlerFunction)`

3. Create handler function to update DOM

**To add a new UI tab**:

1. Add button in `main.js` HTML: `<button class="tab-btn" data-tab="tabname">Label</button>`

2. Add content div: `<div class="tab-content" id="tab-tabname">...</div>`

3. Tab switching is automatic via existing JS

Hextech Arcane Theme

Maintain the unified visual theme across desktop app and website:

**Color Palette**:

**Fonts**:

**Design Elements**: Gold borders, glowing effects, hex patterns, 8-12px rounded corners

Database Architecture

**Local SQLite** (Desktop App):

**Turso (Cloud)**:

Building for Production

**Development**:

```bash

wails dev # Uses .env vars for Turso credentials

```

**Production Build** (embeds read-only Turso credentials):

```bash

./build.ps1 # Windows PowerShell

./build.sh # Linux/Mac/Git Bash

```

Set these environment variables before building:

**Manual Build**:

```bash

wails build -ldflags "\

-X 'ghostdraft/internal/data.TursoURL=libsql://your-db.turso.io' \

-X 'ghostdraft/internal/data.TursoAuthToken=your-read-only-token'"

```

Data Pipeline

**Running the Pipeline**:

```bash

cd data-analyzer

Full pipeline: collect + reduce

go run cmd/pipeline/main.go --max-players=100

With specific starting player

go run cmd/pipeline/main.go --riot-id="Player#NA1" --max-players=100

Reducer only

go run cmd/reducer/main.go --output-dir=./export

```

**Statistical Sampling**:

Key Files and Locations

**Desktop App Structure**:

**Frontend Events**:

Important Constraints

1. **Embedded Credentials**: Desktop app embeds read-only Turso credentials at build time (data is public anyway)

2. **Item Filtering**: Only show completed items (no components, cost >= 1000g)

3. **Caching Keys**: Track last fetched champ/role to prevent redundant queries

4. **Stats Fallback**: Fall back to aggregated data across patches if current patch has no data

5. **SQLite Syntax**: Use `?` placeholders and `CAST(... AS REAL)` for queries

When to Use This Skill

Use this skill when:

This skill helps you maintain consistency across the entire GhostDraft ecosystem while following established patterns and best practices.