playground.shiny.space/CLAUDE.md

This is a test playground for web development - both frontend with simple html/css and vanilla javascript, and a backend API written in go.

Currently it is not a git repo, it's just an experiment.

IMPORTANT: This is a learning project for a non-developer. Always prioritize maximum simplicity and readability over "best practices". Use the most straightforward, beginner-friendly approaches possible. Avoid complex patterns, frameworks, or advanced techniques.

The current purpose: develop all basic features necessary for a simple browsergame along the lines of ogame - no realtime unit controls, currently no 3d graphics, just a "planet status" screen with buildings and researches, some buttons that call the api, and a map.

There is now a SQLite database available (items.db) with basic CRUD functionality. The database uses modernc.org/sqlite (pure Go, no CGO). Current tables:

• items table: id (INTEGER PRIMARY KEY), name (TEXT) - used for the items management demo

remember to keep this file up to date if you change any of the points here.

Current folder structure: flat.

API Access

There is a reverse proxy rewrite rule in place. To call any API endpoint from the frontend, you need to add /api/ to the URL path:

• API endpoint URLs should be: playground.shiny.space/api/yourendpointhere
• Example: /randomnumber endpoint becomes /api/randomnumber

Authentication

The setup uses Caddy with Authelia for authentication:

• Caddy acts as reverse proxy and checks with Authelia before allowing access to protected pages
• When authenticated, Authelia adds headers to requests that reach the Go API
• The Go API can read these headers to get user information

Authentication Headers from Authelia

The following headers are available in authenticated requests:

• Remote-User: Username of the authenticated user
• Remote-Name: Display name of the user
• Remote-Email: Email address of the user
• Remote-Groups: User's group memberships

Authentication API Endpoint

• /api/auth/user (GET) - Returns user information and all headers for debugging
• Protected pages can use JavaScript to fetch this endpoint to get current user info
• Returns JSON with username, name, email, groups, and complete headers object

Authentication Test Page

• account.html - Test page that requires authentication to access
• Displays user information by calling /api/auth/user
• Shows both structured user info and raw headers for debugging
• Configure Caddy to require authentication for this page to test the setup

Development

To rebuild the Go API after making changes:

• Run go build -o api in the project directory
• The server has file watching enabled and will automatically restart with the new binary when it detects changes

Test Sites

The index.html file serves as the main navigation page listing all available test sites/demos. When creating new test HTML files, always add them to the feature list in index.html with a descriptive title and explanation.

Styling

All HTML pages use the unified styles.css file for consistent styling. Keep styling in this CSS file as much as reasonably possible - avoid inline styles in HTML files. It's perfectly fine to add new classes to styles.css for future tests and functionality. This approach keeps the test code much more readable and maintainable.

Dark Mode

The site includes a simple dark mode toggle available on all pages:

• Toggle button (🌙/☀️) appears in the top-right corner of every page
• Uses CSS variables for easy theme switching
• User preference is saved in localStorage and persists across all pages
• Implementation uses dark-mode.js for reusable functionality across all HTML files