# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a Next.js 15 website for a Minecraft server (BiohazardVFX) deployed on Cloudflare Workers via OpenNext. The site displays real-time server status, player statistics, and server information by integrating with the Plan server analytics API.

## Development Commands

```bash
# Development server with Turbopack
npm run dev

# Build for production
npm run build

# Start production server locally
npm start

# Lint code
npm run lint

# Deploy to Cloudflare
npm run deploy

# Preview deployment locally
npm run preview

# Generate Cloudflare types
npm run cf-typegen
```

## Architecture

### Deployment Stack
- **Framework**: Next.js 15 (App Router)
- **Runtime**: Cloudflare Workers (Edge runtime)
- **Adapter**: `@opennextjs/cloudflare` - converts Next.js to Cloudflare Workers format
- **Domain**: Routes configured for `minecraft.biohazardvfx.com`

### Key Integration Points

**Plan Analytics API**
- Base URL: `https://stats.biohazardvfx.com`
- Server name: `BiohazardVFX`
- The `/api/server-status` route (src/app/api/server-status/route.ts:24) fetches from `/v1/serverOverview` endpoint
- Data refreshes every 30 seconds (both API cache and client polling)
- Returns: online players, uptime, total players, unique players (7d), average TPS

**Edge Runtime**
- All API routes use `export const runtime = 'edge'` (src/app/api/server-status/route.ts:3)
- Static assets served from `.open-next/assets` directory
- Worker entry point: `.open-next/worker.js`

### Component Architecture

**Client Components** (use 'use client' directive)
- `ServerStatus` (src/components/server-status.tsx) - Polls `/api/server-status` every 30s
- `PlayerActivityChart` (src/components/player-activity-chart.tsx) - Uses Recharts for visualization (currently mock data)
- `Hero` - Main landing section

**UI System**
- Uses shadcn/ui components (New York style)
- Path aliases configured: `@/*` → `./src/*`
- Components in `src/components/ui/` (Button, Card, Chart, FloatingPanel)
- Tailwind CSS v4 with CSS variables for theming
- Geist font family (Sans + Mono) loaded via `next/font/google`

**Page Structure**
- `src/app/page.tsx` - Main landing page with background image overlay
- `src/app/layout.tsx` - Root layout with fonts and Sonner toast notifications
- Background image: `/backgroundimg.avif` with gradient overlays

### Data Flow

1. Client component mounts → `useEffect` triggers initial fetch
2. Fetch → `/api/server-status` (Edge runtime)
3. API route → Plan Analytics `/v1/serverOverview`
4. Response cached for 30s via Next.js `revalidate`
5. Client polls every 30s via `setInterval`

### Important Files

- `wrangler.jsonc` - Cloudflare Workers configuration
- `open-next.config.ts` - OpenNext adapter settings (R2 cache disabled)
- `components.json` - shadcn/ui configuration
- `.dev.vars` - Environment variables for local development

## Notes

- TypeScript strict mode enabled
- Player list is currently unavailable via Plan's JSON API (only websockets/HTML parsing)
- PlayerActivityChart uses mock data - needs integration with Plan's graph API endpoints
- The site uses Cloudflare's `nodejs_compat` flag for Node.js APIs in Workers