# Minecraft ComputerCraft API – Frontend

Vue 3 + TypeScript single page application for the
[ME System Monitor backend](../mc-cc-api-backend). It shows the live contents
of a Minecraft ME system over a websocket and renders per-item history charts.

## Features

- **Live view** over a websocket (`wss://…/api/ws/live`) – updates in real time.
- **Persistent filters** – text search, sort column/order and mod filter are
  kept in `localStorage` and re-applied by the server on every update.
- **Item history** – clicking an item opens a detail page with a Chart.js line
  chart plus current / min / max / change statistics.
- **Abbreviated numbers** – `12000 → 12k`, `43452542 → 43.45M`. The full value
  is available as a tooltip.
- **HTTPS / WSS by default** via a self-signed certificate.

## Tech stack

| Concern    | Choice                              |
| ---------- | ----------------------------------- |
| Framework  | Vue 3 (`<script setup>`) + TypeScript |
| Build tool | Vite 6                              |
| Routing    | vue-router 4                        |
| Charts     | Chart.js 4                          |
| Dev TLS    | `@vitejs/plugin-basic-ssl`          |
| Production | nginx (HTTPS, self-signed cert)     |

## Quick start (development)

```bash
npm install
cp .env.example .env   # adjust VITE_API_BASE / VITE_WS_BASE if needed
npm run dev
```

The dev server runs on `https://localhost:5173` with a self-signed
certificate. Your browser will warn about it once – accept the exception.

> The backend also uses a self-signed certificate. Open
> `https://localhost:3000/api/docs` once and accept that certificate too,
> otherwise the browser blocks the API and websocket connections.

## Build & preview

```bash
npm run build     # type-checks and builds into dist/
npm run preview   # serves the build on https://localhost:4173
```

## Environment variables

| Variable        | Default                  | Description                          |
| --------------- | ------------------------ | ------------------------------------ |
| `VITE_API_BASE` | `https://localhost:3000` | Backend HTTP API base URL            |
| `VITE_WS_BASE`  | derived from API base    | Backend websocket base URL           |

`VITE_*` variables are inlined at build time.

## Docker

```bash
docker build \
  --build-arg VITE_API_BASE=https://localhost:3000 \
  -t mc-cc-frontend .

docker run -p 8443:443 mc-cc-frontend
```

The container generates a self-signed certificate on first start and serves
the SPA on port 443 (mapped to `8443` above) → `https://localhost:8443`.

## Project structure

```
src/
  api/          config, shared types, HTTP client
  components/   FilterBar, ItemTable, HistoryChart
  composables/  useLiveData (websocket + filter state)
  router/       route definitions
  utils/        number / date formatting
  views/        LiveView, ItemHistoryView
```