glitchcraft/CLAUDE.md

CLAUDE.md

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

Project Overview

GlitchCraft is a Progressive Web App (PWA) that generates zalgo text (corrupted/glitched text using Unicode combining characters). The app features real-time text corruption with adjustable intensity and click-to-copy functionality.

Project Structure

zalgo/
├── app/                    # Main application directory (served as document root)
│   ├── index.html         # Main HTML page
│   ├── zalgo.js           # Zalgo text generation logic
│   ├── app.js             # Main application logic and PWA registration
│   ├── styles.css         # Application styles
│   ├── sw.js              # Service worker for offline functionality
│   ├── manifest.json      # PWA manifest
│   ├── icons/             # PWA icons (SVG placeholders)
│   ├── create-icons.js    # Node.js script to generate PNG icons
│   └── generate-icons.html # Browser-based icon generator
├── server.py              # Development server (serves app/ as root)
├── package.json           # Node dependencies and scripts
├── bun.lockb             # Bun lockfile
├── .eslintrc.json        # ESLint configuration
└── .prettierrc           # Prettier configuration

Development Commands

Running the Application

# Start development server (serves on http://localhost:8000/ and [::]:8000)
python3 server.py

# Or using the npm script
bun run serve

Code Quality and Linting

# Lint JavaScript files
bun run lint:js

# Lint and auto-fix JavaScript
bun run lint:js:fix

# Format all code with Prettier
bun run format

# Check formatting without changes
bun run check

# Lint Python code
black server.py
pylint server.py

Generating Icons

# Install canvas package first (optional, for PNG generation)
bun add canvas

# Generate PNG icons programmatically
node app/create-icons.js

# Or open app/generate-icons.html in browser and manually save icons

Architecture and Key Components

Zalgo Text Generation (zalgo.js)

• ZalgoGenerator class: Core text corruption engine
• Uses Unicode combining diacritical marks (above, middle, below)
• Intensity scale 1-10 controls corruption amount
• generate(): Creates zalgo text from input
• clean(): Removes corruption from text

Application Logic (app.js)

• Real-time text corruption as user types
• Click-to-copy functionality with visual feedback
• Keyboard shortcuts (Ctrl+K to clear)
• PWA installation handling
• Service worker registration

PWA Implementation

• Service Worker (sw.js): Enables offline functionality with cache-first strategy
• Manifest (manifest.json): PWA configuration for installability
• Caches all essential files for offline use
• Automatic cache cleanup on update

Styling (styles.css)

• Dark theme with glitch-inspired aesthetics
• Responsive design for mobile and desktop
• CSS animations for glitch effects
• Print-friendly styles

Deployment Notes

• The app/ directory should be served as the document root
• All paths in the app are relative to assume app/ is the root
• Service worker requires HTTPS in production (except localhost)
• Icons are currently SVG placeholders; generate PNGs for production

Testing Checklist

When making changes, ensure:

1. Text corruption works with various Unicode characters
2. Copy functionality works on both desktop and mobile
3. PWA installs correctly
4. Offline mode functions properly
5. Responsive design works on all screen sizes
6. All linting passes (JavaScript, Python, HTML validation)